/* ada-c2: Montour adası. Tuval, görünüm motorunun 2B çıktısı; düşük kalite modunda büyütülür */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; }
.pin .name { font-weight: 700; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 64px; translate: -50% 0; padding: 4px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 18px 'VT323', monospace; pointer-events: none; opacity: 0; transition: opacity .3s; }
.toast.on { opacity: 1; }

/* Oyun kabuğu (oyunlar/kabuk.js): izin ekranı seçenekleri, hata satırı, sayaç vurgusu */
#overlay .choices { display: flex; flex-wrap: wrap; gap: 8px; }
#overlay .choices:empty { display: none; }
#overlay .choices .btn { cursor: pointer; }
#overlay .err { margin: 10px 0 0; font: 18px 'VT323', monospace; font-style: normal; color: var(--accent); }
.hud .gold b { color: #c58a12; }
.hud b.bump { display: inline-block; animation: bump 0.45s cubic-bezier(.3, 1.8, .5, 1); }
.code select { font: inherit; padding: 0 4px; border: 2px solid #000; background: #fff; }

/* ?clean=1: arayüzsüz görüntü (karşılaştırma görselleri için) */
body.clean .card, body.clean .pills, body.clean .caption, body.clean .hint, body.clean #pins { display: none !important; }
/* Kart tıklamayı oyun alanına geçirir (pointer-events: none); izin ekranının seçim düğmeleri ise tıklanabilir olmalı */
#overlay .choices, #overlay .choices .btn { pointer-events: auto; }

/* C2 arayüz yerleşimi: ortak dosyaların sabit konumlarını burada sınırla. */
:root { --dock-height: 100px; --toolbar-bottom: 140px; }
button, a, summary, input, select { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn, .pills button { min-height: 40px; }
#fx { touch-action: none; }
.brand { max-width: calc(100vw - 245px); padding: 8px 12px; gap: 8px; }
.brand > div:last-child { min-width: 0; }
.brand h1 { font-size: clamp(14px, 1.7vw, 22px); overflow-wrap: anywhere; }
.brand p { font-size: 13px; }
.logo { flex: 0 0 36px; width: 36px; height: 36px; }
.places-toggle { position: fixed; z-index: 12; top: 100px; left: 18px; padding: 8px 14px; gap: 14px; box-shadow: 3px 3px 0 var(--shade); }
.list { display: block; top: 152px; max-height: calc(100dvh - 170px - var(--dock-height)); overflow: auto; overscroll-behavior: contain; }
.list li button { min-height: 38px; gap: 8px; margin: 0; width: 100%; overflow-wrap: anywhere; }
.list li button span { min-width: 0; }
.list li button.off { color: var(--fg); }
.brand p, .bar small, .meter-label, .place .game { color: var(--fg); }
.dot { flex: 0 0 10px; }
.meter-label { flex-wrap: wrap; gap: 8px; }
.bottom-dock { position: fixed; z-index: 12; bottom: 16px; left: 50%; right: auto; translate: -50% 0; width: max-content; max-width: calc(100vw - 32px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 5px 14px; background: var(--bg); color: var(--fg); border-block: 2px solid var(--fg); border-radius: 3px; }
.bottom-dock .caption { position: static; translate: none; display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; margin: 0; padding: 3px 0; border: 0; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.3; max-height: none; overflow: visible; pointer-events: auto; }
.bottom-dock details { font: 13px/1.5 'Pixelify Sans', monospace; }
.bottom-dock summary { cursor: pointer; padding: 8px 0; font: 700 10px 'Silkscreen', monospace; }
.controls-popover { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; width: min(440px, calc(100vw - 32px)); max-height: 40dvh; overflow: auto; padding: 14px; border: 2px solid var(--fg); border-radius: 12px; background: var(--bg); color: var(--fg); box-shadow: 3px 3px 0 var(--shade); }
.bottom-dock details p { margin: 0 0 12px; font: 17px/1.45 'Pixelify Sans', monospace; }
.island-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.place { right: 18px; bottom: calc(var(--dock-height) + 24px); width: min(320px, calc(100vw - 36px)); max-height: calc(100dvh - var(--dock-height) - 150px); overflow: auto; overflow-wrap: anywhere; }
.place .btns { flex-wrap: wrap; }
.game-toolbar { position: fixed; z-index: 14; top: 12px; left: 18px; right: 18px; gap: 10px; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; max-height: 42dvh; overflow: auto; padding: 3px; }
body.ingame .game-toolbar { display: grid !important; }
.game-toolbar .bar, .game-toolbar .tabs, .game-toolbar .hud { position: static; translate: none; min-width: 0; max-width: 100%; }
.game-toolbar .bar { flex-wrap: wrap; padding: 8px; gap: 8px; }
.bar > div { min-width: 0; flex: 1 1 150px; }
.bar h1, .bar small { overflow-wrap: anywhere; }
.bar h1 { line-height: 1.25; }
.bar .btn { font-size: 10px; }
.game-toolbar .hud { flex-wrap: wrap; }
.hud div { padding: 7px 10px; min-width: 0; }
.hud b { overflow-wrap: anywhere; }
.pause-tools { grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 10px; font: 14px 'Pixelify Sans', monospace; }
body.ingame .pause-tools { display: flex !important; }
.pause-tools label, #pauseStatus { background: var(--bg); padding: 5px 8px; border-radius: 6px; }
.pause-tools input { width: 18px; height: 18px; vertical-align: middle; }
#pauseStatus:empty { display: none; }
.win { top: calc(var(--toolbar-bottom) + 12px); max-height: calc(100dvh - var(--toolbar-bottom) - var(--dock-height) - 48px); display: flex; flex-direction: column; max-width: calc(100vw - 36px); }
.win .title { flex-shrink: 0; }
.win .title span { left: 40px; right: 8px; translate: none; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 0 4px; }
.win .close { width: 26px; height: 24px; top: 0; left: 6px; z-index: 1; display: grid; place-items: center; color: #000; font: 24px/1 Arial, sans-serif; }
.win .close:hover { color: #fff; }
.code pre { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; font-size: 19px; }
.code .ln { width: max-content; min-width: 100%; align-items: baseline; }
.code .foot { flex-shrink: 0; flex-wrap: wrap; }
.notes .body { min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; line-height: 1.3; }
.notes table { table-layout: fixed; }
.notes th, .notes td { overflow-wrap: anywhere; }
.notes .task { line-height: 1.3; }
.overlay { pointer-events: auto; top: calc(var(--toolbar-bottom) + 12px); bottom: calc(var(--dock-height) + 24px); height: fit-content; max-height: calc(100dvh - var(--toolbar-bottom) - var(--dock-height) - 48px); overflow: auto; margin-block: auto; translate: -50% 0; }
body[data-tab="code"] .overlay, body[data-tab="notes"] .overlay { left: 50%; }
body.ingame:not([data-tab="play"]) .overlay { display: none !important; }
.overlay h2 { font-size: clamp(19px, 2.5vw, 26px); overflow-wrap: anywhere; }
.overlay .btn { white-space: normal; justify-content: center; }
.anat { bottom: calc(var(--dock-height) + 24px); max-width: calc(100vw - 36px); overflow: auto; }
.anat div { flex: 1 0 100px; }
.anat b { overflow-wrap: anywhere; }
body.ingame:not([data-tab="play"]) .anat { display: none !important; }
.pin { min-width: 40px; min-height: 36px; justify-content: center; max-width: calc(100vw - 36px); }
.pin .name { white-space: normal; overflow-wrap: anywhere; }
.pin:focus-visible .name { display: inline; }
.load-status { z-index: 100; left: 50%; top: 50%; translate: -50% -50%; width: min(380px, 90vw); padding: 24px; font-size: 20px; }
body.clean .bottom-dock, body.clean .places-toggle, body.clean .game-toolbar { display: none !important; }
@media (max-width: 1100px) {
  .game-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .game-toolbar .bar { grid-column: 1 / -1; }
  .game-toolbar .hud { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .brand { top: 8px; left: 8px; max-width: calc(100vw - 135px); padding: 8px; }
  .brand p, .logo { display: none; }
  .brand h1 { font-size: 14px; line-height: 1.3; }
  .mode { top: 8px; right: 8px; padding: 2px; }
  .mode button { padding: 6px; font-size: 9px; }
  .places-toggle { left: 8px; top: 72px; }
  .list { left: 8px; top: 122px; width: min(280px, calc(100vw - 16px)); max-height: calc(100dvh - 146px - var(--dock-height)); }
  .bottom-dock { bottom: 8px; gap: 10px; padding: 5px 10px; }
  .bottom-dock .caption { font-size: 17px; }
  .bottom-dock details p { font-size: 16px; }
  .island-actions { justify-content: flex-end; }
  .island-actions .btn { padding: 5px 8px; font-size: 9px; }
  .game-toolbar { left: 8px; right: 8px; top: 8px; gap: 6px; grid-template-columns: 1fr; }
  .game-toolbar > * { grid-column: 1 !important; }
  .game-toolbar .bar { flex-wrap: nowrap; }
  .bar > div { flex-basis: auto; }
  .bar .btn { max-width: 110px; white-space: normal; font-size: 9px; padding: 6px; }
  .bar h1 { font-size: 14px; }
  .bar small { font-size: 13px; }
  .game-toolbar .tabs { justify-content: center; }
  .game-toolbar .hud { justify-content: space-between; }
  .hud div { flex: 1; }
  .hud div:nth-child(4) { display: block; }
  .pause-tools { gap: 6px; font-size: 12px; }
  .pause-tools .btn { font-size: 10px; min-height: 34px; }
  .win { left: 8px; right: 8px; width: auto; max-width: none; }
  .notes .body { font-size: 18px; padding: 10px; }
  body.ingame .card.anat { display: none !important; }
  .place { right: 8px; width: calc(100vw - 16px); padding: 10px; }
  .place h2 { font-size: 18px; }
  .place p { font-size: 18px; }
}
@media (max-width: 380px) {
  .bottom-dock .island-actions { grid-column: 1 / -1; justify-content: space-between; }
}
@media (max-height: 550px) and (min-width: 601px) {
  .brand p { display: none; }
  .game-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .game-toolbar .bar { grid-column: auto; }
  .game-toolbar .hud { grid-column: auto; }
  .bar small { display: none; }
  .game-toolbar .bar { padding: 4px; }
  .pause-tools { grid-column: 1 / -1; }
  body.ingame .card.anat { display: none !important; }
}
/* Başlık satır kırdığında menü de aşağı kayar. */
.places-toggle { top: var(--places-top, 100px); }
.list { top: calc(var(--places-top, 100px) + 52px); max-height: calc(100dvh - var(--places-top, 100px) - var(--dock-height) - 78px); }

/* Dokunmatik (oyun.js): yürüyen parmağın çubuğu, ilk açılıştaki bölge ipucu */
.stick { position: fixed; z-index: 13; width: 104px; height: 104px; translate: -50% -50%; border: 2px solid var(--fg); border-radius: 50%; background: color-mix(in srgb, var(--bg) 35%, transparent); pointer-events: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border: 2px solid var(--fg); border-radius: 50%; background: var(--bg); box-shadow: 2px 2px 0 var(--shade); }
.touch-hint { position: fixed; inset: 0; z-index: 11; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; transition: opacity .6s; }
.touch-hint.gone { opacity: 0; }
.touch-hint span { display: grid; place-items: center; padding: 16px; text-align: center; font: 700 11px/1.6 'Silkscreen', monospace; color: var(--fg); }
.touch-hint b { padding: 8px 12px; border: 2px solid var(--fg); border-radius: 10px; background: var(--bg); box-shadow: 3px 3px 0 var(--shade); font-weight: 700; }
.touch-hint .th-move { order: -1; background: color-mix(in srgb, var(--bg) 30%, transparent); border-right: 2px dashed var(--fg); }
@media (orientation: portrait) {
  .touch-hint { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; }
  .touch-hint .th-move { order: 1; border-right: 0; border-top: 2px dashed var(--fg); }
}
/* Dokunmatikte alt şerit yalnız CONTROLS düğmesi: yazı yürüyen parmağın altında kalmasın */
@media (pointer: coarse) {
  body:not(.ingame) .bottom-dock { left: auto; right: 8px; translate: none; grid-template-columns: auto; }
  body:not(.ingame) .bottom-dock .caption { display: none; }
  .controls-popover { left: auto; right: 0; translate: none; }
}

/* Oyunda boşluk tuşunun (ve birkaç harfin) dokunmatik karşılığı (kabuk.js) */
.game-touch { position: fixed; z-index: 13; left: 8px; right: 8px; bottom: calc(var(--dock-height) + 24px); gap: 8px; flex-wrap: wrap; justify-content: center; pointer-events: none; }
.game-touch .btn { pointer-events: auto; }
body.ingame .game-touch { display: flex !important; }
body.ingame .game-touch:empty, body.ingame:not([data-tab="play"]) .game-touch { display: none !important; }
@media (any-pointer: fine) and (not (pointer: coarse)) { body.ingame .game-touch { display: none !important; } }
.game-touch .btn { touch-action: none; user-select: none; -webkit-user-select: none; }
.game-touch .btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Telefonda oyun ekranı sıkı: üst bloklar tek-iki satır, oyun ekranın çoğunu alır */
@media (max-width: 600px) {
  .game-toolbar { gap: 4px; }
  .game-toolbar .bar { padding: 4px 6px; }
  .bar small, .pause-tools label { display: none; }
  .bar .btn { min-height: 32px; padding: 4px 6px; }
  .game-toolbar .tabs button { min-height: 32px; padding: 4px 10px; }
  .hud div { padding: 3px 8px; }
  .hud small { font-size: 9px; }
  .hud b { font-size: 16px; }
  .overlay { padding: 12px 14px; }
  .overlay p { font-size: 17px; margin: 6px 0 10px; }
}