/* Brace for impact (brace.js): cinematic bars and darkened edges, under the HUD. */
.brace-layer{--brace:0;position:fixed;inset:0;pointer-events:none}
.brace-layer[hidden]{display:none}
.brace-shade{position:absolute;inset:0;opacity:calc(.85 * var(--brace));background:radial-gradient(ellipse at center,#0000 50%,#0603027a 80%,#030201d0 100%)}

/* Incoming fire: a pulsing [SHIFT] keycap, gold-rimmed like the HUD, calling for the brace. */
.brace-cue{position:fixed;left:50%;bottom:24vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.55em;pointer-events:none;z-index:31;animation:brace-cue-in .18s ease-out}
.brace-cue[hidden]{display:none}
/* Overrides the HUD's small fixed-size kbd (style.css). */
.brace-cue kbd{display:block;height:auto;min-width:0;font:600 clamp(15px,1.5vw,20px)/1 Georgia,'Times New Roman',serif;letter-spacing:.16em;text-transform:uppercase;color:#fff4dc;
  padding:.55em 1.1em .5em;border-radius:7px;border:1.5px solid #e8cf98;background:linear-gradient(#3a2412e6,#1c120ae6);
  box-shadow:0 3px 0 #8a6a35,0 0 0 0 #e8cf9888,0 6px 18px #000a;animation:brace-press .5s ease-in-out infinite}
.brace-cue span{font:italic 500 clamp(11px,1.05vw,14px)/1 Georgia,'Times New Roman',serif;letter-spacing:.14em;text-transform:uppercase;color:#f0d9a6;text-shadow:0 1px 5px #000}
@keyframes brace-press{
  0%,100%{transform:translateY(0);box-shadow:0 3px 0 #8a6a35,0 0 0 0 #e8cf9800,0 6px 18px #000a}
  45%{transform:translateY(3px);box-shadow:0 0 0 #8a6a35,0 0 0 7px #e8cf9844,0 3px 10px #000a}}
@keyframes brace-cue-in{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}