/* Miner's Reign · görsel tema ("pirinç ve arduvaz")
 * style.css'ten SONRA yüklenir; yalnızca renk, kenar, gölge ve doku değiştirir — yerleşim, boyut ve boşluklara
 * dokunmaz (arayüz testleri ve dokunma hedefleri aynı kalır). Kaldırılırsa oyun eski görünümüne döner.
 * Grafik kalitesi <html data-kalite="dusuk|orta|yuksek"> özniteliğiyle gelir (render.js yazar); düşük kalitede
 * pahalı olan buzlu cam (backdrop-filter) kapalıdır. */

:root{
  /* palet: sıcak pirinç vurgu, mavi-gri arduvaz zemin */
  --ink:#f3efe2; --dim:#a9b0b6; --line:rgba(255,236,190,.08);
  --panel:rgba(22,27,33,.86); --solid:#161b21; --raise:#1f262e; --edge:rgba(222,190,110,.42);
  --amber:#e8c562; --amber-deep:#a4802a; --bad:#ff7d6e; --good:#83d68e;
  /* temaya özgü */
  --t-pirinc-1:#f4dc8a; --t-pirinc-2:#c9a043; --t-pirinc-3:#8a6a22;
  --t-arduvaz-1:#26303a; --t-arduvaz-2:#1a2027; --t-arduvaz-3:#12161b;
  --t-parilti:inset 0 1px 0 rgba(255,244,214,.10);
  --t-golge:0 6px 18px rgba(0,0,0,.35);
  --t-cam:blur(10px) saturate(1.15);
}

/* ---------- zemin ve giriş ---------- */
html,body{background:var(--t-arduvaz-3)}
#auth{background:
  radial-gradient(90% 60% at 50% 0%,rgba(232,197,98,.16) 0%,rgba(232,197,98,0) 60%),
  radial-gradient(120% 80% at 50% 0%,#2a4359 0%,#121820 72%)}
.logo{color:#f6efd8;text-shadow:0 1px 0 #fff6d8,0 4px 0 var(--t-pirinc-3),0 10px 24px rgba(0,0,0,.45)}
input,select{background:#0e1216;border-color:#323c46;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
input:focus,select:focus{border-color:var(--t-pirinc-2)}

/* ---------- düğmeler ---------- */
.btn{background:linear-gradient(180deg,var(--t-arduvaz-1),var(--raise));box-shadow:var(--t-parilti),0 1px 2px rgba(0,0,0,.3)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.btn.primary{background:linear-gradient(180deg,var(--t-pirinc-1) 0%,var(--t-pirinc-2) 55%,var(--t-pirinc-3) 100%);color:#251b04;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.6),inset 0 -3px 0 rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.3);text-shadow:0 1px 0 rgba(255,240,190,.45)}
.btn.danger{background:linear-gradient(180deg,rgba(255,125,110,.08),rgba(255,125,110,0))}
.ib{background:linear-gradient(180deg,rgba(38,48,58,.92),var(--panel));box-shadow:var(--t-parilti),0 2px 6px rgba(0,0,0,.3)}
.ib:active{transform:translateY(1px)}
.seg{background:rgba(0,0,0,.34);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.seg button.on{background:linear-gradient(180deg,#fbf6e6,#e4dcc4);color:#1a1f25;box-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ---------- üst çubuk ve kaynaklar ---------- */
.res div{background:linear-gradient(180deg,rgba(38,47,57,.9),var(--panel));box-shadow:var(--t-parilti),0 2px 8px rgba(0,0,0,.28)}
.res .full{color:var(--t-pirinc-1);text-shadow:0 0 8px rgba(232,197,98,.45)}

/* ---------- alt sekmeler ---------- */
.tabs{background:linear-gradient(180deg,var(--t-arduvaz-1),var(--t-arduvaz-3));border-top:1px solid rgba(222,190,110,.22);box-shadow:0 -6px 18px rgba(0,0,0,.35)}
.tabs button.on{color:var(--t-pirinc-1);background:radial-gradient(70% 90% at 50% 100%,rgba(232,197,98,.16),rgba(232,197,98,0) 70%)}
.tabs button.on svg{filter:drop-shadow(0 0 6px rgba(232,197,98,.45))}

/* ---------- paneller, kartlar, pencereler ---------- */
.mini{background:linear-gradient(180deg,rgba(36,45,54,.92),var(--panel));box-shadow:var(--t-parilti),var(--t-golge)}
.sheet{background:linear-gradient(180deg,var(--t-arduvaz-1) 0,var(--solid) 120px);border-color:rgba(222,190,110,.18);box-shadow:var(--t-parilti),0 -12px 34px rgba(0,0,0,.45)}
.sheet-head{border-bottom-color:rgba(222,190,110,.16);background:linear-gradient(180deg,rgba(232,197,98,.05),rgba(232,197,98,0))}
.sheet-head h2,.modal-card h3,.mini h3{color:#f7f0da;text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 14px rgba(232,197,98,.12);letter-spacing:.3px}
.card{background:linear-gradient(180deg,#232b34,var(--raise));box-shadow:var(--t-parilti),0 1px 3px rgba(0,0,0,.25)}
.modal{background:rgba(6,9,12,.62)}
.modal-card{background:linear-gradient(180deg,var(--t-arduvaz-1) 0,var(--solid) 140px);box-shadow:var(--t-parilti),0 -12px 34px rgba(0,0,0,.5)}
.bar{background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.bar i{background:linear-gradient(90deg,var(--t-pirinc-3),var(--t-pirinc-1))}

/* ---------- harita etiketleri ---------- */
.crest{box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)}

/* ================= PC ve mobil deri (Y2, 22 Ekim kararı; yerleşim style.css'te, Ajan 5) =================
 * Aynı bileşen iki kipte farklı giydirilir: PC'de yan paneller çerçeveli pencere gibi (odaktaki pencere belirgin),
 * dikey gezinme şeridi, fare üzeri durumları, klavye kısayolu tuş başlıkları; mobilde alt sayfa (tutamaklı, üst kenarı
 * pirinç çizgili), başparmak bölgesindeki alt gezinme. Yalnız renk, kenar, gölge ve süs; boyut ve boşluk değişmez. */

/* ---------- PC: dikey gezinme şeridi ---------- */
html[data-kip="pc"] .tabs{background:linear-gradient(90deg,var(--t-arduvaz-3),var(--t-arduvaz-1));border-right:1px solid rgba(222,190,110,.22);box-shadow:6px 0 18px rgba(0,0,0,.35)}
html[data-kip="pc"] .tabs button.on{background:linear-gradient(90deg,rgba(232,197,98,.20),rgba(232,197,98,0) 80%);box-shadow:inset 3px 0 0 var(--t-pirinc-2)}
html[data-kip="pc"] .tabs button[data-kisayol]::after{color:var(--t-pirinc-1);opacity:.55}
html[data-kip="pc"] .tabs button.on[data-kisayol]::after{opacity:.9}

/* ---------- PC: yan paneller pencere gibi; odaktaki (data-ust) belirgin, arkadaki sönük ---------- */
html[data-kip="pc"] .sheet{background:linear-gradient(180deg,var(--t-arduvaz-1) 0,var(--solid) 96px);border-color:rgba(222,190,110,.20);
  box-shadow:var(--t-parilti),0 0 0 1px rgba(0,0,0,.45),0 14px 40px rgba(0,0,0,.5)}
html[data-kip="pc"] .sheet[data-ust]{border-color:rgba(222,190,110,.50);box-shadow:var(--t-parilti),0 0 0 1px rgba(0,0,0,.45),0 0 0 3px rgba(232,197,98,.08),0 18px 48px rgba(0,0,0,.55)}
html[data-kip="pc"] .sheet:not([data-ust]) .sheet-head h2{color:#cfc8b2}
html[data-kip="pc"] .sheet-head{background:linear-gradient(180deg,rgba(232,197,98,.07),rgba(232,197,98,0)),repeating-linear-gradient(90deg,rgba(255,236,190,.025) 0 2px,transparent 2px 6px)}
html[data-kip="pc"] .sheet[data-ust] .sheet-head{border-bottom-color:rgba(222,190,110,.34)}

/* ---------- PC: orta pencere, ipucu, kısayol tuşları, bildirimler ---------- */
html[data-kip="pc"] .modal{background:radial-gradient(70% 70% at 50% 45%,rgba(6,9,12,.45),rgba(6,9,12,.78))}
html[data-kip="pc"] .modal-card{border:1px solid rgba(222,190,110,.42);box-shadow:var(--t-parilti),0 0 0 1px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6)}
#ipucu{background:linear-gradient(180deg,var(--t-arduvaz-1),var(--solid));border-color:rgba(222,190,110,.45);box-shadow:var(--t-parilti),0 6px 18px rgba(0,0,0,.45)}
.kbd-list kbd{background:linear-gradient(180deg,#2b3540,#1a2027);border-color:rgba(222,190,110,.40);color:var(--t-pirinc-1);box-shadow:inset 0 1px 0 rgba(255,244,214,.14),0 2px 0 #0b0e11}
html[data-kip="pc"] .toast{box-shadow:var(--t-parilti),0 8px 22px rgba(0,0,0,.45)}

/* ---------- PC: fare üzeri (yalnız gerçek üzerinde durabilen işaretçi) ---------- */
@media (hover:hover) and (pointer:fine){
  html[data-kip="pc"] .btn:hover{filter:brightness(1.08)}
  html[data-kip="pc"] .btn.primary:hover{filter:brightness(1.06) saturate(1.05)}
  html[data-kip="pc"] .ib:hover{box-shadow:var(--t-parilti),0 0 0 1px rgba(222,190,110,.35),0 2px 6px rgba(0,0,0,.3)}
  html[data-kip="pc"] .tabs button:not(.on):hover{color:var(--ink);background:linear-gradient(90deg,rgba(255,236,190,.06),rgba(255,236,190,0))}
  html[data-kip="pc"] .card:hover{box-shadow:var(--t-parilti),0 0 0 1px rgba(222,190,110,.18),0 2px 8px rgba(0,0,0,.3)}
  html[data-kip="pc"] .sheet:not([data-ust]):hover{border-color:rgba(222,190,110,.32)}
}

/* ---------- mobil: alt sayfa tutamağı ve pirinç üst kenar, alt gezinme ---------- */
html[data-kip="mobil"] .sheet{border-top-color:rgba(222,190,110,.38)}
html[data-kip="mobil"] .sheet::before{content:"";position:absolute;top:5px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;
  background:linear-gradient(90deg,var(--t-pirinc-3),var(--t-pirinc-1),var(--t-pirinc-3));opacity:.55;pointer-events:none}
html[data-kip="mobil"] .tabs button.on{box-shadow:inset 0 2px 0 var(--t-pirinc-2)}
html[data-kip="mobil"] .modal-card{border-top:1px solid rgba(222,190,110,.38)}

/* ---------- buzlu cam: yalnızca orta ve yüksek kalitede (mobil GPU'da pahalı) ---------- */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root:not([data-kalite="dusuk"]) .res div,
  :root:not([data-kalite="dusuk"]) .mini,
  :root:not([data-kalite="dusuk"]) .ib{-webkit-backdrop-filter:var(--t-cam);backdrop-filter:var(--t-cam)}
}

/* ---------- hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion:reduce){
  .btn:active,.ib:active{transform:none}
}
/* ---------- yüksek karşıtlık tercihi: süs gölgeleri ve buzlu cam kalkar, kenarlar belirginleşir ---------- */
@media (prefers-contrast:more){
  .sheet,.modal-card,.card,.mini,.res div,.ib{box-shadow:none;border-color:var(--t-pirinc-2)}
  html[data-kip="mobil"] .sheet::before{opacity:1}
}