/* =========================================================
   LAST BUILDING — TEMEL RENK / TASARIM SİSTEMİ
   ========================================================= */
:root{
  --bg:#0a0d09;
  --bg2:#0f130c;
  --panel:#141a10;
  --panel2:#1b2314;
  --panel3:#212b18;
  --border:#2e3a22;
  --border-bright:#455530;
  --text:#dfe6d2;
  --text-dim:#8b9680;
  --rust:#c06a2c;
  --rust-bright:#e8863f;
  --toxic:#7fae3c;
  --toxic-bright:#a3d158;
  --blood:#9c2b2b;
  --blood-bright:#d1453f;
  --elec:#4fa3c9;
  --water:#3d8fb0;
  --gold:#d4af5a;
  --font-head:'Arial Narrow',"Segoe UI",Arial,sans-serif;
  --font-body:"Segoe UI",Tahoma,Arial,sans-serif;
  --font-mono:Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:
    radial-gradient(ellipse at 50% -10%, #1a2213 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--rust);color:#000;}
button{font-family:var(--font-body);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--panel);}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:4px;}
.hidden{display:none !important;}

/* ---------- GİRİŞ EKRANI ---------- */
#login-gate{
  position:fixed;inset:0;z-index:500;
  background:radial-gradient(ellipse at 50% 20%, #1c2513 0%, transparent 55%), var(--bg);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.login-box{
  width:min(420px,94vw); background:linear-gradient(180deg,#181f10,#0d1109);
  border:1px solid var(--border-bright); border-radius:14px; padding:26px;
  box-shadow:0 14px 50px rgba(0,0,0,0.6); text-align:center;
}
.login-box h1{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:3px;
  color:var(--rust-bright);font-size:26px;margin:0 0 4px;text-shadow:0 0 16px rgba(232,134,63,0.35);
}
.login-box p.tagline{color:var(--text-dim);font-size:12px;letter-spacing:1px;margin:0 0 20px;text-transform:uppercase;}
.login-box input[type=text]{
  width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--border-bright);
  background:var(--panel2);color:var(--text);font-size:14px;margin-bottom:12px;outline:none;
}
.login-box input[type=text]:focus{border-color:var(--rust-bright);}
.login-submit-btn{
  width:100%;padding:11px;border-radius:8px;border:1px solid #ffb87a;cursor:pointer;
  background:linear-gradient(180deg,var(--rust-bright),var(--rust));color:#1a0e04;
  font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:13px;box-shadow:0 3px 0 #6b3510;
}
.login-submit-btn:hover{filter:brightness(1.08);}
.login-submit-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #6b3510;}
.login-users{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;justify-content:center;}
.user-chip{
  background:var(--panel3);border:1px solid var(--border);color:var(--text-dim);
  padding:6px 12px;border-radius:20px;font-size:12px;cursor:pointer;
}
.user-chip:hover{border-color:var(--toxic);color:var(--toxic-bright);}
.login-hint{color:var(--text-dim);font-size:10.5px;margin-top:14px;line-height:1.5;}

/* ---------- SABİT ÜST ALAN (kompakt) ---------- */
#header-fixed{ position:sticky; top:0; z-index:50; box-shadow:0 3px 14px rgba(0,0,0,0.55); }
#topbar{
  background:linear-gradient(180deg,#161d0f,#0e1309 90%); border-bottom:1px solid var(--border);
  padding:5px 8px; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.brand{
  font-family:var(--font-head);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--rust-bright);font-size:14px;text-shadow:0 0 10px rgba(232,134,63,0.3);
  padding-right:6px;border-right:1px solid var(--border);margin-right:4px;white-space:nowrap;
}
.brand small{display:block;font-size:7px;letter-spacing:1.5px;color:var(--text-dim);font-weight:400;}
#resources{display:flex; flex-wrap:wrap; gap:5px; flex:1;}
.res-chip{
  display:flex; align-items:center; gap:4px;
  background:var(--panel2); border:1px solid var(--border); border-radius:5px;
  padding:3px 7px; min-width:62px; position:relative; overflow:hidden;
}
.res-chip .ico{font-size:12px;filter:saturate(1.3);}
.res-chip .val{font-family:var(--font-mono);font-weight:700;font-size:11.5px;transition:color .2s;}
.res-chip .lbl{font-size:7.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;}
.res-chip .val.bump{color:var(--toxic-bright);}
.res-chip .val.drop{color:var(--blood-bright);}
.res-flash{position:absolute;inset:0;background:rgba(163,209,88,0.18);opacity:0;pointer-events:none;}
.res-flash.play{animation:flashres .5s ease-out;}
@keyframes flashres{ from{opacity:1;} to{opacity:0;} }
#topbar-actions{display:flex;gap:4px;align-items:center;margin-left:auto;flex-wrap:wrap;}
.icon-btn{
  background:var(--panel3);border:1px solid var(--border);color:var(--text);
  width:26px;height:26px;border-radius:5px;cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s, background .15s, border-color .15s;
}
.icon-btn:hover{background:var(--panel2);border-color:var(--border-bright);}
.icon-btn:active{transform:scale(0.9);}
.user-btn{
  background:var(--panel3);border:1px solid var(--border);color:var(--gold);
  padding:0 8px;height:26px;border-radius:5px;cursor:pointer;font-size:10px;font-weight:700;
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.user-btn:hover{border-color:var(--border-bright);}
.day-pill{
  font-family:var(--font-mono);background:var(--panel3);border:1px solid var(--border-bright);
  border-radius:5px;padding:4px 8px;font-size:10.5px;color:var(--gold);white-space:nowrap;
}
#end-day-btn{
  background:linear-gradient(180deg,var(--rust-bright),var(--rust));border:1px solid #ffb87a;
  color:#1a0e04;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;
  padding:6px 10px;border-radius:6px;cursor:pointer;font-size:10.5px;
  box-shadow:0 2px 0 #6b3510, 0 4px 10px rgba(224,134,63,0.2);transition:transform .1s;
}
#end-day-btn:hover{filter:brightness(1.08);}
#end-day-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #6b3510;}

/* ---------- SKOR / DURUM ÇUBUĞU (kompakt, kaynaklarla aynı sabit alanda) ---------- */
#statusbar{ display:flex;flex-wrap:wrap;gap:5px;padding:4px 8px; background:linear-gradient(180deg,#12160c,#0b0e08); border-bottom:2px solid var(--border-bright); }
.status-chip{
  display:flex;align-items:center;gap:4px; background:var(--panel2);border:1px solid var(--border-bright);
  border-radius:14px; padding:3px 9px;font-size:10px;
}
.status-chip .s-ico{font-size:12px;}
.status-chip .s-val{font-family:var(--font-mono);font-weight:800;color:var(--gold);}
.status-chip.danger .s-val{color:var(--blood-bright);}
.status-chip.warn .s-val{color:var(--rust-bright);}
.status-chip.good .s-val{color:var(--toxic-bright);}
.status-chip .s-lbl{color:var(--text-dim);}
.status-chip.score-chip{ background:linear-gradient(90deg, rgba(212,175,90,0.16), var(--panel2)); border-color:var(--gold); box-shadow:0 0 8px rgba(212,175,90,0.12); }
.status-chip.score-chip .s-val{font-size:11px;}

/* ---------- ANA IZGARA (2 sütun: bina geniş / merkez sabit) ---------- */
#main-grid{ display:grid; grid-template-columns: 1fr 340px; gap:10px; padding:10px; align-items:start; }
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--border);
  border-radius:10px; padding:10px; position:relative;
}
.panel-title{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:1.5px; font-size:12px;
  color:var(--text-dim); margin:0 0 8px 0; padding-bottom:6px; border-bottom:1px dashed var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.panel-title .tag{
  font-size:9.5px; background:var(--panel3); padding:2px 6px; border-radius:4px; color:var(--toxic-bright);
  border:1px solid var(--border);
}

/* ---------- BİNA İLLÜSTRASYONU ---------- */
#building-illustration{
  display:flex; flex-direction:column; border:1px solid var(--border-bright); border-radius:10px;
  overflow:hidden; background:#0d1108; position:relative; padding-left:5px;
}
#building-illustration::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:repeating-linear-gradient(0deg, #4a5240 0 3px, #2c331f 3px 10px); box-shadow:1px 0 0 rgba(0,0,0,0.4);
}
.roof-block{ position:relative; padding:0 0 8px 0; cursor:pointer; background:#5c6970; border-bottom:3px solid #23292d; }
.roof-block.selected{ box-shadow:inset 0 0 0 2px var(--rust-bright); }
.roof-deco-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:5px; margin-bottom:7px; flex-wrap:wrap; min-height:30px;}
.roof-flag-wrap{ display:flex; flex-direction:column; align-items:center; }
.roof-flagpole{ width:2px; height:24px; background:#888; }
.roof-flag{ width:18px; height:12px; background:var(--blood-bright); margin-left:1px; clip-path:polygon(0 0,100% 15%,0 100%); animation:flagwave 2.4s ease-in-out infinite; transform-origin:left center;}
@keyframes flagwave{ 0%,100%{transform:skewY(4deg);} 50%{transform:skewY(-4deg);} }
.roof-sign{ background:#e8e2d0; color:#1a1a1a; font-size:7.5px; font-weight:800; text-align:center; line-height:1.1; padding:3px 5px; border:2px solid #333; transform:rotate(-2deg); text-transform:uppercase; letter-spacing:0.4px; }
.roof-tank{ width:14px; height:18px; background:linear-gradient(180deg,#8f9aa0,#5f6a70); border-radius:3px 3px 5px 5px; border:1px solid #333; }
.roof-antenna{ width:2px; height:26px; background:#999; position:relative; }
.roof-antenna::before{ content:'📡'; position:absolute; top:-13px; left:-7px; font-size:13px; }
.roof-antenna.dish::before{ content:'📶'; }
.roof-watchtower{ display:flex; flex-direction:column; align-items:center; margin-right:4px; }
.roof-watchtower .wt-flag{ font-size:11px; margin-bottom:-2px; }
.roof-watchtower .wt-cabin{ width:26px; height:14px; background:linear-gradient(180deg,#5a4530,#3a2c1c); border:1px solid #241a10; border-radius:2px; }
.roof-watchtower .wt-legs{ width:20px; height:16px; background:repeating-linear-gradient(115deg,#4a3a26 0 2px,transparent 2px 7px),repeating-linear-gradient(65deg,#4a3a26 0 2px,transparent 2px 7px); }
.roof-solar{ width:20px; height:13px; background:repeating-linear-gradient(90deg,#274a63 0 5px,#1b3547 5px 10px); border:1px solid #10202b; border-radius:2px; }
.roof-planters{ display:flex; gap:3px; flex-wrap:wrap; align-items:center; background:rgba(120,60,150,0.14); border:1px solid rgba(180,120,210,0.25); border-radius:6px; padding:3px 6px; }
.roof-planter{ font-size:15px; }
.roof-planters-label{ font-size:8px; color:#eef1ea; font-weight:700; margin-left:4px; white-space:nowrap; }
.roof-item-wrap{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.roof-item-label{ font-size:7.5px; color:#eef1ea; background:rgba(0,0,0,0.4); border-radius:4px; padding:1px 4px; white-space:nowrap; font-weight:700; }
.roof-tank-row{ display:flex; gap:2px; }
.roof-other-box{ margin-top:6px; min-height:0; background:rgba(0,0,0,0.18); }
.roof-empty-note{ color:rgba(255,255,255,0.35); font-size:9.5px; font-style:italic; }
.roof-barbwire{ height:5px; margin-bottom:5px; background:repeating-linear-gradient(90deg, transparent 0 5px, #cfd3c8 5px 6px, transparent 6px 11px); opacity:0.5; }
.roof-label, .floor-tag, .ground-tag{
  position:absolute; top:6px; right:8px; font-family:var(--font-head); font-weight:800; font-size:10px;
  letter-spacing:0.8px; color:#eef1ea; text-transform:uppercase; background:rgba(15,12,8,0.72);
  padding:2px 8px; border-radius:4px; border:1px solid rgba(255,255,255,0.18); box-shadow:0 2px 5px rgba(0,0,0,0.4);
  z-index:2;
}

/* ---------- SVG SAHNE İLLÜSTRASYONU (building-art.js tarafından üretilir) ---------- */
.svg-scene{ display:block; width:100%; line-height:0; }
.svg-scene svg{ display:block; width:100%; height:auto; }
.svg-scene .roofFlagSvg{ transform-origin:34px 70px; animation:svgFlagWave 2.4s ease-in-out infinite; }
@keyframes svgFlagWave{ 0%,100%{transform:skewY(4deg);} 50%{transform:skewY(-4deg);} }
.svg-scene .zsvg{ animation:svgZombieShuffle 2.6s ease-in-out infinite; }
@keyframes svgZombieShuffle{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
.scene-footer{ padding:6px 9px 0; }
.floor-legend{
  font-size:9.5px; color:var(--toxic-bright); background:rgba(0,0,0,0.25); border-radius:5px;
  padding:4px 8px; margin-bottom:6px; line-height:1.4;
}
.floor-legend.empty{ color:var(--text-dim); font-style:italic; }
.floor-block{ position:relative; cursor:pointer; border-bottom:2px solid #23130d; background:#5a3428; padding:0 0 8px 0; transition:filter .15s; }
.floor-block:hover{ filter:brightness(1.1); }
.floor-block.selected{ box-shadow:inset 0 0 0 2px var(--rust-bright); }
.floor-block.breached{ animation:pulseDanger 1.4s infinite; }
@keyframes pulseDanger{ 0%,100%{box-shadow:inset 0 0 0 1px var(--blood);} 50%{box-shadow:inset 0 0 12px 1px var(--blood-bright);} }
.floor-top-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.floor-lv-mini{ font-family:var(--font-mono); font-size:9px; color:var(--text-dim); }
.floor-hint{ font-size:8.5px; color:var(--text-dim); font-style:italic; }
.floor-rooms{ display:grid; grid-template-columns:1fr 44px 1fr; gap:6px; align-items:stretch; margin-bottom:6px;}
.room-box{
  position:relative; overflow:hidden; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:6px; min-height:64px; padding:6px; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:5px;
  box-shadow:inset 0 0 14px rgba(0,0,0,0.35);
}
.room-box::before{ content:''; position:absolute; top:3px; right:3px; width:9px; height:6px; background:rgba(255,214,140,0.55); border-radius:1px; box-shadow:0 0 6px 1px rgba(255,200,120,0.4); }
.room-box.tint-barikat{background:rgba(80,95,110,0.28);}
.room-box.tint-tuzak{background:rgba(110,80,50,0.28);}
.room-box.tint-keskinNisanci{background:rgba(70,85,50,0.30);}
.room-box.tint-jenerator{background:rgba(40,90,105,0.28);}
.room-box.tint-atolye{background:rgba(110,80,45,0.30);}
.room-box.tint-saglikOdasi{background:rgba(60,110,90,0.26);}
.room-box.tint-gozcuKulesi{background:rgba(55,75,100,0.28);}
.room-box.tint-bitkiYetistirme{background:rgba(130,60,170,0.30); box-shadow:inset 0 0 16px rgba(180,90,220,0.25);}
.room-box.tint-yagmurSuyuToplama{background:rgba(45,110,135,0.28);}
.room-empty{ color:rgba(255,255,255,0.32); font-size:9.5px; font-style:italic; align-self:center; margin:auto; text-align:center; }
.furn-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.12); border-radius:6px;
  padding:4px 5px 3px; min-width:50px; box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.furn-ico{ font-size:19px; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.6)); line-height:1; }
.furn-label{ font-size:7.5px; color:#eef1ea; text-align:center; line-height:1.05; max-width:52px; font-weight:600; letter-spacing:0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.furn-lv{ font-size:8px; font-weight:800; color:#1a0e04; background:var(--gold); border-radius:6px; padding:0 5px; margin-top:1px; }
.stair-box{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; background:linear-gradient(180deg,#1d2314,#141a0d); border-radius:4px; border:1px solid rgba(255,255,255,0.06); padding:4px 2px; position:relative; }
.stair-lamp{ font-size:10px; filter:drop-shadow(0 0 4px rgba(255,220,140,0.7)); }
.stair-steps{ flex:1; width:65%; margin:3px 0; border-radius:2px; background:repeating-linear-gradient(180deg, #3c4630 0 4px, #262e19 4px 8px); }
.stair-ico{ font-size:11px; opacity:0.85; }
.barricade-bar{ height:8px;border-radius:5px;background:#0b0f08;border:1px solid var(--border);overflow:hidden;position:relative; }
.barricade-fill{ height:100%; background:repeating-linear-gradient(90deg, var(--toxic) 0 6px, var(--toxic-bright) 6px 12px); transition:width .5s ease;}
.barricade-fill.low{background:repeating-linear-gradient(90deg, var(--blood) 0 6px, var(--blood-bright) 6px 12px);}
.barricade-fill.mid{background:repeating-linear-gradient(90deg, var(--rust) 0 6px, var(--rust-bright) 6px 12px);}
.floor-sub{ display:flex; justify-content:space-between; margin-top:3px; font-size:8.5px; color:var(--text-dim); font-family:var(--font-mono);}
.ground-block{ position:relative; cursor:pointer; padding:0 0 8px 0; background:#443a30; border-top:3px solid #241f18; }
.ground-block.selected{ box-shadow:inset 0 0 0 2px var(--rust-bright); }
.ground-block.breached{ animation:pulseDanger 1.4s infinite; }
.ground-barbwire{ height:6px; margin-bottom:7px; background:repeating-linear-gradient(90deg, transparent 0 6px, #d8d3c0 6px 7px, transparent 7px 13px); opacity:0.55; }
.ground-rooms{ display:grid; grid-template-columns:1fr 70px 1fr; gap:5px; align-items:stretch; margin-bottom:7px; }
.ground-side-box{ background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.08); border-radius:6px; min-height:70px; padding:6px; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; }
.ground-graffiti{ font-family:var(--font-head); color:#e8e2d0; font-weight:800; font-size:11px; letter-spacing:0.4px; transform:rotate(-2deg); text-shadow:1px 1px 0 #000; text-transform:uppercase; text-align:center; }
.hazard-sign{ background:#e8e2d0; border:2px solid var(--blood); color:var(--blood); font-size:7px; font-weight:800; text-align:center; line-height:1.15; padding:3px 5px; text-transform:uppercase; letter-spacing:0.3px; }
.ground-doors-wrap{ display:flex; align-items:flex-end; justify-content:center; }
.ground-doors{ width:64%; height:48px; margin:0 auto; position:relative; background:repeating-linear-gradient(90deg,#6b5233 0 8px,#57422a 8px 16px); border:3px solid #2e2213; border-radius:5px 5px 0 0; }
.ground-doors::after{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:#2e2213; }
.door-x-big::before, .door-x-big::after{ content:''; position:absolute; left:0; top:0; width:2px; height:135%; background:#f0d24a; opacity:0.9; }
.door-x-big::before{ transform-origin:top left; transform:rotate(38deg); }
.door-x-big::after{ transform-origin:top right; right:0; left:auto; transform:rotate(-38deg); }
.ground-defense-row{ display:flex; gap:5px; align-items:center; margin-bottom:6px; flex-wrap:wrap; justify-content:center; }
.zombie-strip{ display:flex; gap:8px; padding:5px 2px 2px; overflow:hidden; min-height:20px; border-top:1px dashed rgba(255,255,255,0.15); margin-top:2px; }
.zombie-figure{ font-size:14px; filter:grayscale(0.2); animation:zshuffle 2.6s ease-in-out infinite; }
@keyframes zshuffle{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} }

/* ---------- KATTA AÇILAN GELİŞTİRME ÇEKMECESİ ---------- */
.upgrade-drawer{ background:#0f130b; border-top:2px dashed var(--border-bright); border-bottom:2px dashed var(--border-bright); padding:9px; animation:drawerIn .18s ease-out; }
@keyframes drawerIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.drawer-head span{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px; font-size:11.5px; color:var(--gold); }
.drawer-close-btn{ background:var(--panel3); border:1px solid var(--border); color:var(--text-dim); width:22px;height:22px;border-radius:5px; cursor:pointer; font-size:11px; }
.drawer-close-btn:hover{ color:var(--blood-bright); border-color:var(--blood); }
.drawer-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:7px; }
.floor-open-hint{ font-size:9px; color:var(--gold); opacity:0.8; }

/* çekmece içindeki tek bir geliştirme kartı */
.upg-card{ background:var(--panel2); border:1px solid var(--border); border-radius:7px; padding:8px; }
.upg-card.locked{ opacity:0.55; }
.upg-head{ display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:4px; }
.upg-name{ font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:0.3px; text-transform:uppercase; }
.upg-lvl-badge{ font-family:var(--font-mono); font-size:10px; background:var(--panel3); border:1px solid var(--border-bright); padding:1px 6px; border-radius:9px; color:var(--gold); white-space:nowrap; }
.upg-desc{ font-size:10px; color:var(--text-dim); margin-bottom:7px; line-height:1.35; }
.upg-cost{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:7px; font-size:9.5px; font-family:var(--font-mono); }
.upg-cost span{ background:#0b0f08; border:1px solid var(--border); border-radius:4px; padding:2px 5px; }
.upg-cost span.afford-no{ color:var(--blood-bright); border-color:var(--blood); }
.upg-btn{
  width:100%; padding:6px; border-radius:6px; cursor:pointer; font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.3px; background:linear-gradient(180deg,#3a4a26,#28351a);
  border:1px solid var(--border-bright); color:var(--toxic-bright);
}
.upg-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.upg-btn:hover:not(:disabled){ filter:brightness(1.2); }
.upg-btn.clicked{ animation:btnPop .25s; }
@keyframes btnPop{ 0%{transform:scale(1);} 50%{transform:scale(0.94);} 100%{transform:scale(1);} }

/* ---------- SAĞ/MERKEZ SÜTUN PANELLERİ ---------- */
#center-col{display:flex;flex-direction:column;gap:10px;}
#event-banner{ min-height:44px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:linear-gradient(90deg, rgba(192,106,44,0.12), transparent); display:flex; align-items:center; gap:8px; }
#event-banner .ev-ico{font-size:22px;}
#event-banner .ev-text b{color:var(--rust-bright);}
#event-banner.empty{color:var(--text-dim); font-style:italic; font-size:12px;}
.quest-item{ display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--border); border-radius:7px; padding:6px 9px; margin-bottom:5px; }
.quest-item.done{border-color:var(--toxic); background:rgba(127,174,60,0.08);}
.quest-info{flex:1;}
.quest-desc{font-size:11px;margin-bottom:3px;}
.quest-progress-bar{height:5px;background:#0b0f08;border-radius:4px;overflow:hidden;border:1px solid var(--border);}
.quest-progress-fill{height:100%;background:var(--elec);transition:width .3s;}
.quest-reward{font-size:9.5px;color:var(--gold);white-space:nowrap;font-family:var(--font-mono);}
.quest-check{font-size:14px;color:var(--toxic-bright);}

/* karakter / hayatta kalan kartları */
.player-card, .survivor-card{ background:var(--panel2); border:1px solid var(--border); border-radius:7px; padding:7px; font-size:10.5px; margin-bottom:6px; }
.player-card{ border-color:var(--gold); background:linear-gradient(90deg, rgba(212,175,90,0.10), var(--panel2)); }
.sv-name-row{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.sv-name{font-weight:700;font-size:11.5px;}
.stars{ color:var(--gold); font-size:10px; letter-spacing:1px; white-space:nowrap; }
.stars .empty{ opacity:0.22; }
.rarity-Normal{color:#b9c2ac;}
.rarity-Nadir{color:#5fb0e0;}
.rarity-Destansı{color:#c07de0;}
.rarity-Efsanevi{color:#e0b13d;text-shadow:0 0 6px rgba(224,177,61,0.5);}
.sv-stats{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;color:var(--text-dim);font-family:var(--font-mono);}
.sv-stats span{background:#0b0f08;border:1px solid var(--border);border-radius:4px;padding:1px 5px;}
.xp-bar{height:4px;background:#0b0f08;border-radius:3px;overflow:hidden;margin-top:4px;border:1px solid var(--border);}
.xp-fill{height:100%;background:var(--gold);}
.health-bar{height:5px;background:#0b0f08;border-radius:3px;overflow:hidden;margin-top:3px;border:1px solid var(--border);}
.health-fill{height:100%;background:var(--toxic-bright);transition:width .3s;}
.health-fill.low{background:var(--blood-bright);}
.health-fill.mid{background:var(--rust-bright);}
#survivors-grid{display:flex; flex-direction:column;}
.rescue-btn, .raid-refresh-btn{
  width:100%;margin-top:4px; background:var(--panel3);border:1px solid var(--border-bright);color:var(--toxic-bright);
  padding:7px;border-radius:7px;cursor:pointer;font-weight:700;letter-spacing:0.3px; text-transform:uppercase;font-size:10.5px;
}
.rescue-btn:disabled, .raid-refresh-btn:disabled{opacity:0.4;cursor:not-allowed;}
.rescue-btn:hover:not(:disabled), .raid-refresh-btn:hover:not(:disabled){background:var(--panel2);}
.empty-note{color:var(--text-dim);font-size:11px;font-style:italic;}

/* baskın (raid) paneli */
.raid-target-card{ background:var(--panel2); border:1px solid var(--border); border-radius:7px; padding:7px 9px; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.raid-target-info{flex:1;}
.raid-target-name{font-weight:700;font-size:11.5px;}
.raid-target-name .badge-real{color:var(--toxic-bright);font-size:8.5px;font-weight:700;margin-left:5px;border:1px solid var(--toxic);border-radius:8px;padding:0 5px;}
.raid-target-name .badge-npc{color:var(--text-dim);font-size:8.5px;font-weight:700;margin-left:5px;border:1px solid var(--border);border-radius:8px;padding:0 5px;}
.raid-target-name .badge-friend{color:var(--elec);font-size:8.5px;font-weight:700;margin-left:5px;border:1px solid var(--elec);border-radius:8px;padding:0 5px;}
.raid-target-stats{font-size:9.5px;color:var(--text-dim);font-family:var(--font-mono);margin-top:2px;}
.raid-attack-btn{
  background:linear-gradient(180deg,var(--blood-bright),var(--blood)); border:1px solid #ff8a7a; color:#1a0403;
  font-weight:800; font-size:10.5px; padding:7px 10px; border-radius:6px; cursor:pointer; white-space:nowrap;
}
.raid-attack-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(0.6);}
.raid-attack-btn:hover:not(:disabled){filter:brightness(1.1);}
.raid-note{font-size:9.5px;color:var(--text-dim);font-style:italic;margin-bottom:6px;line-height:1.4;}

/* taktik seçimi */
.tactics-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.tactics-row label{ flex:1; min-width:130px; font-size:9.5px; color:var(--text-dim); display:flex; flex-direction:column; gap:3px; }
.tactics-row select{
  background:var(--panel3); border:1px solid var(--border-bright); color:var(--text); border-radius:5px;
  padding:5px 6px; font-size:10.5px; font-family:var(--font-body); cursor:pointer;
}
.tactic-desc{ font-size:9px; color:var(--toxic-bright); font-style:italic; margin-bottom:7px; line-height:1.35; min-height:22px; }

/* arkadaş kodu paylaşımı */
.friend-code-row{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:6px; }
.code-btn{
  background:var(--panel3); border:1px solid var(--border-bright); color:var(--gold); font-weight:700;
  font-size:9.5px; padding:6px 8px; border-radius:6px; cursor:pointer; white-space:nowrap;
}
.code-btn:hover{ background:var(--panel2); }
#import-code-input{
  flex:1; min-width:110px; background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:6px 8px; font-size:10px; font-family:var(--font-mono);
}
#export-code-box{
  width:100%; min-height:52px; margin-bottom:6px; background:#0b0f08; border:1px solid var(--border-bright);
  border-radius:6px; color:var(--toxic-bright); font-family:var(--font-mono); font-size:9.5px; padding:6px;
  resize:vertical;
}

/* ---------- ALT LOG ---------- */
#log-panel{ margin:0 10px 10px 10px; background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--border); border-radius:10px; padding:8px 12px; max-height:150px; overflow-y:auto; font-family:var(--font-mono); font-size:11px; }
.log-line{padding:2px 0;border-bottom:1px dotted rgba(255,255,255,0.05);color:var(--text-dim);}
.log-line b{color:var(--text);}
.log-line.warn{color:var(--rust-bright);}
.log-line.danger{color:var(--blood-bright);}
.log-line.good{color:var(--toxic-bright);}
.log-line.day-mark{color:var(--gold);font-weight:700;border-bottom:1px solid var(--border-bright);padding-top:6px;}

/* ---------- MODALLAR ---------- */
.modal-overlay{ position:fixed;inset:0;background:rgba(4,6,3,0.82); display:flex;align-items:center;justify-content:center; z-index:200; backdrop-filter:blur(2px); }
.modal-box{ background:linear-gradient(180deg,#181f10,#0d1109); border:1px solid var(--border-bright); border-radius:12px; padding:20px; width:min(440px,92vw); box-shadow:0 10px 40px rgba(0,0,0,0.6); text-align:center; animation:modalIn .25s ease-out; }
@keyframes modalIn{ from{opacity:0;transform:scale(0.92) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }
.modal-box h2{ font-family:var(--font-head);text-transform:uppercase;letter-spacing:2px; color:var(--rust-bright);margin-top:0;font-size:18px;}
.modal-box .summary-line{display:flex;justify-content:space-between;padding:5px 8px;font-size:12.5px;border-bottom:1px dotted var(--border);}
.modal-close-btn{ margin-top:14px;padding:9px 18px;border-radius:7px;border:1px solid var(--border-bright); background:var(--rust);color:#1a0e04;font-weight:800;letter-spacing:1px;text-transform:uppercase;cursor:pointer; }
.modal-close-btn:hover{filter:brightness(1.1);}
.reward-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0;}
.reward-chip{background:var(--panel3);border:1px solid var(--gold);color:var(--gold);border-radius:6px;padding:4px 9px;font-family:var(--font-mono);font-size:11px;}

/* ---------- GÜN GEÇİŞ ANİMASYONU ---------- */
#day-transition{ position:fixed;inset:0;z-index:300; background:#000; display:flex;align-items:center;justify-content:center; pointer-events:none; opacity:0;}
#day-transition.play{ animation:dayTrans 1.4s ease-in-out; }
#day-transition .dt-text{ font-family:var(--font-head);font-size:40px;letter-spacing:5px;color:var(--rust-bright);text-transform:uppercase; text-shadow:0 0 30px rgba(232,134,63,0.6); }
@keyframes dayTrans{ 0%{opacity:0;} 15%{opacity:1;} 50%{opacity:1;} 85%{opacity:1;} 100%{opacity:0;} }

/* ---------- DUYARLI TASARIM ---------- */
@media (max-width:1080px){ #main-grid{grid-template-columns:1fr;} }
@media (max-width:560px){
  .brand{font-size:12px;}
  .res-chip{min-width:56px;padding:3px 5px;}
  .modal-box{padding:14px;}
  .floor-rooms{grid-template-columns:1fr 34px 1fr;}
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }
.footer-note{ text-align:center;color:var(--text-dim);font-size:10px;padding:12px 0 22px;letter-spacing:0.4px;}