/* ============================================================
   CANON BLAST — styles (tout est scellé sous #app2 / .cb-)
   Esthétique flat à contours épais, palette héritée de :root.
   ============================================================ */

#app2{position:fixed; inset:0; width:100vw; height:100vh; overflow:hidden; background:#11151d}
#cv2{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}

/* ---------- HUD ---------- */
#cb-hud{
  position:absolute; top:8px; left:10px; right:54px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  pointer-events:none; z-index:5;
}
.cb-stat{
  font-family:var(--pix); font-size:11px; color:var(--ink);
  background:rgba(12,16,22,.72); border:2px solid var(--line);
  border-radius:8px; padding:6px 9px; white-space:nowrap;
}
.cb-boosts{display:flex; gap:6px}
.cb-boost{
  font-family:var(--pix); font-size:10px; color:var(--gold);
  background:rgba(12,16,22,.72); border:2px solid var(--gold);
  border-radius:8px; padding:5px 8px; white-space:nowrap;
}

/* ---------- bouton déconnexion (même esprit que #logoutbtn) ---------- */
#logoutbtn2{
  position:absolute; top:8px; right:8px; z-index:6;
  width:38px; height:38px; border-radius:9px;
  background:rgba(12,16,22,.72); border:2px solid var(--line);
  color:var(--muted); font-size:18px; cursor:pointer;
}
#logoutbtn2:active{transform:scale(.93)}
#cb-pause,#cb-mute{
  position:absolute; right:8px; z-index:6;
  width:38px; height:38px; border-radius:9px;
  background:rgba(12,16,22,.72); border:2px solid var(--line);
  color:var(--muted); font-size:16px; cursor:pointer;
}
#cb-pause{top:54px}
#cb-mute{top:100px}
#cb-pause:active,#cb-mute:active{transform:scale(.93)}

/* ---------- bloc mission de l'accueil ---------- */
.cb-mission{
  background:var(--panel2); border:2px solid var(--line); border-radius:10px;
  padding:9px 10px; margin:10px 0; text-align:left;
}
.cb-mrow{display:flex; justify-content:space-between; gap:8px; font-size:9px; line-height:1.6}
.cb-mbar{height:8px; background:#0c1016; border-radius:4px; margin-top:6px; overflow:hidden}
.cb-mbar i{display:block; height:100%; background:var(--gold)}

/* ---------- menus (accueil / améliorations / canons / fin) ---------- */
#cb-menu{
  position:absolute; inset:0; z-index:10;
  display:none; align-items:center; justify-content:center;
  background:rgba(8,11,16,.62);
}
#cb-menu.open{display:flex}
.cb-card{
  width:min(440px, 92vw); max-height:86vh; overflow-y:auto;
  background:linear-gradient(180deg, #232d40, #18202e);
  border:3px solid var(--line); border-radius:14px;
  padding:18px 16px; text-align:center;
  font-family:var(--pix); color:var(--ink);
  box-shadow:0 10px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.cb-title{font-size:20px; color:var(--accent); margin-bottom:6px; letter-spacing:1px; text-shadow:0 0 14px rgba(94,240,232,.45)}
.cb-sub{font-size:10px; color:var(--muted); margin-bottom:14px; line-height:1.7}
.cb-big{font-size:26px; color:var(--gold); margin:8px 0}
.cb-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--panel2); border:2px solid var(--line); border-radius:10px;
  padding:9px 10px; margin:8px 0; text-align:left;
}
.cb-row .nm{font-size:10px; line-height:1.6}
.cb-row .nm small{display:block; color:var(--muted); font-size:8px}
.cb-btn{
  font-family:var(--pix); font-size:10px; cursor:pointer;
  border-radius:9px; padding:10px 13px; border:2px solid var(--line);
  background:var(--panel2); color:var(--ink); white-space:nowrap;
}
.cb-btn:active{transform:scale(.95)}
.cb-btn.gold{background:var(--gold); border-color:#b89c10; color:#221d00}
.cb-btn.cyan{background:var(--accent); border-color:#2a9c95; color:#00211f}
.cb-btn.big{font-size:13px; padding:14px 22px; margin-top:10px}
.cb-btn.full{width:100%; margin-top:8px}
.cb-btn:disabled{opacity:.45; cursor:default; transform:none}
.cb-btn.on{background:var(--green); border-color:#1f8c4a; color:#00240f}
.cb-cannon-ico{
  width:34px; height:34px; flex:0 0 34px; border-radius:8px;
  border:3px solid currentColor; background:#0c1016;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}