:root{
    --night:#1a1626; --night2:#241d33;
    --gold:#e9a83a; --gold2:#f7cf6e;
    --cream:#f6e7c8;
    --cay:#c9422e; --cay2:#e8684f;
    --fistik:#8db255;
    --navy:#26305c;
    --ink:#141020;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:var(--night);
    overscroll-behavior:none}
  body{font-family:"IBM Plex Mono",Consolas,monospace;color:var(--cream)}
  /* touch-action:none SART. Varsayilan "auto" ile tarayici, parmak kaydirmayi
     sayfa kaydirma jesti sanip dokunmayi oyundan geri aliyor: pointercancel
     atiyor ve pointermove akisi kesiliyor. O zaman karakter ilk dokunulan
     noktanin bayat koordinatina yuruyor ya da hic hareket etmiyor.            */
  /* Boyut JS'ten (resize(), canvas-audio.js) innerWidth/innerHeight ile px olarak gelir.
     Telefonda 100vh adres/arac cubugu GIZLIYMIS gibi olculur ve gorunur alandan uzundur:
     canvas dikey esniyor (bulanik) ve alt HUD (can tepsisi, silahlar) cubugun arkasinda
     kaliyordu. Asagidaki 100dvh yalniz JS calismadan onceki ilk kare icin.          */
  #game{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;image-rendering:pixelated;
    touch-action:none;user-select:none;-webkit-user-select:none;
    -webkit-tap-highlight-color:transparent}
  .px{font-family:"Press Start 2P",Consolas,monospace}

  .screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-start;
    flex-direction:column;gap:0;z-index:10;background:rgba(20,16,32,.82);backdrop-filter:blur(2px);
    overflow-y:auto;overflow-x:hidden;padding:12px 0;-webkit-overflow-scrolling:touch}
  /* Icerik sigiyorsa ortalar, sigmiyorsa yukaridan baslatip kaydirmaya birakir.
     justify-content:center bu ikinci durumda ust tarafi kirptigi icin kullanilmaz. */
  .screen > :first-child{margin-top:auto}
  .screen > :last-child{margin-bottom:auto}
  .screen.hidden{display:none}

  /* ---------- title ---------- */
  #menu{background:radial-gradient(ellipse at 50% 30%, #2c2342 0%, var(--night) 65%);background-size:cover;background-position:center}
  .title-wrap{display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center;padding:24px}
  .title-left{max-width:560px;text-align:center;background:rgba(20,16,32,.45);padding:24px;border-radius:6px}
  .eyebrow{font-size:10px;line-height:2.1;letter-spacing:.3em;color:var(--fistik);text-transform:uppercase;margin-bottom:14px}
  h1.px{font-size:clamp(22px,4.2vw,44px);line-height:1.35;color:var(--gold);
    text-shadow:0 4px 0 #7a4c12, 0 8px 0 rgba(0,0,0,.45)}
  h1 .alt{display:block;font-size:.42em;color:var(--cream);margin-top:14px;text-shadow:0 3px 0 rgba(0,0,0,.5)}
  .lore{margin:22px auto 8px;font-size:14px;line-height:1.7;color:#cfc2a8;max-width:440px}
  .lore b{color:var(--gold2)}
  .boss-stage{display:flex;flex-direction:column;align-items:center;gap:6px}
  .boss-stage img{height:220px;image-rendering:pixelated;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
  .boss-tag{font-size:9px;color:var(--cay2);letter-spacing:.25em}
  .btn{cursor:pointer;border:none;font-family:"Press Start 2P",monospace;font-size:15px;
    color:var(--ink);background:var(--gold);padding:18px 42px;margin-top:26px;
    box-shadow:0 5px 0 #8a5c14, 0 9px 0 rgba(0,0,0,.4);transition:transform .06s}
  .btn:hover{background:var(--gold2)}
  .btn:active{transform:translateY(4px);box-shadow:0 1px 0 #8a5c14}
  .btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
  .keys{margin-top:26px;font-size:12px;color:#9d92b5;line-height:2}
  .keys kbd{background:#332a4d;border:1px solid #57496e;border-bottom-width:3px;border-radius:4px;
    padding:2px 7px;color:var(--cream);font-family:inherit;font-size:11px}

  /* ---------- dokunmatik / masaustu ayrimi ---------- */
  .touch-only{display:none}
  body.touch .touch-only{display:block}
  body.touch .desktop-only{display:none}

  /* ---------- level up ---------- */
  #levelup{background:rgba(20,16,32,.78)}
  .lv-head{font-size:16px;color:var(--gold);margin-bottom:6px;text-shadow:0 3px 0 rgba(0,0,0,.5)}
  .lv-sub{font-size:12px;color:#9d92b5;margin-bottom:26px}
  .cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;padding:0 16px}
  .card{width:230px;background:var(--cream);color:#3a2c17;border:3px solid var(--cay);
    cursor:pointer;text-align:left;padding:0;position:relative;font-family:inherit;
    box-shadow:0 6px 0 rgba(0,0,0,.45);transition:transform .08s}
  .card:hover,.card:focus-visible{transform:translateY(-6px);outline:none;border-color:var(--gold)}
  .card::before{content:attr(data-key);position:absolute;top:-12px;left:-12px;width:26px;height:26px;
    background:var(--cay);color:var(--cream);font-family:"Press Start 2P",monospace;font-size:12px;
    display:flex;align-items:center;justify-content:center;border-radius:50%}
  .card .c-top{display:flex;align-items:center;gap:10px;padding:14px 14px 8px;border-bottom:2px dashed #c9b48c}
  .card canvas{image-rendering:pixelated}
  .card .c-name{font-family:"Press Start 2P",monospace;font-size:10px;line-height:1.5;color:#7a2716}
  .card .c-lv{font-size:11px;color:#8a6a33;font-weight:600}
  .card .c-desc{padding:10px 14px 14px;font-size:12.5px;line-height:1.55}
  .card.is-new .c-lv{color:var(--fistik);}
  .skipline{margin-top:24px}

  /* ---------- sandık slot makinesi ---------- */
  #chestScr{background:rgba(20,16,32,.84)}
  .slotbox{width:128px;height:128px;background:var(--cream);border:4px solid var(--gold);
    display:flex;align-items:center;justify-content:center;margin-top:10px;
    box-shadow:0 0 0 4px #8a5c14,0 8px 0 rgba(0,0,0,.45)}
  .slotbox canvas{image-rendering:pixelated}
  .slotbox.win{animation:slotwin .4s steps(2) 4}
  @keyframes slotwin{
    0%,100%{box-shadow:0 0 0 4px #8a5c14,0 8px 0 rgba(0,0,0,.45)}
    50%{box-shadow:0 0 34px 14px rgba(247,207,110,.9),0 8px 0 rgba(0,0,0,.45)}
  }
  .slotbox.evo{border-color:#f7cf6e;box-shadow:0 0 22px #f7cf6e,0 0 44px #8b5cf6;animation:evoPulse .6s ease-in-out infinite alternate}
  @keyframes evoPulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}
  .slotlv.evo{color:#f7cf6e;text-shadow:0 0 8px #8b5cf6}
  .slotname{margin-top:22px;font-size:13px;color:var(--gold2);min-height:18px;
    text-shadow:0 3px 0 rgba(0,0,0,.5)}
  .slotlv{margin-top:10px;font-size:12.5px;color:#cfc2a8;min-height:16px}
  .skip-btn{background:none;border:1px solid #57496e;color:#9d92b5;font-family:inherit;
    font-size:12px;padding:8px 18px;cursor:pointer}
  .skip-btn:hover{color:var(--cream);border-color:var(--cream)}
  body.touch .btn,body.touch .skip-btn{min-height:44px}   /* dokunma hedefi tabani */
  #tarifBtn{margin-top:16px}

  /* ---------- tarif rehberi ---------- */
  #tarifListe{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;padding:4px 10px}
  .tarif-satir{display:flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid #4a3f5e;background:rgba(20,16,32,.7);font-size:12px}
  .tarif-satir.hazir{border-color:#f7cf6e;box-shadow:0 0 10px #f7cf6e}
  .tarif-satir.evrimli{border-color:#8b5cf6;opacity:.75}
  .tarif-satir.kilitli{opacity:.5}
  .tarif-ad{flex:1;text-align:left}

  /* ---------- end screens ---------- */
  .end-title{font-size:clamp(18px,3.4vw,34px);line-height:1.5;text-align:center;padding:0 20px}
  #gameover .end-title{color:var(--cay2);text-shadow:0 4px 0 rgba(0,0,0,.5)}
  #win .end-title{color:var(--gold);text-shadow:0 4px 0 #7a4c12}
  .end-sub{margin-top:16px;font-size:14px;color:#cfc2a8;text-align:center;max-width:520px;line-height:1.7;padding:0 20px}
  .stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap;justify-content:center}
  .stat{text-align:center}
  .stat .v{font-family:"Press Start 2P",monospace;font-size:20px;color:var(--cream)}
  .stat .k{margin-top:10px;font-size:11px;letter-spacing:.15em;color:#9d92b5;text-transform:uppercase}

  #paused .end-title{color:var(--cream)}
  .btnrow{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px}
  .btnrow .btn{margin-top:0}
  .charrow{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  .charcard{display:flex;gap:10px;align-items:center;background:#241e38;border:1px solid #57496e;
    padding:8px 12px;cursor:pointer;font-family:inherit;color:#9d92b5;font-size:11.5px;
    text-align:left;line-height:1.5;max-width:230px}
  .charcard.sel{border-color:var(--gold);background:#2e2648;color:#cfc2a8}
  .charcard.lok{opacity:.5;cursor:default}
  .modrow{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
  .modcard{background:#241e38;border:1px solid #57496e;padding:10px 14px;cursor:pointer;
    font-family:inherit;color:#9d92b5;font-size:11.5px;text-align:left;line-height:1.6}
  .modcard.sel{border-color:var(--gold);background:#2e2648;color:#cfc2a8}
  .modcard .m-name{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold2)}
  .charcard canvas{image-rendering:pixelated;flex:none}

  /* top en az 140px: boss bari ve dar ekranda alta inen AV/₺ ile cakismasin (mobil duzen) */
  .banner{position:fixed;top:max(16%,140px);left:0;right:0;padding:0 14px;text-align:center;z-index:5;pointer-events:none;
    font-family:"Press Start 2P",monospace;font-size:clamp(13px,2.2vw,20px);line-height:1.4;color:var(--gold2);
    text-shadow:0 3px 0 rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
  .banner.show{opacity:1}
  .banner .b2{display:block;margin-top:10px;font-size:max(.6em,10px);line-height:1.6;color:var(--cream)}

  .sesbtn{position:fixed;top:20px;right:12px;z-index:20;width:38px;height:38px;
    border:1px solid #57496e;background:rgba(20,16,32,.75);color:var(--cream);
    font-size:17px;line-height:1;cursor:pointer;border-radius:6px;padding:0}
  /* mobil duzen (2026-10-12): oyun sirasinda ses dugmesinin yerini duraklatma alir; ses
     duraklatma ekraninda ve menude kalir. Durum game-loop.js frame()'den body[data-durum]. */
  .durbtn{display:none;position:fixed;top:20px;right:12px;z-index:20;width:38px;height:38px;
    border:1px solid #57496e;background:rgba(20,16,32,.75);border-radius:6px;padding:0;
    align-items:center;justify-content:center;gap:5px;cursor:pointer;touch-action:manipulation}
  .durbtn span{display:block;width:5px;height:15px;background:var(--cream)}
  body.touch[data-durum="play"] .durbtn{display:flex}
  body.touch[data-durum="play"] .sesbtn{display:none}
  /* yatayda bant oyuncunun ustune dusmesin (boss bari yatayda ~98px'te biter) */
  @media (orientation: landscape){ .banner{top:max(16%,104px)} }
  /* kucuk dikey telefon (SE 375x667): 4 kart + alt dugmeler tek ekrana sigsin */
  @media (orientation: portrait) and (max-height: 760px){
    #cards,#falKartlar{gap:9px}
    #cards .c-top,#falKartlar .c-top{padding:7px 12px 5px}
    #cards .c-desc,#falKartlar .c-desc{padding:6px 12px 8px;font-size:12px;line-height:1.45}
    #levelup .lv-sub,#falScr .lv-sub{margin-bottom:10px}
    #levelup .skipline{margin-top:8px}
  }
  body.touch .skipline{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 12px}

  /* ---------- dar ekran uyarlamasi ---------- */
  @media (max-width: 720px){
    .title-wrap{gap:18px;padding:12px}
    .boss-stage img{height:130px}
    .lore{margin:16px auto 6px;font-size:13px;line-height:1.6}
    .eyebrow{margin-bottom:10px}
    .btn{padding:15px 28px;font-size:13px;margin-top:18px}
    .keys{margin-top:16px;font-size:11px;line-height:1.9}
    .cards{gap:12px}
    .card{width:min(280px,86vw)}
    .stats{gap:20px;margin-top:20px}
    .skipline{margin-top:16px}
  }

  /* ---------- alcak ekran uyarlamasi ----------
     Gomulu itch.io cercevesi ve yatay tutulan telefon icin. Genislik degil
     YUKSEKLIK darsa menu sikisir; yoksa kaydirmak gerekir.                  */
  @media (max-height: 760px){
    .title-wrap{gap:16px;padding:8px}
    h1.px{font-size:clamp(18px,3.2vw,32px);line-height:1.25}
    h1 .alt{margin-top:8px}
    .eyebrow{margin-bottom:6px;line-height:1.6}
    .boss-stage img{height:150px}
    .lore{margin:12px auto 6px;font-size:12.5px;line-height:1.55}
    .charrow,.modrow{margin-top:8px}
    .btn{margin-top:12px;padding:12px 24px}
    .keys{margin-top:10px;line-height:1.7}
    .skipline{margin-top:12px}
    .stats{margin-top:16px;gap:18px}
    .end-sub{margin-top:10px}
  }
  @media (max-height: 520px){
    /* yatay telefon: secim kartlari tek sirada; eskiden 2+1 dizilip alt dugme satiri
       (Yeniden kar / Pas gec / TARIF) ekranin disinda kaliyordu (mobil duzen 2026-10-12) */
    #levelup .lv-head,#falScr .lv-head{font-size:13px;margin-bottom:2px}
    #levelup .lv-sub,#falScr .lv-sub{margin-bottom:8px;font-size:11px}
    #cards,#falKartlar{flex-wrap:nowrap;gap:10px;padding:0 12px;width:100%;justify-content:center}
    #cards .card,#falKartlar .card{flex:1 1 0;min-width:0;max-width:240px}
    #cards .c-top,#falKartlar .c-top{padding:8px 10px 6px;gap:8px}
    #cards .c-name,#falKartlar .c-name{font-size:9px}
    #cards .c-desc,#falKartlar .c-desc{padding:6px 10px 9px;font-size:11.5px;line-height:1.45}
    #levelup .skipline{margin-top:6px}
    .lore{display:none}
    .boss-stage img{height:96px}
    .boss-tag{display:none}
    .eyebrow{display:none}
    .keys{font-size:10px;margin-top:8px}
    .charcard{font-size:10.5px;padding:6px 9px}
    .modcard{font-size:10.5px;padding:7px 10px}
  }

  @media (prefers-reduced-motion: reduce){
    .btn,.card{transition:none}
  }

/* ---------- VS tamamlama (2026-09-23) ---------- */
.card .c-ban{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;
  background:#7a2716;color:#f6e7c8;font-size:12px;line-height:24px;text-align:center;cursor:pointer}
.card .c-ban:hover{background:#c9422e}
#basarimList{width:min(620px,92vw);flex:none}
.basarim{display:flex;gap:12px;align-items:center;padding:8px 10px;margin:6px 0;
  background:rgba(20,16,32,.6);border:2px solid #3a3150;color:#9d92b5;font-size:12px;line-height:1.5}
.basarim.acik{border-color:var(--gold);color:#f6e7c8}
.basarim-ozet{margin-top:12px;font-size:11px;line-height:1.8;color:#cfc2a8}
.durak-stat{max-width:min(620px,92vw);font-size:11px;line-height:1.8;color:#cfc2a8;text-align:center;margin:8px 0}
#pastaneItems{max-height:62vh;overflow:auto}
/* 6 karakter: 3'lu kompakt izgara (BASLA ekranda kalsin) */
.charrow{display:grid;grid-template-columns:repeat(3,1fr)}
.charrow .charcard{max-width:none;padding:6px 8px;font-size:10.5px;gap:8px}
.chardesc{margin-top:8px;min-height:2.6em;font-size:11.5px;line-height:1.5;color:#cfc2a8;text-align:left}
.modcard.kural{padding:7px 10px}
@media (max-width: 520px){ .charrow{grid-template-columns:repeat(2,1fr)} }
/* koleksiyon, hasar tablosu, gizli tarif */
#koleksiyon{width:min(620px,92vw);text-align:center}
.kol-baslik{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold2);margin:12px 0 6px}
.kol{display:inline-flex;flex-direction:column;align-items:center;width:70px;margin:3px;padding:6px 2px;font-size:20px;
  background:rgba(20,16,32,.6);border:1px solid #3a3150;opacity:.55}
.kol.acik{opacity:1;border-color:var(--gold)}
.kol small{font-size:8.5px;line-height:1.3;color:#cfc2a8;margin-top:3px}
.kol-ozet{font-size:11px;color:#cfc2a8}
/* Kadikoy Ansiklopedisi (VS Bestiary) */
#ansiklopedi{width:min(620px,92vw);text-align:center}
.ansik{display:flex;gap:10px;align-items:center;text-align:left;padding:6px 10px;margin:4px 0;font-size:11px;line-height:1.45;
  color:#cfc2a8;background:rgba(20,16,32,.6);border:1px solid #3a3150;opacity:.55}
.ansik.acik{opacity:1;border-color:var(--gold)}
.ansik>span:first-child{font-size:22px}
.ansik b{color:#f6e7c8}
.hasar-tablo{margin:10px auto 0;border-collapse:collapse;font-size:11px;color:#f6e7c8}
.hasar-tablo td,.hasar-tablo th{padding:3px 10px;text-align:left}
.hasar-tablo th{color:var(--gold2);font-weight:600}
.hasar-tablo td:nth-child(2),.hasar-tablo td:nth-child(3){text-align:right}
.gizli-satir{display:flex;gap:8px;justify-content:center;margin-top:14px}
#gizliKod{background:#241e38;border:1px solid #57496e;color:#f6e7c8;padding:8px 10px;font-family:inherit;width:180px}