/* Standalone 404 (page not found) screen. There's no dedicated Figma art for
   this state, so it's built from the reusable popup-warning panel/icon assets
   (see screens/popup.css) plus the same pixel-font/button treatment used
   everywhere else, so it still reads as part of the same site. */
.br-error-screen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  text-align: center;
}

.br-error-code {
  position: relative;
  z-index: 2;
  font-family: "Dearpix", "Press Start 2P", monospace;
  font-weight: 400;
  font-size: 130px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #0070ff;
  /* Same white-halo treatment used for the card name/slogan text (see
     CARD_NAME_COLOR in inc/bootstrap.php) so it reads clearly over the busy
     grid background. */
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff,
    0 3px 0 #fff, 0 -3px 0 #fff,
    3px 3px 0 #fff, -3px -3px 0 #fff,
    3px -3px 0 #fff, -3px 3px 0 #fff;
  margin: 0 0 8px;
}

.br-error-panel {
  position: relative;
  width: 560px;
  height: 360px;
  margin: 0 auto;
  background: url("../../images/popup-panel.png") center / 100% 100% no-repeat;
  padding-top: 84px;
}

.br-error-icon {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  background: url("../../images/popup-warning-icon.png") center / contain no-repeat;
}

.br-error-title {
  font-family: "Maison Neue Extended", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #0070ff;
  margin: 0 0 14px;
}

.br-error-text {
  font-family: "Maison Neue Extended", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #0b55b4;
  margin: 0 auto 30px;
  padding: 0 56px;
}

@media (max-width: 720px) {
  .br-error-screen {
    position: static;
    transform: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .br-error-code {
    font-size: 68px;
    margin-bottom: -18px;
  }
  .br-error-panel {
    width: 100%;
    height: 300px;
    padding-top: 62px;
  }
  .br-error-icon {
    width: 68px;
    height: 68px;
    top: -14px;
  }
  .br-error-title { font-size: 19px; margin-bottom: 10px; }
  .br-error-text { font-size: 13px; padding: 0 26px; margin-bottom: 22px; }
}