/* AI CIVILIZATION SIMULATOR — dark god-game aesthetic */
:root{
  --bg:#04060d; --panel:#0a0f1d; --panel2:#0d1428;
  --line:#1c2740; --gold:#e8b64c; --cream:#e8edf7;
  --mut:#8b93a7; --teal:#22d3ee; --green:#7bc96f; --pink:#f472b6; --red:#f47070;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(130% 100% at 50% 0%, #0a1022 0%, var(--bg) 60%);
  color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; min-height:100dvh;
  -webkit-user-select:none; user-select:none;
}
.hidden{display:none!important;}
.mut{color:var(--mut);} .sm{font-size:12px;} .pad{padding:0 14px;}
.cl{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--mut);display:block;}
.cv{font-size:15px;font-weight:800;color:var(--cream);}

#app{max-width:1280px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}

/* header */
header{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);
  background:rgba(8,12,24,.8);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;}
.logo{font-size:26px;color:var(--gold);text-shadow:0 0 18px rgba(232,182,76,.7);}
.brand h1{margin:0;font-size:17px;letter-spacing:3px;}
.brand p{margin:0;font-size:10px;color:var(--mut);letter-spacing:1px;}
.clock #date{font-size:16px;font-weight:800;color:var(--gold);}
.chips{display:flex;gap:8px;margin-left:auto;}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 12px;min-width:86px;text-align:center;}
.chip.warn{border-color:var(--red);}
.chip.warn .cv{color:var(--red);}
.controls{display:flex;gap:6px;}
.cbtn{background:var(--panel2);border:1px solid var(--line);color:var(--cream);border-radius:10px;
  padding:8px 12px;font-size:14px;font-weight:700;cursor:pointer;touch-action:manipulation;}
.cbtn.on{background:var(--gold);border-color:var(--gold);color:#241a05;}
.cbtn:active{transform:scale(.95);}

/* main layout */
main{flex:1;display:grid;grid-template-columns:1fr 360px;gap:12px;padding:12px 16px;min-height:0;}
.world-panel{position:relative;background:#05080f;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  min-height:420px;display:flex;flex-direction:column;}
#world{flex:1;width:100%;min-height:380px;cursor:crosshair;touch-action:manipulation;}
.world-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;
  border-top:1px solid var(--line);background:rgba(8,12,24,.7);flex-wrap:wrap;}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--mut);}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;}
.legend i.ring{border:2px solid #ffe9a8;background:transparent;width:7px;height:7px;}
.ghostbtn{background:transparent;border:1px solid var(--line);color:var(--cream);border-radius:10px;
  padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;}

/* agent inspector card */
#agent-card{position:absolute;left:12px;bottom:52px;width:250px;background:rgba(10,15,29,.96);
  border:1px solid var(--gold);border-radius:14px;padding:14px;z-index:5;box-shadow:0 8px 30px rgba(0,0,0,.6);}
#ac-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--mut);font-size:14px;cursor:pointer;}
.ac-name{font-size:16px;font-weight:800;color:var(--gold);}
#ac-job{font-size:12px;margin:2px 0 8px;}
.ac-grid{display:flex;gap:16px;margin-bottom:8px;}
.bar{height:8px;background:#1a2340;border-radius:5px;overflow:hidden;margin-top:4px;}
.bar>div{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:5px;}
#ac-mem div{margin-top:3px;line-height:1.35;}

/* side panel */
.side{background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;
  min-height:0;overflow:hidden;}
.tabs{display:flex;border-bottom:1px solid var(--line);}
.tab{flex:1;background:none;border:none;color:var(--mut);padding:12px 4px;font-size:12.5px;font-weight:700;
  cursor:pointer;border-bottom:2px solid transparent;touch-action:manipulation;}
.tab.on{color:var(--gold);border-bottom-color:var(--gold);}
.tabpage{display:none;overflow-y:auto;flex:1;min-height:0;padding:12px 0 16px;}
.tabpage.on{display:block;}
canvas.chart{width:100%;height:64px;display:block;}
canvas.chart.tall{height:150px;}
.sparks{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 0;}
.sparkbox{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:4px;}
.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px;}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;}

/* policy lab */
.plab{padding:0 14px;display:flex;flex-direction:column;gap:14px;}
.prow{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;}
.plabel{font-size:13px;font-weight:800;margin-bottom:8px;}
.plabel.sm{font-size:12px;}
input[type=range]{width:100%;accent-color:var(--gold);height:28px;touch-action:pan-x;}
.switchrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;cursor:pointer;}
.switchrow input{display:none;}
.switch{width:46px;height:26px;background:#1a2340;border-radius:14px;position:relative;transition:.2s;flex:none;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#8b93a7;transition:.2s;}
.switchrow input:checked+.switch{background:var(--gold);}
.switchrow input:checked+.switch::after{left:23px;background:#241a05;}
.shockgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.shock{background:#141c34;border:1px solid var(--line);color:var(--cream);border-radius:10px;
  padding:11px 8px;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation;}
.shock:active{transform:scale(.96);border-color:var(--gold);}
.preset{border-color:#2a3a5f;}
.effects{display:flex;flex-wrap:wrap;gap:6px;}
.effect{background:#2a1f08;border:1px solid var(--gold);color:var(--gold);border-radius:20px;
  padding:5px 11px;font-size:12px;font-weight:700;}

/* citizens */
.richest{list-style:none;margin:0;padding:0 14px;}
.richest li{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  margin-bottom:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;gap:8px;align-items:center;}
.richest li:active{border-color:var(--gold);}
.rk{color:var(--gold);font-weight:900;}
.rw{margin-left:auto;color:var(--gold);font-weight:800;}

/* event log */
.log{list-style:none;margin:0;padding:0 14px;font-size:12.5px;line-height:1.45;}
.log li{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;}
.lt{color:var(--gold);font-weight:800;margin-right:6px;font-size:11px;}

/* welcome overlay */
#welcome{position:fixed;inset:0;background:rgba(3,5,10,.82);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px);}
.wcard{background:linear-gradient(160deg,#0c1327,#070b16);border:1px solid var(--gold);border-radius:22px;
  padding:34px 28px;max-width:420px;text-align:center;box-shadow:0 20px 80px rgba(232,182,76,.15);}
.wlogo{font-size:52px;color:var(--gold);text-shadow:0 0 30px rgba(232,182,76,.8);}
.wcard h2{letter-spacing:5px;margin:10px 0 6px;font-size:24px;}
.wsub{color:var(--mut);font-size:14px;line-height:1.6;}
.wsub em{color:var(--gold);font-style:normal;font-weight:700;}
.wlist{list-style:none;text-align:left;padding:0;margin:18px 0;font-size:14px;line-height:2;}
#btn-launch{background:var(--gold);border:none;color:#241a05;font-size:16px;font-weight:800;
  border-radius:14px;padding:15px 22px;width:100%;cursor:pointer;touch-action:manipulation;}
#btn-launch:active{transform:scale(.97);}

/* mobile */
@media (max-width:900px){
  main{grid-template-columns:1fr;padding:10px;}
  .world-panel{min-height:300px;}
  #world{min-height:300px;}
  .side{min-height:420px;}
  header{gap:10px;}
  .chips{order:5;width:100%;margin-left:0;}
  .chip{flex:1;}
  #agent-card{left:8px;right:8px;width:auto;bottom:56px;}
}