/* ============================================================
   styles.css — Blackgate Protocol
   ============================================================ */
:root{
  --bg:#0a0d16; --bg2:#0f1422; --panel:#131a2b; --panel2:#0e1424;
  --line:#232c44; --line2:#2c3654;
  --text:#e7ebf7; --muted:#8b96b8; --dim:#5b6685;
  --accent:#4d8ef7; --accent2:#3fd4a1; --warn:#f6a445; --bad:#f0475b;
  --good:#3fd4a1; --glow:#7ab6ff;
  --radius:10px;
  font-size:16px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  overflow:hidden;
}
button{font-family:inherit;}
.hidden{display:none !important;}

#credit{
  position:fixed; bottom:6px; left:0; right:0; z-index:999;
  text-align:center;
  font-size:10px; letter-spacing:.3px; color:rgba(139,150,184,.35);
  pointer-events:none; user-select:none;
}

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{width:9px; height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--line2); border-radius:6px;}

/* ============ SETUP SCREEN ============ */
#setup.screen{
  height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 20% 15%, rgba(77,142,247,.12), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(240,71,91,.10), transparent 40%),
    linear-gradient(180deg,#080a12,#0c1120 60%,#0a0d16);
  padding:24px; overflow-y:auto;
}
.setup-inner{max-width:640px; width:100%; text-align:center;}
.logo{margin-bottom:22px;}
.logo-bars{color:var(--accent); letter-spacing:6px; font-size:13px; opacity:.6;}
.logo h1{
  margin:6px 0 2px; font-size:clamp(28px,6vw,44px); letter-spacing:2px;
  font-weight:800; text-shadow:0 0 30px rgba(77,142,247,.35);
}
.logo h1 span{display:block; color:var(--accent); font-size:.5em; letter-spacing:8px; font-weight:700;}
.tagline{color:var(--muted); margin:4px 0 0; font-size:14px; letter-spacing:1px;}

.setup-card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:14px; padding:22px;
  text-align:left; box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.field{display:block; margin-bottom:18px;}
.field>span{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:8px;}
.field>span em{color:var(--dim); font-style:normal; text-transform:none; letter-spacing:0;}
input#prisonName{
  width:100%; padding:11px 12px; background:var(--bg2); border:1px solid var(--line2);
  border-radius:8px; color:var(--text); font-size:16px;
}
input#prisonName:focus{outline:none; border-color:var(--accent);}

.warden-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:520px){.warden-grid{grid-template-columns:1fr;}}
.warden-card{
  border:1px solid var(--line2); background:var(--bg2); border-radius:10px; padding:12px;
  cursor:pointer; transition:.15s; position:relative;
}
.warden-card:hover{border-color:var(--accent); transform:translateY(-1px);}
.warden-card.sel{border-color:var(--accent); background:rgba(77,142,247,.1); box-shadow:0 0 0 1px var(--accent) inset;}
.warden-card .wi{font-size:22px;}
.warden-card b{display:block; margin-top:4px; font-size:14px;}
.warden-card .wt{color:var(--muted); font-size:11px; display:block; margin-bottom:6px;}
.warden-card .wp{color:var(--accent2); font-size:12px; line-height:1.4;}

.diff-row{display:flex; gap:10px;}
.diff-card{
  flex:1; border:1px solid var(--line2); background:var(--bg2); border-radius:10px;
  padding:10px; text-align:center; cursor:pointer; transition:.15s;
}
.diff-card:hover{border-color:var(--accent);}
.diff-card.sel{border-color:var(--warn); background:rgba(246,164,69,.1);}
.diff-card b{display:block; font-size:13px;}
.diff-card small{color:var(--muted); font-size:10px;}

.btn{
  border:none; border-radius:8px; padding:12px 18px; font-weight:700; letter-spacing:.5px;
  cursor:pointer; color:#fff; background:var(--accent); font-size:14px; transition:.15s;
}
.btn:hover{filter:brightness(1.12); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.big{width:100%; padding:15px; font-size:15px; margin-top:4px;
  background:linear-gradient(135deg,var(--accent),#3fa1f7); box-shadow:0 8px 24px rgba(77,142,247,.35);}
.btn.ghost{background:transparent; border:1px solid var(--line2); color:var(--muted); margin-top:10px; width:100%;}
.btn.ghost:hover{color:var(--text); border-color:var(--accent);}
.btn.small{padding:6px 10px; font-size:12px;}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}
.hint{color:var(--dim); font-size:12px; margin-top:16px;}

/* ============ GAME LAYOUT ============ */
#game{height:100vh; display:flex; flex-direction:column;}
#topbar{
  display:flex; align-items:center; gap:18px; padding:8px 14px;
  background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; z-index:5;
}
.brand{display:flex; align-items:center; gap:8px; min-width:150px;}
.dot{width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good);}
.dot.warn{background:var(--warn); box-shadow:0 0 8px var(--warn);}
.dot.bad{background:var(--bad); box-shadow:0 0 10px var(--bad); animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.3;}}
#hudName{font-size:14px; letter-spacing:.5px;}
.warden-tag{font-size:10px; color:var(--muted); border:1px solid var(--line2); border-radius:20px; padding:2px 8px;}

.stats{display:flex; gap:16px; flex-wrap:wrap; align-items:center; flex:1;}
.stat{font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:2px; min-width:56px;}
.stat b{font-size:14px; color:var(--text); font-variant-numeric:tabular-nums;}
.stat.wide{min-width:100px;}
.bar{height:5px; background:var(--bg2); border-radius:4px; overflow:hidden; border:1px solid var(--line2); width:90px;}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent2),#7ee8c4); width:100%; transition:width .4s;}
.bar.ctrl i{background:linear-gradient(90deg,var(--accent),var(--glow));}
.bar.danger i{background:linear-gradient(90deg,var(--warn),var(--bad));}
.grade{font-size:18px !important; color:var(--warn) !important;}

.top-actions{display:flex; gap:8px; align-items:center;}
.btn.alarm{background:linear-gradient(135deg,#c62d40,#f0475b); box-shadow:0 0 16px rgba(240,71,91,.4);}
.btn.alarm.active{animation:alarmPulse .6s infinite;}
@keyframes alarmPulse{50%{filter:brightness(1.5);}}
.btn.hero{background:linear-gradient(135deg,#7b4ff0,#4d8ef7);}

#layout{flex:1; display:flex; min-height:0;}
.panel{
  width:300px; min-width:260px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.tabs{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); background:var(--panel2);}
.tabs button{
  flex:1; min-width:70px; padding:9px 4px; background:none; border:none; color:var(--muted);
  font-size:11px; letter-spacing:.3px; cursor:pointer; border-bottom:2px solid transparent;
}
.tabs button.active{color:var(--text); border-color:var(--accent); background:rgba(77,142,247,.07);}
.tab-body{flex:1; overflow-y:auto; padding:12px;}
.tabpane{display:none;}
.tabpane.active{display:block;}

.card{
  background:var(--bg2); border:1px solid var(--line2); border-radius:9px; padding:10px; margin-bottom:9px;
}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.card-head b{font-size:13px;}
.card-sub{color:var(--muted); font-size:11px; margin:4px 0 8px; line-height:1.4;}
.card-row{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; color:var(--muted); margin-bottom:8px;}
.chip{font-size:10px; padding:2px 7px; border-radius:20px; border:1px solid var(--line2); color:var(--muted);}
.count-badge{background:var(--accent); color:#fff; border-radius:20px; font-size:10px; padding:1px 7px; font-weight:700;}
.buyrow{display:flex; gap:6px;}
.buyrow .btn{flex:1; padding:8px; font-size:12px;}
.mini{font-size:10px; color:var(--dim);}
.lvl-dots{display:flex; gap:3px; margin:6px 0;}
.lvl-dots i{width:14px; height:5px; border-radius:3px; background:var(--line2); display:block;}
.lvl-dots i.on{background:var(--accent2);}

.empty-note{color:var(--dim); font-size:12px; text-align:center; padding:20px 6px;}

/* Intake list */
.intake-item{
  display:flex; gap:9px; align-items:center; background:var(--bg2); border:1px solid var(--line2);
  border-radius:9px; padding:9px; margin-bottom:8px;
}
.intake-item .dtag{
  width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; flex-shrink:0;
}
.d1{background:#2c3f2e; color:#6fe38c;} .d2{background:#3a3620; color:#f6d445;}
.d3{background:#3a2a1f; color:#f6a445;} .d4{background:#3a2020; color:#f0745b;}
.d5{background:#3a1c28; color:#ff5f9e; box-shadow:0 0 10px rgba(255,95,158,.4);}
.intake-info{flex:1; min-width:0;}
.intake-info b{font-size:12.5px; display:block;}
.intake-info span{font-size:10px; color:var(--muted);}

/* Block (inmate roster) */
.inmate-row{
  display:flex; gap:8px; align-items:center; padding:8px; border-bottom:1px solid var(--line);
  font-size:12px;
}
.inmate-row:last-child{border-bottom:none;}
.inmate-row .nm{flex:1;}
.inmate-row .nm b{display:block; font-size:12px;}
.inmate-row .nm span{color:var(--muted); font-size:10px;}
.threatbar{width:44px; height:5px; background:var(--bg); border-radius:3px; overflow:hidden; border:1px solid var(--line2);}
.threatbar i{display:block; height:100%; background:var(--bad);}

/* ============ VIEWPORT ============ */
#viewport{flex:1; position:relative; background:#05070d; min-width:0;}
#scene{width:100%; height:100%; display:block; cursor:grab;}
#scene:active{cursor:grabbing;}
#sirenOverlay{
  position:absolute; inset:0; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:linear-gradient(180deg, rgba(240,71,91,.35), transparent 60%);
}
#sirenOverlay.on{animation:siren 1s infinite;}
@keyframes siren{0%,100%{opacity:.15; background:linear-gradient(180deg, rgba(240,71,91,.4), transparent 55%);}
  50%{opacity:.5; background:linear-gradient(180deg, rgba(90,140,255,.4), transparent 55%);}}

.camlabel{
  position:absolute; top:10px; left:10px; background:rgba(6,10,18,.7); border:1px solid var(--line2);
  padding:5px 10px; border-radius:6px; font-size:11px; letter-spacing:1px; color:var(--muted);
}
#camRec{color:var(--bad); margin-left:6px;}
#viewbtns{position:absolute; bottom:10px; left:10px; display:flex; gap:6px;}
.vbtn{
  background:rgba(6,10,18,.75); border:1px solid var(--line2); color:var(--muted); font-size:10px;
  padding:6px 10px; border-radius:6px; cursor:pointer;
}
.vbtn:hover, .vbtn.active{color:var(--text); border-color:var(--accent);}

#alertBanner{
  position:absolute; top:0; left:0; right:0; padding:12px; text-align:center; font-weight:800;
  letter-spacing:1px; background:linear-gradient(90deg,#c62d40,#8a1f2f); color:#fff; font-size:13px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}

/* ============ SIDE LOG ============ */
#side{width:270px; min-width:220px; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column;}
.side-head{
  font-size:11px; letter-spacing:1px; color:var(--muted); padding:10px 12px 6px; border-bottom:1px solid var(--line);
  background:var(--panel2);
}
#log{flex:1; overflow-y:auto; padding:8px 10px; font-size:11.5px; line-height:1.5;}
#log .le{padding:5px 0; border-bottom:1px dashed var(--line); color:var(--muted);}
#log .le.good{color:var(--good);}
#log .le.bad{color:var(--bad);}
#log .le.warn{color:var(--warn);}
#log .le .t{color:var(--dim); margin-right:6px;}
#threat{max-height:180px; overflow-y:auto; padding:8px 10px; font-size:11px; border-top:1px solid var(--line);}

/* ============ MODAL ============ */
.modal{position:fixed; inset:0; background:rgba(4,6,12,.72); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px;}
.modal-box{
  background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line2); border-radius:12px;
  padding:20px; max-width:480px; width:100%; max-height:86vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-box h2{margin:0 0 10px; font-size:17px;}
.modal-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.modal-actions .btn{flex:1;}
.mrow{display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line); color:var(--muted);}
.mrow b{color:var(--text);}
.board-row{display:flex; justify-content:space-between; padding:8px 6px; border-bottom:1px solid var(--line); font-size:13px;}
.board-row .rk{color:var(--accent); font-weight:700; width:26px;}

/* Responsive: stack panels on small screens */
@media (max-width:900px){
  #layout{flex-direction:column; overflow-y:auto;}
  .panel, #side{width:100%; min-width:0; max-height:38vh;}
  #viewport{min-height:46vh;}
  .stats{gap:10px;}
  .stat.wide{width:100%; order:99;}
}
@media (max-width:560px){
  .stats .stat{min-width:44px; font-size:10px;}
  .stat b{font-size:12px;}
  #topbar{gap:8px;}
  .top-actions .btn{padding:9px 10px; font-size:12px;}
}