/* Tema: uygulama hem AÇIK hem KOYU modu destekler.
   - Çıplak :root  -> AÇIK palet (varsayilan; OS "system" + acik viewer'lar burayi gorur)
   - prefers-color-scheme: dark -> KOYU (ama [data-theme="light"] elle secimi bunu ezer)
   - [data-theme="dark"] / [data-theme="light"] -> elle secim (localStorage, bkz. public/js/ui/theme.js)
   Bilesenler HER ZAMAN token uzerinden boyanir; asagida hicbir renk dogrudan
   bir @media/[data-theme] blogunda tanimlanmaz - hepsi once burada var. */
:root {
  color-scheme: light dark;
  --bg: #f3f5fb;
  --card: #ffffff;
  --card-2: #eceef7;
  --text: #1b2036;
  --muted: #616880;
  --accent: #4560e6;
  --good: #0f9257;
  --bad: #d92d48;
  --gold: #b5771a;
  --oracle: #8a3ed6;
  --rare: #0d8ea6;
  --border: #dee1ec;
  --shadow: rgba(27, 32, 54, 0.13);
  /* Marka "2"si (bkz. .brand-two): acikta daima beyaz oldugu icin acik zeminde
     ince siyah kontur gerekir; koyuda zaten kontrastli, kontur kapali. */
  --brand-two-stroke-w: 1px;
  /* Ana sayfa dusey ritim skalasi (kullanici karari, 2026-09-17: "boşluk
     çizgileri uyumlu şekilde olsun") - --space-rhythm zaten var olan 18px
     birimi (card-featured/lichess-side/lichess-bottom-row) TEK yerden
     yonetsin diye tokenlestirildi, deger DEGISMEDI. Sadece ana sayfanin
     kendi bilesenlerinde kullanilir - dosyanin geri kalanindaki diger
     ~30 sihirli sayiya dokunulmadi (kapsam bilerek dar tutuldu). */
  --space-grid-gap: 8px;
  --space-title-gap: 16px;
  --space-rhythm: 18px;
  --space-card-pad: 22px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141c;
    --card: #1c2030;
    --card-2: #232842;
    --text: #eef0f6;
    --muted: #8b90a8;
    --accent: #5b7cff;
    --good: #34c77b;
    --bad: #ef5a6f;
    --gold: #f5b942;
    --oracle: #c792ea;
    --rare: #4fd1e8;
    --border: #2a2f45;
    --shadow: rgba(0, 0, 0, 0.4);
    --brand-two-stroke-w: 0px;
  }
}

:root[data-theme="dark"] {
  --bg: #12141c;
  --card: #1c2030;
  --card-2: #232842;
  --text: #eef0f6;
  --muted: #8b90a8;
  --accent: #5b7cff;
  --good: #34c77b;
  --bad: #ef5a6f;
  --gold: #f5b942;
  --oracle: #c792ea;
  --rare: #4fd1e8;
  --border: #2a2f45;
  --shadow: rgba(0, 0, 0, 0.4);
  --brand-two-stroke-w: 0px;
}

:root[data-theme="light"] {
  --bg: #f3f5fb;
  --card: #ffffff;
  --card-2: #eceef7;
  --text: #1b2036;
  --muted: #616880;
  --accent: #4560e6;
  --good: #0f9257;
  --bad: #d92d48;
  --gold: #b5771a;
  --oracle: #8a3ed6;
  --rare: #0d8ea6;
  --border: #dee1ec;
  --shadow: rgba(27, 32, 54, 0.13);
  --brand-two-stroke-w: 1px;
}

* { box-sizing: border-box; }

/* `hidden` HER ZAMAN kazanmali - asagida bazi siniflarin (.nav-actions,
   .modal-overlay gibi) kendi display:flex kurallari var, bu kural
   olmadan `hidden` attribute'u onlar tarafindan ezilir (element gizli
   olmasi gerekirken gorunur kalir). Yeni bir sinifa display: ... eklerken
   bunu tekrar bozmamak icin buraya guvenebilirsin. */
[hidden] { display: none !important; }

/* Hareket hassasiyeti tercih edilirse (isletim sistemi ayari) TUM
   animasyon/gecisleri neredeyse aninda bitir - erisilebilirlik icin
   standart, kapsayici bir guvenlik agi (bkz. MDN prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Ekranlar arasi gecis: screens.js sadece [hidden]'i acip kapatiyor, ama
   [hidden] -> gorunur gecisinde tarayici bunu "yeni bir render" sayip
   animasyonu HER SEFERINDE bastan baslatiyor - yani JS tarafinda ekstra
   bir siniif ekleme/kaldirma tetiklemesine gerek yok. */
.screen:not([hidden]) {
  animation: screen-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#app {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-rhythm) var(--space-rhythm) 60px;
}

/* --- butonlar (genel) ----------------------------------------------- */

button {
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-primary,
.btn-primary-sm {
  background: var(--accent);
  color: white;
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-primary:hover:not(:disabled),
.btn-primary-sm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--shadow);
}

.btn-primary:active:not(:disabled),
.btn-primary-sm:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  margin-top: 4px;
}

.btn-primary-sm {
  padding: 8px 16px;
  font-size: 13px;
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ghost-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

#queue-cancel-btn:hover:not(:disabled) {
  border-color: var(--bad);
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}

/* --- navbar --------------------------------------------------------------
   lichess.org ust barinin YERLESIM MANTIGI: sol tarafta amblem + yatay
   metin menusu, sag tarafta kucuk kare ikon dugmeleri + kullanici bloğu.
   Renk/marka telif konusu degil, sadece bu iskelet (nav-left/nav-right)
   kopyalaniyor. */

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 4px 16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

/* Aktif mac banner'i (bkz. index.html > #active-match-banner, main.js >
   updateActiveMatchBanner) - mac ekranindan ayrilinca (Ana Sayfa/Liderlik)
   mac arka planda devam ederken bunu unutmamasi icin sabit bir uyari. */
.active-match-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: -14px 0 22px;
  padding: 10px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  animation: active-match-banner-in 0.25s ease-out;
}

@keyframes active-match-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dar ekranda logo+menu ve sag blok alt alta iki tam-genislik satira
   duser (lichess'in mobilde ust bari yatay menuyu bir "hamburger"a
   gizler, biz bunun yerine daha basit bir 2 satirlik yigin tercih ettik -
   ekstra bir acilir/kapanir menu bilesenine gerek kalmadan calisir). */
@media (max-width: 640px) {
  .nav-left,
  .nav-right {
    flex-basis: 100%;
  }

  .nav-right {
    justify-content: space-between;
  }
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-menu-link {
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-menu-link:hover {
  color: var(--text);
  background: var(--card-2);
}

.nav-menu-link.active {
  color: var(--accent);
}

.nav-menu-link:disabled {
  color: var(--muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.nav-menu-link:disabled:hover {
  background: none;
  color: var(--muted);
}

@media (max-width: 640px) {
  .nav-menu-link {
    padding: 8px;
    font-size: 12px;
  }

  /* Logo + 4 menu linki 375px'e sigmiyordu: sayfa yatay tasip mobil tarayicida tum site
     kucultuluyordu. Simdi sigmayan link bir alt satira iner. */
  .nav-left {
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .nav-menu {
    flex-wrap: wrap;
    min-width: 0;
  }
}

/* "Arkadaşlar" menu linkindeki bekleyen-istek rozeti (bkz. friendsUI.js >
   renderBadge) - sadece SAYI > 0 iken gorunur (index.html'de varsayilan
   hidden). */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--bad);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 2px;
}

/* Amblem: index.html'de <button> (ana sayfaya doner), admin/review'da <a>.
   Ikisinde de ayni gorunum - buton varsayilan stillerini burada eziyoruz. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: none;
  border: none;
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s ease;
}
button.nav-logo:hover,
a.nav-logo:hover {
  opacity: 0.65;
}
.nav-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* .nav-logo icindeki ".tag" pili admin/review'da admin.css'ten stillenir. */

/* Marka: "math2.net" - kaynak tasarim src/icon/mobil.html (uygulama ikonu) +
   favicon-mark.html (kucuk "m2" isareti). "2" orada oldugu gibi bir onceki
   harfin (burada "h") UZERINE biner, daha buyuktur ve AYNI mavi->beyaz->
   turuncu gradyanini tasir - orta durak HER ZAMAN beyaz (temadan bagimsiz,
   mobil.html ile birebir). Acik zeminde beyaz orta kisim kaybolmasin diye
   ince siyah kontur (--brand-two-stroke-w, acik temada 1px / koyuda 0).
   ".net" kucultulup "math2"nin sag-alt kosesine, kucuk bir etiket gibi
   konumlandirildi - bunun icin .brand konumlama sınırı (position:relative)
   saglar. */
.brand {
  position: relative;
  display: inline-block;
}
.brand-two {
  font-size: 1.3em;
  font-weight: 900;
  background: linear-gradient(135deg, #00d2ff 0%, #ffffff 55%, #ff8a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: -0.16em;
  -webkit-text-stroke: var(--brand-two-stroke-w) #000000;
  paint-order: stroke fill;
}
.brand-tld {
  position: absolute;
  right: -3px;
  bottom: -3px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sag ustteki kucuk kare ikon dugmeleri (ses/tema) - lichess'in
   arama/araclar ikon kutucuklarinin yerlesim mantigi. */
.nav-icon-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Giris yapmis kullanici "cip"i: avatar + isim + Elo tek tiklanabilir blok
   halinde (lichess'in sag ust kosedeki kullanici adi + rozet gruplamasina
   benzer), tiklaninca profile gider. */
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.user-chip:hover {
  border-color: var(--accent);
  background: var(--card-2);
}

.user-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.user-chip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.nav-rating {
  font-size: 11px;
  color: var(--muted);
}

.nav-rating strong {
  color: var(--accent);
}

/* Profil cipi acilir menusu (kullanici istegi 2026-09-22: "profile basılınca
   profil hesap çıkış settings gibi seçenekler çıksın") - lichess/github tarzi
   avatar dropdown'u, chip tiklaninca artik direkt profile gitmez, bu menu acilir
   (bkz. main.js > wireProfileMenu). */
.profile-menu {
  position: relative;
}

.profile-menu-caret {
  font-size: 10px;
  color: var(--muted);
  margin-left: -2px;
}

.profile-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  z-index: 60;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}

.profile-menu-item:hover {
  background: var(--card-2);
}

.profile-menu-item:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.profile-menu-item:disabled:hover {
  background: transparent;
}

.profile-menu-item-danger {
  color: var(--bad);
}

.profile-menu-item-danger:hover {
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
}

.profile-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

@media (max-width: 520px) {
  .profile-menu-dropdown {
    right: -8px;
    min-width: 200px;
  }
}

.nav-username {
  font-weight: 700;
  font-size: 13px;
}

/* --- ekranlar ------------------------------------------------------------ */

.screen-narrow {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* Profil ekrani icin - screen-narrow ile AYNI kart gorunumu, sadece daha
   genis (kullanici istegi, 2026-09-17: "tüm rankları, pivotu, ismi cismi
   herşeyi olsun" - pivot tablosunun nefes alabilmesi icin 480 -> 640px). */
.screen-medium {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.status {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  min-height: 18px;
}

.status.error {
  color: var(--bad);
}

/* landingUI.js > setSearching() - kuyrukta beklerken "Rakip aranıyor..."
   noktalarini JS'te doner (CSS content'i keyframe'le animate etmek native
   olarak desteklenmedigi icin), burasi sadece renk/agirlik verir. */
.status.searching {
  color: var(--accent);
  font-weight: 600;
}

/* --- ana ekran: lichess tarzi yerlesim -------------------------------------
   EN USTTE mod kutucuklari grid'i + sagda tekil aksiyon sutunu (lichess.org
   ana sayfasindaki merkez grid + sag "Lobi oyunu oluştur / Bilgisayara
   karşı oyna" sutunu mantigi), altinda "canli mac" karti, en altta ikincil
   kartlarin (gunun sorusu, liderlik) yatay sirasi. Sira 2026-09-16'da
   degisti (kullanici istegi): "Canlı Maç" grid'in USTUNDEN ALTINA indi. */

.card-featured { margin-top: var(--space-rhythm); margin-bottom: var(--space-rhythm); }

/* TEK sutunlu ana yerlesim (kullanici istegi, 2026-09-17: onceki dikey sag
   kenar cubugu "saçma" oldu - Arkadaşlar+Liderlik ikilisi mod grid+canli
   mac+gunun sorusu ile ayni yuksekligi doldurmaya zorlaninca altinda kocaman
   bos alan birakiyordu, bkz. index.html basindaki yorum). Butun kartlar AYNI
   dar sutunda alt alta akar - hicbir yerde yukseklik uyumsuzlugu riski yok.
   Baslik + filigran + grid + durum metni de bu sutunun genisligini doldurur
   ("gridi ortala", kullanici istegi 2026-09-16). */
.lichess-page {
  max-width: 640px;
  margin: 0 auto;
}

/* Sağda "Özel Maç" sütunü (kullanıcı isteği, 2026-09-17: "sağa özel maç
   ekleyebileceği bir alan ekle") - .lichess-page'in DAR (640px) halini
   BOZMAZ, sadece daha geniş bir varyant: ana sütun aynı 640px genişlikte
   kalır, yanına sabit ~300px'lik bir kenar çubuğu eklenir. Yukarıdaki
   "tek sütun" kararını çiğnemiyor - o zamanki sorun Arkadaşlar+Liderlik'in
   TEK BAŞINA kısa kalmasıydı, bu panel kendi başına dolu bir sütun. */
.lichess-page-wide {
  max-width: 980px;
  display: grid;
  grid-template-columns: 640px minmax(260px, 300px);
  /* column-gap: iki sutun arasindaki sabit ara (degismedi, 20px). row-gap:
     artik IKI satir var (tam genislikte .mode-tabs + altinda grid/sidebar
     ikilisi, bkz. .mode-tabs > grid-column:1/-1) - sayfanin geri kalaniyla
     AYNI dusey ritmi kullansin diye --space-rhythm, .lichess-tabs'in kendi
     margin-bottom'u YERINE (ikisi ust uste binmesin diye orada kaldirildi). */
  column-gap: 20px;
  row-gap: var(--space-rhythm);
  align-items: start;
}

.lichess-side {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  /* --space-rhythm = ana sutundaki AYNI dusey ritim (.card-featured margin,
     .lichess-bottom-row margin-top) - kullanici karari, 2026-09-17:
     "hizalamalar falan nizami olsun" - iki sutun arasinda tutarli
     bosluk kalsin diye 14px'ten yukseltildi, sonra tokenlestirildi. */
  gap: var(--space-rhythm);
}

@media (max-width: 980px) {
  .lichess-page-wide {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  .lichess-side {
    position: static;
  }
}

.lichess-center {
  position: relative;
}

.lichess-center .status {
  text-align: center;
}

/* Arkadaşlar + Liderlik Tablosu - en altta yan yana (kullanici istegi,
   2026-09-17: "sağda arkadaşlar ve liderlik olsun", ama artik sayfa
   boyunca uzanan bir kenar cubugu DEGIL - ikisi de kisa/benzer boydaki
   liste kartlari oldugu icin yan yana konduklarinda yukseklikleri zaten
   yakin, dolayisiyla bos alan sorunu olmaz). Dar ekranda alt alta duser. */
.lichess-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-rhythm);
  margin-top: var(--space-rhythm);
}

@media (max-width: 560px) {
  .lichess-bottom-row {
    grid-template-columns: 1fr;
  }
}

/* Mod grid'inin arkasinda / ustunde soluk pergel figuru - bkz. index.html
   yorumu. Baslik satirinin uzerine tastigi kisim tam gorunur, gridin
   uzerine sarkan alt kismi opak kutucuklarin ARKASINDA kalip dogal olarak
   kirpilir (lichess'teki at figurunun panelin kenarindan "tasma" hissi).
   pointer-events:none: tiklamalari engellemesin. */
.mode-watermark {
  position: absolute;
  top: -18px;
  right: 14px;
  width: 190px;
  height: auto;
  color: var(--text);
  opacity: 0.07;
  transform: rotate(-9deg);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  .mode-watermark {
    width: 130px;
  }
}

/* Kenar cubugu kartlarinda genel "giriş yap" cagrisi - misafirin kalici
   verisi olmayan bir ozelligin (arkadaşlar, eskiden kisisel istatistikler)
   yerine gecer (kullanicinin AskUserQuestion secimi, 2026-09-17). */
.sidebar-guest-cta {
  text-align: center;
}

.sidebar-guest-cta .status {
  margin: 0 0 10px;
}

.sidebar-guest-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sag kenar cubugundaki "Arkadaşlar" ozet karti (bkz. friendsUI.js >
   renderWidget) - tam liste/yonetim hala #screen-friends'te, burasi sadece
   birkac satir + oraya goturen "Tümünü gör" kisayolu. */
.card-friends .card-title {
  justify-content: space-between;
}

.friends-widget-pending-btn {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-card-pad);
}

.card-title {
  margin: 0 0 var(--space-title-gap);
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.stats-footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 20px;
}

/* --- canli mac karti ------------------------------------------------------ */

.featured-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.featured-player-right {
  text-align: right;
}

.fp-name {
  font-weight: 700;
  font-size: 15px;
}

.fp-rating {
  color: var(--accent);
  font-size: 12px;
  margin-top: 2px;
}

.featured-score {
  font-size: 24px;
  font-weight: 800;
}

.fp-sep {
  color: var(--muted);
  margin: 0 8px;
}

.featured-progress {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 14px 0 6px;
}

.featured-question {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* --- gunun sorusu karti --------------------------------------------------- */

.daily-question-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* --- secenek butonlari (mac / gunun sorusu / canli mac) ------------------- */

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.choice-btn {
  padding: 14px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.22s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background-color 0.25s ease, filter 0.3s ease;
  animation: choice-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

/* Her soru yeni buton elemanlari yarattigi icin (renderQuestion, innerHTML
   sifirlanir) bu gecikmeler HER SORUDA yeniden, sirayla tetiklenir. */
.choice-btn:nth-child(1) { animation-delay: 0ms; }
.choice-btn:nth-child(2) { animation-delay: 45ms; }
.choice-btn:nth-child(3) { animation-delay: 90ms; }
.choice-btn:nth-child(4) { animation-delay: 135ms; }

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

.choice-btn:hover:not(:disabled):not(.choice-readonly) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(91, 124, 255, 0.25);
}

.choice-btn:active:not(:disabled):not(.choice-readonly) {
  transform: translateY(0) scale(0.97);
}

.choice-btn.correct {
  background: color-mix(in srgb, var(--good) 25%, var(--bg));
  border-color: var(--good);
  animation: reveal-correct 0.5s ease;
}

@keyframes reveal-correct {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); transform: scale(1); }
  40% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--good) 0%, transparent); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

.choice-btn.incorrect {
  background: color-mix(in srgb, var(--bad) 25%, var(--bg));
  border-color: var(--bad);
  animation: reveal-incorrect 0.45s ease;
}

@keyframes reveal-incorrect {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Sadece "sectigin sik" isareti (kalici inset cerceve). Vurus hissi artik
   .slam ile geliyor - picked-pulse buradan kaldirildi, ama .picked.correct
   hala kullaniyor (asagida). */
.choice-btn.picked {
  box-shadow: 0 0 0 2px var(--accent) inset;
  animation: choice-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes picked-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Uc-sinifli secicilerin ikisi de esit ozgullukte oldugu icin (.picked +
   .correct/.incorrect) hangi animasyonun kazanacagini burada ACIKCA
   belirtiyoruz - aksi halde CSS'te hangisinin sonra tanimlandigina bagli
   (kirilgan) bir davranis olurdu. */
.choice-btn.picked.correct {
  animation: reveal-correct 0.5s ease, picked-pulse 0.4s ease;
}

.choice-btn.picked.incorrect {
  animation: reveal-incorrect 0.45s ease;
}

/* Cevap verir vermez secili sik butonunda tokmak gibi bir darbe: hizli ez
   -> tasarak geri gel + accent sok halkasi. matchUI.js > lockChoices
   SENKRON tetikler (bkz. slamButton yorumu). picked-pulse'in yerini alir.
   Specificity .choice-btn.picked (0,2,0) ile esit ama SONRA tanimlandigi
   icin kazanir; reveal aninda .picked.correct/.incorrect (0,3,0) devralir.
   NOT: box-shadow rengi BILEREK duz rgba - eski Chrome surumleri @keyframes
   icinde color-mix() interpolasyonunu atlayip halkayi hic cizmiyordu. */
.choice-btn.slam {
  animation: choice-slam 0.32s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}

@keyframes choice-slam {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 2px var(--accent) inset, 0 0 0 0 rgba(91, 124, 255, 0.55);
  }
  16% {
    transform: scale(0.9);
    box-shadow: 0 0 0 2px var(--accent) inset, 0 0 0 3px rgba(91, 124, 255, 0.5);
  }
  45% { transform: scale(1.05); }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px var(--accent) inset, 0 0 0 16px rgba(91, 124, 255, 0);
  }
}

.choice-readonly {
  cursor: default;
  opacity: 0.85;
}

/* --- liderlik tablosu ------------------------------------------------------ */

.card-leaderboard ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.card-leaderboard li {
  margin-bottom: 8px;
}

.leaderboard-empty {
  list-style: none;
  margin-left: -20px;
  color: var(--muted);
  font-style: italic;
}

/* Liderlik satiri artik tiklanabilir - o oyuncunun profilini acar (kullanici
   istegi, 2026-09-17: "bu profil ekranı başkaları tarafından da görünecek").
   Buton sifirlama: duz metin gibi gorunsun, sadece hover'da vurgulansın. */
.leaderboard-entry {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.leaderboard-entry:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --- kuyruk ("Rakip aranıyor") popup'i --------------------------------------
   auth-modal ile AYNI .modal-overlay/.modal-box iskeletini paylasir (bkz.
   index.html > #queue-modal-overlay) - burasi sadece ic duzeni ekliyor. */

.queue-modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 32px 28px;
}

/* Matematik temali "hesaplaniyor" gostergesi: 4 islem sembolu sirayla
   buyuyup renklenir (soldan saga dalga gibi) - sade, ikon/emoji yok. */
.queue-spinner {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.queue-spinner-symbol {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--muted);
  animation: queue-symbol-pulse 1.4s ease-in-out infinite;
}

.queue-spinner-symbol:nth-child(1) { animation-delay: 0s; }
.queue-spinner-symbol:nth-child(2) { animation-delay: 0.15s; }
.queue-spinner-symbol:nth-child(3) { animation-delay: 0.3s; }
.queue-spinner-symbol:nth-child(4) { animation-delay: 0.45s; }

@keyframes queue-symbol-pulse {
  0%, 60%, 100% {
    transform: scale(1);
    background: var(--card-2);
    color: var(--muted);
    border-color: var(--border);
  }
  30% {
    transform: scale(1.15);
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
}

.queue-modal-status {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.queue-modal-hint {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.queue-modal-box .ghost-btn {
  width: 100%;
}

/* Sade, outline stilinde ikincil eylem - .btn-primary kadar agir/buyuk
   gorunmesin diye ayri, kucuk bir sinif (bkz. kullanici istegi,
   2026-09-17: "fazla buyuk sade bir gorunum istiyorum"). */
.queue-bot-btn {
  width: 100%;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.queue-bot-btn:hover:not(:disabled) {
  background: var(--accent);
  color: white;
}

/* --- auth modal ------------------------------------------------------------ */


.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  animation: modal-overlay-in 0.2s ease-out;
}

.modal-box {
  position: relative;
  width: min(420px, 100%);
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 48px var(--shadow);
  animation: modal-box-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.modal-close:hover {
  background: var(--bad);
  color: white;
}


.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
}

.tab-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* lichess.org'daki gibi duz, alt-cizgili sekmeler - .tab-btn'nin kutulu/
   dolgu stilinden BILEREK farkli (kullanici bir lichess ekran goruntusu
   gonderip "sekme butonları buton olmasın licesteki mantıkta olsun" dedi,
   2026-09-17). Su an SADECE ana ekrandaki mod grid sekmelerinde (bkz.
   index.html > .mode-tabs, landingUI.js > MODE_TABS) - .tabs/.tab-btn
   (arkadaslar ekrani, auth modal) buna DOKUNULMADI, kasitli olarak ayri
   bir stil. `background: none` sart - GLOBAL `button{border-radius:8px}`
   resetinin `background`'a dokunmadigi, aksi halde native buton gorunumu
   sizan bir tuzak var (bkz. .lichess-tab'in native gorunmesi hatasi). */
.lichess-tabs {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  /* margin-bottom YOK: ana sayfada .mode-tabs olarak .lichess-page-wide'in
     row-gap'i (--space-rhythm) zaten alttaki satirla arayi acar - burada
     ayrica margin eklersek ikisi ust uste biner (bkz. .lichess-page-wide).
     Bu sinif baska bir baglamda (grid DISINDA) kullanilirsa kendi
     margin-bottom'unu tanimlamasi gerekir. */
}

.lichess-tab {
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* altcizgi, konteynerin border-bottom'unun USTUNE binsin */
  padding: 8px 2px 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
}

.lichess-tab:hover:not(.active) {
  color: var(--text);
}

.lichess-tab.active {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* Ana sayfada .lichess-tabs'in ozel bir gorevi var: .lichess-page-wide'in
   IKI sutununun (grid + sag kenar cubugu) TAMAMINI kaplayan tek, tam
   genislikte bir baslik satiri olmak (kullanici karari, 2026-09-17: "UI
   expert gibi bu ekranı ... güzel bir tasarıma kavuştur" - sekme
   altcizgisi SADECE sol sutunun ustundeyken sag kenar cubugundaki ilk kart
   ayni y'de baslayip cizgiyi "bozuyormus" gibi goruniyordu). `grid-column:
   1 / -1` bunu CSS Grid'in dogal auto-placement'iyla saglar: bu satir tek
   basina ilk grid satirini doldurur, `.lichess-main`/`.lichess-side` de
   otomatik olarak IKINCI satira, birbirinin yanina duser - baska hicbir
   yeniden konumlandirmaya gerek yok. */
.mode-tabs {
  grid-column: 1 / -1;
}

/* "Yakında" sekmesi (index.html > #mode-tab-grade[disabled]) - global
   button:disabled stili yerine sakin, tiklanamaz metin. */
.lichess-tab:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.lichess-tab:disabled:hover {
  color: var(--muted);
}

.soon-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  vertical-align: middle;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  margin-bottom: 14px;
  background: #ffffff;
  color: #3c4043;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.google-btn:hover {
  background: #f5f5f5;
}

.google-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 14px;
}

.google-divider::before,
.google-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.google-divider span {
  padding: 0 10px;
}

.field {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}

.field input,
.field select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  box-sizing: border-box;
}

/* --- Özel Maç: sidebar'daki tetikleyici kart + pop-up (bkz. index.html >
   #cm-open-btn, #cm-modal-overlay, customMatchUI.js) ------------------------ */

/* Sidebar'daki tetikleyici butonlar (Arkadaşla Oyun Kur + Accelerator'ı
   Başlat) global .btn-primary'nin dolu-mavi agirligini degil, .queue-bot-btn
   ile AYNI sakin outline dilini kullanir (kullanici karari, 2026-09-17:
   "uyumlu tasarım istiyorum, biri yukarda biri aşağıda uyumsuz olmasın") -
   sayfanin geri kalani duz/sakin oldugu icin iki dolu-mavi CTA en yuksek
   sesli oge olup cikiyordu, ustelik ayni sutundaki ucuncu kart (Turnuva,
   .ghost-btn.cm-soon-btn) zaten sakindi - simdi ucu de tutarli. */
.card-custom-match-trigger .btn-primary,
.card-accelerator-trigger .btn-primary {
  width: 100%;
  margin-top: 6px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}

.card-custom-match-trigger .btn-primary:hover:not(:disabled),
.card-accelerator-trigger .btn-primary:hover:not(:disabled) {
  background: var(--accent);
  color: white;
  transform: none;
  box-shadow: none;
}

.cm-modal-box {
  width: min(380px, 92vw);
  text-align: left;
}

.cm-modal-box .field,
.cm-modal-box .btn-primary {
  margin-bottom: 10px;
}

.cm-modal-box .btn-primary {
  width: 100%;
}

.cm-link-box {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.cm-link-box .field input {
  font-size: 13px;
  cursor: text;
}

.cm-link-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.cm-link-actions button {
  flex: 1;
}

.cm-whatsapp-btn {
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cm-whatsapp-btn:hover {
  filter: brightness(1.05);
}

.card-tournament .cm-soon-btn {
  width: 100%;
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Accelerator: sidebar tetikleyici + solo yarış ekranı (bkz. index.html,
   acceleratorUI.js). Tetikleyici butonun kendi stili artik yukarida,
   .card-custom-match-trigger ile BIRLESTIRILMIS (bkz. "sidebar'daki
   tetikleyici butonlar" yorumu, ~L1198) - burada tekrar tanimlanmiyor. */

.solo-timer {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 4px 0 14px;
}

#screen-solo #solo-question-text {
  text-align: center;
}

#solo-result {
  text-align: center;
  padding: 24px 0;
}

#solo-result-title {
  margin: 0 0 8px;
}

#solo-result-best {
  font-weight: 700;
  color: var(--accent);
}

#solo-again-btn {
  margin-top: 12px;
}

/* --- "sifremi unuttum" (bkz. docs/PASSWORD_RESET.md) ----------------------- */

/* Duz metin gibi gorunen buton - <a> degil cunku sayfa disi bir yere
   gitmiyor, JS ile modal gorunumu degistiriyor. */
.link-btn {
  background: transparent;
  border: none;
  padding: 4px 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.link-btn:hover {
  text-decoration: underline;
}

#forgot-link-row {
  margin: -4px 0 14px;
  text-align: right;
}

#forgot-form .link-btn {
  display: block;
  margin-top: 10px;
}

.auth-form-hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --- mod grid'i: SATIR = sinif (9/10/11/12), SUTUN = hiz (Bullet/Rapid/
   Classic) - BORDER'SIZ, sadece bosluk (gap) ve hafif arka plan farkiyla
   ayrisan hucreler (kullanici istegi, 2026-09-16: "griddeki borderlari
   kaldir" - onceki hairline/collapsed-table hilesi de kaldirildi; bir
   sonraki gun tam SEFFAF dinlenme hali denendi, "geri al" ile eski dolu
   hale donuldu - bkz. [[fast-design-iteration]] hafizasi). Grid sabit bir
   max-width ile KENDI SUTUNUNUN icinde ortalanir ("gridi ortala"). Sol
   ustte bos kose, ustte hiz basliklari, solda sinif etiketleri (SAAT
   YONUNUN TERSINE 90° cevrili, bkz. .mode-grade-label), hucreler
   (mode-tile) tiklamak DIREKT o sinif+hiz kombinasyonunda esleşme aramaya
   baslar. DOM ekleme sirasi (landingUI.js > renderModeGrid) grid hucre
   sirasiyla birebir eslesir - once kose+3 baslik, sonra HER sinif icin
   etiket+3 hucre. ------------------------ */

.mode-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px repeat(3, 1fr);
  gap: var(--space-grid-gap);
}

@media (max-width: 520px) {
  .mode-grid {
    grid-template-columns: 36px repeat(3, 1fr);
    gap: 6px;
  }
}

/* Kucuk telefonlar (ör. iPhone SE, ~375px) - etiket sutunu ve bosluk daha da
   daralir ki kare hucreler tasmasin (kullanici istegi, 2026-09-17: "responsive
   yap"). */
@media (max-width: 380px) {
  .mode-grid {
    grid-template-columns: 28px repeat(3, 1fr);
    gap: 4px;
  }
}

.mode-grid-corner {
  /* bos - sadece hiz basliklarinin ustunde sinif sutunu icin bosluk */
}

.mode-col-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mode-col-header span {
  font-size: 14px;
}

/* Etiket saat yonunun tersine 90° cevrili (rotate(-90deg)) - dikey akan bir
   sutun basligi gibi okunur, hucre yuksekligine gore genis (dar) bir
   sutuna sigmasini saglar. transform-origin varsayilani (center) tam
   istedigimiz - hucre icinde donerek ortalanir. */
.mode-grade-label {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transform: rotate(-90deg);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

/* Tek harflik sembol etiketleri (ℚ/ℝ/ℂ) donmez, normal (dikey olmayan)
   gorunur - kullanici karari (2026-09-28: "sadece harf olduğu için
   döndürmene gerek yok normal görünsün"), bkz. GRADE_GROUPS[].uprightLabel. */
.mode-grade-label--upright {
  transform: none;
  font-size: 16px;
}

.mode-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* genislik/yukseklik = altin oran (φ ≈ 1.618) - kullanici istegi,
     2026-09-17: tam kare (1/1) yerine altin dikdortgen. */
  aspect-ratio: 1.618 / 1;
  border-radius: 10px;
  padding: 6px;
  background: var(--card);
  color: var(--text);
  transition: background-color 0.15s ease;
}

.mode-tile:hover:not(:disabled) {
  background: var(--card-2);
}

.mode-tile:active:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.mode-tile:disabled {
  opacity: 0.5;
  cursor: default;
}

/* "Yakında" hucresi (GRADE_GROUPS[].comingSoon, landingUI.js): kesikli
   cerceve + kucuk metin, sakin gri - yayindaki hucrelerden acikca farkli. */
.mode-tile-soon,
.mode-tile-soon:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: transparent;
  border: 1px dashed var(--border);
  box-shadow: none;
}

.mode-tile-soon-text {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.7;
}

.mode-tile.active {
  background: color-mix(in srgb, var(--accent) 20%, var(--card));
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: pill-select 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pill-select {
  0% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* Lichess'teki "3+0" mantigi: en cok merak edilen deger (soru basina
   sure) DEV ve kalin, soru sayisi altinda kucuk bir alt yazi (bkz.
   kullanicinin AskUserQuestion secimi, 2026-09-16). "sn" yerine kronometre
   emojisi, "N soru" yerine "×N" (kucuk carpma isareti + buyuk rakam)
   kullanilir (kullanici istegi, 2026-09-17) - ikinci deger de artik yazi
   degil RAKAM agirlikli gosteriliyor. */
.mode-tile-time {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

.mode-tile-unit {
  font-size: 15px;
  margin-left: 5px;
}

.mode-tile-count {
  display: flex;
  align-items: baseline;
  gap: 1px;
  color: var(--muted);
}

.mode-tile-count-x {
  font-size: 11px;
  font-weight: 600;
}

.mode-tile-count-num {
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 520px) {
  .mode-tile {
    padding: 4px;
  }

  .mode-tile-time {
    font-size: 20px;
  }

  .mode-tile-unit {
    font-size: 11px;
    margin-left: 3px;
  }

  .mode-tile-count-x {
    font-size: 9px;
  }

  .mode-tile-count-num {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .mode-tile {
    padding: 3px;
    border-radius: 8px;
  }

  .mode-tile-time {
    font-size: 16px;
  }

  .mode-tile-unit {
    font-size: 10px;
    margin-left: 2px;
  }

  .mode-tile-count-x {
    font-size: 8px;
  }

  .mode-tile-count-num {
    font-size: 11px;
  }
}

/* --- mod rozeti (canli mac karti, mac ekrani, profil gecmisi) --------------- */

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 10px;
}

/* --- mac ekrani -------------------------------------------------------------- */

/* --- arena (yan gorunum siluet karakterler) ---------------------------------
   Kaynak: index.html > #screen-match > .arena. Canvas motoru:
   public/js/arena/ (rig + pozlar + jestler + buz/kar-topu efektleri + sahne
   akisi). Socket olaylarina baglayan: public/js/ui/matchUI.js. Detay:
   docs/ANIMATIONS.md. Isim + skor skorbord uzerine CANVAS'ta cizilir -
   DOM'da ayri bir avatar/isim/skor elemani yok. */

.arena {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #0c0e15;
  margin-bottom: 14px;
}

#arena-canvas {
  display: block;
  width: 100%;
  /* sabit mantiksal sahne orani (bkz. arena/config.js > STAGE 460x360) */
  aspect-ratio: 460 / 360;
}

/* Soru metni + gorseli: arka plana (arena/config.js > BOARD, sadece
   konum/boyut referansi - kutu ARTIK CIZILMIYOR, kullanici talebiyle
   kaldirildi) yuzde olarak konumlanmis, seffaf bir DOM overlay. Kutu/cerceve
   olmadigi icin token'lari burada SABITLEMIYORUZ - sayfanin gercek
   --text/--muted/... degerlerini miras alir, boylece soru metni koyu
   temada beyaz, acik temada lacivert olur (STAGE.bg zaten PALETTE.card'dan
   turedigi icin kontrast otomatik dogru kalir). overflow BILEREK visible:
   cok uzun bir soru metni bu alani hafifce tasabilir ama asla kirpilip
   okunamaz hale gelmez (bkz. docs/ANIMATIONS.md). */
.arena-board-overlay {
  position: absolute;
  left: 13.26%;
  top: 10.56%;
  width: 73.48%;
  height: 20.56%;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
  pointer-events: none;
}

.arena-board-overlay #question-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--text);
}

.arena-board-overlay #question-text.q-logic {
  font-size: 11.5px;
  line-height: 1.4;
  text-align: left;
}

/* Soru gorseli arenanin ORTASINDA (iki oyuncunun arasi, masanin ustu): "ekran"
   burasidir. Gorsel varsa (.arena.has-visual, bkz. matchUI.js > renderQuestion)
   soru metni tahtadan MASANIN ON YUZUNE iner - bir bakista tek sahne. */
.arena .arena-visual {
  position: absolute;
  left: 29%;
  width: 42%;
  top: 4%;
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.arena .arena-visual .question-visual-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}

.arena.has-visual .arena-board-overlay {
  left: 27%;
  width: 46%;
  top: 66%;
  height: 22%;
  justify-content: center;
}

.arena.has-visual .arena-board-overlay #question-text {
  font-size: 12px;
  line-height: 1.3;
}

.progress {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.timer-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  transition: box-shadow 0.3s ease;
}

/* Kritik esikte (sure %20'nin altina inince) cubugun etrafina hafif bir
   parlama ekler - :has() destegi olmayan tarayicilarda sessizce atlanir,
   islevi bozmaz, sadece bu ekstra parlamayi kaybeder. */
.timer-bar:has(#timer-fill.timer-critical) {
  box-shadow: 0 0 10px var(--bad);
}

#timer-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transition: background-color 0.3s ease;
}

#timer-fill.timer-warning {
  background: var(--gold);
}

#timer-fill.timer-critical {
  background: var(--bad);
  animation: timer-critical-pulse 0.5s ease-in-out infinite;
}

@keyframes timer-critical-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.6); }
}

#question-text {
  text-align: center;
  font-size: 22px;
  margin: 8px 0 20px;
}

/* --- mantik onerme render (public/js/ui/logicFormat.js) --------------------
   Mantik sorularindaki «onerme»/baglac/parantezleri okunur hale getirir.
   Matematik sorularinda bu siniflar hic uretilmez (isLogicText() false). */

.lp-atom {
  white-space: nowrap;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}

.lp-op {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.08em;
  margin: 0 0.34em;
  vertical-align: -0.02em;
}

.lp-op.lp-xor {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.lp-grp {
  display: inline-block;
  padding: 0 1px;
}

.lp-paren {
  color: var(--muted);
  margin: 0 1px;
}

.lp-not {
  font-style: normal;
  font-weight: 600;
}

/* Açı gösterimi: "m(∠ABC)" -> ∠ karakteri yerine harflerin tepesinde bir
   yay ("widehat" - ders kitabı kavisi). Düz, dolgusuz elips + sadece üst
   kenar boyalı: border-radius:50% elipsin tamamını cizer, border-top ile
   sadece tepedeki kavis parcasi gorunur kalir. */
.m-angle {
  position: relative;
  display: inline-block;
  padding-top: 0.55em;
  font-weight: 700;
}
.m-angle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 0.7em;
  border-top: 1.6px solid currentColor;
  border-radius: 50%;
}

.lp-var {
  font-style: normal;
  font-weight: 600;
}

.lp-true { font-weight: 800; color: var(--good); }
.lp-false { font-weight: 800; color: var(--bad); }

/* Kesir gosterimi (kullanici karari, 2026-09-28: "gerçek profesyonel
   matematikçi gösteriminde olsun, bölü işareti yatay olsun") - pay ustte,
   payda altta, aralarinda yatay cizgi (klasik ders kitabı kesri). Tercih
   mathNotation.js'te tutulur, render logicFormat.js > escFrac'ta yapılır;
   burada sadece stil var. border-top currentColor kullandigi icin acik/koyu
   temada ayrica ayar gerekmiyor (metin rengini otomatik izler). */
/* frac-unit: kesir + varsa hemen ardindaki ek (ör. "'si") AYNI bolunmez
   satir-ici birim - ek, kesrin govdesine gorsel olarak yapisik dursun ve
   satir sonuna dusup ek tek basina kalmasin diye (bkz. yukarida FRACTION_RE
   yorumu - herhangi bir dildeki sayiya-bitisen-ek sorunu icin genel cozum). */
.frac-unit {
  white-space: nowrap;
}
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 0.82em;
  line-height: 1.15;
  margin: 0 0.12em;
  transform: translateY(0.05em);
}
.frac-num, .frac-den {
  padding: 0 0.15em;
}
.frac-bar {
  align-self: stretch;
  border-top: 1.5px solid currentColor;
  margin: 1px 0;
}
.frac-sign {
  margin-right: 0.05em;
}
.frac-suffix {
  font-size: 1em;
  margin-left: 0.02em;
}

/* mantik soru metni: ortalamak yerine sola yasli + ferah satir araligi */
#question-text.q-logic {
  text-align: left;
  font-size: 18px;
  line-height: 1.75;
}
.daily-question-text.q-logic,
#fp-question.q-logic {
  line-height: 1.7;
}

/* mantik secenekleri: uzun ic ice ifadeler icin tek sutun + sola yasli */
.choices.choices-logic {
  grid-template-columns: 1fr;
}
.choice-btn.choice-logic {
  text-align: left;
  white-space: normal;
  line-height: 1.75;
  padding: 12px 14px;
}

/* --- soru gorseli (geometri sekli / fonksiyon grafigi) -------------------------
   Kaynak: public/js/ui/questionVisual.js, sema: docs/QUESTIONS.md. Sadece
   question.visual alani olan sorularda gosterilir (ör. geometry/functions
   kategorileri) - duz matematik sorularinda hic render edilmez. */

.question-visual {
  display: flex;
  justify-content: center;
  margin: -4px 0 18px;
}

/* Kare footprint - sorular arasi gecerken yukseklik zilamaz. viewBox de
   kare (300x300), yani ekstra bir en/boy ayari gerekmez. */
.question-visual-svg {
  width: 100%;
  /* Kullanici geri bildirimi (2026-09-29: "sayılar küçük masaüstü için") -
     kart (.screen-narrow) 480px'e kadar genisleyebiliyor ama gorsel 296px'e
     sabitliydi, kartin ic genisligini (480-2*28=424px) kullanmiyordu. 400px
     ic genislige yakin, hafif kenar boslugu birakiyor. */
  max-width: 400px;
  height: auto;
  overflow: visible;
}

/* --- geometri sekli --- */

.qv-fill {
  fill: color-mix(in srgb, var(--accent) 13%, transparent);
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.qv-stroke-dash {
  stroke: var(--muted);
  stroke-width: 1.75;
  stroke-dasharray: 4 4;
}

.qv-angle {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.75;
}

.qv-vertex {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 1.5;
}

/* --- cember aci/kuvvet diyagramlari (circle-* shape'leri) --- */

.qv-outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.25;
}

.qv-chord {
  stroke: var(--text);
  stroke-width: 1.75;
}

.qv-radius {
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.qv-arc-hi {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
}

.qv-label-ask { fill: var(--accent); }

/* Kenar etiketleri: kalin, arkasinda zemin renginde halo (kilavuz/dolgu
   uzerinde net okunsun). paint-order ile once stroke, sonra fill cizilir. */
.qv-label {
  fill: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.qv-label-end { text-anchor: end; }
.qv-label-start { text-anchor: start; }

/* Uzunluk cubuklarinin (visual.type=bars) UZERINDEKI isim etiketi - kucuk
   font, cubugun oldugu satirin dar dikey alanina sigsin diye (bkz.
   questionVisual.js > renderBarsSvg, kullanici geri bildirimi 2026-09-29:
   "bu görsel ne anlama geliyor" - cubuklar hangi ismin oldugu hic
   belirtilmeden ciziliyordu). */
.qv-bar-label {
  font-size: 11px;
  font-weight: 600;
}

/* --- koordinat duzlemi --- */

.qv-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.qv-axis {
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.qv-axis-head {
  fill: var(--muted);
}

.qv-axis-name {
  fill: var(--muted);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  text-anchor: middle;
}

.qv-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qv-tick {
  fill: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

.qv-tick-end { text-anchor: end; }

/* --- nesne sayma (visual.type === "objects", 1-7. sinif) --------------------- */

.qv-obj-fill {
  fill: color-mix(in srgb, var(--accent) 24%, transparent);
  stroke: var(--accent);
  stroke-width: 1.75;
}
.qv-obj-accent {
  fill: var(--muted);
  stroke: var(--muted);
  stroke-width: 1;
}
.qv-obj-removed {
  opacity: 0.35;
}
.qv-obj-x {
  stroke: var(--bad);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.qv-obj-op {
  fill: var(--text);
  font-size: 20px;
  font-weight: 800;
  text-anchor: middle;
}
.qv-obj-unknown {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
/* 0 nesneli grup: bos kesikli kutu + soluk "0" (bilinmeyen "?" kutusundan
   ayirt edilsin diye accent degil border rengi). */
.qv-obj-zero {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.qv-obj-zero-label {
  fill: var(--muted);
  opacity: 0.7;
}
.qv-tenframe-cell {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
}
.qv-obj-divider {
  stroke: var(--border);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.qv-tenblock-frame {
  fill: color-mix(in srgb, var(--accent) 10%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.qv-tenblock-dot {
  fill: var(--accent);
}

/* --- joker: donma (freeze) katmani ------------------------------------------- */

.choices-wrap {
  position: relative;
}

.freeze-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(160deg, rgba(120, 190, 255, 0.35), rgba(200, 230, 255, 0.55));
  backdrop-filter: blur(2px);
  border-radius: 10px;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  animation: frost-in 0.35s ease-out;
}

/* matchUI.js > spawnSnowflakes() bunlari dinamik olarak ekler/temizler. */
.snowflake {
  position: absolute;
  top: -10%;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 4px rgba(120, 190, 255, 0.8);
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes snow-fall {
  0% { transform: translateY(-10%) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(320%) translateX(10px) rotate(180deg); opacity: 0; }
}

.freeze-icon {
  font-size: 42px;
  animation: freeze-pulse 1.5s ease-in-out infinite;
}

.freeze-label {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #eaf6ff;
  text-shadow: 0 1px 5px rgba(0, 60, 120, 0.6);
}

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

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

/* --- joker cubugu (3 joker - bkz. docs/JOKERS.md) ---------------------------- */

.joker-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 14px 0 4px;
}

.joker-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.joker-btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.joker-btn:active:not(:disabled) {
  transform: scale(0.94);
}

/* matchUI.js > updateJokerCount() bunu jokeri kullandiginda tetikler. */
.joker-btn.joker-cast {
  animation: joker-cast-burst 0.5s ease;
}

@keyframes joker-cast-burst {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.joker-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.joker-icon {
  font-size: 14px;
}

.joker-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

/* Kehanet paneli - #oracle-panel */
.oracle-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 6px 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--oracle) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--oracle) 45%, transparent);
  animation: oracle-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes oracle-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.oracle-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oracle);
}

.oracle-hints {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.5;
}
.oracle-hints i { color: var(--muted); font-style: normal; margin: 0 6px; }

.oracle-sub {
  font-size: 11px;
  color: var(--muted);
}

/* Zaman Uzat: bar bir kez altin renkte parlar */
#timer-fill.timer-extended {
  animation: timer-extend-flash 0.7s ease;
}

@keyframes timer-extend-flash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 12px 2px var(--gold); background: var(--gold); }
}

/* --- emote cubugu (bkz. matchUI.js > renderEmoteBar, docs/EMOTES.md) --------- */

.emote-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 0 0 16px;
}

.emote-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.emote-btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
}

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

.emote-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* receiveEmote() kendi emote'um donunce tetikler - kisa onay nabzi. */
.emote-btn.emote-sent {
  animation: emote-sent-pulse 0.42s ease;
}

@keyframes emote-sent-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.emote-count {
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.emote-bar-spent { opacity: 0.55; }
.emote-bar-spent .emote-count { color: var(--bad); border-color: var(--bad); }

/* --- zamanlama ekrani (/timing - bkz. docs/QUESTION_ELO_BOOTSTRAP.md) -------- */

.tm-center { text-align: center; }
.tm-hint { color: var(--muted); font-size: 14px; margin: 6px 0; }
.tm-big { font-size: 30px; font-weight: 800; font-family: ui-monospace, monospace; margin: 10px 0; }
.tm-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.tm-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}
.tm-cat { font-size: 12px; color: var(--muted); }
#tm-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; }
.tm-pause-btn { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.tm-elapsed {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.tm-kbd { color: var(--muted); font-family: ui-monospace, monospace; margin-right: 8px; }

.tm-flag-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tm-skip-btn,
.tm-wrong-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}
.tm-wrong-btn:hover { color: var(--bad); border-color: var(--bad); }

/* Genel "hatalı soru bildir" butonu (maç ekranı + Günün Sorusu) - /timing'deki
   tm-wrong-btn ile aynı görünüm, ama o mekanizmaya bağlı olmadığı için ayrı
   sınıf (bkz. public/js/authClient.js > reportQuestion). */
.report-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.report-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}
.report-btn:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.report-btn:disabled { opacity: 0.6; }

.tm-teacher {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-2);
}
.tm-sound,
.tm-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 12px;
}
.tm-sound .ghost-btn,
.tm-diff .ghost-btn { padding: 6px 10px; font-size: 12px; }
.tm-sound .ghost-btn.active,
.tm-diff .ghost-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.tm-rating-grid {
  display: grid;
  gap: 12px;
  margin: 6px 0 12px;
}

.tm-rating-group {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}

.tm-rating-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.tm-rating-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tm-rating-buttons .ghost-btn {
  padding: 6px 10px;
  font-size: 12px;
}

.tm-rating-buttons .ghost-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.tm-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--good);
  color: #08160e;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 50;
}
.tm-toast.on { opacity: 1; }

.tm-review-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: inherit;
  font-size: 14px;
  margin-bottom: 10px;
}
.tm-review-list {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.tm-review-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.tm-review-item:last-child { border-bottom: 0; }
.tm-review-item:hover { background: var(--card-2); }
.tm-review-item-cat { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.tm-review-item-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-review-item-mark { flex: 0 0 auto; font-size: 12px; }
.tm-review-item.flagged { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.tm-review-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

.tm-review-detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* --- sonuc ekrani ------------------------------------------------------------ */

#end-title {
  text-align: center;
  font-size: 24px;
  margin-top: 0;
}

#end-score {
  text-align: center;
}

.rating-change {
  text-align: center;
  font-weight: 700;
}

.rating-change.positive {
  color: var(--good);
}

.rating-change.negative {
  color: var(--bad);
}

/* --- market (skin secimi) ---------------------------------------------------
   Kaynak: index.html > #screen-market, public/js/ui/marketUI.js. Skinler
   public/js/arena/skin.js kayit defterinden gelir. Ekonomi yok - serbest
   gorunum (bkz. docs/ANIMATIONS.md > Market). */

.market-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.skin-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.skin-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.skin-card.equipped {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
  cursor: default;
}

.skin-card.equipped:hover {
  transform: none;
}

.skin-card-preview {
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #12151f, #0b0d14);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
}

.skin-card-preview canvas {
  display: block;
  width: 128px;
  height: 148px;
}

.skin-card-name {
  font-weight: 700;
  font-size: 14px;
}

.skin-card-tag {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  min-height: 2.7em;
}

.skin-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.skin-card-state {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.rarity {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.rarity-common {
  color: var(--muted);
}
.rarity-rare {
  color: var(--rare);
}
.rarity-epic {
  color: var(--oracle);
}
.rarity-legendary {
  color: var(--gold);
}

/* --- profil ekrani ------------------------------------------------------------ */

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.home-username {
  font-size: 18px;
  font-weight: 700;
}

/* Karakter onizlemesi + isim/rozet blogu yan yana (kullanici istegi,
   2026-09-17: "kişinin karakteri" - navbar'daki kucuk harf-avatarindan
   farkli, kuşanılan skin'in GERCEK cizimi, bkz. marketUI.drawPreview,
   profileUI.js > renderCharacter). */
.profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* .skin-card-preview'in (market karti) kucultulmus hali - ayni koyu
   gradyan/kart cercevesi, sadece profil basliginda daha az yer kaplasin
   diye canvas'in GORUNTU boyutu daraltiliyor (canvas'in kendi cizim
   cozunurlugu degismez, bkz. drawPreview - sadece CSS olcekleme). */
.profile-character {
  padding: 6px 0;
}

.profile-character canvas {
  width: 74px;
  height: 86px;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
}

.profile-meta {
  margin-top: -8px;
  margin-bottom: 18px;
}

/* Profil basligindaki link-kopyala ikonu + "Ana Menü" yan yana (kullanici
   istegi 2026-09-22: eski tam genislikteki aksiyon satiri kaldirildi). */
.profile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Baskasinin profilini goruntulerken gorunen "Arkadaş Ekle" alani (kullanici
   istegi, 2026-09-17) - relationship durumuna gore profileUI.js >
   renderFriendAction metni/aktifligini degistirir. friend-btn-danger zaten
   friendsUI.js > "Çıkar" ile ayni (bkz. style.css > arkadaşlar bolumu). */
.profile-friend-action {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.rating-badge {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
}

.rating-badge span {
  color: var(--accent);
  font-weight: 700;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.stat-label {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* "Moda Göre Dağılım" (pivot tablo, kullanicinin AskUserQuestion secimi
   2026-09-17) - her satir bir mod (sinif x hiz): etiket | G-M-B rekoru |
   kazanma %. match-row ile AYNI 3-sutunlu mantik, farkli grid oranlari
   (etiket degiskeni uzun oldugu icin flex-grow). */
.mode-stats {
  margin-bottom: 24px;
}

.mode-stats-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Artik TIKLANABILIR (kullanici istegi, 2026-09-17: profesyonel yeniden
   tasarim) - bir satira tiklayinca asagidaki "Son Maçlar" o moda gore
   filtrelenir (bkz. profileUI.js > handleModeFilterClick). button (li/div
   degil) - klavye ile de erisilebilir. */
.mode-stat-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.mode-stat-row:last-child {
  border-bottom: 0;
}

.mode-stat-row:hover {
  background: var(--card-2);
}

.mode-stat-row.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  box-shadow: inset 3px 0 0 var(--accent);
}

.mode-stat-icon {
  flex: 0 0 auto;
  font-size: 15px;
}

.mode-stat-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.mode-stat-record {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.mode-stat-winrate {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: right;
  font-weight: 700;
  color: var(--accent);
}

/* --- rating geçmişi grafiği (bkz. public/js/ui/ratingChart.js) ------------
   El yapımı SVG çizgi grafiği - dataviz skill mark speclerine göre: 2px
   çizgi, >=8px uç nokta + 2px yüzey halkası, %10 opasiteli alan dolgusu,
   hairline ızgara, uçta değer etiketi, crosshair+tooltip hover. Kütüphane
   kullanılmadı (proje geneli: pergel filigranı/arena motoru gibi hep kendi
   çizilir, bkz. index.html yorumu). */
.rating-chart-section {
  margin-bottom: 24px;
}

.rating-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.rating-chart-header h3 {
  margin: 0;
}

/* Zaman aralığı sekmeleri (1A/3A/6A/1Y/Tümü) - dataviz skill > interaction.md
   "One row, above the charts" - .tab-btn'in AKSİNE flex:1 GERMİYOR (kompakt
   pil kümesi, lichess'teki gibi), sadece renk/aktiflik mantığı ortak. */
.range-tabs {
  display: flex;
  gap: 4px;
}

.range-tab {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.range-tab:hover {
  border-color: var(--accent);
  color: var(--text);
}

.range-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.rating-chart-wrap {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}

#rating-chart {
  display: block;
  width: 100%;
  height: 180px;
}

/* Grafik SADECE pointer/klavye ile etkilesimli - "tiklanabilir" degil,
   odaklaninca native mavi kutu yerine ince bir halka (bkz. dataviz skill >
   interaction.md "Same details on keyboard focus as on hover"). */
#rating-chart:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.match-history h3,
.mode-stats h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.match-history ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.match-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.match-row:last-child {
  border-bottom: none;
}

.match-outcome {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.match-outcome.outcome-win {
  background: color-mix(in srgb, var(--good) 25%, var(--bg));
  color: var(--good);
}

.match-outcome.outcome-loss {
  background: color-mix(in srgb, var(--bad) 25%, var(--bg));
  color: var(--bad);
}

.match-outcome.outcome-draw {
  background: var(--bg);
  color: var(--muted);
}

.match-opponent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bot olmayan rakip adları tıklanabilir (kullanıcı isteği, 2026-09-17:
   "arkadaşlarımızda profilimizde gezinebilmeli") - .friend-name/
   .leaderboard-entry ile AYNI buton-sıfırlama deseni. Bot rakip düz metin
   kalır (profili yok). */
.match-opponent-name {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.match-opponent-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

.match-score,
.match-date {
  color: var(--muted);
}

.match-delta {
  font-weight: 700;
  color: var(--muted);
}

.match-delta.positive {
  color: var(--good);
}

.match-delta.negative {
  color: var(--bad);
}

/* --- arkadaşlar ekrani (#screen-friends, bkz. friendsUI.js) ---------------- */

.friends-panel { min-height: 40px; }

.friends-subheading {
  margin: 18px 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.friends-subheading:first-child { margin-top: 0; }

.friends-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.friend-row:last-child { border-bottom: 0; }

/* button - o kullanicinin profilini acar (kullanici istegi, 2026-09-17:
   "bu profil ekranı başkaları tarafından da görünecek"). */
.friend-name {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

.friend-rating {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.friend-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.friend-btn-danger {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 40%, var(--border));
}

.friend-btn-danger:hover {
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
}

/* Kabul edilen istek - kişi listeden hemen silinmez, "Onaylandı" olarak
   kalır (kullanıcı isteği 2026-09-17, bkz. friendsUI.js > acceptIncoming). */
.friend-status-accepted {
  flex: 0 0 auto;
  color: var(--good);
  font-weight: 700;
  font-size: 13px;
}

.friends-add-form {
  display: flex;
  gap: 8px;
}

.friends-add-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.friends-add-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

@media (max-width: 480px) {
  .friend-row { flex-wrap: wrap; }
  .friend-rating { order: 1; }
  .friend-actions { order: 2; flex: 1 1 100%; }
}

/* --- genel efektler (public/js/ui/effects.js) -------------------------------- */

.fx-confetti-piece {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  animation: fx-confetti-fly var(--fx-duration, 1400ms) cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes fx-confetti-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.6);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1);
  }
}

.fx-shake {
  animation: fx-shake 0.45s ease;
}

@keyframes fx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

.fx-pop {
  animation: fx-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fx-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* NOT: eski SVG avatarlarin joker "dovus" koreografisi (effects.js >
   launchProjectile / comicBurst + .fx-projectile / .fx-comic-burst)
   kaldirildi - maç ekrani artik canvas arena (bkz. docs/ANIMATIONS.md). */

/* effects.js > showToast() - konteynerin (ör. .choices-wrap) position:relative
   olmasi gerekir. --fx-stack, ayni anda birden fazla toast varsa dikeyde
   istiflemek icin JS tarafindan set edilir. */
.fx-toast {
  position: absolute;
  left: 50%;
  top: calc(-6px - (var(--fx-stack, 0) * 38px));
  transform: translate(-50%, -100%);
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 18px var(--shadow);
  z-index: 20;
  pointer-events: none;
  animation: fx-toast-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.fx-toast.fx-toast-out {
  animation: fx-toast-out 0.3s ease forwards;
}

@keyframes fx-toast-in {
  from { opacity: 0; transform: translate(-50%, -60%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

@keyframes fx-toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -130%) scale(0.9); }
}

/* --- mac sonu basligi (kazandin/kaybettin/berabere) -------------------------- */

#end-title.result-win {
  animation: title-win-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#end-title.result-lose {
  animation: title-lose-in 0.5s ease;
}

#end-title.result-draw {
  animation: title-draw-in 0.4s ease;
}

@keyframes title-win-in {
  0% { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes title-lose-in {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Temel anticheat caydiricilari (bkz. public/js/ui/antiCheat.js, docs/ANTICHEAT.md). */
.no-capture,
.no-capture * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.capture-shield {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
@media print {
  #screen-match {
    display: none !important;
  }
}

/* Yasal sayfalar + altbilgi (bkz. src/legal/*.html, docs/LEGAL.md). */
.site-footer {
  margin-top: 32px;
  padding: 16px 0 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer a:hover {
  color: var(--accent);
}
.site-footer span {
  margin: 0 6px;
}
.auth-legal {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.auth-legal a {
  color: var(--accent);
}

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  line-height: 1.65;
  color: var(--text);
}
.legal-page h1 {
  margin: 8px 0 4px;
}
.legal-page h2 {
  margin: 32px 0 8px;
  font-size: 19px;
}
.legal-page a {
  color: var(--accent);
}
.legal-back {
  text-decoration: none;
}
.legal-updated {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
}
.legal-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 12px 0 8px;
}
.legal-summary ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.legal-draft {
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
  border: 2px solid var(--bad);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 8px 0 16px;
  font-size: 14px;
}
.legal-missing {
  background: color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--text);
  padding: 0 4px;
  border-radius: 4px;
}
.legal-table-wrap {
  overflow-x: auto;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.legal-table th {
  color: var(--muted);
  font-weight: 600;
}
.legal-foot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.legal-page code {
  font-size: 13px;
}

/* Hesap silme bolumu (profil ekrani, bkz. docs/LEGAL.md). */
.profile-danger {
  margin-top: 32px;
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
  border-radius: 12px;
  padding: 4px 16px;
}
.profile-danger > summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--bad);
  font-weight: 600;
}
.profile-danger .auth-form {
  padding-bottom: 12px;
}
.btn-danger {
  background: var(--bad);
  border-color: var(--bad);
}
.field-note {
  color: var(--muted);
  font-weight: normal;
  font-size: 12px;
}

/* Kullanici adi secme/degistirme (bkz. main.js > maybePromptUsername). */
.profile-settings {
  border-color: var(--border);
}
.profile-settings > summary {
  color: var(--text);
}
.status.success {
  color: var(--good);
}

.username-rules {
  margin: -4px 0 8px;
  font-size: 12px;
  color: var(--muted);
}

/* "Insan mi?" sorusunun stilleri CSS dosyasinda DEGIL: her olusturulusta rastgele class adlariyla
   JS tarafindan enjekte edilir (bkz. public/js/ui/challengeUI.js). */

/* Hesap guvenligi (profil, bkz. ui/securityUI.js) + "Sifremi unuttum" baglantisi. */
.sec-body {
  padding-bottom: 12px;
}
.sec-row {
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
}
.sec-row:last-of-type {
  border-bottom: 0;
}
.sec-row h4 {
  margin: 4px 0 6px;
}
.sec-row form {
  margin-top: 8px;
}
#forgot-link,
#forgot-back {
  margin-top: 8px;
  align-self: flex-start;
}

/* .auth-switch: giris modalindaki "Hesabin yok mu? Kayit ol" satiri. */
.auth-switch {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.auth-switch a {
  color: var(--accent);
}

/* ===== Kayit sayfasi (public/signup.html) - bolunmus ekran: sol marka paneli + sag form =====
   Tasarim kararlari (kullanici, 2026-09-21): bolunmus ekran + SADE/duz (golgesiz, gradyansiz) + cok silik
   matematik dokusu. Yalniz bu sayfada (body.signup-page) gecerli; giris modalinin form stillerine dokunmaz. */
.signup-page {
  --signup-panel: color-mix(in srgb, var(--accent) 9%, var(--bg));
}
.signup-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.signup-brand {
  display: none; /* dar ekranda yok (form on planda); genis ekranda asagida acilir */
}
.signup-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 24px 40px;
  background: var(--card); /* girdiler (--bg) beyaz zeminde net ayrissin */
}
.signup-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  font-size: 14px;
  color: var(--muted);
}
.signup-topbar .signup-logo {
  color: var(--text);
}
.signup-topbar .signup-topbar-link a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.signup-topbar .signup-topbar-link a:hover {
  text-decoration: underline;
}
.signup-logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.signup-card {
  width: 100%;
  max-width: 400px;
  margin: 12px auto 0;
}
.signup-card h1 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.signup-sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
}
.signup-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 10px;
}
.signup-card .google-btn {
  height: 48px;
  padding: 0;
  margin-bottom: 0;
  border-radius: 10px;
  font-size: 15px;
}
.signup-card .google-divider {
  margin: 20px 0 16px;
}

/* alanlar */
.signup-card .sf-block {
  margin-bottom: 18px;
}
.signup-card label.field {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.signup-card .sf-block > input,
.signup-card .pw-wrap input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px; /* iOS odaklanma yakinlastirmasi olmasin */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.signup-card .sf-block > input::placeholder,
.signup-card .pw-wrap input::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.signup-card .sf-block > input:focus,
.signup-card .pw-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.signup-card .sf-block:has(.status.error:not(:empty)) > input,
.signup-card .sf-block:has(.status.error:not(:empty)) .pw-wrap input {
  border-color: var(--bad);
}
.signup-card .typo-fix {
  padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.signup-card .sf-help {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.signup-card .sf-help.ok {
  color: var(--good);
}
.signup-card .sf-status {
  margin: 6px 0 0;
  min-height: 0;
  font-size: 13px;
  font-weight: 600;
}
.signup-card .sf-status:empty {
  display: none;
}
.pw-wrap {
  position: relative;
}
.pw-wrap input {
  padding-right: 76px !important;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 10px;
  background: none;
  border-radius: 8px;
  color: var(--accent);
}
.pw-toggle:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pw-code {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.pw-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 8px;
}
.pw-meter[data-level="0"] {
  display: none;
}
.pw-meter i {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition: background-color 0.2s ease;
}
.pw-meter[data-level="1"] i:nth-child(-n + 1) { background: var(--bad); }
.pw-meter[data-level="2"] i:nth-child(-n + 2) { background: var(--gold); }
.pw-meter[data-level="3"] i:nth-child(-n + 3) { background: var(--good); }
.pw-meter[data-level="4"] i:nth-child(-n + 4) { background: var(--good); }

/* hata kutusu + gonder dugmesi */
.signup-card #signup-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  border-radius: 10px;
}
.signup-card #signup-error:empty {
  display: none;
}
.signup-submit {
  height: 50px;
  padding: 0;
  margin-top: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
}
.signup-submit.loading {
  pointer-events: none;
  opacity: 0.85;
}
.signup-submit.loading .btn-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: result-spin 0.7s linear infinite;
}
.signup-card .auth-legal {
  margin-top: 18px;
  text-align: left;
}

/* "E-postani kontrol et" */
.signup-sent {
  text-align: left;
}
.signup-sent .sent-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.signup-sent .sent-icon svg {
  width: 28px;
  height: 28px;
}
.signup-sent h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.signup-sent .sent-text {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.signup-sent .sent-steps {
  margin: 0 0 18px;
  padding: 14px 16px 14px 34px;
  font-size: 14px;
  line-height: 1.7;
  background: var(--card-2);
  border-radius: 12px;
}
.signup-sent .sent-steps b {
  color: var(--text);
}

/* ===== genis ekran: bolunmus duzen ===== */
@media (min-width: 900px) {
  .signup-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  .signup-brand {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 48px 40px;
    overflow: hidden;
    background: var(--signup-panel);
    border-right: 1px solid var(--border);
  }
  .signup-logo--mobile {
    display: none;
  }
  .signup-topbar {
    justify-content: flex-end;
    padding: 28px 8px 0;
  }
  .signup-main {
    padding: 0 48px 56px;
  }
  .signup-card {
    margin-top: auto; /* dikeyde ortala (uzarsa yukari dogru buyur, kayar) */
    margin-bottom: auto;
    padding-top: 8px;
  }
  .signup-brand-body {
    position: relative;
    z-index: 1;
    max-width: 440px;
  }
  .signup-brand .signup-logo {
    position: relative;
    z-index: 1;
  }
  .signup-brand h2 {
    margin: 0 0 12px;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  .signup-brand h2 span {
    color: var(--accent);
  }
  .signup-lead {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted);
  }
  .signup-perks {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 14px;
  }
  .signup-perks li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .perk-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .perk-icon svg {
    width: 20px;
    height: 20px;
  }
  .signup-perks b {
    display: block;
    font-size: 15px;
  }
  .signup-perks div span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
  }
  .signup-glyphs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
  }
  .signup-glyphs span {
    position: absolute;
    font: 700 100px Georgia, "Times New Roman", serif;
    color: var(--accent);
    opacity: 0.09;
    line-height: 1;
  }

  /* ornek mac karti (sabit illustrasyon) */
  .signup-demo {
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
  }
  .demo-players {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
  }
  .demo-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .demo-player i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    background: var(--accent);
  }
  .demo-player--right i {
    background: var(--oracle);
  }
  .demo-player em {
    font-style: normal;
    color: var(--muted);
    font-size: 12px;
  }
  .demo-score {
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .demo-q {
    margin: 16px 0 14px;
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .demo-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .demo-choices span {
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .demo-choices span.ok {
    color: var(--good);
    border-color: var(--good);
    background: color-mix(in srgb, var(--good) 12%, transparent);
  }
  .demo-timer {
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
  }
  .demo-timer span {
    display: block;
    width: 62%;
    height: 100%;
    background: var(--accent);
  }
}
@media (min-width: 900px) and (max-height: 760px) {
  .signup-demo {
    display: none;
  }
}

/* E-postadaki baglantilarin actigi sonuc ekranlari (activate / verify-email / reset-password). */
.result-card {
  max-width: 460px;
  margin: 40px auto 56px;
  padding: 36px 30px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
}
.result-card[hidden] {
  display: none;
}
.result-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.result-icon svg {
  width: 32px;
  height: 32px;
}
.result-icon--ok {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
}
.result-icon--info {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.result-icon--error {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: var(--bad);
}
.result-icon--wait::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  animation: result-spin 0.8s linear infinite;
}
@keyframes result-spin {
  to {
    transform: rotate(360deg);
  }
}
.result-card h1 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.25;
}
.result-text {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
}
.result-text b {
  color: var(--text);
}
.result-facts {
  margin: 0 0 18px;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.result-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.result-facts dt {
  color: var(--muted);
}
.result-facts dd {
  margin: 0;
  font-weight: 700;
  word-break: break-all;
  text-align: right;
}
.result-warn {
  margin: 0 0 18px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  color: var(--text);
  background: color-mix(in srgb, #f5a524 14%, transparent);
  border: 1px solid color-mix(in srgb, #f5a524 40%, transparent);
  border-radius: 10px;
}
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.result-actions .link-btn {
  text-align: center;
  text-decoration: none;
}
.result-actions .btn-primary {
  width: 100%;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.result-small {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.result-card .auth-form {
  text-align: left;
}
.result-card .status.error:empty {
  display: none;
}

/* --- Admin "Sağlık" sekmesi (admin.html > #admin-screen-health, js/admin/
   healthView.js). Mevcut .stats-row/.stat kutucuklari yeniden kullanilir;
   burada sadece renk durumu (ok/warn/bad) ve iki sutunlu alt bolum var.
   Duz/minimal: golge yok, sadece kenarlik + nokta rengi. */
.health-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 760px) {
  .health-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.health-tile .stat-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  color: var(--text);
}

.health-tile.ok .stat-value { color: var(--success, #2e9e5b); }
.health-tile.warn .stat-value { color: var(--warning, #d98e04); }
.health-tile.bad .stat-value { color: var(--danger, #d9534f); }
.health-tile.bad { border-color: var(--danger, #d9534f); }

.health-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.health-dot.ok { background: var(--success, #2e9e5b); }
.health-dot.warn { background: var(--warning, #d98e04); }
.health-dot.bad { background: var(--danger, #d9534f); }
.health-dot.info { background: var(--muted); }

.health-cols {
  display: grid;
  /* minmax(0,…): sağdaki geniş dosya tablosu sol sütunu ezmesin (iki sütun eşit kalır). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.health-section {
  min-width: 0;
}

@media (max-width: 900px) {
  .health-cols {
    grid-template-columns: 1fr;
  }
}

.health-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
}

.health-h .mode-badge {
  font-weight: 500;
}

.health-backup-btn {
  margin-left: auto;
}

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

.health-check {
  /* nokta + başlık üstte, açıklama ALTTA (uzun açıklamalar dar sütunda harf harf kırılmasın) */
  display: grid;
  grid-template-columns: 9px 1fr;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.health-check.bad { border-color: var(--danger, #d9534f); }

.health-check-detail {
  grid-column: 2;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.health-last {
  display: flex;
  align-items: center;
  gap: 8px;
}

.health-backups td .muted {
  color: var(--muted);
  font-size: 12px;
}

.health-dl {
  padding: 2px 10px;
  font-size: 12px;
}

.health-foot {
  margin-top: 12px;
  font-size: 12px;
}

/* --- mac sonu: kazanma/kaybetme SAHNESI (kullanici istegi 2026-09-22: "kazanan
   kupa alsın... görsel olarak iyi olabilecek bir senaryo") ------------------- */

.end-icon {
  font-size: 56px;
  line-height: 1;
  text-align: center;
  margin: 4px 0 6px;
}

/* Kazanma ekranindaki iki karakter (bkz. arena/endScene.js > drawEndCharacters) -
   #end-icon'un 🏆 emojisi YERINE gecer, ayni giris animasyonunu paylasir. */
.end-characters {
  display: block;
  width: 260px;
  height: 150px;
  margin: 0 auto 6px;
  animation: end-icon-win-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.end-icon--win {
  animation: end-icon-win-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 14px color-mix(in srgb, #ffcf4d 65%, transparent));
}

@keyframes end-icon-win-in {
  0% { opacity: 0; transform: scale(0.3) rotate(-25deg) translateY(10px); }
  55% { opacity: 1; transform: scale(1.25) rotate(8deg) translateY(-6px); }
  75% { transform: scale(0.95) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
}

.end-icon--lose {
  animation: end-icon-lose-in 0.6s ease;
  opacity: 0.85;
}

@keyframes end-icon-lose-in {
  0% { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  60% { opacity: 0.85; transform: rotate(20deg) scale(1.05); }
  100% { opacity: 0.85; transform: rotate(0deg) scale(1); }
}

.end-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}

.end-actions button {
  flex: 1 1 140px;
  max-width: 220px;
}

.end-action-hot {
  animation: end-action-pulse 1s ease-in-out infinite;
}

@keyframes end-action-pulse {
  50% { transform: scale(1.04); }
}

.end-home-btn {
  display: block;
  margin: 10px auto 0;
}

.end-encourage {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: -2px 0 10px;
}

/* Kombo gorseli artik DOM'da degil - canvas'ta elin ustunde surekli bir alev
   (bkz. arena/quizScene.js > setComboTier/drawHandFlame, arena/effects.js >
   drawHandFlame, kullanici karari 2026-09-22: "rozet görünmesin, sadece
   elinde alev efekti olsun"). Buradaki eski DOM halkasi/rozeti kaldirildi. */

/* --- sayi dogrusu (visual.type === "number-line") --------------------------- */
.qv-nl-tick { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.qv-nl-num { fill: var(--text); font-size: 20px; font-weight: 700; text-anchor: middle; }
.qv-nl-hop { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; }
.qv-nl-arrow { fill: var(--accent); }
.qv-nl-hoplabel { fill: var(--accent); font-size: 22px; font-weight: 800; text-anchor: middle; }
.qv-nl-dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.qv-nl-unknown { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-dasharray: 4 3; }
.qv-nl-point { fill: var(--accent); font-size: 22px; font-weight: 800; text-anchor: middle; }