/* ============================================================
   CORRUPT OFFICE — Main Stylesheet
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0a0a1a;--panel:rgba(10,10,30,.95);--text:#e0e0e0;
  --accent:#cc3366;--accent2:#3366cc;--accent3:#33cc66;--accent4:#cc9933;
  --danger:#ff3333;--border:rgba(255,255,255,.1);
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  display:flex;flex-direction:column}

/* HEADER */
#header{background:var(--panel);border-bottom:1px solid var(--border);
  padding:8px 12px;display:flex;justify-content:space-between;align-items:center;
  font-size:13px;flex-shrink:0;z-index:10}
#header .logo{font-weight:bold;font-size:15px;color:var(--accent);letter-spacing:2px}
#header .stats{display:flex;gap:12px;align-items:center}
.stat{display:flex;align-items:center;gap:3px}
.stat-label{color:#888;font-size:10px}
.stat-val{font-weight:bold;font-size:12px}
.bar{width:40px;height:5px;background:#222;border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .3s}
.bar-fill.risco{background:var(--danger)}
.bar-fill.poder{background:var(--accent2)}
.bar-fill.dinheiro{background:#ffcc00}
#menu-toggle{display:none;background:none;border:none;color:#888;font-size:20px;cursor:pointer;padding:4px}

/* MAIN */
#main{flex:1;display:flex;overflow:hidden;position:relative}

/* SCENE AREA */
#scene-area{flex:1;display:flex;flex-direction:column;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:16px;padding-bottom:80px}
#scene-box{background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:20px;max-width:800px;margin:0 auto;width:100%;flex:1}
#scene-text{font-size:15px;line-height:1.75;white-space:pre-wrap;margin-bottom:20px;
  min-height:100px;animation:fadeIn .4s}
#scene-text .char-name{color:var(--accent2);font-weight:bold}

/* CHOICES */
#choices{display:flex;flex-direction:column;gap:8px}
.choice-btn{background:rgba(255,255,255,.05);border:1px solid var(--border);
  color:var(--text);padding:12px 16px;border-radius:6px;cursor:pointer;
  font-size:14px;text-align:left;transition:all .2s;position:relative;
  padding-left:44px;min-height:48px;display:flex;align-items:center}
.choice-btn:hover{background:rgba(255,255,255,.1);border-color:var(--accent)}
.choice-btn:active{transform:scale(.98)}
.choice-btn .choice-num{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  background:var(--accent);color:#fff;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:bold}
.choice-btn.locked{opacity:.35;cursor:not-allowed}
.choice-btn.locked:hover{background:rgba(255,255,255,.05);border-color:var(--border)}

/* BACK BUTTON */
#back-btn{display:none;background:rgba(255,255,255,.05);border:1px solid var(--border);
  color:#888;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px;
  margin-bottom:12px;align-items:center;gap:6px;align-self:flex-start;
  transition:all .2s}
#back-btn:hover{border-color:var(--accent);color:var(--accent)}
#back-btn.visible{display:flex}

/* SIDEBAR */
#sidebar{width:260px;background:var(--panel);border-left:1px solid var(--border);
  padding:12px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;gap:12px;
  transition:transform .3s}
#sidebar h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#888;
  margin-bottom:6px}
#sidebar-close{display:none;background:none;border:none;color:#888;font-size:18px;
  cursor:pointer;position:absolute;top:8px;right:8px}

/* CHARACTER CARDS */
.char-card{background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:6px;padding:10px;margin-bottom:8px}
.char-name{font-weight:bold;font-size:13px;margin-bottom:6px}
.char-name.juliana{color:var(--accent3)}
.char-name.renata{color:var(--accent)}
.char-name.camila{color:var(--accent4)}
.char-stat{display:flex;justify-content:space-between;align-items:center;
  font-size:10px;margin-bottom:3px}
.char-stat-label{color:#888}
.char-stat-val{font-weight:bold}
.char-bar{width:100%;height:3px;background:#222;border-radius:2px;overflow:hidden;
  margin-bottom:5px}
.char-bar-fill{height:100%;border-radius:2px;transition:width .5s}
.char-bar-fill.afinidade{background:var(--accent3)}
.char-bar-fill.medo{background:var(--danger)}
.char-bar-fill.corrupcao{background:#9933cc}

/* FLAGS */
.flag-list{display:flex;flex-wrap:wrap;gap:3px}
.flag{background:rgba(255,255,255,.05);border:1px solid var(--border);
  padding:2px 6px;border-radius:8px;font-size:9px;color:#888}
.flag.active{background:rgba(204,51,102,.2);border-color:var(--accent);color:var(--accent)}

/* BOTTOM NAV */
#bottom-nav{display:flex;gap:6px;padding:8px 12px;background:var(--panel);
  border-top:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.nav-btn{background:transparent;border:1px solid var(--border);color:#888;
  padding:8px 12px;border-radius:4px;cursor:pointer;font-size:12px;
  transition:all .2s;white-space:nowrap;flex-shrink:0}
.nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.nav-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:50;
  display:none;align-items:center;justify-content:center;padding:16px}
.modal.active{display:flex}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:20px;max-width:380px;width:100%;max-height:80vh;overflow-y:auto}
.modal-box h2{margin-bottom:12px;font-size:17px}
.modal-box p{color:#888;font-size:13px;margin-bottom:12px}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.modal-btn{padding:8px 14px;border-radius:4px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;font-size:13px}
.modal-btn.primary{background:var(--accent);border-color:var(--accent)}
.modal-btn:hover{opacity:.8}
.modal-btn.danger{background:var(--danger);border-color:var(--danger)}

/* CG OVERLAY */
#cg-overlay{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:100;
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:16px}
#cg-overlay.active{display:flex}
#cg-image{max-width:100%;max-height:70vh;border-radius:4px}
#cg-text{color:#ccc;font-size:13px;margin-top:12px;max-width:500px;text-align:center;
  line-height:1.5}
#cg-continue{color:#888;font-size:11px;margin-top:10px;cursor:pointer}

/* SCREEN FLASH */
#screen-flash{position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:0;transition:opacity .3s}
#screen-flash.red{background:rgba(255,0,0,.3)}
#screen-flash.white{background:rgba(255,255,255,.5)}

/* NOTIFICATION */
#notification{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--border);padding:8px 16px;
  border-radius:6px;font-size:12px;z-index:150;opacity:0;transition:opacity .3s;
  pointer-events:none;max-width:90%;text-align:center}
#notification.show{opacity:1}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#333;border-radius:2px}

/* MOBILE RESPONSIVE */
@media(max-width:768px){
  #header{padding:6px 10px}
  #header .stats{gap:8px}
  .stat-label{display:none}
  .bar{width:30px;height:4px}
  #menu-toggle{display:block}
  #sidebar{position:fixed;top:0;right:0;bottom:0;width:280px;z-index:60;
    transform:translateX(100%);box-shadow:-4px 0 20px rgba(0,0,0,.5)}
  #sidebar.open{transform:translateX(0)}
  #sidebar-close{display:block}
  #scene-area{padding:12px;padding-bottom:70px}
  #scene-box{padding:14px}
  #scene-text{font-size:14px;line-height:1.65}
  .choice-btn{padding:10px 12px;font-size:13px;min-height:44px;padding-left:38px}
  .choice-btn .choice-num{width:20px;height:20px;font-size:10px;left:10px}
  .nav-btn{padding:6px 10px;font-size:11px}
}

@media(max-width:400px){
  #header .logo{font-size:13px}
  .stat-val{font-size:11px}
  .bar{display:none}
}