/* Shared by initial game loading, route transitions, and lobby recovery. */
      /* ===== Loading UI ===== */
      #loading-wrap, #bb-route-loading-wrap {
        position: fixed;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0;
        top: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: max(20px, env(safe-area-inset-bottom));
        width: min(720px, 92vw);
        z-index: 3;
        pointer-events: none;
      }

      #loading-text, #bb-route-loading-text {
        text-align: center;
        font-family: "Press Start 2P", monospace;
        font-size: clamp(10px, 1.6vw, 14px);
        line-height: 1.5;
        width: fit-content;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto 10px;
        padding: 8px 12px;
        background: #111b2b;
        color: #ffe3d2;
        text-shadow: 2px 2px 0 #3a0d13;
      }

      .loading-shell {
        position: relative;
        width: 100%;
        height: 24px;
        overflow: hidden;
        box-sizing: border-box;
        border: 4px solid #26080d;
        border-radius: 0;
        background: #4a151b;
        box-shadow: 0 4px 0 #130407, inset 0 0 0 2px #873039;
      }

      .loading-fill {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0%;
        /* A solid fill preserves the hard pixel silhouette without striped bands. */
        background: #d52f3d;
        box-shadow: inset 0 3px 0 #ff7880, inset 0 -3px 0 #80111c,
          inset 4px 0 0 #f14a55;
        transition: width 220ms ease-out;
      }

      #loading-percent, #bb-route-loading-percent {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Press Start 2P", monospace;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        text-shadow: 2px 2px 0 #26080d;
        pointer-events: none;
      }


#bb-route-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #111b2b url(/assets/loadingscreen.webp) center / cover;
  color: var(--bb-text);
  isolation: isolate;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font: 400 16px/1.5 "Press Start 2P", monospace;
}
#bb-route-transition[data-presentation="message"] {
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
}
.bb-loading-panel {
  width: min(420px, 100%);
  box-sizing: border-box;
  padding: 28px 24px;
  text-align: center;
  background: var(--bb-surface-1);
  border: 3px solid var(--bb-border);
  border-radius: var(--bb-radius-card);
  box-shadow: 0 0 0 4px var(--bb-ink), 0 8px 0 var(--bb-ink), inset 0 2px var(--bb-surface-raised);
}
#bb-route-message, .lobby-loading-label {
  color: var(--bb-text-soft);
  font-family: var(--bb-font-display);
  font-size: clamp(10px, 1.6vw, 12px);
  line-height: 1.8;
  overflow-wrap: anywhere;
}
#bb-route-message { margin: 0; }
.bb-loading-retry {
  appearance: none;
  display: inline-block;
  margin: 24px 5px 8px;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: var(--bb-primary-gradient);
  color: var(--bb-text);
  font: 700 11px/1.5 "Press Start 2P", monospace;
  text-transform: uppercase;
  box-shadow: var(--bb-control-shadow);
  cursor: pointer;
  touch-action: manipulation;
}
.bb-loading-retry:hover:not(:disabled) { filter: brightness(1.12); }
.bb-loading-retry:active:not(:disabled) { transform: translateY(2px); }
.bb-loading-retry:disabled { opacity: 0.55; cursor: wait; }
.bb-loading-retry:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: 8px; }
.bb-loading-retry[hidden], .bb-loading-rune[hidden] { display: none; }
#lobby-area[data-loading] > * { visibility: hidden; }
#lobby-loading { display: none; }
#lobby-area[data-loading] > #lobby-loading {
  visibility: visible;
  display: grid;
  justify-items: center;
  align-content: center;
  position: absolute;
  inset: 0;
  padding: 24px;
  text-align: center;
  animation: lobby-loading-appear 180ms 500ms both;
}
.lobby-loading-label { max-width: 30ch; margin-top: 14px; }
@keyframes lobby-loading-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #lobby-area[data-loading] > #lobby-loading { animation: none; }
  .loading-fill { transition: none; }
  .bb-loading-retry:active { transform: none; }
}