/* ============================================================
 * Wabah: Garis Depan — tema "Pusat Komando Kesehatan"
 * ============================================================ */
:root{
  --bg:#0a1118; --bg2:#0d1722; --panel:#101e2b; --panel2:#15273a;
  --line:#1d3447; --line-soft:#16283a; --text:#e6f0f7; --muted:#7b96a8;
  --teal:#2fd6c9; --green:#2ee6a6; --amber:#f5c451; --red:#ff5470; --blue:#5fb0c9; --purple:#9d7bff;
  --mono:'Courier New',monospace; --sans:'Segoe UI',system-ui,sans-serif;
  --S:#5fb0c9; --E:#f5c451; --I:#ff5470; --R:#2ee6a6; --D:#5a6b78;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;}
#stage-wrap{width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 0%,#0f1d2b,#070d14);}
#stage{position:relative;width:100%;height:100%;max-width:1280px;max-height:720px;aspect-ratio:16/9;background:var(--bg);overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.6);}
.screen{position:absolute;inset:0;display:none;flex-direction:column;}
.screen.active{display:flex;}
.mono{font-family:var(--mono);}
.glow{text-shadow:0 0 18px rgba(47,214,201,.5);}
.eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--teal);text-transform:uppercase;}

/* buttons */
.btn{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;padding:.6rem 1.3rem;border-radius:4px;cursor:pointer;
  background:var(--panel2);color:var(--text);border:1px solid var(--line);transition:all .15s;}
.btn:hover{border-color:var(--teal);box-shadow:0 0 14px rgba(47,214,201,.25);}
.btn.primary{background:linear-gradient(180deg,#1c4d44,#143a33);border-color:var(--green);color:#d6ffe9;}
.btn.primary:hover{box-shadow:0 0 18px rgba(46,230,166,.4);}
.btn.warn{border-color:var(--amber);color:var(--amber);}
.btn.ghost{background:transparent;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.icon-btn{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;background:transparent;border:1px solid var(--line);
  color:var(--muted);border-radius:3px;padding:.3rem .55rem;cursor:pointer;}
.icon-btn:hover{color:var(--teal);border-color:var(--teal);}

/* ---------- TITLE ---------- */
#screen-title{align-items:center;justify-content:center;text-align:center;padding:2rem;}
.title-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:42px 42px;opacity:.35;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);}
.title-logo{font-family:var(--mono);font-size:3.4rem;font-weight:800;letter-spacing:.06em;color:var(--text);position:relative;}
.title-logo .v{color:var(--green);text-shadow:0 0 26px rgba(46,230,166,.6);}
.title-sub{font-family:var(--mono);color:var(--teal);letter-spacing:.34em;font-size:.8rem;margin-top:.3rem;}
.title-tag{max-width:600px;color:var(--muted);line-height:1.6;margin:1.4rem auto 0;font-size:.92rem;position:relative;}
.pulse-ring{position:absolute;pointer-events:none;width:300px;height:300px;border-radius:50%;border:1px solid var(--green);opacity:0;animation:pring 3s infinite;}
@keyframes pring{0%{transform:scale(.5);opacity:.5;}100%{transform:scale(1.6);opacity:0;}}

/* ---------- INTRO ---------- */
#screen-intro{align-items:center;justify-content:center;padding:3rem;}
.intro-box{max-width:680px;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:2rem;}
.intro-text{font-size:1.02rem;line-height:1.7;min-height:230px;white-space:pre-wrap;}
.cursor-blink::after{content:"▋";color:var(--green);animation:bk 1s steps(1) infinite;}
@keyframes bk{50%{opacity:0;}}

/* ---------- GAME LAYOUT ---------- */
#screen-game{display:none;}
#screen-game.active{display:grid;grid-template-rows:auto auto minmax(120px,1fr) auto;height:100%;}
.hud{display:flex;align-items:center;gap:.5rem;padding:.4rem .7rem;background:linear-gradient(180deg,#0f1d2b,#0b151f);border-bottom:1px solid var(--line);flex-wrap:wrap;}
.hud .wk{font-family:var(--mono);font-weight:800;color:var(--teal);font-size:.95rem;letter-spacing:.06em;}
.stat{display:flex;flex-direction:column;line-height:1.05;min-width:54px;}
.stat .l{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;}
.stat .v{font-family:var(--mono);font-size:.84rem;font-weight:700;}
.stat .v.s{color:var(--S);} .stat .v.i{color:var(--I);} .stat .v.d{color:var(--D);} .stat .v.r{color:var(--R);}
.meter{width:70px;height:6px;background:#0a141e;border-radius:4px;overflow:hidden;margin-top:2px;}
.meter>span{display:block;height:100%;transition:width .4s;}
.meter.eco>span{background:linear-gradient(90deg,var(--amber),#ffd86b);}
.meter.trust>span{background:linear-gradient(90deg,var(--blue),var(--teal));}
.hud-sp{margin-left:auto;}

/* FSM strip */
.fsm-strip{display:flex;gap:.5rem;padding:.3rem .7rem;background:rgba(10,18,28,.7);border-bottom:1px solid var(--line-soft);overflow-x:auto;}
.fsm-mini{display:flex;align-items:center;gap:.3rem;white-space:nowrap;}
.fsm-mini .l{font-family:var(--mono);font-size:.5rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.fsm-mini .v{font-family:var(--mono);font-size:.56rem;font-weight:700;padding:.1rem .35rem;border-radius:2px;border:1px solid var(--teal);color:var(--teal);background:#0b1722;}
.fsm-mini .v.warn{color:var(--amber);border-color:var(--amber);}
.fsm-mini .v.danger{color:var(--red);border-color:var(--red);box-shadow:0 0 8px rgba(255,84,112,.4);}
.fsm-mini .v.good{color:var(--green);border-color:var(--green);}
.fsm-mini .v.flash{animation:fl .6s;}
@keyframes fl{0%{transform:scale(1.25);}100%{transform:scale(1);}}

/* main area: map | side */
.main{display:grid;grid-template-columns:1.5fr 1fr;gap:.6rem;padding:.6rem;min-height:0;}
.map-wrap{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#08121b;min-height:0;}
#city{width:100%;height:100%;display:block;}
.map-legend{position:absolute;left:8px;bottom:8px;display:flex;gap:.5rem;flex-wrap:wrap;background:rgba(8,18,27,.85);padding:.3rem .5rem;border-radius:4px;border:1px solid var(--line-soft);}
.lg{display:flex;align-items:center;gap:.25rem;font-family:var(--mono);font-size:.54rem;color:var(--muted);}
.lg i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.map-title{position:absolute;top:8px;left:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;}

.side{display:flex;flex-direction:column;gap:.6rem;min-height:0;}
.card{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:.6rem;}
.card h4{margin:0 0 .4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--teal);text-transform:uppercase;font-weight:700;}
#chart{width:100%;height:130px;display:block;}
.chart-wrap{flex:0 0 auto;}
.fsm-full{flex:1 1 auto;overflow-y:auto;min-height:0;}
.fsm-row{margin-bottom:.5rem;}
.fsm-row .ft{font-family:var(--mono);font-size:.54rem;color:var(--muted);margin-bottom:.2rem;}
.chain{display:flex;align-items:center;flex-wrap:wrap;gap:.18rem;}
.node{font-family:var(--mono);font-size:.54rem;padding:.12rem .3rem;border:1px solid var(--line);border-radius:2px;color:var(--muted);}
.node.active{border-color:var(--teal);color:var(--teal);background:rgba(47,214,201,.12);}
.node.active.warn{border-color:var(--amber);color:var(--amber);background:rgba(245,196,81,.12);}
.node.active.danger{border-color:var(--red);color:var(--red);background:rgba(255,84,112,.14);}
.node.active.good{border-color:var(--green);color:var(--green);background:rgba(46,230,166,.12);}
.node.past{color:#48606f;}
.arr{color:#33485a;font-size:.5rem;}

/* bottom: dialog + decisions */
.bottom{border-top:1px solid var(--line);background:linear-gradient(180deg,#0d1722,#0a131c);padding:.5rem .7rem;display:flex;flex-direction:column;gap:.4rem;}
.dlg{display:flex;gap:.7rem;align-items:flex-start;}
.dlg .av{width:54px;height:46px;flex:0 0 auto;border-radius:6px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);}
.dlg .av svg{width:100%;height:auto;display:block;}
.dlg .bubble{flex:1 1 auto;}
.dlg .nm{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--teal);margin-bottom:.15rem;}
.dlg .nm small{color:var(--muted);letter-spacing:.04em;}
.dlg .tx{font-size:.9rem;line-height:1.5;}
.bottom-act{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;align-items:center;}
.budget-tag{font-family:var(--mono);font-size:.7rem;color:var(--amber);margin-right:auto;}

/* policy cards */
.policies{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;}
.pol{border:1px solid var(--line);border-radius:6px;background:var(--panel2);padding:.45rem;cursor:pointer;transition:all .14s;position:relative;}
.pol:hover{border-color:var(--teal);}
.pol.on{border-color:var(--green);background:rgba(46,230,166,.12);box-shadow:0 0 12px rgba(46,230,166,.2);}
.pol.locked{opacity:.4;cursor:not-allowed;}
.pol .pi{font-size:1.1rem;}
.pol .pl{font-family:var(--mono);font-size:.62rem;font-weight:700;margin:.15rem 0;}
.pol .pc{font-family:var(--mono);font-size:.52rem;color:var(--amber);}
.pol .pd{font-size:.6rem;color:var(--muted);line-height:1.3;margin-top:.2rem;}
.pol .chk{position:absolute;top:4px;right:6px;color:var(--green);font-size:.7rem;display:none;}
.pol.on .chk{display:block;}

/* modal */
.modal-back{position:absolute;inset:0;background:rgba(4,8,12,.8);display:none;align-items:center;justify-content:center;z-index:60;padding:2rem;}
.modal-back.show{display:flex;}
.modal{max-width:520px;border:1px solid var(--teal);border-radius:10px;background:var(--panel);padding:1.6rem;box-shadow:0 0 50px rgba(47,214,201,.2);}
.modal h2{margin:.2rem 0 .6rem;color:var(--teal);font-size:1.3rem;}
.modal .body{line-height:1.6;color:var(--text);font-size:.92rem;}
.modal ul{margin:.6rem 0 0;padding-left:1.1rem;} .modal li{margin:.3rem 0;color:var(--muted);font-size:.86rem;}

/* report rows */
.rep-row{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid var(--line-soft);font-size:.86rem;}
.rep-row b{font-family:var(--mono);}

/* ending */
#screen-ending{align-items:center;justify-content:center;text-align:center;padding:2rem;}
.end-rank{font-family:var(--mono);letter-spacing:.2em;font-size:.8rem;margin-bottom:.4rem;}
.end-rank.good{color:var(--green);} .end-rank.neutral{color:var(--amber);} .end-rank.bad{color:var(--red);}
.end-title{font-size:2rem;font-weight:800;margin-bottom:1rem;}
.end-body{max-width:600px;color:var(--muted);line-height:1.7;margin-bottom:1rem;}
.end-stats{font-family:var(--mono);font-size:.78rem;color:var(--text);line-height:1.8;margin-bottom:1.4rem;}

/* credits */
#screen-credits{align-items:center;justify-content:center;padding:2rem;text-align:center;}
.crew{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.4rem 0;}
.crew-card{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:1rem 1.4rem;min-width:160px;}
.crew-card .ph{width:70px;height:70px;border-radius:50%;margin:0 auto .5rem;background:var(--panel2);border:1px solid var(--teal);display:grid;place-items:center;font-family:var(--mono);font-size:.6rem;color:var(--teal);overflow:hidden;}
.crew-card .ph img{width:100%;height:100%;object-fit:cover;}
.crew-card .nm{font-weight:700;} .crew-card .rl{font-family:var(--mono);font-size:.6rem;color:var(--muted);}
.course{font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.8;border-top:1px solid var(--line);padding-top:1rem;margin-top:.6rem;}

#toast{position:absolute;left:50%;bottom:46%;transform:translateX(-50%) translateY(10px);background:rgba(8,18,27,.96);border:1px solid var(--amber);color:var(--text);padding:.5rem .9rem;border-radius:5px;font-size:.82rem;opacity:0;pointer-events:none;transition:all .25s;z-index:80;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:900px),(max-aspect-ratio:16/12){
  #stage{aspect-ratio:auto;max-width:100vw;max-height:100vh;}
  .main{grid-template-columns:1fr;grid-template-rows:1fr auto;}
  .policies{grid-template-columns:repeat(2,1fr);}
  .title-logo{font-size:2.2rem;}
  .stat:nth-child(n+7){display:none;}
}

/* perbaikan: catatan kapasitas di bawah monitor FSM */
#cap-note{font-family:var(--mono);font-size:.58rem;color:var(--muted);line-height:1.5;margin-top:.5rem;}
#cap-note b{font-size:.58rem;}
#toast{bottom:38%;}

/* perbaikan tata letak kartu kebijakan agar 8 kartu muat */

.pol{padding:.4rem .45rem;}
.pol .pi{font-size:.95rem;}
.pol .pl{margin:.1rem 0;font-size:.6rem;}
.pol .pd{font-size:.55rem;line-height:1.25;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.policies{gap:.4rem;}
.dlg .tx{font-size:.84rem;}

/* kompakkan kartu agar 8 kartu + tombol muat tanpa scroll */
.bottom{gap:.35rem;padding:.45rem .7rem;}
.pol{padding:.3rem .4rem;}
.pol .pi{font-size:.8rem;}
.pol .pl{margin:.05rem 0;font-size:.56rem;}
.pol .pc{font-size:.5rem;}
.pol .pd{font-size:.5rem;line-height:1.2;-webkit-line-clamp:1;}
.dlg .av{width:44px;height:38px;}
.dlg .tx{font-size:.8rem;line-height:1.4;}
.bottom-act{padding-top:.1rem;}

/* keamanan: modal panjang tetap bisa di-scroll & tombol terjangkau */
.modal{max-height:88%;overflow:auto;}

/* laporan & edukasi inline (di area bawah, andal di file://) */
#report-zone{background:var(--panel);border:1px solid var(--teal);border-radius:8px;padding:.5rem .7rem;max-height:34vh;overflow:auto;}
.rep-head{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--teal);text-transform:uppercase;margin-bottom:.4rem;}
.rep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-bottom:.4rem;}
.rep-cell{background:var(--panel2);border:1px solid var(--line-soft);border-radius:5px;padding:.3rem .4rem;display:flex;flex-direction:column;}
.rep-cell .rl{font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;}
.rep-cell b{font-family:var(--mono);font-size:.92rem;}
.rep-msg{font-size:.76rem;line-height:1.45;color:var(--text);}
@media (max-width:900px),(max-aspect-ratio:16/12){ .rep-grid{grid-template-columns:repeat(2,1fr);} }

/* karakter lebih hidup di kotak dialog */
.dlg .av{width:58px;height:52px;border-radius:8px;}
.avatar-svg{display:block;width:100%;height:auto;animation:avIn .38s ease;}
@keyframes avIn{from{transform:translateY(7px) scale(.9);opacity:0;}to{transform:none;opacity:1;}}

/* ============================================================
 * Adegan Visual-Novel (cerita)
 * ============================================================ */
#screen-scene{overflow:hidden;background:#06101a;}
.scene-bg{position:absolute;inset:0;}
.scene-bg .bg-svg{width:100%;height:100%;display:block;animation:bgIn .6s ease;}
@keyframes bgIn{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:none;}}
.scene-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 36%,transparent 55%,rgba(3,8,14,.72));}
.scene-loc{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:#cfe9e6;background:rgba(6,16,26,.6);border:1px solid var(--line);border-radius:4px;padding:.3rem .6rem;text-transform:uppercase;}
.scene-stage{position:absolute;left:0;right:0;bottom:150px;height:64%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;}
.scene-stage .sprite-svg{height:100%;width:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55));animation:spriteIn .42s cubic-bezier(.2,.9,.3,1.2);}
@keyframes spriteIn{from{opacity:0;transform:translateY(28px) scale(.97);}to{opacity:1;transform:none;}}

.scene-vn{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.4rem 1.3rem;background:linear-gradient(180deg,transparent,rgba(4,9,15,.82) 26%,rgba(4,9,15,.96));cursor:pointer;min-height:135px;}
.vn-name{display:inline-block;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.08em;color:#08131d;background:var(--teal);padding:.2rem .7rem;border-radius:5px 5px 0 0;margin-left:.2rem;}
.vn-name .role{color:#0a2b2b;font-weight:400;font-size:.7rem;}
.vn-text{border:1px solid var(--line);border-top:2px solid var(--teal);border-radius:0 8px 8px 8px;background:rgba(8,18,28,.86);padding:.8rem 1rem;font-size:1.04rem;line-height:1.6;color:var(--text);min-height:74px;}
.vn-hint{position:absolute;right:1.6rem;bottom:.7rem;font-family:var(--mono);font-size:.64rem;color:var(--muted);animation:hintPulse 1.4s infinite;}
@keyframes hintPulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.vn-cta{position:absolute;right:1.6rem;bottom:1.5rem;}

@media (max-width:900px),(max-aspect-ratio:16/12){
  .scene-stage{bottom:160px;height:56%;}
  .vn-text{font-size:.92rem;}
}

/* gambar asli untuk adegan & portrait dialog */
.scene-bg .bg-img{width:100%;height:100%;object-fit:cover;display:block;animation:bgIn .6s ease;}
.scene-stage .sprite-img{height:100%;width:auto;max-width:42%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));animation:spriteIn .42s cubic-bezier(.2,.9,.3,1.2);}
.dlg-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;}