/* ==================================================================
   YAZI TİPİ — JetBrains Mono (SIL OFL 1.1, ücretsiz)
   ------------------------------------------------------------------
   Oyun "Consolas"a bağlıydı; Consolas yalnız Windows'ta var. Mac,
   Linux ve Android'de Courier New'e düşüyordu ve teknik çizim
   görünümü bozuluyordu. Artık font oyunla birlikte geliyor:
   her yerde aynı. Türkçe (ğ ş ı İ ç ö ü) tam kapsanır.
   Lisans: assets/LICENSE-jetbrainsmono.txt
   ================================================================== */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* İNAT — teknik çizim estetiği: koyu lacivert kâğıt, tebeşir çizgiler */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --kagit: #0b1220;
  --kagit2: #111c30;
  --izgara: #1d2f52;
  --cizgi: #46689c;
  --tebesir: #e8f0ff;
  --sonuk: #7c8aa8;
  --pembe: #ff3d7f;
  --mavi: #6fe3ff;
  --sari: #ffd166;
  --yesil: #7be0a4;
}
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "JetBrains Mono", "Consolas", "SF Mono", "Menlo", monospace;
  background: #05080f;
  color: var(--tebesir);
  user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.gizli { display: none !important; }

#oyun { height: 100dvh; display: flex; flex-direction: column; }

/* ---------- HUD ---------- */
#hud {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #0e1829, #0a1120);
  border-bottom: 1px solid var(--izgara);
  font-size: 12px; letter-spacing: .4px;
  z-index: 5;
}
.hudSol { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
#bolumEtiket { color: var(--mavi); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#odaEtiket { color: var(--sonuk); }
.hudOrta { flex: 1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.yetRoz {
  border: 1px solid var(--izgara); border-radius: 5px;
  padding: 2px 7px; font-size: 11px; color: var(--sonuk);
  display: flex; gap: 5px; align-items: center; white-space: nowrap;
}
.yetRoz.acik { border-color: var(--mavi); color: var(--mavi); }
.yetRoz i { font-style: normal; opacity: .7; font-size: 10px; }
.hudSag { display: flex; gap: 10px; align-items: center; }
#olumSay { color: var(--pembe); font-weight: 700; }
#sureSay { color: var(--sonuk); }
#agirOlcer {
  width: 46px; height: 7px; border: 1px solid var(--izgara); border-radius: 4px;
  overflow: hidden; display: block;
}
#agirOlcer i { display: block; height: 100%; width: 100%; background: var(--mavi); transition: width .1s linear; }
.hudSag button {
  width: 28px; height: 26px; border: 1px solid var(--izgara); border-radius: 5px;
  font-size: 13px; background: #0e1829;
}
.hudSag button:hover { border-color: var(--cizgi); }

/* ---------- Sahne ---------- */
#sahne { position: relative; flex: 1; min-height: 0; background: #05080f; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Tasarımcı balonu */
#tasBalon {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  max-width: min(88%, 620px);
  background: rgba(12, 19, 34, .95);
  border: 1px solid var(--pembe); border-left-width: 3px; border-radius: 6px;
  padding: 8px 14px; z-index: 8;
  animation: balonGel .35s ease;
}
#tasBalon b { color: var(--pembe); font-size: 10px; letter-spacing: 2px; display: block; margin-bottom: 3px; }
#tasBalon p { font-size: 13.5px; line-height: 1.45; color: var(--tebesir); }
@keyframes balonGel { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Merhamet ipucu */
#ipucuSerit {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  max-width: min(92%, 700px);
  background: rgba(12, 19, 34, .93);
  border: 1px solid var(--mavi); border-radius: 6px;
  padding: 7px 14px; font-size: 12.5px; line-height: 1.5; color: var(--mavi);
  z-index: 7; text-align: center;
}
#ipucuSerit::before { content: '💡 '; }

/* Merhamet teklifi */
#merhametKutu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92%, 520px);
  background: rgba(10, 17, 30, .97);
  border: 1px solid var(--mavi); border-radius: 10px;
  padding: 20px; z-index: 12; text-align: center;
}
#merhametKutu p { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }

/* Ölüm perdesi */
#olumPerde {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 61, 127, .07);
  pointer-events: none;
}
#olumPerde span {
  font-size: 68px; font-weight: 900; color: rgba(255, 61, 127, .5);
  letter-spacing: 6px;
  animation: rNabiz .7s ease-in-out infinite;
}
@keyframes rNabiz { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }

/* ---------- Dokunmatik ---------- */
#dokunmatik {
  position: absolute; inset: auto 0 0 0; height: 130px;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 10px 14px 16px; pointer-events: none; z-index: 9;
}
.dokSol, .dokSag { display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; }
#dokunmatik button {
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid rgba(111, 227, 255, .45);
  background: rgba(12, 19, 34, .55);
  color: var(--mavi); font-size: 20px; touch-action: none;
}
#dokunmatik button.buyuk { width: 72px; height: 72px; font-size: 25px; border-color: rgba(255,255,255,.5); color: #fff; }
#dokunmatik button.kucuk { width: 44px; height: 44px; font-size: 15px; border-color: rgba(255,61,127,.5); color: var(--pembe); }
#dokunmatik button:active { background: rgba(111, 227, 255, .25); }

/* ---------- Kaplamalar ---------- */
.kaplama {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 15, .82);
  backdrop-filter: blur(2px);
  padding: 16px;
}
#titleView, #haritaView, #finalView {
  background:
    linear-gradient(rgba(29,47,82,.5) 1px, transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg, rgba(29,47,82,.5) 1px, transparent 1px) 0 0/32px 100%,
    #0b1220;
}
.panel {
  background: rgba(11, 18, 32, .96);
  border: 1px solid var(--cizgi); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(70,104,156,.2), 0 20px 60px rgba(0,0,0,.6);
  padding: 22px 26px;
  max-width: 560px; width: 100%;
  max-height: 94%; overflow-y: auto;
  text-align: center;
}
.panel.genis { max-width: 780px; }
.panel h1, .panel h2 { letter-spacing: 3px; }
.panel h2 { font-size: 20px; margin-bottom: 6px; color: var(--mavi); }
.panel h3 { font-size: 16px; margin-bottom: 10px; color: var(--mavi); }
.sub { color: var(--sonuk); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.kucukNot { color: var(--sonuk); font-size: 11px; margin-top: 14px; line-height: 1.6; }

.titlePanel .logo {
  font-size: 58px; letter-spacing: 14px; font-weight: 900;
  color: var(--tebesir); text-shadow: 0 0 26px rgba(111,227,255,.35);
  margin: 6px 0 0;
}
.titlePanel .altBaslik {
  color: var(--pembe); letter-spacing: 5px; font-size: 12px; margin-bottom: 16px;
}
#titleCv { display: block; margin: 0 auto; }

.menuSutun { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.btnSira { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
button.birincil, button.hayalet, .menuSutun button {
  border: 1px solid var(--cizgi); border-radius: 7px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 700; letter-spacing: 1px;
  background: #101c30; color: var(--tebesir);
  transition: border-color .15s, background .15s, transform .05s;
}
button.birincil { background: var(--mavi); color: #06121c; border-color: var(--mavi); }
button.birincil:hover { background: #9beeff; }
button.hayalet { background: transparent; color: var(--sonuk); border-color: var(--izgara); }
button.hayalet:hover { color: var(--tebesir); border-color: var(--cizgi); }
.menuSutun button:hover { border-color: var(--mavi); }
button:active { transform: translateY(1px); }
button.buyuk { padding: 13px 20px; font-size: 15px; }

/* ---------- Bölüm haritası ---------- */
#bolumListe { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bolKart {
  border: 1px solid var(--izgara); border-radius: 8px;
  padding: 10px 12px; background: #0d1728;
  display: flex; gap: 12px; align-items: center;
}
.bolKart.acik { cursor: pointer; }
.bolKart.acik:hover { border-color: var(--mavi); background: #101f36; }
.bolKart.kilit { opacity: .42; }
.bolKart.bitti { border-color: var(--yesil); }
.bolIkon { font-size: 22px; width: 30px; text-align: center; }
.bolBilgi { flex: 1; min-width: 0; }
.bolAd { font-weight: 700; font-size: 14px; letter-spacing: 1px; }
.bolAlt { color: var(--sonuk); font-size: 11.5px; margin-top: 2px; line-height: 1.45; }
.bolOda { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.odaNok {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid var(--izgara); font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sonuk); background: #0a1424;
}
.odaNok.bitti { background: var(--yesil); border-color: var(--yesil); color: #05221a; }
.odaNok.gecilen { background: #4a3a1a; border-color: var(--sari); color: var(--sari); }
.odaNok.simdi { border-color: var(--mavi); color: var(--mavi); box-shadow: 0 0 8px rgba(111,227,255,.5); }
.odaNok.patron { border-radius: 50%; border-color: var(--pembe); color: var(--pembe); }
.bolSag { text-align: right; font-size: 11px; color: var(--sonuk); white-space: nowrap; }

/* ---------- Diyalog ---------- */
#oykuView { background: rgba(5, 8, 15, .88); align-items: flex-end; padding-bottom: 40px; }
.oykuKart {
  width: min(96%, 840px);
  background: rgba(11, 18, 32, .97);
  border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 16px 18px;
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  align-items: start;
}
#portre { border: 1px solid var(--izgara); border-radius: 8px; background: #0a1424; }
.oykuIc { min-height: 96px; text-align: left; }
.oykuIc b { display: block; font-size: 12px; letter-spacing: 3px; margin-bottom: 8px; }
.oykuIc p { font-size: 15px; line-height: 1.65; color: var(--tebesir); min-height: 52px; }
.oykuKart .btnSira { grid-column: 1 / -1; margin-top: 6px; justify-content: flex-end; }

/* ---------- Ayarlar ---------- */
.kaydirici, .secim {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 2px; font-size: 13px; color: var(--tebesir);
  border-bottom: 1px solid rgba(29,47,82,.6);
}
.kaydirici input[type=range] { width: 170px; accent-color: var(--mavi); }
.secim { justify-content: flex-start; }
.secim input { accent-color: var(--mavi); width: 16px; height: 16px; }
.kaydirici select {
  width: 170px; padding: 5px 8px; font: inherit; font-size: 13px;
  color: var(--tebesir); background: rgba(12,19,34,.9);
  border: 1px solid rgba(70,104,156,.5); border-radius: 4px;
}
#kaliteNot:empty { display: none; }
#kaliteNot { margin: 6px 2px 0; font-size: 12px; text-align: left; }

/* ---------- Final / istatistik ---------- */
.istTablo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 14px 0; text-align: left; }
.istSatir { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--izgara); padding: 5px 0; font-size: 13px; }
.istSatir b { color: var(--mavi); }

/* ---------- Sözleşme metni ---------- */
#modalGovde { text-align: left; font-size: 13px; line-height: 1.7; color: var(--tebesir); }
#modalGovde ol, #modalGovde ul { padding-left: 20px; margin: 8px 0; }
#modalGovde li { margin-bottom: 7px; }
#modalGovde .vurgu { color: var(--mavi); font-weight: 700; }
#modalGovde kbd {
  border: 1px solid var(--cizgi); border-radius: 4px; padding: 1px 6px;
  background: #101c30; font-size: 12px; color: var(--tebesir);
}
#modalGovde table { width: 100%; border-collapse: collapse; margin: 8px 0; }
#modalGovde td { padding: 4px 6px; border-bottom: 1px solid rgba(29,47,82,.6); vertical-align: top; }
#modalGovde td:first-child { white-space: nowrap; color: var(--mavi); width: 1%; }

/* ---------- Kayan çubuk ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--izgara) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--izgara); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--cizgi); }

/* ---------- Dar ekran ---------- */
@media (max-width: 720px) {
  #hud { font-size: 11px; gap: 8px; padding: 5px 8px; }
  .hudOrta { display: none; }
  .titlePanel .logo { font-size: 44px; letter-spacing: 9px; }
  .oykuKart { grid-template-columns: 68px 1fr; gap: 11px; padding: 12px; }
  #portre { width: 68px; height: 68px; }
  .oykuIc { min-height: 68px; }
  .oykuIc p { font-size: 14px; }
  .panel { padding: 18px 16px; }
  .istTablo { grid-template-columns: 1fr; }
}
@media (max-height: 480px) {
  #dokunmatik { height: 104px; }
  #dokunmatik button { width: 48px; height: 48px; font-size: 17px; }
  #dokunmatik button.buyuk { width: 60px; height: 60px; }
}

/* ---------- Nasıl Oynanır lejantı ---------- */
.lej {
  display: inline-block; min-width: 26px; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: -1px;
}
.lej.lejPembe  { color: var(--pembe); }
.lej.lejMavi   { color: var(--mavi); }
.lej.lejSari   { color: var(--sari); }
.lej.lejSonuk  { color: var(--sonuk); }
#modalGovde h4 { font-weight: 700; }
#modalGovde u { text-decoration-color: var(--pembe); text-underline-offset: 2px; }

/* ==================================================================
   NESNE SÖZLÜĞÜ
   Hücreler CIZIM.ornekCiz ile, oyunun kendi çizim koduyla doldurulur.
   ================================================================== */
.sozNot { font-size: 13px; line-height: 1.5; color: var(--sonuk); margin-bottom: 14px; }
.sozBaslik {
  margin: 16px 0 8px; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 700;
  padding-bottom: 5px; border-bottom: 1px solid var(--izgara);
}
.sozBaslik.p { color: var(--pembe); }
.sozBaslik.m { color: var(--mavi); }
.sozBaslik.s { color: var(--sari); }
.sozIzgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 2px; }
.sozSatir {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 3px;
}
.sozSatir:hover { border-color: var(--izgara); background: rgba(70,104,156,.07); }
.sozCv {
  width: 52px; height: 52px; flex: none;
  background: var(--kagit); border: 1px solid var(--izgara); border-radius: 2px;
}
.sozMetin { min-width: 0; }
.sozMetin b { display: block; font-size: 13px; color: var(--tebesir); margin-bottom: 1px; }
.sozMetin span { display: block; font-size: 11.5px; line-height: 1.42; color: var(--sonuk); }
@media (max-width: 560px) { .sozIzgara { grid-template-columns: 1fr; } }