/* ============================================================
   THE BACK ROOM — secret area unlocked by beating BREAK//POINT.
   Full-screen overlay, isolated under #br-root so it can be
   deleted wholesale without touching arcade.html underneath.
   ============================================================ */

#br-root{
  position:fixed;inset:0;z-index:400;background:#050503;
  display:none;opacity:0;transition:opacity .4s ease;
  font-family:"IBM Plex Mono",ui-monospace,monospace;color:#9aa4b2;
  overflow-y:auto;
}
#br-root.show{display:block;opacity:1}

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

#br-inner{max-width:640px;margin:0 auto;padding:90px 24px 80px}

#br-inner h1{
  font-family:"Orbitron",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,6vw,52px);letter-spacing:-.01em;color:#F5FF00;
  text-shadow:0 0 20px rgba(245,255,0,.4);line-height:1;
}
#br-inner .lede{margin-top:14px;font-size:13px;line-height:1.8;color:#9aa4b2;max-width:52ch}

.br-sec{margin-top:56px}
.br-sec h2{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#F5FF00;
  border-bottom:1px solid #232323;padding-bottom:10px;margin-bottom:18px;
}

.br-grave{list-style:none}
.br-grave li{
  padding:12px 0;border-bottom:1px solid #171717;font-size:12.5px;line-height:1.7;
  display:flex;gap:14px;
}
.br-grave li b{color:#EDEDED;flex:none;min-width:150px}
.br-grave li span{color:#6b7280}

#br-guest-note{font-size:11px;color:#565656;margin-bottom:16px;line-height:1.7}
#br-guest-form{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
#br-guest-form input, #br-guest-form textarea{
  background:rgba(255,255,255,.02);border:1px solid #232323;color:#EDEDED;
  font-family:inherit;font-size:12.5px;padding:10px 12px;resize:vertical;
}
#br-guest-form input:focus, #br-guest-form textarea:focus{outline:none;border-color:#F5FF00}
#br-guest-form .btn{
  align-self:flex-start;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;padding:11px 20px;border:1px solid #F5FF00;color:#000;background:#F5FF00;
  cursor:pointer;transition:.2s;
}
#br-guest-form .btn:hover{background:#000;color:#F5FF00}

#br-guest-list{display:flex;flex-direction:column;gap:14px}
.br-entry{border-left:2px solid #232323;padding-left:14px}
.br-entry .who{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#F5FF00;margin-bottom:4px}
.br-entry .msg{font-size:12.5px;color:#9aa4b2;line-height:1.6;word-break:break-word}

@media(max-width:640px){
  .br-grave li{flex-direction:column;gap:2px}
  .br-grave li b{min-width:0}
}