/* ============================================================
   Yanar Oyun Hattı — ortak arayüz kabuğu (oyun-ui.css)
   Tek kaynak: oyun-arastirma/oyun-ui.css. Oyun klasörlerine
   kopyalanır; elle düzenlenmez, buradan kopyalanır.
   Yükleme sırası:  fonts.css → oyun-ui.css → style.css
   style.css yalnız TEMA değişkenleri + oyuna özel parçalar.
   ============================================================ */

:root{
  /* --- güvenli alan: Capacitor eklentisi → env() → 0 --- */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));

  /* --- yarıçap --- */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:26px; --r-pill:999px;

  /* --- boşluk (4px tabanı) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:26px;

  /* --- hareket --- */
  --t-micro:80ms; --t-norm:250ms; --t-macro:420ms;
  --ease-in:cubic-bezier(.2,.9,.3,1.3);
  --ease-out:cubic-bezier(.4,0,.2,1);

  /* --- yükseklik --- */
  --el-1:0 2px 6px rgba(0,0,0,.35);
  --el-2:0 10px 26px rgba(0,0,0,.45);
  --el-3:0 30px 60px rgba(0,0,0,.6);
  --blur:8px;

  /* --- tema varsayılanları: her oyun style.css'te ezer --- */
  --bg:#0a1020;
  --ink:#ffffff;
  --ink-a:255,255,255;          /* rgba() tabanı */
  --surface:#1e2b4d;
  --surface-2:#141d36;
  --glass:rgba(10,18,36,.62);   /* HUD hapı, simge düğmesi */
  --glass-solid:rgba(10,18,36,.92); /* bildirim, gösterim rozeti */
  --scrim:rgba(6,10,20,.80);
  --line:rgba(255,255,255,.12);

  --accent:#6fe3ff;             /* birincil eylem üst */
  --accent-2:#2aa6d6;           /* birincil eylem alt */
  --accent-sh:#16748f;          /* düğme katı gölgesi */
  --on-accent:#04202c;          /* birincil eylem metni */
  --gold:#ffd35a;
  --good:#3ee0a1;
  --good-2:#3fc47a;
  --danger:#ff9c9c;

  --tool-a:#2d3f66; --tool-b:#1f2d4d; --tool-sh:#0e1730;

  --title-grad:linear-gradient(180deg,#fff,#ffd86b);
  --title-track:0px;
  --demo-bottom:82px;           /* alt araç sırası olan oyunlarda 82, olmayanda 26 */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.45;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- HUD ---------- */
#hud{
  position:fixed;left:0;right:0;top:0;
  padding:calc(var(--sat) + 10px) var(--sp-4) 0;
  display:flex;justify-content:space-between;align-items:flex-start;
  pointer-events:none;z-index:5;gap:var(--sp-2);
}
#hud .hud-left,#hud .hud-right{display:flex;gap:var(--sp-2);align-items:center;pointer-events:auto}

.pill{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 14px;font-weight:600;font-size:16px;line-height:1.35;
  display:flex;align-items:center;gap:7px;letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
}
.pill .lbl{font-size:10px;opacity:.55;letter-spacing:1.6px;font-weight:600}
.pill.moves .par{opacity:.45;font-size:13px}
.pill.coins{color:#ffd86b}
.coin{width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 35%,#fff3b0,#f7b733 60%,#c98410);
  box-shadow:0 1px 0 rgba(122,75,0,.6) inset}

.icon-btn{
  position:relative;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--glass);color:var(--ink);
  font-size:19px;line-height:1;cursor:pointer;font-family:inherit;
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  transition:transform var(--t-micro);
}
/* görünen boyut 38px, dokunma alanı 44px (WCAG 2.5.8) */
.icon-btn::after{content:"";position:absolute;inset:-3px}
.icon-btn:active{transform:scale(.93)}

/* Dar ekranda HUD taşmasın. İlmek'te dört hap var (bölüm, hamle, sandık, jeton);
   bölüm numarası iki haneye çıkınca ayar düğmesi ekran dışına taşıyordu —
   390px'te ölçüldü: 11. bölümde 2.5px, 120. bölümde 12.3px taşma. */
#hud .hud-left,#hud .hud-right{min-width:0}
#hud .hud-left{flex:0 1 auto}
@media (max-width:430px){
  #hud{padding-left:10px;padding-right:10px}
  #hud .hud-left,#hud .hud-right{gap:6px}
  .pill{padding:6px 11px;gap:6px}
  .pill .lbl{letter-spacing:1.2px}
}
@media (max-width:340px){        /* SE 1. nesil sınıfı ekranlar */
  .pill{padding:5px 9px;font-size:15px}
  .pill .lbl{font-size:9px;letter-spacing:.6px}
}

/* ---------- alt araç sırası (.tool ve .boost aynı biçim) ---------- */
#tools,#boosters{
  position:fixed;left:0;right:0;bottom:calc(var(--sab) + 12px);
  display:flex;justify-content:center;gap:var(--sp-4);
  z-index:5;pointer-events:none;padding:0 var(--sp-3);
}
.tool,.boost{
  pointer-events:auto;position:relative;
  min-width:88px;height:58px;padding:0 var(--sp-4);
  border-radius:17px;border:1px solid rgba(var(--ink-a),.08);
  background:linear-gradient(180deg,var(--tool-a),var(--tool-b));
  color:var(--ink);
  box-shadow:0 4px 0 var(--tool-sh),0 8px 20px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;transition:transform var(--t-micro),box-shadow var(--t-micro);
  font-family:inherit;
}
.tool:active,.boost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tool-sh)}
.tool .ico,.boost .ico{font-size:19px;line-height:1.1}
.tool .name,.boost .name{font-size:11px;opacity:.8;font-weight:500;line-height:1.1}
.tool .cost,.boost .cost{
  position:absolute;top:-8px;right:-6px;
  background:var(--good);color:#043;
  font-size:10px;font-weight:700;border-radius:var(--r-pill);
  padding:2px 8px;box-shadow:var(--el-1);
  font-variant-numeric:tabular-nums;
}
.tool .cost.coin-cost,.boost .cost.coin-cost,.boost .cost:not(.ad){background:#ffb03b;color:#3b2200}
.boost .cost.ad{background:var(--good);color:#043}
.tool.disabled,.boost.disabled,.tool:disabled,.boost:disabled{opacity:.45}

/* ---------- bildirim ---------- */
#toast{
  position:fixed;left:50%;top:24%;transform:translate(-50%,-20px);
  background:var(--glass-solid);border:1px solid rgba(var(--ink-a),.16);
  padding:10px 18px;border-radius:14px;font-weight:500;font-size:15px;
  opacity:0;transition:opacity var(--t-norm),transform var(--t-norm);
  pointer-events:none;z-index:20;
  max-width:calc(100vw - 40px);text-align:center;box-shadow:var(--el-2);
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- kaplama + kart ---------- */
.overlay{
  position:fixed;inset:0;background:var(--scrim);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:flex;flex-direction:column;
  z-index:30;opacity:0;pointer-events:none;
  transition:opacity var(--t-norm);
  padding:calc(var(--sat) + 16px) var(--sp-5) calc(var(--sab) + 16px);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  /* oyun arayüzü, belge değil: kaydırma çubuğu çizilmesin */
  scrollbar-width:none;-ms-overflow-style:none;
}
.overlay::-webkit-scrollbar{width:0;height:0}
.overlay.show{opacity:1;pointer-events:auto}
/* margin:auto — yer varken ortalar, yokken yukarı yaslar ve kaydırılabilir kalır */
.card{
  width:min(360px,100%);margin:auto;flex:0 0 auto;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6) 24px var(--sp-5);text-align:center;
  box-shadow:var(--el-3);
  transform:translateY(16px) scale(.96);
  transition:transform .3s var(--ease-in);
}
.overlay.show .card{transform:none}

.card h1{
  margin:8px 0 0;font-size:clamp(34px,11.5vw,44px);font-weight:700;
  letter-spacing:var(--title-track);line-height:1.05;
  /* harf aralığı SON harften sonra da boşluk ekler; ortalama bu yüzden
     yarım aralık kadar sola kayar. Yarısı kadar içeri iterek düzeltiyoruz. */
  text-indent:calc(var(--title-track) / 2);
  background:var(--title-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .card h1{color:var(--ink);background:none}
}
.card h2{margin:8px 0 4px;font-size:26px;font-weight:600;line-height:1.2}
.card .sub{margin:4px 0 18px;opacity:.75;font-size:15px}
.card .tag{opacity:.82;font-size:16px;line-height:1.45;margin:8px 0 22px}
.card .emoji{font-size:52px;line-height:1}
.logo{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.start-meta{margin-top:14px;opacity:.55;font-size:13px}

.stars{display:flex;justify-content:center;gap:var(--sp-2);font-size:38px;line-height:1}
.star{color:rgba(var(--ink-a),.16);transition:color .2s,transform .3s}
.star.on{color:var(--gold);transform:scale(1.12)}

/* ---------- düğmeler ---------- */
.btn{
  display:block;width:100%;border:0;border-radius:var(--r-md);
  padding:15px;font-family:inherit;font-weight:700;font-size:17px;
  letter-spacing:.4px;cursor:pointer;margin-top:10px;
  transition:transform var(--t-micro),box-shadow var(--t-micro);
}
.btn:active{transform:translateY(2px)}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:var(--on-accent);
  box-shadow:0 5px 0 var(--accent-sh),0 10px 24px rgba(0,0,0,.28);
}
.btn.primary:active{box-shadow:0 2px 0 var(--accent-sh)}
.btn.reward{
  background:linear-gradient(180deg,#7ae5a8,var(--good-2));color:#053a1d;
  box-shadow:0 5px 0 #1f8a4f,0 10px 24px rgba(63,196,122,.3);
}
.btn.reward:active{box-shadow:0 2px 0 #1f8a4f}
.btn.reward .rv{display:inline-block;background:rgba(0,0,0,.22);border-radius:5px;
  padding:0 5px;margin-right:5px;font-size:13px}
.btn.ghost{background:rgba(var(--ink-a),.08);color:var(--ink);font-weight:500;font-size:15px;box-shadow:none}
.btn.ghost.danger{color:var(--danger)}
.btn:disabled{opacity:.5;cursor:default}
.btn:disabled:active{transform:none}

/* klavye odağı — dokunmatikte görünmez, erişilebilirlikte şart */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

/* otomatik ilerleme çubuğu (İlmek "SONRAKİ BÖLÜM") */
.btn.next{position:relative;overflow:hidden}
.btn.next .autofill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.28)}
.btn.next .autofill.run{width:100%;transition:width var(--dur,2600ms) linear}
.btn.next .lbl2{position:relative}

/* ---------- ayar satırları ---------- */
.row{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:11px 4px;border-bottom:1px solid rgba(var(--ink-a),.08);
  font-size:16px;text-align:left;
}
.row>span:first-child{min-width:0}
.row input[type=checkbox]{
  width:44px;height:26px;flex:0 0 auto;appearance:none;-webkit-appearance:none;
  background:rgba(var(--ink-a),.18);border-radius:var(--r-pill);
  position:relative;cursor:pointer;transition:background .2s;
}
.row input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.row input[type=checkbox]:checked{background:var(--good)}
.row input[type=checkbox]:checked::after{left:21px}
.row .num{
  width:92px;flex:0 0 auto;padding:8px;border-radius:var(--r-sm);
  border:1px solid rgba(var(--ink-a),.2);background:rgba(0,0,0,.3);
  color:var(--ink);font-family:inherit;font-size:15px;text-align:center;
}
.row.stat{font-size:14px}
.row.stat #statLine{opacity:.6;font-size:12px;max-width:60%;text-align:right}
.fine{font-size:12px;opacity:.45;margin:14px 0 0}

/* ---------- reklam kartı ---------- */
.ad-badge{display:inline-block;background:var(--accent);color:var(--on-accent);
  font-size:10px;font-weight:700;letter-spacing:2px;padding:3px 10px;border-radius:var(--r-xs)}
.ad-fake{
  height:150px;margin:14px 0 6px;border-radius:14px;
  background:repeating-linear-gradient(45deg,var(--surface) 0 12px,var(--surface-2) 12px 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;font-weight:500;opacity:.9;font-size:14px;
}
.ad-spinner{width:32px;height:32px;border-radius:50%;
  border:4px solid rgba(var(--ink-a),.18);border-top-color:#fff;
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- öğretici balonu ---------- */
#tutorial{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;transition:opacity .3s}
#tutorial.show{opacity:1}
.bubble{
  position:absolute;left:50%;transform:translateX(-50%);
  background:var(--bubble-bg,#fff);color:var(--bubble-ink,#14203d);
  padding:10px 16px;border-radius:13px;font-weight:600;font-size:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  width:min(320px,86vw);text-align:center;line-height:1.35;
}
.bubble::after{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  border:8px solid transparent;border-bottom-color:var(--bubble-bg,#fff);border-top:0}

/* ---------- gösterim rozeti ---------- */
#demoBadge{
  position:fixed;left:0;right:0;bottom:calc(var(--sab) + var(--demo-bottom));
  z-index:9;display:flex;justify-content:center;pointer-events:none;
  opacity:0;transition:opacity .3s;padding:0 var(--sp-3);
}
#demoBadge.show{opacity:1}
#demoBadge .dbox{
  background:var(--glass-solid);border:1px solid rgba(var(--ink-a),.18);
  border-radius:var(--r-md);padding:8px 16px 9px;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
  max-width:90vw;box-shadow:var(--el-2);
}
#demoBadge .tag2{background:var(--accent);color:var(--on-accent);
  font-size:9px;font-weight:700;letter-spacing:2px;padding:2px 10px;border-radius:var(--r-pill)}
#demoBadge #demoTip{font-size:14px;font-weight:600;text-align:center;line-height:1.25}
#demoBadge .skip{font-size:10px;opacity:.55;letter-spacing:.4px}

/* ---------- günlük ödül / görev / hafta kutuları ---------- */
#dailyBox{
  display:none;margin-top:14px;
  background:var(--daily-bg,rgba(255,211,90,.14));
  border:1px solid var(--daily-line,rgba(255,211,90,.35));
  border-radius:14px;padding:9px 12px;font-size:14px;
  align-items:center;justify-content:center;gap:var(--sp-2);
}
#dailyBox.show{display:flex}
#dailyBox .gift{font-size:17px}
#dailyBox b{color:var(--daily-ink,var(--gold))}

#missionBox,#weekBox{
  display:none;text-align:left;
  background:rgba(var(--ink-a),.05);border:1px solid rgba(var(--ink-a),.10);
  border-radius:14px;padding:10px 12px;
}
#missionBox{margin-top:10px}
#weekBox{margin-top:var(--sp-2)}
#missionBox.show,#weekBox.show{display:block}
#missionBox .mtitle,#weekBox .mtitle{font-size:9px;letter-spacing:2px;opacity:.5;margin-bottom:7px}
#missionBox .mrow,#weekBox .mrow{
  display:grid;grid-template-columns:1fr auto;gap:2px var(--sp-2);
  align-items:center;margin-bottom:7px;font-size:13px;
}
#missionBox .mrow:last-child,#weekBox .mrow:last-child{margin-bottom:0}
#missionBox .mrow.done .mtx,#weekBox .mrow.done .mtx{opacity:.5;text-decoration:line-through}
#missionBox .mct,#weekBox .mct{font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
#missionBox .mbar,#weekBox .mbar{
  grid-column:1/3;height:4px;border-radius:var(--r-pill);
  background:rgba(var(--ink-a),.12);overflow:hidden;
}
#missionBox .mbar i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--good),var(--good-2));transition:width var(--t-macro)}
#missionBox .mrow.done .mbar i{background:var(--good)}
#weekBox .mbar i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#ffb03b,var(--gold));transition:width var(--t-macro)}

/* ---------- azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  /* geri sayım göstergesi işlevsel: süresi korunur */
  .btn.next .autofill.run{transition-duration:var(--dur,2600ms)!important}
}