/*
 * tema.css — v1.8 arayüzü: Gece (varsayılan) ve Gündüz temaları
 *
 * style.css'ten SONRA yüklenir; renk değişkenlerini temaya göre yeniden
 * tanımlar ve yeni parçaları (aile bölümleri, oyuncu seviyesi, alt sekme
 * çubuğu, yıldızlar) çizer. Tema <html data-tema="gece|gunduz"> ile seçilir
 * (js/tema.js).
 *
 * Gece  — tasarım turu 2: gece mavisi zemin, dört renk ailesi, sade kartlar.
 * Gündüz — tasarım turu 1: açık zemin, her kategori kendi renginde dolu kart.
 *          Kart yazısının rengi (--kat-yazi) zemine göre hesaplanır: açık
 *          renkli kartlarda koyu yazı (turu 1'in kontrast eleştirisi).
 */

/* ------------------------------------------------------------- değişkenler */

:root {
  color-scheme: dark;
  --zemin: #12142B;
  --zemin-2: #171A36;
  --panel: #1C1F3D;
  --panel-2: #252955;
  --cizgi: #2C3060;
  --metin: #F2F3FF;
  --metin-soluk: #A3A8D6;
  --altin: #FFD23F;
  --altin-koyu: #E0B320;
  --vurgu-metin: #FFD23F;      /* sarı yazı; gündüzde okunur koyu kehribar */
  --cta-metin: #12142B;        /* sarı düğme üstündeki yazı */
  --basari: #34D399;
  --hata: #FF6B6B;
  --uyari: #FFC14D;
  --bilgi: #4DA3FF;
  --ustbar-zemin: rgba(18, 20, 43, .92);
  --tahta-cerceve: #2C3060;
  --golge: 0 10px 30px rgba(0, 0, 0, .45);
  --yuvarlak: 18px;
  --yazi-govde: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --yazi-baslik: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

html[data-tema="gunduz"] {
  color-scheme: light;
  --zemin: #F3F4FF;
  --zemin-2: #E9EBFB;
  --panel: #FFFFFF;
  --panel-2: #EEF0FF;
  --cizgi: #DADDF3;
  --metin: #1D1A3A;
  --metin-soluk: #5B5880;
  --altin: #FFC93C;
  --altin-koyu: #F0A500;
  --vurgu-metin: #A84B00;
  --cta-metin: #1D1A3A;
  --basari: #15803D;
  --hata: #DC2626;
  --uyari: #A84B00;
  --bilgi: #2563EB;
  --ustbar-zemin: rgba(243, 244, 255, .92);
  --tahta-cerceve: #1D1A3A;
  --golge: 0 8px 22px rgba(46, 42, 110, .14);
}

/* ------------------------------------------------------------------ temel */

body {
  background: var(--zemin);
  font-family: var(--yazi-govde);
  font-weight: 500;
}
h1, h2, h3, .marka-ad, .kart-ad, .seviye-baslik, .sonuc-baslik, .karsilama-baslik,
.giris-baslik, .oda-baslik, .oyuncu-ad, .devam-baslik, .sonuc-puan {
  font-family: var(--yazi-baslik);
  font-weight: 800;
  letter-spacing: 0;
}
.ustbar { background: var(--ustbar-zemin); }
.marka:hover { background: color-mix(in srgb, var(--metin) 6%, transparent); }

/* Sarı/altın YAZI gündüz zemininde okunmaz: koyu kehribara döner */
a, .seviye-sag, .kusursuz-izi, .kart-puan, .sonuc-mujde, .joker-hak, .skor-sira,
.meydan-hedef strong, .oda-kod, .geri-sayim-rakam, .geri-sayim-ikon, .karsilama-ikon,
.gunluk-ikon, .marka-ikon {
  color: var(--vurgu-metin);
}
.kusursuz-izi { color: var(--vurgu-metin) !important; }

/* Düğmeler: yuvarlak, kalın, en az 44 px dokunma alanı */
.birincil-dugme, .ikincil-dugme, .tehlike-dugme {
  min-height: 44px;
  border-radius: 14px;
  font-weight: 800;
}
.birincil-dugme { background: var(--panel-2); color: var(--metin); }
.birincil-dugme.vurgulu { color: var(--cta-metin); }
.birincil-dugme.vurgulu:hover { filter: brightness(1.05); }
.ikincil-dugme { color: var(--metin); }
.ikon-dugme { color: var(--metin); display: inline-grid; place-items: center; }
.dil-secici button.secili { color: var(--cta-metin); }
.sekme.secili { border-color: var(--altin); }

/* ---------------------------------------------------- oyuncu seviyesi kartı */

.oyuncu-kart {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.oyuncu-avatar {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  background: var(--altin);
  color: var(--cta-metin);
  display: grid; place-items: center;
  font-size: 28px; line-height: 1;
}
.oyuncu-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.oyuncu-ust { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.oyuncu-ad { font-size: 20px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oyuncu-seviye { font-weight: 800; font-size: 13px; color: var(--vurgu-metin); white-space: nowrap; }
.oyuncu-orta small { color: var(--metin-soluk); font-size: 12px; }

.xp-cubuk {
  display: flex;
  height: 8px;
  border-radius: 999px;
  background: var(--cizgi);
  overflow: hidden;
}
.xp-cubuk > span { display: block; height: 100%; background: var(--altin); }
.xp-cubuk > span.kazanilan { background: color-mix(in srgb, var(--altin) 45%, #FFFFFF); }

/* ---------------------------------------------------- kaldığın yerden kartı */

.devam-kart {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--yuvarlak);
  border: 1px solid var(--cizgi);
  background: var(--panel);
  color: var(--metin);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.devam-metin { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.devam-metin small { font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--metin-soluk); text-transform: uppercase; }
.devam-baslik { font-size: 20px; line-height: 1.1; }
.devam-ilerleme { font-size: 13px; color: var(--metin-soluk); }
.devam-oyna {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  background: var(--altin);
  color: var(--cta-metin);
  display: grid; place-items: center;
}
.devam-kart:hover { border-color: var(--altin); }

/* ------------------------------------------------- aile bölümleri ve kartlar */

.aile-bolum { margin-top: 18px; }
.aile-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--yazi-govde);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
.aile-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--aile-renk); flex: none; }

.kategori-izgara { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

/* Gece: sade kart, renk yalnızca ailenin karesinde */
.kategori-kart {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 62px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--metin);
}
.kategori-kart::after { display: none; }
.kategori-kart:hover { border-color: var(--aile-renk); transform: translateY(-1px); box-shadow: none; }
.kart-ikon {
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: var(--aile-renk);
  color: #12142B;
  display: grid; place-items: center;
  font-size: 22px;
}
.kart-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.kart-ad { font-size: 15.5px; line-height: 1.15; }
.kart-ozet { display: none; }
.kart-seviyeler { margin-top: 2px; gap: 4px; }
.seviye-nokta { width: 8px; height: 8px; }
.seviye-nokta.dolu { background: var(--aile-renk); }
.seviye-nokta.acik { background: color-mix(in srgb, var(--aile-renk) 40%, var(--cizgi)); }
.kart-puan { margin: 0; font-weight: 800; white-space: nowrap; align-self: flex-start; }

/* Gündüz: her kategori kendi renginde dolu kart (tur 1) */
html[data-tema="gunduz"] .kategori-kart {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 126px;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: var(--kat-zemin, var(--kat-renk));
  color: var(--kat-yazi, #FFFFFF);
}
html[data-tema="gunduz"] .kategori-kart:hover { box-shadow: var(--golge); }
html[data-tema="gunduz"] .kart-ikon { width: auto; height: auto; background: none; color: inherit; font-size: 34px; line-height: 1; }
html[data-tema="gunduz"] .kart-ad { font-size: 17px; }
html[data-tema="gunduz"] .kart-ozet { display: block; color: inherit; opacity: .92; font-size: 13px; font-weight: 700; }
html[data-tema="gunduz"] .seviye-nokta { background: color-mix(in srgb, currentColor 30%, transparent); }
html[data-tema="gunduz"] .seviye-nokta.dolu { background: currentColor; }
html[data-tema="gunduz"] .seviye-nokta.acik { background: color-mix(in srgb, currentColor 60%, transparent); }
html[data-tema="gunduz"] .kart-puan { color: inherit; align-self: auto; }
html[data-tema="gunduz"] .kategori-izgara { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

/* --------------------------------------------------------- günün turu kartı */

.gunluk-kart { border-color: var(--bilgi); background: var(--panel); }
html[data-tema="gunduz"] .gunluk-kart { background: #FFB300; border: 0; color: #1D1A3A; }
html[data-tema="gunduz"] .gunluk-kart .gunluk-ikon,
html[data-tema="gunduz"] .gunluk-kart small { color: #1D1A3A; }
html[data-tema="gunduz"] .gunluk-kart .birincil-dugme { background: #FFFFFF; color: #8A4B00; border-color: #FFFFFF; }
html[data-tema="gunduz"] .gunluk-kart .ikincil-dugme { color: #1D1A3A; border-color: rgba(29, 26, 58, .35); }

/* ------------------------------------------------------------ seviye ekranı */

.seviye-bas { background: var(--panel); }
.seviye-no { color: var(--kat-yazi, #12142B); }
html[data-tema="gunduz"] .seviye-bas { background: var(--kat-zemin, var(--kat-renk)); color: var(--kat-yazi); border: 0; }
html[data-tema="gunduz"] .seviye-bas .seviye-ikon,
html[data-tema="gunduz"] .seviye-bas .seviye-aciklama,
html[data-tema="gunduz"] .seviye-bas .geri-dugme { color: inherit; }
html[data-tema="gunduz"] .seviye-bas .seviye-kural { color: var(--metin-soluk); }

/* -------------------------------------------------------------- oyun ekranı */

.panel-bas { background: var(--panel); }
.sure-cubuk { height: 14px; background: var(--zemin-2); }
html[data-tema="gunduz"] .sure-dolgu { background: #22C55E; }
html[data-tema="gunduz"] .sure-dolgu.kritik { background: #DC2626; }
html[data-tema="gunduz"] .sure-dolgu.donmus { background: #0EA5E9; }

html[data-tema="gunduz"] .panel-bas { background: var(--kat-zemin, var(--kat-renk)); color: var(--kat-yazi); border: 0; }
html[data-tema="gunduz"] .panel-bas .panel-ikon,
html[data-tema="gunduz"] .panel-bas small { color: inherit; opacity: .9; }
html[data-tema="gunduz"] .panel-bas .cik-dugme { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }

.ist-kutu { border-radius: 14px; }
.ist-kutu strong { font-size: 17px; font-weight: 800; }
html[data-tema="gunduz"] .ist-kutu { border: 0; color: #FFFFFF; }
html[data-tema="gunduz"] .ist-kutu small { color: inherit; opacity: .92; font-weight: 700; }
html[data-tema="gunduz"] .ist-kutu:nth-child(1) { background: #2563EB; }
html[data-tema="gunduz"] .ist-kutu:nth-child(2) { background: #15803D; }
html[data-tema="gunduz"] .ist-kutu:nth-child(3) { background: #C2410C; }
html[data-tema="gunduz"] .ist-kutu:nth-child(4) { background: #B91C1C; }

.mesaj-kutu { border-radius: 14px; font-weight: 700; }
.joker-dugme { border-radius: 14px; min-height: 48px; }
.joker-ad { font-weight: 800; }
html[data-tema="gunduz"] .joker-dugme { border: 0; color: #FFFFFF; }
html[data-tema="gunduz"] .joker-dugme:nth-child(1) { background: #A84B00; }
html[data-tema="gunduz"] .joker-dugme:nth-child(2) { background: #7E22CE; }
html[data-tema="gunduz"] .joker-dugme:nth-child(3) { background: #0E7490; }
html[data-tema="gunduz"] .joker-dugme:nth-child(4) { background: #475569; }
html[data-tema="gunduz"] .joker-dugme:hover:not(:disabled) { filter: brightness(1.08); }
html[data-tema="gunduz"] .joker-hak { background: rgba(255, 255, 255, .25); color: #FFFFFF; }
.tema-ipucu { border-radius: 0 14px 14px 0; }

/* ------------------------------------------------------------- sonuç ekranı */

.sonuc { background: var(--panel); }
.sonuc-yildizlar { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.sonuc-yildizlar svg { width: 46px; height: 46px; }
.sonuc-yildizlar svg:nth-child(2) { width: 60px; height: 60px; }
.yildiz-dolu { fill: var(--altin); }
.yildiz-bos { fill: none; stroke: var(--cizgi); stroke-width: 1.6; }
.sonuc-puan { font-size: 46px; line-height: 1; color: var(--vurgu-metin); margin: 4px 0 10px; }
html[data-tema="gunduz"] .sonuc-puan {
  width: 132px; height: 132px; margin: 6px auto 12px;
  border-radius: 50%;
  background: #7C3AED; color: #FFFFFF;
  display: grid; place-items: center;
  font-size: 36px;
}
.soru-kareler { display: flex; justify-content: center; gap: 6px; margin: 0 0 16px; }
.soru-kareler span { width: 26px; height: 26px; border-radius: 8px; background: var(--cizgi); }
.soru-kareler .D { background: #22C55E; }
.soru-kareler .Y { background: #EF4444; }
.soru-kareler .S { background: #F97316; }
.soru-kareler .P { background: #94A3B8; }

.xp-kart {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin: 0 0 16px;
  border-radius: 14px; border: 1px solid var(--cizgi); background: var(--zemin-2);
  text-align: left;
}
.xp-rozet {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--altin); color: var(--cta-metin);
  display: grid; place-items: center;
  font-family: var(--yazi-baslik); font-weight: 800; font-size: 18px;
}
.xp-orta { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xp-orta strong { font-size: 13.5px; }
.xp-kart.atladi { border-color: var(--altin); }

.sonuc-ana { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.sonuc-ana .birincil-dugme { width: 100%; min-height: 54px; font-size: 17px; }
.sonuc-kart { border-radius: 14px; }
.sonuc-kart strong { font-weight: 800; }
html[data-tema="gunduz"] .sonuc-kart { background: var(--panel-2); border: 0; }

/* ------------------------------------------------------------ alt sekmeler */

.alt-menu { display: none; }
.ustbar-sekme { display: inline-grid; }

@media (max-width: 900px) {
  body.altmenulu .alt-menu {
    display: grid;
    grid-template-columns: repeat(var(--sekme-sayi, 4), minmax(0, 1fr));
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 35;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border-top: 1px solid var(--cizgi);
  }
  body.altmenulu { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Telefonda profil ve skor alttaki sekmelerde; üst çubuk sadeleşir */
  body.altmenulu .ustbar-sekme { display: none; }
}
.alt-sekme {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px;
  border: 0; background: none; cursor: pointer;
  color: var(--metin-soluk);
  font: 800 11.5px var(--yazi-govde);
  position: relative;
}
.alt-ikon { width: 48px; height: 30px; border-radius: 999px; display: grid; place-items: center; }
.alt-sekme.secili { color: var(--vurgu-metin); }
.alt-sekme.secili .alt-ikon { background: color-mix(in srgb, var(--altin) 22%, transparent); }
.alt-sekme.girisli .alt-ikon::after {
  content: ''; position: absolute; top: 8px; margin-left: 22px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--basari);
  box-shadow: 0 0 0 2px var(--panel);
}

/* Görünüm seçimi (profil) */
.gorunum-secim { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.gorunum-secenek {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; min-height: 44px;
  border-radius: 12px; border: 2px solid var(--cizgi);
  background: var(--panel); color: var(--metin-soluk);
  font: 800 14px var(--yazi-govde); cursor: pointer;
}
.gorunum-secenek[aria-pressed="true"] { border-color: var(--altin); color: var(--metin); }

@media (max-width: 420px) {
  .oyuncu-avatar { width: 42px; height: 42px; font-size: 24px; }
  .oyuncu-ad { font-size: 18px; }
  html[data-tema="gunduz"] .kategori-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-tema="gunduz"] .kategori-kart { min-height: 116px; padding: 12px; }
  .kategori-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kategori-kart { padding: 9px 10px; gap: 9px; }
  .kart-ikon { width: 34px; height: 34px; font-size: 20px; }
  .kart-ad { font-size: 14px; }
  .kart-puan { display: none; }
}

/* Öğretmen paneli: sarı yazılar gündüzde okunur kehribara döner */
.ustbar .panel-etiket { color: var(--vurgu-metin); border-color: currentColor; }

/* Oda lobisi: başlatılmazsa kapanma süresi (v1.10) */
.lobi-sure { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 12px; font-weight: 800; color: var(--metin-soluk); }
.lobi-sure.kritik { color: var(--hata); }