* { margin:0; padding:0; box-sizing:border-box }
  [hidden] { display:none !important }
  html, body { height:100%; overflow:hidden; background:#e8f0ef }
  body { font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
         -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
         color:#3b4a43 }
  #c { display:block; width:100vw; height:100vh; touch-action:none }
  button { font:inherit; color:inherit; border:0; background:none; cursor:pointer }

  /* guvenli alan paylari: centik, durum cubugu ve ana ekran cubugu icin.
     tek yerden tanimli, boylece tuvale cizilen hud da ayni degeri okuyabiliyor */
  :root { --sat: env(safe-area-inset-top, 0px);  --sar: env(safe-area-inset-right, 0px);
          --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px) }
  /* gorunmez olcu kutusu: js paylari buranin computed padding'inden okuyor */
  #safe { position:fixed; top:0; left:0; width:0; height:0; visibility:hidden;
          pointer-events:none; padding:var(--sat) var(--sar) var(--sab) var(--sal) }

  /* alt kose dugmeleri */
  .corner { position:fixed; bottom:calc(16px + var(--sab)); width:46px; height:46px; border-radius:16px;
            display:flex; align-items:center; justify-content:center;
            background:rgba(255,255,255,0.74); box-shadow:0 2px 10px rgba(50,70,60,0.15);
            backdrop-filter:blur(6px) }
  #btnShop { left:calc(16px + var(--sal)) }
  #btnSet { right:calc(16px + var(--sar)) }
  #btnRetry { position:fixed; left:50%; transform:translateX(-50%);
              bottom:calc(18px + var(--sab));
              padding:11px 22px; border-radius:22px; font-weight:600; font-size:15px;
              background:rgba(255,255,255,0.88); box-shadow:0 3px 14px rgba(50,70,60,0.2) }

  /* magaza ve ayarlar ayni alt sayfa kaliba oturur */
  #shop, #settings { position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center;
          background:rgba(40,58,50,0.34) }
  /* magazada ustteki bosluk onizlemeye ayrildi, perde orada seffaf basliyor */
  #shop { background:linear-gradient(rgba(40,58,50,0) 0%, rgba(40,58,50,0.06) 42%, rgba(40,58,50,0.40) 100%) }
  /* uzun ekranlarda panel kisalir, ustunde onizlemeye yer kalir */
  @media (min-height:640px){ #shop .sheet { max-height:60vh } }
  .sheet { width:min(560px,100%); max-height:84vh; display:flex; flex-direction:column;
           background:#f6f2e9; border-radius:22px 22px 0 0;
           padding:16px calc(16px + var(--sar)) calc(22px + var(--sab)) calc(16px + var(--sal)) }
  /* ayarlar paneli uzadi, alcak ekranlarda icerik kesilmesin diye kaysin */
  #settings .sheet { overflow-y:auto }

  .shead { display:flex; align-items:center; gap:10px; margin-bottom:12px }
  .shead .ttl { font-weight:700; font-size:19px; flex:1 }
  .coins { display:flex; align-items:center; gap:6px; font-weight:700; font-size:15px }
  .dot { width:14px; height:14px; border-radius:50%; background:#e8b45c;
         border:2px solid #c68f3c; flex:none }
  #shopClose { width:32px; height:32px; border-radius:11px; font-size:20px; line-height:1;
               background:rgba(59,74,67,0.09) }
  .tabs { display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap }
  .tab { padding:7px 14px; border-radius:14px; font-size:13px; font-weight:600;
         background:rgba(59,74,67,0.07) }
  .tab.on { background:#3b4a43; color:#f6f2e9 }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:10px;
          overflow-y:auto; padding-bottom:4px }
  .card { padding:11px 9px; border-radius:16px; background:#fff; text-align:center;
          border:2px solid transparent }
  .card.on { border-color:#3b4a43 }
  .card.locked { opacity:0.45 }
  .sw { width:38px; height:38px; border-radius:12px; margin:0 auto 8px;
        box-shadow:inset 0 0 0 1px rgba(0,0,0,0.07) }
  .nm { font-size:12px; font-weight:600; line-height:1.25; min-height:2.4em }
  .pr { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:6px;
        font-size:12px; font-weight:700; color:#7a8a81 }
  .pr .dot { width:11px; height:11px; border-width:1.5px }

  /* ayarlar */
  .rows { display:flex; flex-direction:column; gap:9px }
  .row { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:#fff }
  .row .lbl { flex:1; font-size:14px; font-weight:600 }
  .row.col { flex-direction:column; align-items:stretch; gap:8px }
  /* tema dugmeleri ortak kapsulden cikip satiri esit bolusuyor */
  .row.col .seg { padding:0; background:none; gap:6px; flex-wrap:wrap }
  .row.col .sbtn { flex:1 1 0; min-width:0; padding:8px 6px; text-align:center;
                   background:rgba(59,74,67,0.07) }
  .row.col .sbtn.on { background:#3b4a43; color:#f6f2e9 }
  /* dar ekranda dort dugme tek sirada sigmiyor, ikili duzene gecsin */
  @media (max-width:430px){ .row.col .sbtn { flex:1 1 calc(50% - 6px) } }

  .seg { display:flex; gap:4px; padding:3px; border-radius:13px; background:rgba(59,74,67,0.07) }
  .sbtn { padding:6px 12px; border-radius:10px; font-size:13px; font-weight:700; letter-spacing:0.5px }
  .sbtn.on { background:#3b4a43; color:#f6f2e9 }
  .stats { margin-top:9px; padding:10px 14px; border-radius:16px; background:#fff }
  .srow { display:flex; align-items:baseline; gap:10px; padding:4px 0; font-size:13px }
  .srow span { flex:1; color:#7a8a81 }
  .srow b { font-weight:700; font-variant-numeric:tabular-nums }

  .ver { margin-top:12px; text-align:center; font-size:12px; color:#7a8a81 }
  .ver a { color:inherit }
  #setPrivRow { margin-top:4px }

  /* ilerlemeyi sifirla ve kendi onay penceremiz */
  #btnReset { width:100%; margin-top:9px; padding:11px; border-radius:16px;
              font-size:13px; font-weight:600; color:#b4553f; background:rgba(192,86,63,0.10) }
  #confirm { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
             padding:20px; background:rgba(40,58,50,0.44) }
  .dialog { width:min(330px,100%); padding:20px 18px 16px; border-radius:20px;
            background:#f6f2e9; box-shadow:0 14px 40px rgba(30,45,38,0.3) }
  .dttl { font-weight:700; font-size:17px; margin-bottom:7px }
  .dmsg { font-size:13px; line-height:1.5; color:#7a8a81; margin-bottom:16px }
  .dbtns { display:flex; gap:8px }
  .dbtn { flex:1; padding:11px; border-radius:14px; font-size:14px; font-weight:600;
          background:rgba(59,74,67,0.08) }
  .dbtn.warn { background:#c0563f; color:#f6f2e9 }

  /* gece temasinda dom arayuzu de kararir, aksi halde panel gece korkulugu gibi parliyor */
  [data-theme="gece"] body { color:#e9eff1 }
  [data-theme="gece"] .corner,
  [data-theme="gece"] #btnRetry { background:rgba(38,50,68,0.82) }
  [data-theme="gece"] .sheet { background:#232f42 }
  [data-theme="gece"] .row,
  [data-theme="gece"] .stats,
  [data-theme="gece"] .card { background:#2c3a50 }
  [data-theme="gece"] .seg,
  [data-theme="gece"] .tab,
  [data-theme="gece"] #shopClose { background:rgba(233,239,241,0.10) }
  [data-theme="gece"] .sbtn.on,
  [data-theme="gece"] .tab.on { background:#e9eff1; color:#232f42 }
  [data-theme="gece"] .card.on { border-color:#e9eff1 }
  [data-theme="gece"] .row.col .sbtn { background:rgba(233,239,241,0.10) }
  [data-theme="gece"] .row.col .sbtn.on { background:#e9eff1; color:#232f42 }
  [data-theme="gece"] .srow span,
  [data-theme="gece"] .pr,
  [data-theme="gece"] .ver { color:#93a2b5 }
  [data-theme="gece"] .sw { box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10) }
  [data-theme="gece"] .dialog { background:#232f42 }
  [data-theme="gece"] .dmsg { color:#93a2b5 }
  [data-theme="gece"] .dbtn { background:rgba(233,239,241,0.10) }
  [data-theme="gece"] .dbtn.warn { background:#c0563f; color:#f6f2e9 }
  [data-theme="gece"] #btnReset { color:#e58a72; background:rgba(229,138,114,0.14) }