/* Savaş raporu — ~/İndirilenler/savas-raporu-referans.html'den (sadece rapora özel kısım). */
/* =========================================================
   SAVAŞ RAPORU
   Üç katman: 1) sonuç afişi + anlatı  2) karşılaşma + güç
   3) ganimet / ders + aksiyonlar. Renkler hep OYUNCUNUN gözünden.
   ========================================================= */
:root{
  --biz:#c8922e;          /* oyuncunun tarafı */
  --biz-koyu:#8a5d14;
  --onlar:#8e2f22;        /* düşman tarafı */
  --onlar-koyu:#5a1a12;
}
/* Oyunda: #panel penceresi (çerçeve ve parşömen zaten game.css'te); burada sadece genişlik ve iç boşluk */
#panel.pencere.centred.savas{width:min(800px,calc(100% - 24px))}
#panel.pencere.savas #panel-body > h2:first-child{font-size:22px}
.rapor{display:block;padding:10px 6px 0}
#panel.pencere .rapor h3.bolum-baslik{margin:0 0 8px}

/* Bozgunda parşömen küle döner */
#panel.pencere.savas.bozgun #panel-body{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(90,20,10,.22),transparent 55%),
    radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(60,35,20,.4) 100%),
    var(--doku-parsomen) 0 0/300px 120px,
    linear-gradient(180deg,#e9dcc0,#ddc9a0 40%,#c9b083);
}

/* ---------- 1. Sonuç afişi ---------- */
.sonuc{text-align:center}
.amblem{width:58px;height:58px;margin:0 auto -6px;position:relative;z-index:1;
  filter:drop-shadow(0 2px 2px rgba(40,20,5,.6));animation:amblem .5s cubic-bezier(.3,1.6,.5,1) both}
.amblem svg{width:100%;height:100%}
.afis-kap{display:inline-block;filter:drop-shadow(0 3px 0 #2a170a) drop-shadow(0 6px 8px rgba(40,20,5,.35));animation:afis .55s cubic-bezier(.2,1.3,.4,1) .08s both}
.afis{
  display:block;padding:9px 62px 11px;
  font:700 44px/1 var(--font-baslik);letter-spacing:.03em;
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 50%,100% 100%,0 100%,26px 50%);
}
.zafer .afis{
  color:#3e2506;text-shadow:0 1px 0 rgba(255,240,190,.9);
  background:
    linear-gradient(180deg,rgba(255,255,255,.35),transparent 40%),
    linear-gradient(180deg,#fbe7a6,var(--altin) 50%,#a87516);
}
.bozgun .afis{
  color:#f3dcc4;text-shadow:0 2px 0 rgba(20,5,2,.8);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%),
    linear-gradient(180deg,#9b3a2b,var(--onlar) 50%,var(--onlar-koyu));
}
.alt-baslik{margin:12px 0 4px;font:800 18px/1.3 var(--font-sayi)}
.anlati{margin:0 auto;max-width:52ch;font:italic 500 16px/1.5 "Alegreya",Georgia,serif;color:var(--murekkep-soluk)}

@keyframes amblem{from{opacity:0;transform:translateY(-14px) scale(.6)}to{opacity:1;transform:none}}
@keyframes afis{from{opacity:0;transform:scaleX(.55)}to{opacity:1;transform:none}}

/* ---------- 2. Karşılaşma ---------- */
.karsilasma{
  display:grid;grid-template-columns:1fr 56px 1fr;gap:12px;align-items:start;
  margin-top:22px;
}
.taraf{
  border-radius:8px;padding:10px 14px 12px;
  background:rgba(255,250,230,.35);
  box-shadow:inset 0 0 0 1px rgba(90,55,20,.22),inset 0 1px 0 rgba(255,250,230,.6);
  border-top:4px solid var(--taraf-renk);
}
.taraf.biz{--taraf-renk:var(--biz)}
.taraf.onlar{--taraf-renk:var(--onlar)}
.taraf-bas{display:flex;align-items:center;gap:10px;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid rgba(90,55,20,.2)}
.taraf-bas img{object-fit:contain;width:40px;height:40px;flex:0 0 40px;filter:drop-shadow(0 1px 1px rgba(40,20,5,.5))}
.taraf-ad{font:800 17px/1.15 var(--font-sayi)}
.taraf-ad .sen{font:700 11px/1 var(--font-sayi);color:#3e2506;background:var(--altin);padding:2px 6px;border-radius:3px;margin-left:5px;vertical-align:2px}
.taraf-rol{font-size:12.5px;color:var(--murekkep-soluk)}

.birlik{padding:6px 0}
.birlik-ust{display:flex;align-items:center;gap:8px}
.birlik-ust img{object-fit:contain;border-radius:4px;width:28px;height:28px;flex:0 0 28px}
.birlik-ad{flex:1;font-size:15px}
.birlik-sayi{font-weight:800;font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap}
.birlik-sayi .ok{color:var(--murekkep-soluk);font-weight:500;margin:0 3px}
.kayip-cubuk{
  display:flex;height:7px;margin:5px 0 0 36px;border-radius:4px;overflow:hidden;
  background:rgba(90,55,20,.2);box-shadow:inset 0 1px 1px rgba(60,30,5,.45);
}
.kayip-cubuk .kalan{background:linear-gradient(180deg,color-mix(in srgb,var(--taraf-renk) 75%,#fff),var(--taraf-renk));transition:width .7s ease .5s}
.kayip-cubuk .dusen{flex:1;background:repeating-linear-gradient(-45deg,rgba(60,20,10,.35) 0 3px,rgba(60,20,10,.15) 3px 6px)}
.taraf-toplam{margin-top:8px;padding-top:7px;border-top:1px solid rgba(90,55,20,.2);font-size:14px;display:flex;justify-content:space-between}
.taraf-toplam b{font-variant-numeric:tabular-nums}
.rapor .iyi{color:var(--artis)} .rapor .kotu{color:var(--dolu)}

.vs{align-self:center;display:grid;place-items:center;gap:4px}
.vs-madalyon{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#7a756d,#3a3734 60%,#1f1d1b);
  box-shadow:0 0 0 3px var(--ahsap-koyu),0 0 0 4px rgba(255,215,150,.4),0 3px 5px rgba(0,0,0,.5);
}
.vs-madalyon svg{width:34px;height:34px}

/* Güç terazisi */
.guc{margin-top:18px}
.guc-etiket{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.guc-etiket b{font:800 20px/1 var(--font-sayi);font-variant-numeric:tabular-nums}
.guc-etiket .sol b{color:var(--biz-koyu)} .guc-etiket .sag b{color:var(--onlar)}
.guc-etiket .hukum{font:700 15px/1 var(--font-baslik);color:var(--ahsap-koyu);text-align:center}
.guc-cubuk{
  position:relative;display:flex;height:16px;margin-top:6px;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 2px var(--ahsap-koyu),inset 0 1px 2px rgba(0,0,0,.4);
}
.guc-cubuk .sol{width:50%;background:linear-gradient(180deg,#f3cf72,var(--biz) 55%,var(--biz-koyu));transition:width 1s cubic-bezier(.3,1,.4,1) .35s}
.guc-cubuk .sag{flex:1;background:linear-gradient(180deg,#b5503f,var(--onlar) 55%,var(--onlar-koyu))}
.guc-cubuk::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:#f6e8c3;box-shadow:0 0 0 1px rgba(40,20,5,.6)}

/* ---------- 3. Ganimet / ders ---------- */
.alt-bolum{margin-top:22px}
.ganimet{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;list-style:none}
.ganimet li{
  display:grid;justify-items:center;gap:2px;padding:10px 4px 8px;border-radius:8px;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,240,190,.75),rgba(255,250,230,.15) 70%);
  box-shadow:inset 0 0 0 1px rgba(90,55,20,.2);
  animation:pop .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.7s + var(--i)*.09s);
}
.ganimet li img{object-fit:contain;width:44px;height:44px;filter:drop-shadow(0 2px 1px rgba(60,30,5,.5))}
.ganimet .miktar{font:800 22px/1 var(--font-sayi);color:var(--artis);font-variant-numeric:tabular-nums}
.ganimet .ad{font-size:12.5px;color:var(--murekkep-soluk)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1;transform:none}}

.tasima{margin-top:12px;font-size:14px}
.tasima .ust{display:flex;justify-content:space-between}
.tasima .ust b{font-variant-numeric:tabular-nums}
.tasima .cubuk{height:8px;margin-top:4px;border-radius:4px;overflow:hidden;background:rgba(90,55,20,.2);box-shadow:inset 0 1px 1px rgba(60,30,5,.45)}
.tasima .cubuk i{display:block;height:100%;background:linear-gradient(180deg,#b88a4a,#7a5126);transition:width .8s ease 1s}
.tasima .not{margin:5px 0 0;color:var(--murekkep-soluk);font-size:13px}

.ders{
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:8px;
  background:rgba(255,250,230,.4);box-shadow:inset 0 0 0 1px rgba(90,55,20,.22);
  border-left:4px solid var(--onlar);
}
.ders svg{width:36px;height:36px;flex:0 0 36px}
.ders p{margin:0;font-size:15px;line-height:1.5}
.ders p + p{margin-top:4px;color:var(--murekkep-soluk);font-size:14px}

/* Alt şerit: meta + aksiyonlar */
.rapor-alt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin-top:20px;padding-top:12px;border-top:1px solid rgba(90,55,20,.25);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.6);
}
.meta{font-size:13px;color:var(--murekkep-soluk);line-height:1.4}
.meta b{color:var(--murekkep);font-weight:700}
.aksiyonlar{display:flex;flex-wrap:wrap;gap:8px}
.rapor .r-btn{
  font:700 14px/1 var(--font-sayi);padding:9px 13px;border-radius:6px;cursor:pointer;
  color:var(--murekkep);border:0;
  background:linear-gradient(180deg,#fbf2d9,#e6d3a5);
  box-shadow:0 0 0 2px var(--ahsap),0 2px 0 #2a170a,inset 0 1px 0 #fff8e4;
}
.rapor .r-btn.ana{
  font:700 16px/1 var(--font-baslik);color:#3e2506;padding:9px 16px;
  background:linear-gradient(180deg,#fbe7a6,var(--altin) 45%,#a87516);
  box-shadow:0 0 0 2px var(--ahsap-koyu),0 2px 0 #2a170a,inset 0 1px 0 rgba(255,250,220,.8);
}
.rapor .r-btn:hover{filter:brightness(1.05)}
.rapor .r-btn:active{transform:translateY(1px)}
.rapor .r-btn:focus-visible{outline:2px solid var(--ahsap-koyu);outline-offset:3px}

/* ---------- Savaşın seyri (turlar) ---------- */
.seyir-ust{display:flex;align-items:center;gap:12px}
.seyir-ust .bolum-baslik{flex:1;margin:0}
.btn-izle{font:700 14px/1 var(--font-sayi);padding:7px 12px;border-radius:6px;cursor:pointer;border:0;color:#f3dfae;
  background:linear-gradient(180deg,var(--ahsap-acik),var(--ahsap) 50%,var(--ahsap-koyu));
  box-shadow:0 0 0 1px #2a170a,0 2px 0 #2a170a,inset 0 1px 0 rgba(255,215,150,.45);text-shadow:0 -1px 0 rgba(0,0,0,.6)}
.btn-izle:hover{filter:brightness(1.1)}
.btn-izle:focus-visible{outline:2px solid var(--ahsap-koyu);outline-offset:3px}

.turlar{list-style:none;margin:12px 0 0;padding:0;position:relative}
.turlar::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(90,55,20,.45) 0 1px,rgba(90,55,20,.2) 1px 3px,rgba(255,245,215,.7) 3px)}
.tur{position:relative;padding-left:48px;margin-bottom:8px;transition:opacity .3s}
.tur-no{position:absolute;left:0;top:3px;width:38px;height:38px;border-radius:50%;z-index:1;
  display:grid;place-items:center;font:800 16px/1 var(--font-sayi);color:#f3dfae;
  background:radial-gradient(circle at 35% 30%,var(--ahsap-acik),var(--ahsap) 55%,var(--ahsap-koyu));
  box-shadow:0 0 0 2px #2a170a,0 2px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,215,150,.4);text-shadow:0 -1px 0 rgba(0,0,0,.6);transition:box-shadow .3s}
.tur.belirleyici .tur-no{color:#3e2506;text-shadow:0 1px 0 rgba(255,240,190,.8);
  background:radial-gradient(circle at 35% 30%,#fff1b8,var(--altin) 45%,#9a6b14)}
.bozgun .tur.belirleyici .tur-no{color:#f3dcc4;text-shadow:0 1px 0 rgba(0,0,0,.6);background:radial-gradient(circle at 35% 30%,#c0584a,var(--onlar) 55%,var(--onlar-koyu))}

.tur details{border-radius:7px;background:rgba(255,250,230,.35);box-shadow:inset 0 0 0 1px rgba(90,55,20,.22),inset 0 1px 0 rgba(255,250,230,.6)}
.tur summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;cursor:pointer;list-style:none;border-radius:7px}
.tur summary::-webkit-details-marker{display:none}
.tur summary::after{content:"";width:8px;height:8px;margin-left:2px;border-right:2px solid var(--murekkep-soluk);border-bottom:2px solid var(--murekkep-soluk);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.tur details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.tur summary:hover{background:rgba(255,250,230,.35)}
.tur summary:focus-visible{outline:2px solid var(--ahsap);outline-offset:-2px}
.tur-baslik{flex:1;font:700 16px/1.2 var(--font-baslik);color:var(--ahsap-koyu);min-width:10em}
.tur-baslik small{font:700 11px/1 var(--font-sayi);margin-left:6px;padding:2px 6px;border-radius:3px;vertical-align:2px;color:#3e2506;background:var(--altin)}
.bozgun .tur-baslik small{color:#f3dcc4;background:var(--onlar)}
.tur-ozet{display:flex;gap:6px;font-size:13px;color:var(--murekkep-soluk);align-items:center}
.cip{font:800 13px/1 var(--font-sayi);padding:3px 7px;border-radius:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cip.iyi{color:var(--artis);background:rgba(61,106,23,.12)}
.cip.kotu{color:var(--dolu);background:rgba(163,38,26,.1)}
.cip.bos{color:var(--murekkep-soluk);background:rgba(90,55,20,.08)}

.olaylar{list-style:none;margin:0;padding:0 12px 10px;display:grid;gap:5px}
.olay{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:5px;font-size:14.5px;line-height:1.35;
  background:rgba(255,250,230,.4);border-left:3px solid var(--taraf-renk)}
.olay.biz{--taraf-renk:var(--biz)} .olay.onlar{--taraf-renk:var(--onlar)}
.olay img{object-fit:contain;border-radius:3px;width:24px;height:24px;flex:0 0 24px}
.olay span{flex:1}
.olay.son{border-left:0;justify-content:center;background:none;font:italic 500 15px/1.4 "Alegreya",Georgia,serif;color:var(--murekkep-soluk)}
.tur-kalan{display:flex;justify-content:space-between;padding:0 12px 10px;font-size:12.5px;color:var(--murekkep-soluk)}
.tur-kalan b{color:var(--murekkep);font-variant-numeric:tabular-nums}

/* İzleme modu */
.izleniyor .tur.bekliyor{opacity:.3}
.izleniyor .tur.simdi .tur-no{box-shadow:0 0 0 2px #2a170a,0 0 0 6px rgba(226,178,74,.55),0 0 16px rgba(226,178,74,.8)}
.birlik-sayi .kalan-s{display:inline-block;min-width:1.2em;text-align:right}
.birlik.vuruldu .birlik-sayi .kalan-s{animation:vurus .5s}
@keyframes vurus{0%{color:var(--dolu);transform:scale(1.5)}100%{transform:none}}


@media (max-width:760px){
  .tur{padding-left:42px}
  .tur-no{width:32px;height:32px;font-size:14px}
  .turlar::before{left:14px}
  .rapor{padding:8px 0 0}
  .afis{font-size:34px;padding:8px 46px 9px}
  .karsilasma{grid-template-columns:1fr}
  .vs{order:0}
  .vs-madalyon{width:42px;height:42px}
  .ganimet{grid-template-columns:repeat(2,1fr)}
  .rapor-alt{flex-direction:column;align-items:stretch}
  .aksiyonlar .r-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .amblem,.afis-kap,.ganimet li,.birlik.vuruldu .birlik-sayi .kalan-s{animation:none}
  .guc-cubuk .sol,.kayip-cubuk .kalan,.tasima .cubuk i,.tur{transition:none}
}
/* Oyuna özel küçük ekler */
.sur-durum{font-size:13px;color:var(--murekkep-soluk);margin-top:4px}
.taraf-not{margin-top:4px;font-size:12.5px;color:var(--murekkep-soluk)}

/* Geliştirme seviyesi: birim adının altında küçük bir satır */
.rapor .birlik-ad .birlik-gel, .birlik-ad .birlik-gel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #7a4a22; line-height: 1.15; }