/* Mind Your Business — Chapter 1 */
:root{
  --bg0:#050508;
  --bg1:#0a0a12;
  --ink:#e7e7ee;
  --muted:#a1a1b3;
  --accent:#7c3aed;
  --danger:#ef4444;
  --ok:#22c55e;
  --warn:#f59e0b;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}

/* Focus */
:focus{outline:none;}
:focus-visible{outline:2px solid rgba(124,58,237,.9); outline-offset:2px;}

/* Subtle scanline + vignette */
.scanlines::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
  opacity:.35;
}
.vignette::after{
  content:"";
  position:fixed;
  inset:-10vh;
  pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%);
}

/* Game canvas wrapper */
.gameShell{
  background: radial-gradient(1200px 600px at 50% 0%, rgba(124,58,237,.18), rgba(0,0,0,0)),
              linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}

/* HUD chips */
.chip{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,18,.65);
  backdrop-filter: blur(10px);
}

/* Buttons */
.btn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22);}
.btn:active{transform: translateY(1px) scale(.99);}
.btnPrimary{
  background: linear-gradient(180deg, rgba(124,58,237,.95), rgba(124,58,237,.65));
  border-color: rgba(124,58,237,.65);
}
.btnPrimary:hover{background: linear-gradient(180deg, rgba(124,58,237,1), rgba(124,58,237,.72));}

/* Toast */
.toast{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,18,.72);
  backdrop-filter: blur(10px);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important;}
}