/* Labirent — yerleşim. Siyah sayfalı eskiz defteri ekranı doldurur (kit/siyahsayfa.css); sayfa üç bant:
   üst marj (başlık, kronometre, mod satırı, künye), labirent alanı (canvas), alt marj (sonuç, komutlar).
   Telefon (dikey) önce; geniş ekranda defter masada ortalanır. Hepsi gümüş/beyaz jel; kutu düğme yok. */

html[data-kagit="siyah"] { --defter-bosluk: 8px; }

.sayfa {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 8px 8px 4px 18px;                      /* solda cilt oluğu (gölgesi daha geniş; içerik üstüne biraz biner) */
}

/* ---------- üst marj ---------- */
.ust-marj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "baslik sure" "modlar modlar" "kunye kunye";
  align-items: baseline;
  column-gap: 12px;
}
.baslik { grid-area: baslik; margin: 0; font-weight: 400; font-size: 31px; line-height: 1.15; }
.kronometre { grid-area: sure; margin: 0; font-size: 31px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.modlar { grid-area: modlar; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; margin-top: 2px; }
.modlar .ara { opacity: .55; padding: 0 1px; }
.kunye { grid-area: kunye; margin: 0; font-size: 14.5px; line-height: 1.3; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- labirent ---------- */
.alan { position: relative; min-height: 0; overflow: hidden; }
.ekran { position: absolute; left: 0; top: 0; display: block; touch-action: none; }

/* ---------- alt marj ---------- */
.alt-marj { display: flex; flex-direction: column; gap: 2px; }
.sonuc { margin: 0; font-size: 16px; }
.komutlar { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 0 10px; min-height: 120px; }   /* telefonda üç satırlık sabit yer */

.dugme.sozcuk { font-size: 17px; min-height: 40px; padding: .15em .2em .5em; white-space: nowrap; }
.modlar .dugme.sozcuk { font-size: 17px; min-height: 36px; }
.dugme.ikon { width: 44px; height: 44px; padding: 3px; margin: 0 0 0 auto; border: 0; background: transparent; cursor: pointer; }
.dugme.ikon svg { display: block; width: 38px; height: 38px; overflow: visible; }

/* ---------- geniş ekran: defter masada ---------- */
@media (min-width: 760px) {
  html[data-kagit="siyah"] { --defter-bosluk: 22px; }
  html[data-kagit="siyah"] .defter {
    --defter-w: min(calc(100vw - 44px), calc((100dvh - 44px) * 1.3));
    left: calc((100vw - var(--defter-w)) / 2);
    right: auto;
    width: var(--defter-w);
  }
  .sayfa { padding: 18px 30px 10px 58px; }
  .ust-marj { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "baslik modlar sure" "kunye kunye sure"; column-gap: 28px; }
  .baslik { font-size: 40px; }
  .kronometre { font-size: 42px; align-self: center; }
  .modlar { margin-top: 0; }
  .kunye { font-size: 17px; }
  .dugme.sozcuk, .modlar .dugme.sozcuk { font-size: 20px; min-height: 44px; }
  .komutlar { gap: 0 20px; min-height: 48px; }
}

/* ---------- kronometre çemberi, sonuç ---------- */
.kronometre { position: relative; padding: 0 10px 0 6px; }
.kronometre .yazi { display: inline-block; position: relative; }
.kronometre svg.cember { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sonuc { display: flex; flex-direction: column; justify-content: flex-end; gap: 0; margin: 0 0 2px; height: 46px; }   /* yer baştan ayrılır: bitişte labirent zıplamaz */
.sonuc-satir { margin: 0; font-size: 17px; line-height: 1.3; }
.sonuc-satir .beyaz { font-size: 20px; }
.sonuc-satir .ara { color: var(--gumus); opacity: .5; }

/* henüz açılmamış komut: soluk, altı çizilmez */
.dugme.sozcuk[disabled] { opacity: .38; cursor: default; }

/* ---------- kalem notları: sayfanın üstüne konmuş siyah kâğıt parçası ---------- */
.not {
  position: absolute; z-index: 5; left: 18px; right: 12px; top: 96px; max-height: calc(100% - 170px); overflow: auto;
  padding: 12px 16px 10px 18px; border-radius: 3px;
  background-color: #252321; background-image: url("kit/lif.png"); background-size: 256px 256px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.not-baslik { margin: 0 0 4px; font-weight: 400; font-size: 24px; }
.not-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 2px 0; }
.not-ad { min-width: 4.6em; opacity: .7; font-size: 15px; }
.not .dugme.sozcuk { font-size: 17px; min-height: 40px; }
.not-komut { display: flex; gap: 0 16px; margin: 6px 0 0; }
.kod { font-size: 18px; letter-spacing: .04em; user-select: text; -webkit-user-select: text; }
.renkler { display: flex; flex-wrap: wrap; gap: 0 4px; }
.dugme.sozcuk.renk { padding: .1em .15em .45em; }
.dugme.sozcuk.renk canvas { display: block; }

@media (min-width: 760px) {
  .not { left: auto; right: 34px; width: 430px; top: 110px; }
  .sonuc { height: 52px; }
  .sonuc-satir { font-size: 19px; }
  .sonuc-satir .beyaz { font-size: 23px; }
}

/* ---------- Bölümler notu, kod girişi ---------- */
.not-aciklama { margin: 0 0 4px; font-size: 14px; opacity: .7; }
.bolum-defter { margin: 2px 0 6px; }
.bolum-defter .not-ad { margin: 0; }
.bolum-sayilar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0 2px; margin: 0; }
.dugme.sozcuk.no { font-size: 16px; min-height: 34px; padding: .1em 0 .45em; text-align: center; }
.dugme.sozcuk.no .yazi { display: inline-block; }
.dugme.sozcuk.no.cozuldu { opacity: 1; }
.kod-gir {
  width: 9.5em; font: inherit; font-size: 17px; letter-spacing: .04em; color: var(--jel-beyaz); background: transparent;
  border: 0; border-bottom: 1.5px dotted var(--gumus); padding: 2px 2px 3px; outline: none; text-transform: uppercase;
}
.kod-gir::placeholder { color: var(--gumus-koyu); opacity: .6; }
.kod-gir:focus { border-bottom-style: solid; }
.not-uyari { margin: 0; min-height: 1.2em; font-size: 14px; opacity: .8; }

/* çözülen seviye yol renginde (o an açık olsa da); şimdiki seviye altı çizili */
.dugme.sozcuk.no.cozuldu .harf, .dugme.sozcuk.no.cozuldu.etkin .harf { color: inherit; }

/* Sonsuz: silgi canvas'ın üstünde, dokunuşu engellemez */
.sonsuz-silgi { z-index: 2; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }

/* ---------- yazdırma: beyaz zemin, siyah çizgi, A4 (sayfa yönü ui/yazdir.js'te) ---------- */
.yazdir { display: none; }
@media print {
  html, body { background: #fff !important; overflow: visible !important; }
  body > *:not(.yazdir) { display: none !important; }
  .yazdir { display: block; color: #111; font-family: 'Mynerve', 'Segoe Print', cursive; }
  .yazdir-bas { margin: 0 0 6mm; font-size: 15pt; }
  .yazdir-svg { display: block; width: 186mm; height: 250mm; margin: 0 auto; }
  .yazdir[data-yon="yatay"] .yazdir-svg { width: 273mm; height: 165mm; }
  .yazdir-etiket { font-family: 'Mynerve', 'Segoe Print', cursive; fill: #111; }
}


/* Defterde: masanın üzerindeki dönüş, oyunun sabit alanından ayrı yer tutar. */
html[data-kagit="siyah"] .defter {
  top: calc(env(safe-area-inset-top) + var(--defter-bosluk) + 48px);
}
.defterde-donus {
  position: absolute; left: 10px; top: -48px; z-index: 6;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 8px; color: #393730; font: 18px/1.2 'Mynerve', cursive;
  text-decoration: none; cursor: pointer;
}
.defterde-donus:hover { text-decoration: underline; }
.defterde-donus:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }
@media (min-width: 760px) {
  html[data-kagit="siyah"] .defter {
    --defter-w: min(calc(100vw - 44px), calc((100dvh - 92px) * 1.3));
  }
}
@media print { .defterde-donus { display: none !important; } }

/* Yatay telefonda dar bir portre defteri yerine ekranın genişliğini kullan. */
@media (min-width: 560px) and (max-height: 500px) {
  html[data-kagit="siyah"] { --defter-bosluk: 12px; --egim: 0deg; }
  html[data-kagit="siyah"] .defter {
    --defter-w: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    left: calc(12px + env(safe-area-inset-left)); right: auto; width: var(--defter-w);
  }
  .sayfa { padding: 6px 16px 4px 24px; }
  .ust-marj {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "baslik modlar sure" "kunye kunye sure";
    column-gap: 16px;
  }
  .baslik, .kronometre { font-size: 26px; }
  .kunye { font-size: 14px; }
  .modlar { margin-top: 0; }
  .dugme.sozcuk, .modlar .dugme.sozcuk { font-size: 16px; min-height: 36px; }
  .komutlar { gap: 0 8px; min-height: 44px; }
  .sonuc { height: 38px; }
  .sonuc-satir { font-size: 15px; }
  .sonuc-satir .beyaz { font-size: 17px; }
  .not { top: 60px; max-height: calc(100% - 72px); }
}