/* ═══════════════════════════════════════════════════════
   CSC IMPERIUM · Design v4
   Vision: Underground Herbarium — dark paper, green neon,
   industrial mono meets organic warmth
   ═══════════════════════════════════════════════════════ */

:root {
  /* Depths */
  --bg:    #030703;
  --bg1:   #06100a;
  --bg2:   #091508;
  --raised:#0d1e0f;
  --surf:  #111f13;
  --over:  rgba(3,7,3,.94);

  /* Borders */
  --b0: rgba(45,185,85,.08);
  --b1: rgba(45,185,85,.18);
  --b2: rgba(45,185,85,.36);
  --b3: rgba(45,185,85,.58);
  --bg0: rgba(240,192,55,.18);
  --bg1a:rgba(240,192,55,.35);

  /* Palette */
  --g:   #2db955;   /* primary green */
  --gh:  #52e87a;   /* highlight green */
  --gd:  rgba(45,185,85,.12);
  --gg:  rgba(45,185,85,.25);
  --cy:  #00cbb8;
  --go:  #efc040;
  --am:  #ff9020;
  --re:  #ff3838;
  --pu:  #a44fe8;

  /* Text */
  --t3: #d8ecd8;   /* hi */
  --t2: #7da87d;   /* mid */
  --t1: #3d5e3d;   /* lo */
  --t0: #1e2e1e;   /* dim */

  /* Compat aliases */
  --green:var(--g); --green-hi:var(--gh); --green-dim:var(--gd);
  --green-glow:var(--gg); --cyan:var(--cy); --gold:var(--go);
  --amber:var(--am); --red:var(--re); --purple:var(--pu);
  --text-hi:var(--t3); --text-mid:var(--t2); --text-lo:var(--t1);
  --text-dim:var(--t0); --bright:var(--t3); --muted:var(--t1);
  --dim:var(--t0); --text:var(--t2); --mid:var(--t2); --white:var(--t3);
  --border:var(--b0); --border2:var(--b1); --border3:var(--b2);
  --bg1:#06100a; --bg2:#091508; --raised:#0d1e0f; --surface:var(--surf);

  /* Type — three-font system */
  --fd: 'Bebas Neue', Impact, sans-serif;          /* display titles */
  --fs: 'DM Serif Display', Georgia, serif;        /* story / editorial */
  --fu: 'Syne', 'DM Sans', sans-serif;             /* UI labels */
  --fb: 'Outfit', 'DM Sans', system-ui, sans-serif;/* body text */
  --fm: 'Space Mono', 'Courier New', monospace;    /* data / mono */

  /* Compat */
  --f-display:var(--fd); --f-ui:var(--fu); --f-body:var(--fb); --f-mono:var(--fm);

  /* Shape */
  --r:10px; --rs:6px; --rl:16px; --rx:24px;
  --sh: 0 4px 28px rgba(0,0,0,.7);
  --shg: 0 0 28px rgba(45,185,85,.14);
  --nav-h:56px; --header-h:52px;
}

/* ── Bright mode ─────────────────────────────────────── */
body.bright-mode {
  --bg:#eef4ee; --bg1:#e2eee4; --bg2:#d6e8d8;
  --raised:#c8daca; --surf:#bcd0be;
  --b0:rgba(20,110,50,.12); --b1:rgba(20,110,50,.24);
  --b2:rgba(20,110,50,.44); --b3:rgba(20,110,50,.65);
  --g:#1a7a40; --gh:#0f5a2a; --gd:rgba(20,110,50,.1);
  --t3:#071408; --t2:#1e4822; --t1:#4a7a50; --t0:#8aaa8a;
}

/* ── Base ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--t3);
  font-family:var(--fb); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button { cursor:pointer; font-family:var(--fu); border:none; outline:none; transition:all .16s ease; }
input,textarea,select { font-family:var(--fb); outline:none; background:var(--bg1); color:var(--t3); }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(45,185,85,.22); border-radius:2px; }

/* ── App shell ───────────────────────────────────────── */
#app { display:none; flex-direction:column; min-height:100dvh; max-width:480px; margin:0 auto; }
#app.visible { display:flex; }
#content { flex:1; overflow-y:auto; padding-bottom:calc(var(--nav-h) + 10px); -webkit-overflow-scrolling:touch; }

/* ── Toasts ──────────────────────────────────────────── */
#toasts,#toast-area { position:fixed; bottom:calc(var(--nav-h)+12px); left:50%; transform:translateX(-50%);
  z-index:9000; display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none; max-width:360px; width:90%; }
.toast { padding:10px 16px; border-radius:var(--r); font-size:12px; font-family:var(--fu);
  line-height:1.4; pointer-events:none; backdrop-filter:blur(10px);
  background:rgba(10,22,12,.96); border:1px solid var(--b1); color:var(--t3);
  box-shadow:0 4px 22px rgba(0,0,0,.55),var(--shg);
  animation:toastIn .22s cubic-bezier(.2,0,.3,1), toastOut .28s ease-in 2.7s forwards; }
.toast.w { border-color:rgba(240,192,55,.4); background:rgba(18,14,4,.96); }
.toast.d { border-color:rgba(255,56,56,.4); background:rgba(18,4,4,.96); color:#ffaaaa; }
.toast.g { border-color:rgba(45,185,85,.55); background:rgba(4,18,8,.96); color:var(--gh); }
.toast.i { border-color:rgba(0,203,184,.3); background:rgba(2,14,16,.96); color:var(--cy); }
@keyframes toastIn  { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes toastOut { to   { opacity:0; transform:translateY(-5px); } }

/* ── Modal ───────────────────────────────────────────── */
#modal { position:fixed; inset:0; z-index:800;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.74); backdrop-filter:blur(5px); padding:20px; }
#modal:empty { display:none; pointer-events:none; }
.modal-box { background:var(--bg2); border:1px solid var(--b1); border-radius:var(--rl);
  padding:24px; max-width:440px; width:100%;
  box-shadow:0 22px 65px rgba(0,0,0,.75),var(--shg); }

/* ── Panels ──────────────────────────────────────────── */
.panel { margin:8px 12px 0; background:var(--raised); border:1px solid var(--b0);
  border-radius:var(--r); padding:13px 15px; }
.panel:first-child { margin-top:12px; }
.panel+.panel { margin-top:6px; }

/* Panel heading  — mono label with pulse dot */
.ph { font-family:var(--fm); font-size:9px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--g); margin-bottom:10px; padding-bottom:7px;
  border-bottom:1px solid var(--b0); display:flex; align-items:center; gap:6px; }
.ph::before { content:''; width:5px; height:5px; border-radius:50%;
  background:var(--g); box-shadow:0 0 7px var(--g); flex-shrink:0; }

.card { background:var(--surf); border:1px solid var(--b0); border-radius:var(--r);
  padding:12px 14px; transition:border-color .15s; }
.card:hover { border-color:var(--b1); }

/* Progress bars */
.sb { margin-bottom:8px; }
.sb-head { display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px; color:var(--t2); }
.sb-track { height:4px; background:var(--bg2); border-radius:2px; overflow:hidden; }
.sb-fill { height:100%; border-radius:2px; transition:width .4s ease; background:var(--g); }
.sb-fill.cyan{background:var(--cy)} .sb-fill.gold{background:var(--go)}
.sb-fill.amber{background:var(--am)} .sb-fill.red{background:var(--re)}

/* ── Nav bar ─────────────────────────────────────────── */
#nav-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; height:var(--nav-h); z-index:100;
  background:rgba(2,6,2,.97); border-top:1px solid var(--b0);
  display:flex; align-items:stretch;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.bn-item { flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; cursor:pointer; transition:all .15s;
  padding:4px 0; font-size:8.5px; font-family:var(--fm); letter-spacing:.8px;
  text-transform:uppercase; color:var(--t1); border-top:2px solid transparent; }
.bn-item .bn-icon { font-size:18px; transition:transform .15s; }
.bn-item:hover { color:var(--t2); }
.bn-item:hover .bn-icon { transform:translateY(-2px); }
.bn-item.active { color:var(--g); border-top-color:var(--g); }
.bn-item.active .bn-icon { filter:drop-shadow(0 0 5px var(--g)); }

#nav-sidebar { width:200px; flex-shrink:0; background:rgba(2,6,2,.98);
  border-right:1px solid var(--b0); display:flex; flex-direction:column; overflow-y:auto; }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; cursor:pointer; transition:all .15s;
  padding:4px 0; font-size:8.5px; font-family:var(--fm); letter-spacing:.8px;
  text-transform:uppercase; color:var(--t1); border-left:2px solid transparent; }
.nav-item.active { color:var(--g); border-left-color:var(--g); }

/* ── AP Bar ──────────────────────────────────────────── */
.ap-bar { margin:8px 12px 0; background:var(--raised); border:1px solid var(--b0);
  border-radius:var(--r); padding:9px 14px; display:flex; align-items:center; gap:10px; }
.ap-bar-label { font-size:8px; font-family:var(--fm); letter-spacing:2px;
  text-transform:uppercase; color:var(--t1); flex-shrink:0; }
.ap-dots { display:flex; gap:5px; align-items:center; }
.ap-dot { width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--t0); transition:all .22s; }
.ap-dot.full { background:var(--g); border-color:var(--gh);
  box-shadow:0 0 9px var(--gg); }
.ap-bar-progress { flex:1; }
.ap-phase-label { font-size:10px; font-family:var(--fu); color:var(--t2); margin-left:auto; flex-shrink:0; }

/* ── In-app HUD ──────────────────────────────────────── */
#hud { position:sticky; top:0; z-index:50; background:rgba(2,5,2,.97);
  border-bottom:1px solid var(--b0); backdrop-filter:blur(14px);
  height:var(--header-h); display:flex; align-items:stretch; }
.hud-club { display:flex; align-items:center; gap:8px; padding:0 14px;
  min-width:0; flex:1; border-right:1px solid var(--b0); cursor:pointer; }
.hud-club-icon { font-size:22px; flex-shrink:0; }
.hud-club-name { font-family:var(--fu); font-weight:700; font-size:13px; color:var(--t3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-club-city { font-size:9px; color:var(--t1); font-family:var(--fm); letter-spacing:.8px; }
.hud-stat-block { display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:0 11px; min-width:60px; cursor:pointer;
  border-left:1px solid var(--b0); transition:background .15s; }
.hud-stat-block:hover { background:var(--gd); }
.hud-stat-val { font-family:var(--fu); font-weight:700; font-size:14px;
  color:var(--t3); line-height:1.2; }
.hud-stat-lbl { font-size:8px; font-family:var(--fm); letter-spacing:1.5px;
  text-transform:uppercase; color:var(--t1); }
.hud-phase-badge { display:flex; align-items:center; padding:0 11px;
  border-left:1px solid var(--b0); }
.hud-phase-chip { font-size:9px; font-family:var(--fm); letter-spacing:.8px;
  text-transform:uppercase; padding:3px 8px; border-radius:var(--rs);
  background:var(--gd); color:var(--g); border:1px solid var(--b1); }

/* Action button (used inside game screens) */
.hud-end-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 13px; border-radius:var(--rs); font-family:var(--fu); font-size:11px;
  font-weight:600; letter-spacing:.3px; background:rgba(45,185,85,.1);
  border:1px solid rgba(45,185,85,.28); color:var(--t3); cursor:pointer; transition:all .15s; }
.hud-end-btn:hover { background:rgba(45,185,85,.2); border-color:rgba(45,185,85,.52);
  box-shadow:0 0 14px rgba(45,185,85,.14); }
.hud-end-btn:disabled,.hud-end-btn[disabled] { opacity:.35; cursor:default; }
.hud-end-btn.danger { border-color:rgba(255,56,56,.3); color:#ffaaaa; }
.hud-end-btn.danger:hover { background:rgba(255,56,56,.12); }
.hud-end-btn.gold { border-color:rgba(240,192,55,.35); color:var(--go); }

/* ── Animations ──────────────────────────────────────── */
.fade-in { animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:.5} }