/* Kareli Defter Amiral Battı — görünüm.
   Ölçü birimi --sq = bir defter karesi (JS tam sayı px olarak ayarlar, ~5 mm).
   Bir oyun hücresi = 2×2 kare. Kalemle çizilen her şey rough.js ile SVG'de;
   burada yalnız BASILI şeyler var (kareler, marj, gren, gölge). Çizgi için CSS border yok. */

:root {
  --sq: 19px;
  --kagit: #fbf9f2;
  --mavi: #1f3b9b;
  --kirmizi: #c62828;
  --kursun: #55534e;
  --izgara: rgba(86, 140, 214, .32);
  --marj: rgba(214, 64, 64, .6);
  --masa: #b6a58a;
  /* Tükenmez kalem imleci: ucu (3,29) noktasında */
  --kalem-imlec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29 L7 20 L24 3 Q27 1 29 3 Q31 5 29 8 L12 25 Z' fill='%23fbf9f2' stroke='%231f3b9b' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M3 29 L7 20 L12 25 Z' fill='%231f3b9b'/%3E%3Cpath d='M21 6 L26 11' stroke='%231f3b9b' stroke-width='1.4'/%3E%3C/svg%3E") 3 29, crosshair;
  /* Kağıt grenı: hazır PNG (gren.png). Önceki SVG feTurbulence filtresi her yeniden boyamada pahalıydı:
     hamle çizilirken sayfa ~1 sn donuyordu. */
  --gren: url("gren.png");
  /* İnce kâğıt rengi örtüsü yalnız greni hafifletir; basılı kareler ve masa aynı kalır. */
  --kagit-greni: linear-gradient(rgba(251, 249, 242, .16), rgba(251, 249, 242, .16)), var(--gren);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', cursive;
  color: var(--mavi);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .22), transparent 70%),
    var(--gren),
    var(--masa);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.uyari {
  max-width: 28em;
  margin: 2em auto;
  padding: 1em;
  font-size: 1.4rem;
  color: var(--kirmizi);
  background: var(--kagit);
}

/* ---------- defter ---------- */

.defter {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin: calc(var(--sq) * 1.2) 0;
  transform: rotate(-.6deg);
  /* Defter tek katman olarak çizilir, eğimi sonradan GPU uygular. Aksi halde Safari, üstteki yazı her
     değiştiğinde yalnız o bölgeyi eğik uzayda yeniden boyuyor ve basılı mavi kareler kayıyor gibi görünüyordu. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sayfa {
  --marj-x: calc(var(--sq) * 2);
  position: relative;
  flex: none;
  width: calc(var(--sq) * 26);
  height: calc(var(--sq) * 32);
}

/* Masaüstünde iki sayfa, kompakt düzende tahtaları ve kontrolleri taşıyan tek kâğıt. */
.sayfa, .oyun:not([data-layout="defter"]) {
  background-color: var(--kagit);
  background-image:
    linear-gradient(to right,
      transparent calc(var(--marj-x) - 1px), var(--marj) calc(var(--marj-x) - 1px),
      var(--marj) calc(var(--marj-x) + 1px), transparent calc(var(--marj-x) + 1px)),
    linear-gradient(to right, var(--izgara) 1px, transparent 1px),
    linear-gradient(to bottom, var(--izgara) 1px, transparent 1px),
    var(--kagit-greni);
  background-size: 100% 100%, var(--sq) var(--sq), var(--sq) var(--sq), 100% 100%, 256px 256px;
  /* Gölge yalnız görünür kâğıtta; kapsayıcı ve iç yüzeyde tekrarlanmaz. */
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .85),
    16px 28px 40px -6px rgba(58, 36, 16, .44);
}

/* Cilde doğru kağıt hafifçe kararır */
.sayfa::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sayfa-ben::after   { background: linear-gradient(to right, transparent 82%, rgba(60, 45, 25, .14)); }
.sayfa-rakip::after { background: linear-gradient(to left, transparent 82%, rgba(60, 45, 25, .14)); }

.icerik {
  position: absolute;
  left: calc(var(--sq) * 3);
  top: calc(var(--sq) * 1);
  width: calc(var(--sq) * 22);
}

.ust   { display: block; width: 100%; height: calc(var(--sq) * 4); overflow: visible; }
.tahta { display: block; width: 100%; height: calc(var(--sq) * 22); overflow: visible; touch-action: manipulation; user-select: none; -webkit-user-select: none; }

svg text { font-family: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', cursive; }
svg path { stroke-linecap: round; stroke-linejoin: round; }

/* ---------- cilt ---------- */

.cilt {
  flex: none;
  width: calc(var(--sq) * 2);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background:
    linear-gradient(to right,
      rgba(60, 45, 25, .0) 0, rgba(60, 45, 25, .30) 42%, rgba(35, 24, 10, .55) 50%,
      rgba(60, 45, 25, .30) 58%, rgba(60, 45, 25, .0) 100%),
    #d8d0bb;
}

.zimba {
  flex: none;
  width: calc(var(--sq) * 3);
  height: calc(var(--sq) * .85);
  overflow: visible;
  transform: rotate(90deg);
}

/* ---------- düğmeler: çerçeve rough.js ile arkada çizilir ---------- */

.dugme {
  position: relative;
  padding: calc(var(--sq) * .55) calc(var(--sq) * 1.1);
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--mavi);
  font: inherit;
  font-size: calc(var(--sq) * 1.15);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
}
.dugme:active { transform: translateY(1px); }
.dugme[disabled] { color: var(--kursun); cursor: default; }
.dugme .yazi { position: relative; display: block; }
.ses-dugme { padding: calc(var(--sq) * .4); margin-left: calc(var(--sq) * 1); }
.ses-dugme .ikon { position: relative; display: block; width: calc(var(--sq) * 1.5); height: calc(var(--sq) * 1.5); overflow: visible; }
.cerceve { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* ---------- el yazısı harfleri (harfle() ile) ---------- */

.kelime { display: inline-block; white-space: nowrap; }
.harf   { display: inline-block; }

/* Sabit genişlik: sayı uzayınca yanındaki düğme kaymasın */
.sayac { display: grid; gap: calc(var(--sq) * .15); flex: none; width: calc(var(--sq) * 9.5); }
.not {
  margin: 0;
  font-size: calc(var(--sq) * 1.1);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--kursun);
}

/* ---------- köşe karalamaları (oyuna karışmaz) ---------- */

.susler { position: absolute; inset: 0; pointer-events: none; }
.susle  { position: absolute; overflow: visible; pointer-events: none; }

.sayfa-ben .gunes   { right: calc(var(--sq) * .6); top: calc(var(--sq) * 1.1); width: calc(var(--sq) * 4); height: calc(var(--sq) * 4); }
.sayfa-ben .kalp    { right: calc(var(--sq) * 1); bottom: calc(var(--sq) * 1.1); width: calc(var(--sq) * 2.8); height: calc(var(--sq) * 2.8); }
.sayfa-ben .yildiz  { left: calc(var(--sq) * .3); top: calc(var(--sq) * 8); width: calc(var(--sq) * 1.6); height: calc(var(--sq) * 1.6); }

.sayfa-rakip .bulut  { right: calc(var(--sq) * .7); bottom: calc(var(--sq) * .9); width: calc(var(--sq) * 4.25); height: calc(var(--sq) * 2.465); }
.sayfa-rakip .dalga  { left: calc(var(--sq) * .3); top: calc(var(--sq) * 13); width: calc(var(--sq) * 2.2); height: calc(var(--sq) * 1.4); }
.sayfa-rakip .yildiz { left: calc(var(--sq) * .5); top: calc(var(--sq) * 7); width: calc(var(--sq) * 1.4); height: calc(var(--sq) * 1.4); }

/* ---------- oyun etkileşimi ---------- */

[hidden] { display: none !important; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#tahta-ben .hucre, .hucre.atildi { pointer-events: none; }
#tahta-rakip.etkin .hucre { cursor: var(--kalem-imlec); }
/* Yalnız gerçek fareli cihazlarda: dokunmatikte :hover son dokunulan hücreye yapışıyordu */
@media (hover: hover) and (pointer: fine) {
  #tahta-rakip.etkin .hucre:not(.atildi):hover { fill: rgba(122, 122, 122, .16); }
}
/* Klavye odağını kalemle çizilmiş kare gösterir (draw.js hucreOdak) */
.hucre:focus { outline: none; }

/* dizilim aşaması: gemiler tutulup sürüklenir */
.tutamak { cursor: grab; touch-action: none; }
.suruklenen, .suruklenen .tutamak { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .dugme:active { transform: none; }
}

/* Ölçüyü layout.js belirler; metin ve düğmeler tahta ile küçülmez. */
.oyun { position: relative; }
.kompakt-baslik { display: none; }
.kontroller { display: flex; align-items: center; gap: 12px; }
.asama-kontrolleri, .genel-kontroller, #atis-paneli { display: flex; align-items: center; gap: 8px; }
.kontroller .dugme { min-width: 44px; height: 44px; padding: 10px; font-size: 20px; white-space: nowrap; flex-shrink: 0; }
.kontroller .ses-dugme { margin: 0; padding: 9px; }
.ses-dugme .ikon { width: 26px; height: 26px; }
.kontroller .not { font-size: 18px; line-height: 20px; }
.kontroller .sayac { width: auto; margin-left: auto; gap: 0; }
#hedef-bilgi { min-width: 64px; font-size: 18px; }
:is([data-layout="yan"], [data-layout="dikey"]) .asama-kontrolleri:has(#hazir:not([hidden])) #hedef-bilgi { display: none; }
.dugme:disabled { opacity: .65; cursor: default; }
.dugme:focus-visible { outline: 2px solid var(--mavi); outline-offset: 3px; }
.tutamak:focus-visible { outline: 2px solid var(--mavi); outline-offset: -2px; }
[data-layout="defter"] .kontroller {
  position: absolute;
  /* İçerik payı 3 kare, koordinat etiketleri 2 kare: doğrudan oyun ızgarasına hizala. */
  left: calc(var(--sq) * 5); right: calc(var(--sq) * 2);
  bottom: calc(var(--sq) * 3 - 6px);
  gap: 12px;
}
[data-layout="defter"] .asama-kontrolleri { gap: 12px; }
[data-layout="defter"] .asama-kontrolleri:not(:has(> :not([hidden]))) { display: none; }
[data-layout="defter"] .genel-kontroller { display: contents; }
/* Sağ köşedeki bulut karalamasına yer bırakır. Mobilde ses, Yeni sayfa'nın yanında kalır. */
[data-layout="defter"] .ses-dugme { position: absolute; right: calc(var(--sq) * 4); bottom: 0; }
[data-layout="defter"] .sayac {
  position: absolute;
  left: calc(var(--sq) * 28); /* İki ızgara arasındaki mesafe: sayfa + cilt. */
  margin: 0;
}

.oyun:not([data-layout="defter"]) {
  --marj-x: 4px;
  display: grid; gap: 8px; padding: 4px;
  width: var(--layout-w); height: var(--layout-h);
  align-content: center;
}
.oyun:not([data-layout="defter"]) .defter { display: contents; }
.oyun:not([data-layout="defter"]) .cilt,
.oyun:not([data-layout="defter"]) .ust,
.oyun:not([data-layout="defter"]) .susler { display: none; }
.oyun:not([data-layout="defter"]) .sayfa {
  --sq: calc(var(--board) / 22); --marj-x: 4px;
  width: calc(var(--board) + 8px); height: calc(var(--board) + 40px);
  padding: 4px; justify-self: center;
  background: none; box-shadow: none;
}
.oyun:not([data-layout="defter"]) .icerik { position: static; width: 100%; }
.oyun:not([data-layout="defter"]) .tahta { width: var(--board); height: var(--board); }
.oyun:not([data-layout="defter"]) .kompakt-baslik {
  height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  font-size: 16px; line-height: 16px;
}
.kompakt-durum { font-size: 17px; color: var(--mavi); text-align: right; }
#yerlestirme-ipucu { display: none; }
.oyun:not([data-layout="defter"])[data-primary="ben"] .sayfa-ben .kompakt-baslik {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: 16px 16px; row-gap: 0;
}
.oyun:not([data-layout="defter"])[data-primary="ben"] #yerlestirme-ipucu {
  display: block; grid-column: 1 / -1; font-size: 14px; line-height: 16px; color: var(--kursun);
}
.oyun:not([data-layout="defter"]) .dugme { font-size: 18px; padding: 8px; }
.oyun:not([data-layout="defter"]) .not { font-size: 16px; line-height: 18px; }
.oyun:not([data-layout="defter"]) .sayfa::after { background: none; }
[data-primary="ben"] .sayfa-ben, [data-primary="rakip"] .sayfa-rakip { --board: var(--primary-size); }
[data-primary="ben"] .sayfa-rakip, [data-primary="rakip"] .sayfa-ben { --board: var(--secondary-size); }
[data-primary="ben"] .sayfa-rakip .kompakt-durum,
[data-primary="rakip"] .sayfa-ben .kompakt-durum { display: none; }
[data-layout="yatay"] { grid-template-columns: 1fr 1fr; grid-template-rows: calc(var(--primary-size) + 40px) 44px; }
[data-layout="yatay"] .sayfa-ben { grid-column: 1; grid-row: 1; }
[data-layout="yatay"] .sayfa-rakip { grid-column: 2; grid-row: 1; }
[data-layout="yatay"] .kontroller { grid-column: 1 / -1; grid-row: 2; padding: 0 4px; gap: 8px; }
:is([data-layout="dikey"], [data-layout="tablet"]) { grid-template-columns: calc(var(--secondary-size) + 8px) minmax(0, 1fr); grid-template-rows: calc(var(--primary-size) + 40px) var(--alt-bolum, 160px); }
:is([data-layout="dikey"], [data-layout="tablet"])[data-primary="ben"] .sayfa-ben,
:is([data-layout="dikey"], [data-layout="tablet"])[data-primary="rakip"] .sayfa-rakip { grid-column: 1 / -1; grid-row: 1; }
:is([data-layout="dikey"], [data-layout="tablet"])[data-primary="ben"] .sayfa-rakip,
:is([data-layout="dikey"], [data-layout="tablet"])[data-primary="rakip"] .sayfa-ben { grid-column: 1; grid-row: 2; }
:is([data-layout="dikey"], [data-layout="tablet"]) .kontroller { grid-column: 2; grid-row: 2; }
[data-layout="yan"] { grid-template-columns: calc(var(--primary-size) + 8px) 164px; grid-template-rows: 160px 140px; }
[data-layout="yan"][data-primary="ben"] .sayfa-ben,
[data-layout="yan"][data-primary="rakip"] .sayfa-rakip { grid-column: 1; grid-row: 1 / -1; align-self: center; }
[data-layout="yan"][data-primary="ben"] .sayfa-rakip,
[data-layout="yan"][data-primary="rakip"] .sayfa-ben { grid-column: 2; grid-row: 1; }
[data-layout="yan"] .kontroller { grid-column: 2; grid-row: 2; }
:is([data-layout="yan"], [data-layout="dikey"], [data-layout="tablet"]) .kontroller { flex-direction: column; gap: 8px; align-items: stretch; justify-content: center; }
:is([data-layout="yan"], [data-layout="dikey"]) .asama-kontrolleri { min-height: 44px; }
:is([data-layout="yan"], [data-layout="dikey"]) .asama-kontrolleri > .dugme { flex: 1; min-width: 44px; padding: 6px; font-size: 16px; white-space: normal; }
:is([data-layout="yan"], [data-layout="dikey"]) #atis-paneli { min-width: 0; }
:is([data-layout="yan"], [data-layout="dikey"], [data-layout="tablet"]) .sayac { margin: 0; }
[data-layout="tablet"] { --alt-bolum: 260px; }
[data-layout="tablet"] .kontroller { padding: 16px; gap: 16px; }
[data-layout="tablet"] .dugme { height: 48px; }
[data-layout="tablet"][data-primary="ben"] .sayfa-rakip,
[data-layout="tablet"][data-primary="rakip"] .sayfa-ben { pointer-events: none; }
:is([data-layout="yan"], [data-layout="dikey"])[data-primary="ben"] .sayfa-rakip,
:is([data-layout="yan"], [data-layout="dikey"])[data-primary="rakip"] .sayfa-ben { height: 160px; pointer-events: none; }
:is([data-layout="yan"], [data-layout="dikey"])[data-primary="ben"] .sayfa-rakip .kompakt-baslik,
:is([data-layout="yan"], [data-layout="dikey"])[data-primary="rakip"] .sayfa-ben .kompakt-baslik { height: 20px; }
#yon-uyari { max-width: min(360px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border: 0; padding: 24px; background: var(--kagit); color: var(--mavi); font-size: 20px; box-shadow: 4px 8px 24px #32230f55; }
#yon-uyari::backdrop { background: #32230fb3; }
#yon-uyari h2 { margin: 0 0 12px; font-size: 28px; }
#yon-uyari p { margin: 12px 0; }
#yon-uyari button { min-height: 44px; font-size: 20px; outline: 2px solid var(--mavi); }
#oyun[data-paused="true"] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .defter { transform: none; } }