/* Gameplay messages share the opening tutorial coach's visual language.
   Each HUD keeps its own placement, visibility and interaction behavior. */
:root {
  --message-surface:#081d26e8;
  --message-edge:#a5fff099;
  --message-ink:#f1fffc;
  --message-key:#c6fff1;
  --message-radius:10px;
  --message-font:'Big Shoulders Stencil',sans-serif;
}

#br-hud #br-prompt,
#br-hud :is(.br-notice,.br-warning,.survival-coach,.survival-fire-hint,
  .survival-pickup-hint,.survival-crate-action,.br-elimination-banner),
#invbuild .ib-status,
#tut-dodge-prompts .tut-dodge-side,
.missile-warning .missile-warning-side,
:is(#hud-flash,#hud-banner,#tutorial,#invprompt,#mobasky,#mobatel,#mobaoff),
#mobalaser-source .laser-source-label {
  box-sizing:border-box;
  padding:12px 20px;
  border:1px solid var(--message-edge);
  border-radius:var(--message-radius);
  background:var(--message-surface);
  color:var(--message-ink);
  font:700 18px/1.25 var(--message-font);
  letter-spacing:.08em;
  text-align:center;
  text-shadow:none;
  box-shadow:none;
  white-space:normal;
  overflow-wrap:anywhere;
}

#br-hud .br-notice { width:fit-content; max-width:100%; margin-inline:auto; }
#br-hud .br-context { max-width:calc(100% - 24px); bottom:clamp(84px,26vh,186px); }
#br-hud #br-prompt-detail { font:13px/1.4 'Share Tech Mono',monospace; letter-spacing:0; }
#br-hud .survival-coach { width:max-content; flex-wrap:wrap; justify-content:center; }
#br-hud .survival-coach b { color:var(--message-key); flex:none; white-space:nowrap;
  max-width:none; overflow-wrap:normal; }
#br-hud .survival-coach span { font:inherit; min-width:0; overflow-wrap:normal; }
#br-hud .survival-coach[data-phase=success] { border-color:var(--message-key); }
#br-hud .survival-pickup-hint { width:max-content; max-width:min(320px,calc(100vw - 24px)); padding:9px 12px; font-size:15px; }
#br-hud .survival-fire-hint { padding:8px 12px; }
#br-hud .survival-crate-action { color:var(--message-ink); }
#br-hud .br-warning { --message-edge:#ff9b78; }
#br-hud .br-warning strong { color:#ffb39a; font:inherit; }
#br-hud .br-warning span { color:var(--message-ink); font:13px/1.4 'Share Tech Mono',monospace; }
#br-hud .br-elimination-banner { --message-edge:#ffbc8399; }
/* Warning and elimination feedback flow in order, so a wrapped warning
   never shares the same fixed top coordinate with the next message. */
#br-hud .br-live { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; gap:12px; box-sizing:border-box; padding-top:clamp(62px,11vh,92px); }
#br-hud .br-warning { position:relative; top:auto; left:auto; transform:none;
  flex:none; width:min(420px,calc(100% - 24px)); }
#br-hud .br-elimination-feedback { position:static; inset:auto; flex:none;
  width:min(620px,calc(100% - 24px)); margin-top:64px; }
#br-hud .br-live:has(.br-warning:not([hidden])) .br-elimination-feedback { margin-top:0; }
#br-hud .br-elimination-feedback .br-elimination-banner { position:relative; top:auto;
  left:auto; transform:none; width:100%; }
#br-hud .br-elimination-copy > strong { white-space:normal; overflow-wrap:anywhere; }
.missile-warning .missile-warning-side { --message-edge:#ff9b78; padding:10px; }
.missile-warning strong { font-family:var(--message-font); font-size:16px; }
.missile-warning-count { font-family:'Share Tech Mono',monospace; }

#hud-banner { position:fixed; left:50%; top:30%; transform:translate(-50%,-50%);
  z-index:9; width:max-content; max-width:calc(100vw - 32px); pointer-events:none; }
#hud-banner[hidden],body.br-mode #hud-banner,body.paused #hud-banner { display:none; }
#hud-banner { font-size:clamp(22px,3vw,32px); }
#invprompt { max-width:calc(100vw - 32px); }
#invbuild .ib-status { max-width:calc(100% - 32px); }

#tutorial { text-align:left; }
#tut-head,#tut-hint,#tut-demo { font-family:'Share Tech Mono',monospace; letter-spacing:0; }
#tut-title { font-family:var(--message-font); }
#tut-keys kbd { border-color:var(--message-edge); background:#17373a; color:var(--message-key); }
#tut-keys kbd.pressed { background:var(--message-key); color:#08252a; }
#tut-dodge-prompts .tut-dodge-side span { font-family:var(--message-font); }
#tut-dodge-prompts .tut-dodge-side { width:min(230px,calc(50vw - 18px)); padding:12px; }

#mobasky,#mobatel { --message-edge:#ff9b7899; }
#mobasky[data-hot=true] { background:var(--message-surface); border-radius:var(--message-radius); }
#mobasky[data-firing=true] { border-color:#ff775d; background:var(--message-surface); }
#mobaoff { color:#b0cfca; font-size:15px; }
#mobaoff[data-threat=charging] { border-color:#ffbf66; }
#mobaoff[data-threat=firing] { border-color:#ff775d; }
#mobalaser-source .laser-source-label { --message-edge:#ff9b7899; padding:7px 10px; font-size:13px; }
#mobalaser-source[data-label-side=left] .laser-source-label { border:1px solid var(--message-edge); }

@media(max-width:620px), (max-height:540px) {
  #br-hud :is(.br-notice,.br-warning,.survival-coach),
  #invbuild .ib-status,
  :is(#hud-flash,#invprompt,#mobasky,#mobatel,#mobaoff) { padding:10px 14px; font-size:16px; }
  #br-hud .br-live { gap:8px; }
  #br-hud .br-elimination-feedback { margin-top:48px; }
  #br-hud .br-elimination-banner { gap:10px; padding:10px 14px; }
  #br-hud .br-elimination-total { padding-left:10px; }
}
@media(max-width:620px) and (min-height:541px) {
  #br-hud .br-live { padding-top:clamp(170px,30vh,254px); }
}
@media(max-height:400px) {
  #tutorial { top:62px; padding:10px 12px; }
  #tut-title { margin:6px 0 4px; font-size:16px; }
  #tut-hint { font-size:12px; line-height:1.35; }
  #tut-keys { margin-top:8px; }
  #tut-keys kbd { height:26px; }
  #tut-demo { margin-top:6px; font-size:11px; }
}
/* The short touch layout leaves a narrow channel between the left stick and
   the right fire/reload controls. Notices use that channel, not a bottom strip. */
@media(min-width:440px) and (max-width:740px) and (max-height:450px) {
  #br-hud.br-touch .br-context:not(:has(#br-prompt:not([hidden]))) {
    left:calc(50% - 38px); bottom:calc(var(--mobile-bottom) + 66px);
    width:min(300px,calc(100% - 376px)); }
  #br-hud.br-touch .br-notice { padding:7px 9px; font-size:14px; }
  body.br-mode #br-hud.br-opening.br-touch .survival-coach {
    top:62px; left:12px; transform:none; max-width:min(244px,calc(100vw - 240px));
    padding:5px 10px; gap:8px; font-size:13px; }
  #br-hud.br-opening.br-touch .survival-coach b { font-size:14px; }
  #br-hud.br-touch .survival-crate-action { left:12px; top:96px; transform:none;
    width:min(244px,calc(100% - 240px)); padding:8px 12px; gap:10px; font-size:14px; }
  #br-hud.br-touch .br-warning { align-self:flex-start; margin-left:12px;
    width:min(244px,calc(100% - 240px)); padding:8px 12px; }
  #br-hud.br-touch .br-warning strong { font-size:16px; }
  #br-hud.br-touch .br-warning span { font-size:12px; }
  #br-hud.br-touch .br-elimination-feedback {
    width:min(300px,calc(100% - 376px)); margin-right:76px; }
  #br-hud.br-touch .br-elimination-banner { padding:8px 10px; }
  #br-hud.br-touch :is(.br-elimination-emblem,.br-elimination-total) { display:none; }
  #br-hud.br-touch .br-elimination-copy > strong { font-size:18px; }
  #br-hud.br-touch .br-elimination-copy > span { font-size:9px; letter-spacing:0; }
}
@media(max-width:439px) {
  body.br-mode #br-hud.br-opening.br-touch .survival-coach { top:112px; }
  #br-hud.br-touch .br-context:not(:has(#br-prompt:not([hidden]))) {
    bottom:calc(var(--mobile-fire-bottom) + var(--mobile-fire) + 16px); }
}
@media(max-width:439px) and (max-height:540px) {
  #br-hud.br-touch .br-live { padding-top:112px; }
  #br-hud.br-touch .br-warning { padding:8px 12px; }
  #br-hud.br-touch .br-warning strong { font-size:16px; }
  #br-hud.br-touch .br-warning span { font-size:12px; }
  #br-hud.br-touch .br-elimination-banner { padding:8px 12px; }
  #br-hud.br-touch :is(.br-elimination-emblem,.br-elimination-total) { display:none; }
  #br-hud.br-touch .br-elimination-copy > strong { font-size:18px; white-space:nowrap; }
  #br-hud.br-touch .br-elimination-copy > span { font-size:9px; letter-spacing:0; }
}
@media(max-width:650px) { .missile-warning strong { font-size:13px; } }
@media(prefers-reduced-motion:reduce) {
  #hud-flash { transition:none; }
  #mobasky,#mobatel,#mobaoff { animation:none; }
}