/* ============================================================
   style.css - pixel/terminal estetigi, DOM paneli
   ============================================================ */
:root{
  --bg0:#080d18; --bg1:#0d1626; --bg2:#132132; --bg3:#182b41;
  --line:#27405e; --line2:#1c3149;
  --ink:#cfe6ff; --dim:#7d9cbe; --faint:#4d6885;
  --cyan:#4cd7f0; --green:#6ef2a0; --lime:#b6f36b;
  --amber:#ffce4a; --orange:#ff9542; --red:#ff5566;
  --violet:#9d7cff; --magenta:#f36bd0;
  --mono: "Consolas","DejaVu Sans Mono","Courier New",monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg0); color:var(--ink);
  font-family:var(--mono); font-size:12px; letter-spacing:.4px;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(76,215,240,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,215,240,.035) 1px, transparent 1px);
  background-size:24px 24px;
}

#app{display:flex; height:100vh; gap:10px; padding:10px;}

/* ---------------- SOL ---------------- */
#left{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; gap:8px;}

#titlebar{
  display:flex; align-items:center; gap:14px;
  background:var(--bg1); border:2px solid var(--line); padding:8px 12px;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.logo{font-size:20px; font-weight:bold; letter-spacing:3px; color:var(--cyan);
  text-shadow:2px 2px 0 #06202b;}
.logo span{color:var(--red); margin:0 4px;}
.tagline{color:var(--faint); font-size:11px; flex:1;}
.ctrl{display:flex; gap:5px; flex-wrap:wrap;}

.sbtn{
  font-family:var(--mono); font-size:11px; letter-spacing:1px;
  background:var(--bg2); color:var(--dim);
  border:2px solid var(--line); padding:5px 9px; cursor:pointer;
  box-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.sbtn:hover{color:var(--ink); border-color:var(--cyan);}
.sbtn:active{transform:translate(2px,2px); box-shadow:none;}
.sbtn.active{background:var(--cyan); color:#04202b; border-color:var(--cyan);}
.sbtn.wide{padding:5px 11px;}
.sbtn.danger:hover{border-color:var(--red); color:var(--red);}

#screen-wrap{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  background:#04070e; border:2px solid var(--line); min-height:0;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), 4px 4px 0 rgba(0,0,0,.5);
  overflow:hidden;
}
#screen{
  image-rendering:pixelated; image-rendering:crisp-edges;
  display:block;
}

/* ---------------- Alt istatistik seridi ---------------- */
#statstrip{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
  background:var(--bg1); border:2px solid var(--line); padding:9px 10px;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.stat{min-width:0;}
.stat label{display:block; color:var(--faint); font-size:9px; letter-spacing:1.4px; margin-bottom:3px;}
.big{font-size:19px; font-weight:bold; color:var(--amber); line-height:1.1;}
.big.bad{color:var(--red);}
.sub{font-size:10px; color:var(--dim); margin-top:2px;}
.sub.good,.good{color:var(--green);} .sub.bad,.bad{color:var(--red);}
.v{font-size:15px; font-weight:bold;}
.v.good{color:var(--green);} .v.warn{color:var(--amber);} .v.bad{color:var(--red);}
.track{height:7px; background:var(--bg0); border:1px solid var(--line); margin-top:5px;}
.track i{display:block; height:100%; transition:width .18s linear;}
.track i.ok{background:var(--green);} .track i.warn2{background:var(--amber);}
.track i.bad{background:var(--red);} .track i.goal{background:linear-gradient(90deg,var(--cyan),var(--green));}

/* ---------------- SAG PANEL ---------------- */
#right{
  width:360px; flex:0 0 360px; display:flex; flex-direction:column; gap:8px;
  min-height:0;
}
.panel{
  background:var(--bg1); border:2px solid var(--line); padding:8px 9px;
  box-shadow:4px 4px 0 rgba(0,0,0,.5); min-height:0; display:flex; flex-direction:column;
  flex:0 0 auto;
}
.panel.grow{flex:1 1 auto; min-height:150px;}
.panel h2{
  margin:0 0 7px; font-size:10px; letter-spacing:2px; color:var(--cyan);
  border-bottom:1px dashed var(--line); padding-bottom:5px;
}

.bottleneck{
  padding:7px 10px; border:2px solid var(--line); text-align:center;
  font-size:11px; letter-spacing:2px; font-weight:bold;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.bottleneck.ok{background:#0e2a1c; color:var(--green); border-color:#1d5638;}
.bottleneck.bad{background:#2c1016; color:var(--red); border-color:#5c1f2a;
  animation:pulse .8s steps(2,end) infinite;}
@keyframes pulse{50%{background:#451821;}}

/* ---- kullanim cubuklari ---- */
.urow{display:flex; align-items:center; gap:6px; margin:4px 0; font-size:10px;}
.un{width:38px; color:var(--dim); flex:none;}
.uv{width:34px; text-align:right; color:var(--ink); flex:none;}
.unote{color:var(--faint); font-size:9px; flex:1; text-align:right;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.ubar{flex:1 1 70px; height:8px; background:var(--bg0); border:1px solid var(--line2); min-width:50px;}
.ubar i{display:block; height:100%;}
.ubar i.ok{background:var(--green);} .ubar i.warn1{background:var(--lime);}
.ubar i.warn2{background:var(--amber);} .ubar i.bad{background:var(--red);}

/* ---- magaza ---- */
#shop-tabs{display:flex; gap:3px; margin-bottom:7px; flex-wrap:wrap;}
.tab{
  font-family:var(--mono); font-size:9px; letter-spacing:1px;
  background:var(--bg2); color:var(--faint); border:1px solid var(--line);
  padding:4px 7px; cursor:pointer;
}
.tab:hover{color:var(--ink);}
.tab.active{background:var(--cyan); color:#04202b; border-color:var(--cyan);}

#shop{overflow-y:auto; flex:1 1 auto; padding-right:3px; min-height:120px;}
#shop::-webkit-scrollbar,#log::-webkit-scrollbar{width:8px;}
#shop::-webkit-scrollbar-track,#log::-webkit-scrollbar-track{background:var(--bg0);}
#shop::-webkit-scrollbar-thumb,#log::-webkit-scrollbar-thumb{background:var(--line);}

.card{
  border:1px solid var(--line2); background:var(--bg2);
  padding:6px 7px; margin-bottom:5px;
}
.card.owned{border-left:3px solid var(--cyan);}
.card.locked{opacity:.5;}
.card.poor .buy{color:var(--faint);}
.card-head{display:flex; justify-content:space-between; align-items:center;}
.card-name{font-size:11px; font-weight:bold; color:var(--ink); letter-spacing:1px;}
.card-lvl{font-size:9px; color:var(--violet);}
.card-desc{font-size:9px; color:var(--faint); margin:3px 0; line-height:1.35;}
.card-eff{font-size:10px; color:var(--green); margin-bottom:5px;}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.card-up{font-size:9px; color:var(--orange);}
.buy{
  font-family:var(--mono); font-size:11px; font-weight:bold;
  background:var(--amber); color:#2a1c00; border:none;
  padding:4px 10px; cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,.6);
  min-width:76px;
}
.buy:hover{background:#ffe58a;}
.buy:active{transform:translate(2px,2px); box-shadow:none;}
.buy.disabled{background:var(--bg3); color:var(--faint); cursor:not-allowed; box-shadow:none;}
.buy.maxed{background:var(--bg3); color:var(--violet); cursor:default; box-shadow:none;}

/* ---- log ---- */
.logpanel{height:150px; flex:0 0 150px;}
#log{overflow-y:auto; flex:1 1 auto; font-size:10px; line-height:1.5;}
.logline{border-bottom:1px dotted var(--line2); padding:2px 0; color:var(--dim);}
.lt{color:var(--faint); margin-right:6px;}
.e-bad{color:var(--red);} .e-good{color:var(--green);}
.e-ok{color:var(--dim);} .e-buy{color:var(--amber);}

/* ---------------- OVERLAY ---------------- */
.overlay{
  position:fixed; inset:0; background:rgba(4,7,14,.92);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.overlay.on{display:flex;}
.modal{
  background:var(--bg1); border:3px solid var(--cyan); padding:26px 30px;
  max-width:640px; box-shadow:8px 8px 0 rgba(0,0,0,.7);
}
.modal.wide{max-width:900px;}
.modal h1{
  margin:0 0 12px; font-size:26px; letter-spacing:5px; color:var(--cyan);
  text-shadow:3px 3px 0 #06202b;
}
.modal h1.win{color:var(--green);} .modal h1.lose{color:var(--red);}
.lead{color:var(--dim); line-height:1.7; font-size:12px; margin:0 0 16px;}
.lead b{color:var(--amber);}
.rules div{
  display:flex; gap:9px; align-items:flex-start; margin-bottom:8px;
  color:var(--dim); font-size:11px; line-height:1.6;
}
.rules span{
  flex:none; width:18px; height:18px; background:var(--cyan); color:#04202b;
  text-align:center; line-height:18px; font-weight:bold;
}
.rules p{margin:0;}
.rules b{color:var(--ink);}
.cta{
  margin-top:18px; width:100%; font-family:var(--mono); font-size:14px;
  letter-spacing:3px; font-weight:bold;
  background:var(--cyan); color:#04202b; border:none; padding:12px;
  cursor:pointer; box-shadow:4px 4px 0 rgba(0,0,0,.7);
}
.cta:hover{background:#8ae8fa;}
.cta:active{transform:translate(4px,4px); box-shadow:none;}
.hint{color:var(--faint); font-size:10px; text-align:center; margin:10px 0 0;}

.help-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;}
.help-grid h3{margin:0 0 6px; font-size:11px; letter-spacing:2px; color:var(--amber);}
.help-grid p{margin:0 0 8px; font-size:11px; line-height:1.6; color:var(--dim);}
.help-grid b{color:var(--ink);}

.stats{margin-top:6px; border-top:1px dashed var(--line); padding-top:10px;}
.srow{display:flex; justify-content:space-between; gap:12px; font-size:11px;
  color:var(--faint); padding:4px 0; border-bottom:1px dotted var(--line2);}
.srow b{color:var(--amber); text-align:right;}

/* ---------------- Dar ekran ---------------- */
@media (max-width:1180px){
  #app{flex-direction:column; overflow:auto;}
  #right{width:100%; flex:none;}
  #statstrip{grid-template-columns:repeat(3,1fr);}
  .help-grid{grid-template-columns:1fr;}
}

/* ---- kucultme (satis) butonu ---- */
.sell{
  font-family:var(--mono); font-size:12px; font-weight:bold;
  background:var(--bg3); color:var(--dim); border:1px solid var(--line);
  padding:3px 8px; cursor:pointer; line-height:1;
}
.sell:hover{background:var(--red); color:#2a0008; border-color:var(--red);}
.sell.disabled{opacity:.25; cursor:not-allowed;}
.e-sell{color:var(--violet);}