/* Alperendiyar arayüz dili
   Çerçeve ve süsler görsel dosyası değil, elle çizilmiş döşenebilir SVG'ler (public/img/ui/):
   - cerceve.svg / cerceve-altin.svg : 9 dilimli panel çerçevesi (border-image … round) → her boyda bozulmadan uzar
   - serit.svg                       : üst/alt şerit kemer süsü (yatay tekrar)
   - doku.svg                        : deri/ahşap gürültü dokusu (zemin ve panel içi)
   Mekân görselleri (public/img/mekan/) panellerin tepesinde "kahraman şerit" (.mekan-gorsel) olarak durur. */
:root {
  --zemin: #15100a; --zemin2: #241a10; --zemin3: #33271a; --zemin4: #3f3020; --cizgi: #5a4628; --cizgi2: #8a6a2a;
  --metin: #f1e6cf; --metin2: #bfae8c; --altin: #d9a93a; --altin2: #f3d27a; --altin3: #8a6a2a;
  --kirmizi: #8e2a22; --kirmizi2: #c0463a; --lacivert: #2d4a73; --yesil: #6aa552; --gri: #a09a8e; --mavi: #5aa0e6; --mor: #b57ae6;
  --radius: 6px; --gutter: 16px; --cerceve: 14px;
  --doku: url('/img/ui/doku.svg');
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--zemin) var(--doku); color: var(--metin); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { padding-bottom: 76px; min-height: 100vh; }
body.giris-arka { background: #0e0a06 url('/img/mekan/kirkpinar.webp') center top / cover fixed no-repeat; }
body.giris-arka::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(14,10,6,.55), rgba(14,10,6,.92)); pointer-events: none; }
.gizli { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; margin: 0 0 8px; color: var(--altin2); letter-spacing: .4px; text-shadow: 0 1px 0 #000, 0 0 12px rgba(217,169,58,.15); }
h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
p { margin: 0 0 10px; } small { color: var(--metin2); }
a { color: var(--altin); }

/* ---- Üst şerit ---- */
#ust { position: sticky; top: 0; z-index: 10; background: linear-gradient(#3a2b16, #241a10 60%, #1b140c); border-bottom: 8px solid transparent; border-image: url('/img/ui/serit.svg') 0 0 8 0 round; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
.ust-ic { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--gutter) 6px; gap: 8px; }
.menu-dugme { background: none; border: 0; padding: 0; }
.logo { font-family: Georgia, serif; font-size: 21px; color: var(--altin2); font-weight: 700; letter-spacing: .5px; text-shadow: 0 1px 0 #000, 0 0 14px rgba(243,210,122,.25); }
.kaynaklar { display: flex; gap: 6px; font-size: 13px; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.kaynaklar span { background: linear-gradient(#2c2114, #1b140c); border: 1px solid var(--cizgi); box-shadow: inset 0 1px 0 rgba(255,220,150,.08), 0 1px 0 #000; padding: 2px 9px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.sayac-serit { padding: 4px var(--gutter); font-size: 13px; color: var(--metin2); background: #1b140c; border-top: 1px solid #000; display: flex; gap: 14px; overflow-x: auto; }
.kaynaklar .tikla { cursor: pointer; border-color: var(--altin3); }
.kaynak { display: inline-flex; align-items: center; gap: 4px; }
.kaynak b { font-weight: 600; }
.k-ikon { width: 18px; height: 18px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px #000); }
.kaynak .yedek { font-size: 13px; }
.pencere-serit { padding: 5px var(--gutter); font-size: 13px; color: #1a1408; background: linear-gradient(#f6dc8c, var(--altin) 60%, #c08a22); border-top: 1px solid #000; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; animation: pencere 2.4s ease-in-out infinite; }
.pencere-serit b { color: #1a1408; }
@keyframes pencere { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
/* Sıralama tablosu */
.sekme { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; } .sekme .dugme { padding: 6px 10px; font-size: 13px; }
.sira-tablo { display: flex; flex-direction: column; gap: 4px; }
.sira-satir { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; background: #1b140c; border: 1px solid var(--cizgi); border-radius: var(--radius); font-size: 14px; }
.sira-satir .sira { font-family: Georgia, serif; color: var(--altin2); text-align: center; font-weight: 700; }
.sira-satir:nth-child(1) .sira { color: #f6dc8c; text-shadow: 0 0 8px rgba(243,210,122,.7); } .sira-satir:nth-child(2) .sira { color: #d8d8d8; } .sira-satir:nth-child(3) .sira { color: #d49a5a; }
.sira-portre { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid var(--altin3); background: #0f0a06; display: grid; place-items: center; font-size: 16px; }
.sira-portre img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sira-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sira-ad small { margin-left: 4px; }
.sira-san { font-variant-numeric: tabular-nums; color: var(--altin2); white-space: nowrap; }
.sira-satir.benim { border-color: var(--altin); box-shadow: inset 0 0 0 1px rgba(217,169,58,.35); background: #241a10; }
/* Ocak seferi eşikleri */
.esikler { display: flex; gap: 4px; margin: 4px 0; } .esikler span { flex: 1; text-align: center; font-size: 11px; padding: 2px 0; border-radius: 3px; background: #0f0a06; border: 1px solid var(--cizgi); color: var(--metin2); }
.esikler span.gecti { border-color: var(--altin); color: var(--altin2); } .esikler span.odendi { background: linear-gradient(var(--altin2), var(--altin)); color: #1a1408; border-color: #5a4010; font-weight: 700; }
/* Ocak sohbeti */
.sohbet { background: #0f0a06; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--cizgi), inset 0 2px 8px rgba(0,0,0,.8); border-radius: var(--radius); padding: 8px 10px; font-size: 14px; height: 240px; overflow-y: auto; margin-bottom: 8px; }
.mesaj { padding: 3px 0; line-height: 1.35; } .mesaj b { color: var(--altin2); } .mesaj.benim b { color: var(--mavi); } .mesaj small { color: var(--metin2); font-size: 11px; margin-left: 4px; }
.mesaj.sistem { text-align: center; } .mesaj.sistem small { color: var(--altin); font-size: 12px; font-style: italic; }
/* Turnuva ağacı */
.tur-blok { margin-top: 10px; } .tur-blok > b { display: block; font-family: Georgia, serif; color: var(--altin2); margin-bottom: 4px; }
.mac { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--cizgi); border-radius: var(--radius); background: #1b140c; margin-bottom: 4px; font-size: 14px; }
.mac > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mac > span:nth-child(3) { text-align: right; }
.mac.benim { border-color: var(--altin); box-shadow: inset 0 0 0 1px rgba(217,169,58,.3); }
.mac .dugme { padding: 4px 8px; font-size: 12px; }
.guc { color: var(--altin2); font-size: .85em; font-weight: 700; text-shadow: 0 0 6px rgba(243,210,122,.5); }
.berat-rozet { color: var(--altin2); }
/* Dükkân paketleri */
.paketler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.paket { background: #1b140c var(--doku); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 10px 8px; text-align: center; box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.paket.firsat { border-color: var(--altin); box-shadow: inset 0 0 0 1px #000, 0 0 12px rgba(217,169,58,.3); }
.paket > b { font-family: Georgia, serif; font-size: 17px; color: var(--altin2); }
.paket > small { font-size: 12px; } .paket s { color: var(--metin2); }
.paket .dugme { width: 100%; margin-top: 4px; }
.paket-ikon { width: 44px; height: 44px; display: grid; place-items: center; font-size: 26px; color: var(--altin2); }
.paket-ikon img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 480px) { .paketler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .paketler { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sayac-serit b { color: var(--altin); font-variant-numeric: tabular-nums; }

/* ---- Paneller (uzayan çerçeve) ---- */
main { padding: 14px var(--gutter); max-width: 760px; margin: 0 auto; }
main > h1 { margin: 4px 0 10px; }
.kart { position: relative; padding: var(--cerceve); margin-bottom: 14px; border: var(--cerceve) solid transparent; border-image: url('/img/ui/cerceve.svg') 16 / var(--cerceve) round; background: #241a10 var(--doku); background-clip: padding-box; box-shadow: 0 6px 18px rgba(0,0,0,.45); color: var(--metin); }
.kart.vurgu { border-image-source: url('/img/ui/cerceve-altin.svg'); box-shadow: 0 0 0 1px rgba(243,210,122,.25), 0 0 24px rgba(217,169,58,.25), 0 6px 18px rgba(0,0,0,.45); }
.kart.kilit { opacity: .6; }
.kart .baslik { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kart .baslik > small { flex: none; white-space: nowrap; }
.kart > h1, .kart > h2, .kart > h3, .kart .baslik h2, .kart .baslik h3 { display: flex; align-items: center; gap: 8px; }
.kart > h2::before, .kart > h3::before, .kart .baslik h2::before, .kart .baslik h3::before { content: "◆"; font-size: 9px; color: var(--altin); text-shadow: none; }
.kart > h2::after, .kart > h3::after, .kart .baslik h2::after, .kart .baslik h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--altin3), transparent); margin-left: 4px; }
.kart .baslik h2::after, .kart .baslik h3::after { flex: 0 0 24px; }
.satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--cizgi) 20%, var(--cizgi) 80%, transparent) 1; }
.satir:first-of-type { border-top: 0; }

/* Mekân kahraman şeridi: panelin tepesinde, çerçeveye kadar taşar */
.mekan-gorsel { margin: calc(-1 * var(--cerceve)) calc(-1 * var(--cerceve)) 10px; height: 150px; background: #0e0a06 center / cover no-repeat; position: relative; }
.mekan-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(36,26,16,0) 45%, rgba(36,26,16,.92) 100%); }
.mekan-gorsel.kisa { height: 110px; }
.mekan-gorsel.uzun { height: 200px; }
.mekan-gorsel + .baslik, .mekan-gorsel + .kimlik { margin-top: -46px; position: relative; z-index: 1; }
.mekan-gorsel + .baslik small, .mekan-gorsel + .kimlik small { text-shadow: 0 1px 2px #000, 0 0 6px #000; color: var(--metin); }
.kimlik { display: flex; gap: 12px; align-items: center; }
/* Boy kimlik kartı: mekân görselinin üstüne biner */
.kimlik-kart { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: end; position: relative; z-index: 1; }
.mekan-gorsel + .kimlik-kart { margin-top: -84px; }
.kimlik-portre { aspect-ratio: 3 / 4; border: 2px solid var(--altin); border-radius: var(--radius); overflow: hidden; background: #0f0a06; box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(217,169,58,.15), 0 8px 18px rgba(0,0,0,.7); display: grid; place-items: center; font-size: 48px; }
.kimlik-portre img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.kimlik-bilgi h2 { margin-bottom: 2px; text-shadow: 0 1px 0 #000, 0 0 8px #000; }
.kimlik-bilgi small { display: block; text-shadow: 0 1px 2px #000, 0 0 6px #000; color: var(--metin); }
.kimlik-bilgi .kimlik-rutbe { margin-bottom: 6px; font-size: 14px; line-height: 1.5; }
.kimlik-bilgi .kimlik-rutbe span { white-space: nowrap; }
.kimlik-bilgi .cubuk { height: 8px; margin-top: 4px; }
.kimlik-bilgi .cubuk + small { font-size: 12px; color: var(--metin2); margin-bottom: 2px; }
@media (min-width: 480px) { .kimlik-kart { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; } .mekan-gorsel + .kimlik-kart { margin-top: -110px; } }
.rozet { display: inline-grid; place-items: center; width: 26px; height: 26px; vertical-align: middle; margin-right: 4px; }
.rozet img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.rozet:empty { display: none; }
.kimlik h2 { margin-bottom: 2px; }

/* ---- Düğmeler (pirinç / deri) ---- */
.dugme { background: linear-gradient(#5a4524, #3a2b14 60%, #2d2110); border: 1px solid #1a120a; border-radius: var(--radius); padding: 9px 14px; color: var(--metin); box-shadow: inset 0 1px 0 rgba(255,220,150,.22), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 0 #000; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.dugme:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.dugme.ana { background: linear-gradient(#b4463a, var(--kirmizi) 60%, #6e1f19); color: #fff; font-weight: 600; }
.dugme.altin { background: linear-gradient(#f6dc8c, var(--altin) 55%, #a97d22); border-color: #5a4010; color: #1a1408; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.dugme:disabled { opacity: .45; cursor: default; transform: none; }
.dugme.parla { animation: parla 1.4s ease-in-out infinite; }
@keyframes parla { 0%,100% { box-shadow: 0 0 0 0 rgba(243,210,122,0), inset 0 1px 0 rgba(255,220,150,.22); } 50% { box-shadow: 0 0 0 5px rgba(243,210,122,.4), inset 0 1px 0 rgba(255,220,150,.22); } }
.dugme-sira { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.giris { max-width: 400px; margin: 40px auto; }
.giris h1 { font-size: 30px; text-align: center; }
.giris input, .form input, .form select, select { width: 100%; padding: 10px; margin: 6px 0 12px; border-radius: var(--radius); border: 1px solid #000; background: #15100a; color: var(--metin); font: inherit; box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,220,150,.08); }
select { width: auto; margin: 0; padding: 6px 8px; }
.hata { color: #ff8a7a; font-size: 14px; margin: 6px 0; }
.ipucu { font-size: 13px; color: var(--metin2); border-left: 3px solid var(--altin); padding: 4px 0 4px 10px; margin: 8px 0; background: linear-gradient(90deg, rgba(217,169,58,.08), transparent); }

/* ---- Çubuklar ---- */
.cubuk { height: 10px; background: #0f0a06; border-radius: 5px; overflow: hidden; border: 1px solid #000; box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 1px 0 rgba(255,220,150,.1); }
.cubuk > i { display: block; height: 100%; background: linear-gradient(var(--altin2), var(--altin) 50%, #a97d22); transition: width .3s; }
.cubuk.saglik > i { background: linear-gradient(#e0665a, var(--kirmizi2) 50%, #7a2219); } .cubuk.takat > i { background: linear-gradient(#8cc2f2, var(--mavi) 50%, #2f6aa8); } .cubuk.xp > i { background: linear-gradient(#9cd283, var(--yesil) 50%, #3f7430); }

/* ---- Sınıf seçimi ---- */
.sinif-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sinif-kart { background: #1b140c var(--doku); border: 2px solid var(--cizgi); border-radius: var(--radius); padding: 10px; text-align: left; color: var(--metin); box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.5); }
.sinif-kart.secili { border-color: var(--altin2); box-shadow: inset 0 0 0 1px #000, 0 0 16px rgba(243,210,122,.35); }
.sinif-kart { display: flex; flex-direction: column; height: 100%; }
.sinif-kart h3 { margin-bottom: 4px; }
/* Simetri: açıklama her kartta 3 satır yer kaplar, pasif metin en altta 2 satırlık sabit alanda */
.sinif-kart p { font-size: 13px; line-height: 1.35; color: var(--metin2); margin-bottom: 8px; min-height: calc(3 * 1.35em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sinif-kart > small { display: block; margin-top: auto; padding-top: 8px; min-height: calc(2 * 1.3em + 8px); font-size: 12px; line-height: 1.3; }
.nitelik-cubuk { display: flex; gap: 3px; align-items: center; font-size: 11px; color: var(--metin2); height: 15px; }
.nitelik-cubuk i { display: inline-block; height: 6px; background: linear-gradient(var(--altin2), var(--altin)); border-radius: 3px; }
.sinif-portre { width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: #0f0a06; display: grid; place-items: center; font-size: 40px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px var(--cizgi2), inset 0 0 18px rgba(0,0,0,.8); }
.sinif-portre img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Portre ---- */
.portre { width: 76px; height: 76px; border-radius: 50%; background: #0f0a06 center/cover; border: 3px solid var(--altin); box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(217,169,58,.18), 0 4px 10px rgba(0,0,0,.6); flex: none; display: grid; place-items: center; font-size: 32px; overflow: hidden; }
.portre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portre.kucuk { width: 56px; height: 56px; font-size: 26px; border-width: 2px; }
.portre.buyuk { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radius); border-width: 2px; font-size: 48px; }
.portre.dusman { border-color: var(--kirmizi2); box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(192,70,58,.18); }

/* ---- Ekipman menüsü (Çanta) ---- */
/* Ekipman: vücut sırasına göre tek sütun — sol Başlık→Gövde→Bacak→Ayak, sağ Silah→Kalkan→Kemer→Tılsım; portre ortada dört kare boyunda */
.kusanim { display: grid; grid-template-columns: 1fr 110px 1fr; gap: 8px; align-items: stretch; margin-top: 6px; }
.kusanim .yuvalar { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); gap: 8px; }
.kusanim .yuva { aspect-ratio: auto; min-height: 64px; }
/* Sabit ikon boyutu: yüzdelik yükseklik flex içinde çözülmüyor, ikon geniş ekranda ~16 px'e düşüyordu */
.kusanim .yuva img { width: 46px; height: 46px; max-width: 80%; object-fit: contain; }
.kusanim .yuva .yedek { font-size: 26px; }
.kusanim .portre.buyuk { height: 100%; aspect-ratio: auto; }
.yuvalar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.yuvalar.tek { grid-template-columns: repeat(4, 1fr); }
.yuva { aspect-ratio: 1; background: radial-gradient(circle at 50% 35%, #2a1f12, #120d07 80%); border: 1px solid #000; border-radius: var(--radius); box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--cizgi), 0 1px 0 rgba(255,220,150,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font-size: 11px; color: var(--metin2); padding: 3px 3px 4px; position: relative; overflow: hidden; }
.yuva.dolu { cursor: pointer; }
.yuva.parla { animation: parla 1.4s infinite; box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--altin); }
.yuva img { width: 64%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); flex: none; }
.yuva small { font-size: 9.5px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin2); flex: none; }
.yuva .yedek { font-size: 20px; line-height: 1; flex: none; } .yuva .sonuk { opacity: .45; }
.yuva.n1 { box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--yesil); } .yuva.n2 { box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--mavi); } .yuva.n3 { box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--mor); } .yuva.n4 { box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 2px var(--altin2), 0 0 10px rgba(243,210,122,.35); }
.n0 { color: var(--gri); } .n1 { color: var(--yesil); } .n2 { color: var(--mavi); } .n3 { color: var(--mor); } .n4 { color: var(--altin2); }
.degerler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.degerler span { background: #1b140c; border: 1px solid var(--cizgi); border-radius: 4px; padding: 2px 8px; font-size: 13px; }
.degerler b { color: var(--altin2); }

/* Eşya satırları */
.esya-satir { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 8px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--cizgi) 20%, var(--cizgi) 80%, transparent) 1; position: relative; }
.esya-satir::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--gri); }
.esya-satir.n1::before { background: var(--yesil); } .esya-satir.n2::before { background: var(--mavi); } .esya-satir.n3::before { background: var(--mor); } .esya-satir.n4::before { background: var(--altin2); box-shadow: 0 0 6px var(--altin2); }
.esya-ikon { width: 44px; height: 44px; border-radius: var(--radius); background: radial-gradient(circle at 50% 35%, #2a1f12, #120d07 80%); border: 1px solid #000; box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px var(--cizgi); display: grid; place-items: center; flex: none; font-size: 20px; overflow: hidden; }
.esya-ikon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.esya-ikon.mini { display: inline-grid; width: 26px; height: 26px; vertical-align: middle; font-size: 14px; }
.esya-ikon.n1 { box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px var(--yesil); } .esya-ikon.n2 { box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px var(--mavi); } .esya-ikon.n3 { box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px var(--mor); } .esya-ikon.n4 { box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px var(--altin2); }
.esya-bilgi { flex: 1; min-width: 0; } .esya-bilgi small { display: block; }
.esya-satir .dugme { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.esya-islem { display: flex; flex-direction: column; gap: 4px; flex: none; }
.esya-islem .dugme { width: 100%; }

/* ---- Savaş sahnesi: iki boy portre kartı yan yana ---- */
.kaplama > .kart.savas-kart { max-width: 560px; }
.savas-sahne { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; margin: calc(-1 * var(--cerceve)) calc(-1 * var(--cerceve)) 10px; padding: 14px 12px 12px; position: relative; background: #0e0a06 center / cover no-repeat; overflow: hidden; }
.savas-sahne::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(14,10,6,.55), rgba(36,26,16,.92)); }
.savasci { position: relative; z-index: 1; text-align: center; min-width: 0; transition: filter .6s, opacity .6s; }
.savas-sahne { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.savasci-portre { position: relative; aspect-ratio: 3 / 4; border: 2px solid var(--altin); border-radius: var(--radius); overflow: hidden; background: #0f0a06; box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(217,169,58,.15), 0 8px 18px rgba(0,0,0,.7); display: grid; place-items: center; font-size: 56px; }
.savasci-portre img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.savasci-portre::after { content: ""; position: absolute; inset: 0; background: rgba(192,70,58,0); pointer-events: none; transition: background .25s; }
.savasci.dusman .savasci-portre { border-color: var(--kirmizi2); box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(192,70,58,.15), 0 8px 18px rgba(0,0,0,.7); }
.savasci-ad { display: block; margin-top: 8px; font-family: Georgia, serif; font-size: 17px; color: var(--altin2); text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.savasci.dusman .savasci-ad { color: #f0a090; }
.savasci small { display: block; text-shadow: 0 1px 0 #000; }
.savasci .cubuk { margin: 6px 0 3px; height: 12px; }
.savasci .hp-yazi { font-variant-numeric: tabular-nums; }
.savasci.vurdu { animation: sarsil-hafif .3s; }
.savasci.vurdu.agir { animation: sarsil .45s; }
.savasci.vurdu.agir .savasci-portre::after { background: rgba(192,70,58,.5); transition: none; }
/* Uçan yazı: hasar sayısı yükselip söner; ağır darbe kırmızı ve büyük, sıyrılma gri ve küçük */
.ucan { position: absolute; left: 50%; top: 42%; transform: translate(-50%, 0); font: 700 24px Georgia, serif; color: var(--metin); text-shadow: 0 1px 0 #000, 0 0 8px #000, 0 0 2px #000; pointer-events: none; animation: ucan .95s ease-out forwards; white-space: nowrap; z-index: 2; }
.ucan.agir { font-size: 34px; color: #ff6a55; text-shadow: 0 1px 0 #000, 0 0 10px rgba(255,80,50,.8), 0 0 2px #000; animation-duration: 1.1s; }
.ucan.iska { font-size: 14px; font-weight: 400; color: var(--gri); font-family: inherit; }
@keyframes ucan { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 30% { transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -56px) scale(1); } }
@keyframes sarsil-hafif { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 60% { transform: translateX(2px); } }
.savasci.kacti .savasci-portre { animation: siyril .35s; }
.savasci.yere { filter: grayscale(1) brightness(.55); }
.savasci.galip .savasci-portre { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(243,210,122,.35), 0 0 28px rgba(243,210,122,.45); }
@keyframes sarsil { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-1deg); } 45% { transform: translateX(5px) rotate(1deg); } 70% { transform: translateX(-3px); } }
@keyframes siyril { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px) scale(1.02); } }
.vs { align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(#5a4524, #241a10); border: 1px solid var(--altin); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(217,169,58,.4); font-size: 20px; color: var(--altin2); margin-top: 60px; }
.savas { background: #0f0a06; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--cizgi), inset 0 2px 8px rgba(0,0,0,.8); border-radius: var(--radius); padding: 10px; font-size: 14px; max-height: 26vh; min-height: 72px; overflow-y: auto; }
.savas > div { animation: belir .3s; }
@keyframes belir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.savas .a { color: var(--altin2); } .savas .b { color: #e58a7a; } .savas .kritik { font-weight: 700; }
.sonuc { text-align: center; font-family: Georgia, serif; font-size: 24px; margin: 10px 0; letter-spacing: 1px; }
.sonuc.zafer { color: var(--altin2); text-shadow: 0 0 16px rgba(243,210,122,.5); } .sonuc.yenilgi { color: #e58a7a; }
.ganimet { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; justify-content: center; }
.ganimet span { background: #1b140c; border: 1px solid var(--cizgi); padding: 4px 10px; border-radius: 4px; font-size: 14px; }

/* ---- Er Meydanı: rakip kartları ve raporlar ---- */
.rakipler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.rakip { background: #1b140c var(--doku); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 8px; text-align: center; box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; }
.rakip-portre { position: relative; aspect-ratio: 3 / 4; border: 2px solid var(--kirmizi2); border-radius: var(--radius); overflow: hidden; background: #0f0a06; display: grid; place-items: center; font-size: 40px; box-shadow: 0 0 0 1px #000; }
.rakip-portre img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rakip-ad { font-family: Georgia, serif; color: var(--altin2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.rakip small { display: block; font-size: 12px; }
.rakip .dugme { margin-top: auto; width: 100%; }
.etiket { position: absolute; left: 6px; top: 6px; background: rgba(21,17,12,.85); border: 1px solid var(--cizgi2); color: var(--altin2); font-size: 10px; padding: 1px 6px; border-radius: 3px; letter-spacing: .3px; }
.rapor { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 10px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--cizgi) 20%, var(--cizgi) 80%, transparent) 1; position: relative; }
.rapor::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--gri); }
.rapor.zafer::before { background: var(--altin2); } .rapor.yenilgi::before { background: var(--kirmizi2); }
.rapor.yeni .rapor-bilgi > b::after { content: "yeni"; margin-left: 6px; font: 600 10px system-ui; color: #1a1408; background: var(--altin2); padding: 1px 5px; border-radius: 3px; vertical-align: middle; }
.rapor-bilgi { flex: 1; min-width: 0; }
.rapor .dugme { padding: 7px 10px; font-size: 14px; }
@media (min-width: 480px) { .rakipler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Kale zindanı ---- */
.kale-ust { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; margin: 6px 0 10px; }
.kale-boss { text-align: center; } .kale-boss .savasci-portre { border-color: var(--kirmizi2); font-size: 40px; }
.kale-boss .savasci-ad { font-size: 14px; } .kale-boss small { display: block; }
.kademe-cubuk { display: flex; gap: 4px; margin-bottom: 4px; }
.kademe-cubuk i { flex: 1; height: 12px; border-radius: 3px; background: #0f0a06; border: 1px solid #000; box-shadow: inset 0 2px 4px rgba(0,0,0,.8), inset 0 0 0 1px var(--cizgi); }
.kademe-cubuk i.gecti { background: linear-gradient(var(--altin2), var(--altin) 50%, #a97d22); }
.kademe-cubuk i.simdi { box-shadow: inset 0 0 0 1px var(--altin2), 0 0 8px rgba(243,210,122,.5); animation: parla 1.4s infinite; }
.kademe-cubuk i.boss { flex: 1.6; box-shadow: inset 0 2px 4px rgba(0,0,0,.8), inset 0 0 0 1px var(--kirmizi2); } .kademe-cubuk i.boss.gecti { background: linear-gradient(#e0665a, var(--kirmizi2) 50%, #7a2219); }
.kademe-liste { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--metin2); columns: 2; column-gap: 12px; }
.kademe-liste li { break-inside: avoid; padding: 1px 0; } .kademe-liste li.gecti { color: var(--altin); text-decoration: line-through; opacity: .7; } .kademe-liste li.simdi { color: var(--altin2); font-weight: 600; }
@media (min-width: 480px) { .kale-ust { grid-template-columns: 140px minmax(0, 1fr); } }

/* ---- Çarşı: kervansaray rafı ---- */
.raf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.raf-kart { background: #1b140c var(--doku); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 8px; text-align: center; box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; }
.raf-kart.satildi { opacity: .45; }
.raf-kart > b { font-family: Georgia, serif; font-size: 14px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.raf-kart > small { font-size: 11px; line-height: 1.3; min-height: 2.6em; }
.raf-kart .dugme { margin-top: auto; width: 100%; font-variant-numeric: tabular-nums; }
.raf-ikon { width: 64px; height: 64px; margin: 0 auto; border-radius: var(--radius); background: radial-gradient(circle at 50% 35%, #2a1f12, #120d07 80%); border: 1px solid #000; box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--cizgi); display: grid; place-items: center; font-size: 30px; overflow: hidden; }
.raf-ikon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.raf-ikon.n1 { box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--yesil); } .raf-ikon.n2 { box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--mavi); } .raf-ikon.n3 { box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px var(--mor); }
@media (min-width: 480px) { .raf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .raf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Sefer yol kartları ---- */
.yol-kart { margin: calc(-1 * var(--cerceve)) calc(-1 * var(--cerceve)) 10px; height: 120px; background: #0f0a06; overflow: hidden; display: grid; place-items: center; font-size: 36px; position: relative; }
.yol-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yol-kart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(36,26,16,0) 50%, rgba(36,26,16,.9)); pointer-events: none; }
.yol-kart + .baslik { margin-top: -34px; position: relative; z-index: 1; }

/* ---- Alt menü ---- */
#alt { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: linear-gradient(#1b140c, #241a10 40%, #3a2b16); border-top: 8px solid transparent; border-image: url('/img/ui/serit.svg') 8 0 0 0 round; z-index: 10; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0,0,0,.6); }
#alt button { flex: 1; background: none; border: 0; padding: 6px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 20px; color: var(--metin2); position: relative; }
#alt button small { font-size: 11px; letter-spacing: .3px; }
#alt button.aktif { color: var(--altin2); text-shadow: 0 0 10px rgba(243,210,122,.6); }
#alt button.aktif::after { content: "◆"; position: absolute; top: -8px; font-size: 8px; color: var(--altin2); }
#alt button:disabled { opacity: .35; }
#alt .s-ikon { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 2px #000) grayscale(.35) brightness(.85); transition: filter .2s, transform .2s; }
#alt button.aktif .s-ikon { filter: drop-shadow(0 0 6px rgba(243,210,122,.7)) grayscale(0) brightness(1.1); transform: translateY(-1px) scale(1.06); }
#alt button .yedek { font-size: 22px; line-height: 28px; }

/* ---- Bildirim, kaplama ---- */
.bildirim { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #241a10 var(--doku); border: 1px solid var(--altin); box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.7); color: var(--metin); padding: 10px 16px; border-radius: var(--radius); z-index: 30; max-width: 90vw; text-align: center; font-size: 14px; }
.kaplama { position: fixed; inset: 0; background: rgba(5,3,1,.78); z-index: 20; display: grid; place-items: center; padding: var(--gutter); }
.kaplama > .kart { width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; margin: 0; }

@media (min-width: 480px) { .kusanim { grid-template-columns: 1fr 170px 1fr; gap: 12px; } .kusanim .yuva { min-height: 84px; } .kusanim .yuva img { width: 60px; height: 60px; } }
/* ---- Masaüstü ---- */
@media (min-width: 720px) {
  :root { --cerceve: 16px; }
  .sinif-izgara { grid-template-columns: repeat(4, 1fr); }
  .yuva small { font-size: 11px; }
  .mekan-gorsel { height: 190px; } .mekan-gorsel.uzun { height: 260px; }
  .yol-kart { height: 150px; }
}
/* Boş yuva: minimal yuva simgesi (yuva_*), soluk */
.yuva .bos-yuva { display: grid; place-items: center; opacity: .8; }
.yuva .bos-yuva .yedek { font-size: 22px; }
/* Akçe simgesi: metin içinde, düğmelerde */
.akce-ikon { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.2em; margin-right: 3px; filter: drop-shadow(0 1px 1px #000); }
/* Sefer karşılaşması / rakip inceleme: stat karşılaştırma */
.kars-ozet { text-align: center; margin: 4px 0 8px; font-size: 15px; } .kars-ozet b { font-family: Georgia, serif; font-size: 22px; color: var(--altin2); }
.kars-etiket { display: inline-block; padding: 1px 8px; border-radius: 4px; border: 1px solid currentColor; font-weight: 700; font-size: 13px; vertical-align: 3px; }
.yenilgi-renk { color: #e58a7a; }
.kars-tablo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.kars-satir { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 3px 8px; background: #1b140c; border: 1px solid var(--cizgi); border-radius: 4px; font-variant-numeric: tabular-nums; }
.kars-satir > b:first-child { text-align: right; } .kars-satir > small { text-align: center; min-width: 86px; }
.rakip-esyalar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.rakip-esyalar .yuva { aspect-ratio: 1; }
.zorluk-rozet { position: absolute; right: 6px; top: 6px; font-size: 10px; padding: 1px 6px; border-radius: 3px; background: rgba(21,17,12,.88); border: 1px solid currentColor; font-weight: 700; letter-spacing: .3px; }
.rakip { position: relative; cursor: pointer; } .rakip:hover { border-color: var(--altin3); }
/* 3:4 portreler kare/yuvarlak kutularda baştan kırpılsın */
.portre img, .sinif-portre img, .rakip-portre img, .sira-portre img, .kimlik-portre img, .savasci-portre img { object-position: 50% 8%; }
/* Yorgunluk kartı: sefer/meydan üstünde, neden ve çare */
.yorgun-kart { border-color: #8a3a2a; } .yorgun-kart h2 { color: #e8a08a; } .yorgun-kart p { margin: 4px 0 10px; }
.yorgun-kart .dugme .esya-ikon.mini { width: 22px; height: 22px; vertical-align: -6px; }
/* Er sekmesinde dağıtılmamış puan */
#alt button { position: relative; }
.rozet-sayi { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #15110c; }
/* Eşya kademesi: epik (turkuaz) ve destansı (altın, nabız). Nadirlik iç halkası (box-shadow) korunur; kademe çerçeve, zemin ve dış ışıltıyla */
:root { --epik: #45c2b1; --destansi: #ffcf5a; }
.yuva.k1, .esya-ikon.k1, .raf-ikon.k1 { border-color: var(--epik); background: radial-gradient(circle at 50% 38%, rgba(69,194,177,.30), #120d07 72%); filter: drop-shadow(0 0 4px rgba(69,194,177,.45)); }
.yuva.k2, .esya-ikon.k2, .raf-ikon.k2 { border-color: var(--destansi); background: radial-gradient(circle at 50% 38%, rgba(255,207,90,.38), #1a1206 72%); animation: destansi-nabiz 2.4s ease-in-out infinite; }
@keyframes destansi-nabiz { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,207,90,.45)); } 50% { filter: drop-shadow(0 0 10px rgba(255,207,90,.85)); } }
.esya-satir.k1::before { background: linear-gradient(var(--epik), var(--epik)); box-shadow: 0 0 6px var(--epik); }
.esya-satir.k2::before { background: var(--destansi); box-shadow: 0 0 8px var(--destansi); }
.kademe-rozet { display: inline-block; padding: 0 5px; margin-right: 2px; border-radius: 3px; font: 700 9.5px/15px system-ui, sans-serif; letter-spacing: .4px; text-transform: uppercase; vertical-align: 2px; }
.kademe-rozet.k1 { color: #0f2a26; background: var(--epik); }
.kademe-rozet.k2 { color: #2a1c02; background: linear-gradient(90deg, #f3d27a, #ffe9a8, #e0a92e); box-shadow: 0 0 6px rgba(255,207,90,.6); }
.ganimet .k1 { border-color: var(--epik) !important; } .ganimet .k2 { border-color: var(--destansi) !important; box-shadow: 0 0 10px rgba(255,207,90,.5); }
@media (prefers-reduced-motion: reduce) { .yuva.k2, .esya-ikon.k2, .raf-ikon.k2 { animation: none; filter: drop-shadow(0 0 6px rgba(255,207,90,.7)); } }
.guclu-etiket { margin-top: 6px; color: var(--destansi); border-color: var(--destansi); font-size: 12px; }
/* Ödüllü reklam düğmesi, sandıklar, teklif etiketleri */
.dugme.reklam { background: linear-gradient(#2c5f57, #1d413b); border-color: #45c2b1; color: #e7fbf7; }
.dugme.reklam:disabled { opacity: .5; }
.dugme-grup { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sandiklar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sandik { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; background: #1b140c; border: 1px solid var(--cizgi); border-radius: var(--radius); text-align: center; }
.sandik .dugme { width: 100%; }
.olasilik { list-style: none; margin: 0; padding: 0; width: 100%; font-size: 12px; }
.olasilik li { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; border-bottom: 1px dashed rgba(191,174,140,.18); color: var(--metin2); }
.olasilik li b { color: var(--altin2); font-variant-numeric: tabular-nums; }
.teklif-etiket { display: block; color: var(--epik, #45c2b1); font-weight: 700; }
.ipucu.teklif { border-left-color: var(--epik, #45c2b1); }
.dugme.altin small { color: #4a3510; opacity: 1; }