/* base.css — tum sayfalarda ortak temel. Dis font/asset yok, sistem fontu kullanilir. */
:root{
  --zemin:#0d1117; --panel:#161c26; --panel2:#1d2532; --cizgi:#232c3a;
  --metin:#e9eef7; --sonuk:#8b98ab;
  --iyi:#34d399; --kotu:#f87171; --vurgu:#ffd166; --mavi:#5eb3ff;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:#05070a; color:var(--metin); font-family:var(--font);
  overscroll-behavior:none; overflow:hidden;
  touch-action:manipulation;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
img,svg{ max-width:100%; }

/* Telefon sutunu: masaustunde de dikey duzen korunur. */
.sahne{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:430px; margin:0 auto;
  height:100vh; height:100dvh;
  background:var(--zemin); overflow:hidden;
  padding-top:env(safe-area-inset-top);
}

/* --- alt kontrol bari: kalici etkilesim en altta --- */
.altbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:8px 12px; padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:#080b10; border-top:1px solid var(--cizgi);
}
.altbar-etiket{ flex:1; text-align:center; color:var(--sonuk); font-size:13px; letter-spacing:.14em; }
.abtn{
  min-width:52px; min-height:48px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; font-family:var(--font);
  color:var(--metin); background:var(--panel2); border:1px solid var(--cizgi);
  border-radius:12px; text-decoration:none; cursor:pointer;
}
.abtn:active{ background:#2a3444; transform:translateY(1px); }

/* --- perde (duraklama / oyun sonu) --- */
.perde{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:rgba(5,7,10,.86); backdrop-filter:blur(3px);
  padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom));
  animation:perdeGir .16s ease-out;
}
/* Kutuyu alta yaslar; icerik sigmazsa tasma yukari atilmaz, kaydirilabilir kalir. */
.perde > .perde-kutu{ margin-top:auto; }
@keyframes perdeGir{ from{opacity:0} to{opacity:1} }
.perde-kutu{
  background:var(--panel); border:1px solid var(--cizgi); border-radius:20px;
  padding:20px 18px 18px; text-align:center;
}
.perde-baslik{ font-size:15px; letter-spacing:.2em; color:var(--sonuk); font-weight:700; }
.perde-skor{ font-size:60px; font-weight:800; line-height:1.05; margin:6px 0 0; font-variant-numeric:tabular-nums; }
.perde-skor.uzun{ font-size:42px; }
.perde-skor.cokUzun{ font-size:32px; }
.perde-alt{ font-size:12px; letter-spacing:.22em; color:var(--sonuk); margin-bottom:12px; }
.perde-satir{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 12px; margin:6px 0; border-radius:12px;
  background:var(--panel2); font-size:15px; color:var(--sonuk);
}
.perde-satir b{ color:var(--metin); font-variant-numeric:tabular-nums; }
.perde-satir.vurgu{ background:rgba(255,209,102,.14); color:var(--vurgu); }
.perde-satir.vurgu b{ color:var(--vurgu); }
.pbtn{
  display:block; width:100%; min-height:56px; margin-top:10px;
  font-size:17px; font-weight:700; letter-spacing:.06em; font-family:var(--font);
  color:var(--metin); background:var(--panel2); border:1px solid var(--cizgi);
  border-radius:14px; text-decoration:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pbtn.birincil{ background:var(--vurgu); color:#1a1206; border-color:transparent; font-size:19px; }
.pbtn:active{ transform:translateY(1px); filter:brightness(.94); }

canvas.tuval{ flex:1 1 auto; display:block; width:100%; height:100%; min-height:0; touch-action:none; }