/* ============================================================
   BREAK//POINT — the hidden game
   Full-screen canvas overlay on top of arcade.html. Isolated on
   purpose: everything here is scoped under #bp-root so it can be
   deleted wholesale without touching the arcade floor underneath.
   ============================================================ */

#bp-root{
  position:fixed;inset:0;z-index:300;background:#000;
  display:none;opacity:0;transition:opacity .35s ease;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  cursor:default;
}
#bp-root.show{display:block;opacity:1}

#bp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

#bp-hud{
  position:absolute;top:18px;left:18px;right:18px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;
  pointer-events:none;color:#F5FF00;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;text-shadow:0 0 8px rgba(245,255,0,.5);
}
#bp-hud .hp{display:flex;gap:6px}
#bp-hud .hp i{width:16px;height:16px;border:1.5px solid #F5FF00;transform:rotate(45deg)}
#bp-hud .hp i.dead{background:none;border-color:#3a3a30;box-shadow:none}
#bp-hud .hp i.alive{background:#F5FF00;box-shadow:0 0 8px #F5FF00}
#bp-hud .mid{text-align:center;color:#9aa4b2}
#bp-hud .mid b{color:#F5FF00}

#bp-exit{
  position:absolute;top:18px;right:18px;z-index:5;pointer-events:auto;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8e8e8e;
  border:1px solid #2a2a24;background:rgba(6,6,6,.8);padding:8px 12px;cursor:pointer;
  transform:translateY(0);
}
#bp-exit:hover{color:#F5FF00;border-color:#F5FF00}

#bp-intro, #bp-report{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:22px;
  background:rgba(0,0,0,.88);opacity:0;pointer-events:none;transition:opacity .3s ease;
  padding:24px;
}
#bp-intro.show, #bp-report.show{opacity:1;pointer-events:auto}

#bp-intro h1, #bp-report h1{
  font-family:"Orbitron",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,6vw,56px);letter-spacing:-.01em;color:#F5FF00;
  text-shadow:0 0 20px rgba(245,255,0,.5);line-height:1;
}
#bp-intro p, #bp-report p{color:#9aa4b2;font-size:13px;line-height:1.8;max-width:46ch}
#bp-intro .btn, #bp-report .btn{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:15px 30px;border:1px solid #F5FF00;color:#000;background:#F5FF00;
  cursor:pointer;transition:.2s;
}
#bp-intro .btn:hover, #bp-report .btn:hover{background:#000;color:#F5FF00}
#bp-intro .keys{color:#5e6a7a;font-size:11px;letter-spacing:.1em}
#bp-intro .keys b{color:#F5FF00}

#bp-report table{border-collapse:collapse;margin:4px 0}
#bp-report td{padding:5px 16px;font-size:13px;color:#9aa4b2;text-align:left;border-bottom:1px solid #1c1c18}
#bp-report td:last-child{color:#F5FF00;text-align:right;font-weight:600}
#bp-report .status-buried{color:#F5FF00}
#bp-report .status-survived{color:#8e8e8e}

@media(max-width:640px){
  #bp-hud{font-size:10px}
  #bp-hud .mid{display:none}
}