:root{
  --ink:#0a0a08;
  --ink-soft:#15140f;
  --paper:#eae5d6;
  --cyan:#74c7ec;
  --cyan-bright:#00d3f2;
  --gold:#f5c518;
  --gold-dim:#7a6312;
  --signal:var(--gold);
  --signal-dim:var(--gold-dim);
  --danger:#e0533d;
  --ok:#5fae6e;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gallery-width: 220px;

  --gallery-bg:#ffffff;
  --gallery-border:#e3e0d8;
  --gallery-ink:#1c1a16;
  --gallery-ink-soft:#6b665c;
}

*{ box-sizing:border-box; }

/* ── Klavye odağı ───────────────────────────────────────────────────
   Hiçbir odak stili yoktu: TAB ile gezen biri nerede olduğunu göremiyordu
   (tarayıcı varsayılanı da .difficulty-btn gibi özel arka planlarda kayboluyor).

   Çift halka bilinçli: koyu sahnede (loader düğmeleri) altın halka,
   açık şerit panelinde (zorluk/filtre/dil/aksiyon) koyu çizgi görünür —
   böylece iki zemin için ayrı kural yazmaya gerek kalmıyor.
   :focus değil :focus-visible → fareyle tıklayınca halka çıkmaz.
──────────────────────────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--gold);
}
/* Odak halkası kırpılmasın: şerit panelindeki düğmeler taşabilmeli */
.difficulty-buttons,
.filter-buttons,
.lang-buttons,
.gallery-actions{ overflow:visible; }

html,body{
  margin:0; padding:0;
  width:100vw; height:100vh;
  background:var(--ink);
  overflow:hidden;
  font-family:var(--sans);
  color:var(--paper);
}

#app{
  display:flex;
  width:100vw;
  height:100vh;
}


#stage{
  position:relative;
  flex:1 1 auto;
  height:100vh;
  background:#000;
  overflow:hidden;
}

video{
  display:none;
}

canvas#sceneCanvas{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:block;
  /* Parça sürüklerken tarayıcı sayfayı kaydırmasın (dokunmatik). */
  touch-action:none;
}


.hud-top{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  background:linear-gradient(to bottom, rgba(10,10,8,0.85), transparent);
  pointer-events:none;
  z-index:5;
}

.brand{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cyan-bright);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.brand-puzzle{
  color:var(--cyan-bright);
}
.brand-sep{
  color:var(--gold);
}
.brand-cam{
  color:var(--gold);
}
.brand small{
  color:var(--gold);
  opacity:0.85;
  letter-spacing:0.1em;
}

.status-pill{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:2px;
  border:1px solid rgba(234,229,214,0.25);
  background:rgba(10,10,8,0.6);
  display:flex;
  align-items:center;
  gap:8px;
}
.status-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 6px var(--danger);
  transition:background 0.2s, box-shadow 0.2s;
}
.status-dot.live{ background:var(--ok); box-shadow:0 0 6px var(--ok); }
.status-dot.armed{ background:var(--signal); box-shadow:0 0 8px var(--signal); }
.status-dot.solved{ background:var(--ok); box-shadow:0 0 10px var(--ok); }


.hud-bottom{
  position:absolute;
  bottom:0; left:0; right:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:16px;
  padding:18px 22px 22px;
  background:linear-gradient(to top, rgba(10,10,8,0.9), transparent);
  pointer-events:none;
  z-index:5;
}

.gesture-key{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  color:rgba(234,229,214,0.7);
  max-width:100%;
}
.gesture-key .item{ display:flex; align-items:center; gap:7px; }
.gesture-key .swatch{
  width:9px; height:9px;
  border:1.5px solid var(--paper);
  opacity:0.7;
  flex-shrink:0;
}
.gesture-key .swatch.pinch{ border-radius:50%; border-color:var(--signal); }
.gesture-key .swatch.drag{ border-radius:50%; border-color:var(--ok); border-style:dashed; }
.gesture-key .swatch.fist{ border-radius:2px; border-color:var(--danger); background:var(--danger); opacity:0.9;}

/* Performans uyarısı — hata değil, bilgi: sarı değil nötr, HUD'un altında.
   Sessizce yavaşlamak "uygulama bozuk" gibi hissettiriyordu. */
.perf-warn{
  position:absolute;
  top:64px; left:22px;
  max-width:min(52ch, calc(100% - 44px));
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.04em;
  padding:6px 10px;
  border-radius:2px;
  border:1px solid rgba(234,229,214,0.22);
  background:rgba(10,10,8,0.72);
  color:var(--paper-dim, #9a958a);
  z-index:5;
  pointer-events:none;
}
.perf-warn.hidden{ display:none; }

.progress-badge{
  position:absolute;
  top:64px;
  right:22px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:2px;
  border:1px solid rgba(245,197,24,0.35);
  background:rgba(10,10,8,0.7);
  color:var(--signal);
  z-index:5;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  pointer-events:none;
}
.progress-badge.visible{ opacity:1; transform:translateY(0); }
.progress-badge.solved{
  border-color:rgba(95,174,110,0.6);
  color:var(--ok);
}


#loadingOverlay{
  position:absolute; inset:0;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  z-index:20;
  transition:opacity 0.4s ease;
}
#loadingOverlay.hidden{ opacity:0; pointer-events:none; }
.loader-text{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--signal);
  text-align:center;
  max-width:80vw;
}
.loader-bar{
  width:220px; height:2px;
  background:rgba(234,229,214,0.15);
  overflow:hidden;
}
.loader-bar::after{
  content:'';
  display:block;
  width:40%; height:100%;
  background:var(--signal);
  animation:loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderSlide{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(350%); }
}
.loader-retry{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--signal);
  color:var(--signal);
  padding:8px 16px;
  cursor:pointer;
  transition:background 0.15s, color 0.15s;
}
.loader-retry:hover{ background:var(--signal); color:#1a1400; }
.loader-retry.hidden{ display:none; }

/* Kamerasız giriş — kamera reddedilince/bulunamayınca tek çıkış yolu.
   Cyan: "tekrar dene" (gold) ile karışmasın, ikisi ayrı eylem. */
.loader-nocam{ border-color:var(--cyan); color:var(--cyan); margin-top:8px; }
.loader-nocam:hover{ background:var(--cyan); color:#04222b; }

#errorBanner{
  position:absolute;
  top:18px; left:50%;
  transform:translateX(-50%);
  background:var(--danger);
  color:#1a0a08;
  font-family:var(--mono);
  font-size:12px;
  padding:10px 16px;
  border-radius:2px;
  z-index:30;
  display:none;
  max-width:80vw;
  text-align:center;
}


#gallery{
  flex:0 0 var(--gallery-width);
  width:var(--gallery-width);
  height:100vh;
  background:var(--gallery-bg);
  color:var(--gallery-ink);
  border-left:1px solid var(--gallery-border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.gallery-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--gallery-border);
}
.gallery-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--signal-dim);
}
.gallery-count{
  font-family:var(--mono);
  font-size:11px;
  color:var(--gallery-ink-soft);
}


.strip-complete-msg{
  flex:0 0 auto;
  margin:12px 14px 0;
  padding:10px 12px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  text-align:center;
  letter-spacing:0.03em;
  color:#3d6b46;
  background:#eaf5ec;
  border:1px solid #bfe3c6;
  border-radius:3px;
  display:none;
}
.strip-complete-msg.visible{ display:block; }

.gallery-strip{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.gallery-strip::-webkit-scrollbar{ width:6px; }
.gallery-strip::-webkit-scrollbar-thumb{ background:var(--gallery-border); border-radius:3px; }
.gallery-strip::-webkit-scrollbar-track{ background:transparent; }

.gallery-empty{
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.6;
  color:var(--gallery-ink-soft);
  text-align:center;
  padding:24px 4px;
}


.print{
  background:#fff;
  border:1px solid var(--gallery-border);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  padding:6px 6px 10px;
  animation:printDrop 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.1);
  flex-shrink:0;
}
@keyframes printDrop{
  0%{ opacity:0; transform:translateY(-14px) rotate(-2deg); }
  100%{ opacity:1; transform:translateY(0) rotate(0deg); }
}
.print canvas{
  width:100%;
  display:block;
}
.print .print-label{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:0.06em;
  color:var(--gallery-ink-soft);
  text-align:center;
  margin-top:6px;
}

.gallery-difficulty{
  flex:0 0 auto;
  padding:12px 14px;
  border-top:1px solid var(--gallery-border);
  border-bottom:1px solid var(--gallery-border);
}

.difficulty-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gallery-ink-soft);
  margin-bottom:8px;
}

.difficulty-buttons{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.difficulty-btn{
  width:100%;
  padding:7px 0;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--gallery-border);
  color:var(--gallery-ink-soft);
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.difficulty-btn:hover{
  background:var(--paper);
  border-color:var(--gold);
  color:var(--gold);
}
.difficulty-btn.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#1a1400;
}

.gallery-filter{
  flex:0 0 auto;
  padding:12px 14px;
  border-top:1px solid var(--gallery-border);
  border-bottom:1px solid var(--gallery-border);
}

.filter-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gallery-ink-soft);
  margin-bottom:8px;
}

.filter-buttons{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.filter-btn{
  width:100%;
  padding:7px 0;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--gallery-border);
  color:var(--gallery-ink-soft);
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-btn:hover{
  background:var(--paper);
  border-color:var(--cyan);
  color:var(--cyan);
}
.filter-btn.active{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#fff;
}

/* ── Dil seçimi ─────────────────────────────────────────────────────
   Çeviri en baştan tamdı (tr/en 56/56) ama arayüzde hiçbir kontrol
   yoktu — dil ancak konsoldan localStorage yazılarak değişiyordu.
──────────────────────────────────────────────────────────────────── */
.gallery-lang{
  flex:0 0 auto;
  padding:12px 14px;
  border-bottom:1px solid var(--gallery-border);
}

.lang-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gallery-ink-soft);
  margin-bottom:8px;
}

.lang-buttons{
  display:flex;
  gap:6px;
}

.lang-btn{
  flex:1 1 0;
  padding:7px 0;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--gallery-border);
  color:var(--gallery-ink-soft);
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.lang-btn:hover{
  background:var(--paper);
  border-color:var(--gold);
  color:var(--gold);
}
.lang-btn.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#1a1400;
}

.gallery-actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--gallery-border);
}

.gallery-action-btn{
  width:100%;
  padding:9px 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--signal-dim);
  color:var(--signal-dim);
  cursor:pointer;
  transition:background 0.15s, color 0.15s, opacity 0.15s;
}
.gallery-action-btn:hover:not(:disabled){
  background:var(--signal);
  border-color:var(--signal);
  color:#1a1400;
}
.gallery-action-btn:disabled{
  opacity:0.35;
  cursor:not-allowed;
}

.gallery-action-btn--danger{
  border-color:var(--danger);
  color:var(--danger);
}
.gallery-action-btn--danger:hover{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}

/* Mobil responsive (küçük ekranlar) */
/* ── Dokunmatik aksiyon düğmeleri ──────────────────────────────────
   Sahnenin alt ortasında, başparmağın erişebileceği yerde. Yalnız kaba
   işaretçili cihazlarda .hidden kaldırılıyor (app.js).
   .hud-bottom pointer-events:none olduğu için bunlar onun ÜSTÜNDE (z-index 6)
   ve kendi pointer-events'i açık. */
.touch-actions{
  position:absolute;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:6;
}
.touch-actions.hidden{ display:none; }

/* Dokunmatik modda jest rehberi düğmelerin tekrarı; ayrıca dar ekranda
   puzzle görselinin üstüne düşüp okunmuyordu. Sürükleme ipucu durum
   rozetinde duruyor. (app.js gövdeye .touch-mode ekliyor.) */
body.touch-mode .gesture-key{ display:none; }

.touch-btn{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  /* 44 px: parmakla güvenle basılabilen en küçük hedef */
  min-height:44px;
  padding:12px 20px;
  border-radius:3px;
  border:1px solid rgba(234,229,214,0.3);
  background:rgba(10,10,8,0.82);
  color:var(--paper);
  cursor:pointer;
  touch-action:manipulation; /* çift dokunuşta sayfa zoom'lamasın */
}
.touch-btn--capture{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:700;
}
.touch-btn:disabled{
  opacity:0.4;
  cursor:default;
}

@media (max-width: 768px) {
  :root {
    --gallery-width: 0; /* Başlangıçta gizli */
  }

  /* Üst HUD'da üç eleman çakışıyordu: dar ekranda marka iki satıra kırılıp
     durum rozetinin altına giriyor, mutlak konumlu ilerleme rozeti (top:64px)
     de büyümüş HUD'un üstüne biniyordu. Marka alt başlığı gizlenip HUD tek
     satırda tutuluyor, ilerleme rozeti HUD'un altına indiriliyor. */
  .hud-top {
    align-items: flex-start;
    gap: 10px;
  }

  .brand small {
    display: none;
  }

  .brand {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .status-pill {
    flex: 0 1 auto;
    min-width: 0;
  }

  #statusText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Rozet önce alta alınmıştı, orada da jest rehberinin üstüne bindi (ölçüldü).
     HUD artık tek satır olduğu için üstte yeri var: durum rozeti 12..~40 px
     arasını kaplıyor, 48 px altı boş. */
  .progress-badge {
    top: 48px;
    right: 12px;
  }

  .touch-actions {
    bottom: 16px;
  }

  /* Dar ekranda ilerleme rozeti sağ üstte (48 px); uyarı onun ALTINA
     iniyor, yan yana sığmıyorlar. */
  .perf-warn {
    top: 86px;
    left: 12px;
    right: 12px;
    max-width: none;
  }

  #app {
    flex-direction: column;
  }

  #stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 60vh;
  }

  #gallery {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 40vh;
    border-left: none;
    border-top: 1px solid var(--gallery-border);
    overflow-y: auto;
  }

  canvas#sceneCanvas {
    max-width: 100%;
    height: auto;
  }

  video {
    display: none;
  }
}

@media (max-width: 480px) {
  #stage {
    min-height: 50vh;
  }

  #gallery {
    max-height: 50vh;
  }

  .gallery-head,
  .gallery-difficulty,
  .gallery-filter,
  .gallery-lang,
  .gallery-actions {
    padding: 8px 10px;
  }

  .difficulty-btn,
  .filter-btn,
  .lang-btn,
  .gallery-action-btn {
    font-size: 8.5px;
    padding: 6px 0;
  }

  .hud-top {
    padding: 12px 14px;
  }

  .brand {
    font-size: 11px;
  }

  .status-pill {
    font-size: 9px;
    padding: 5px 10px;
  }
}