/* Shared by the first HTML paint and the React opening screen. */
.kb-opening {
  --opening-accent: #ff8275;
  position: fixed; inset: 0; z-index: 500;
  overflow: auto; overscroll-behavior: none; isolation: isolate;
  background: #000515; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 1; transition: opacity 400ms cubic-bezier(.22,1,.36,1);
}
.kb-opening *, .kb-opening *::before, .kb-opening *::after { box-sizing: border-box; }
.kb-opening-backdrop {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,rgba(0,5,21,0) 0%,rgba(0,5,21,.2) 30%,rgba(0,5,21,.30) 62%,rgba(0,5,21,.6) 100%), url('/stadium-night.jpg') center top / cover no-repeat;
}
:root:not([data-theme="dark"]) .kb-opening { background-color: #003289; }
:root:not([data-theme="dark"]) .kb-opening-backdrop {
  background-image: linear-gradient(180deg,rgba(0,18,55,0) 0%,rgba(0,18,55,.48) 30%,rgba(0,18,55,.55) 62%,rgba(0,12,32,.76) 100%), url('/stadium-day.jpg');
}
.kb-opening-inner {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 1040px; min-height: 100%; margin: 0 auto;
  padding: max(28px, calc(env(safe-area-inset-top, 0px) + 18px)) 28px max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px));
}
.kb-opening-brand { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .14em; font-weight: 750; flex: none; }
.kb-opening-plate { display: grid; place-items: center; width: 64px; height: 42px; border-radius: 13px; background: #e8442f; color: white; font-size: 16px; font-weight: 850; letter-spacing: .045em; box-shadow: 0 8px 24px #0002; }
.kb-opening-story { padding: 48px 0 52px; margin: auto 0; }
.kb-opening-eyebrow { margin: 0 0 22px; color: #cedaea; letter-spacing: .19em; font-size: 10px; font-weight: 700; }
.kb-opening h1 { margin: 0; max-width: 700px; font-size: clamp(48px, 7vw, 76px); font-weight: 780; line-height: 1.02; letter-spacing: -.055em; }
.kb-opening h1 em { font-style: normal; color: var(--opening-accent); }
.kb-opening-description { margin: 24px 0 0; color: #dae2ee; font-size: 15px; line-height: 1.6; font-weight: 450; letter-spacing: -.015em; }
.kb-opening-bottom { flex: none; width: 100%; max-width: 400px; }
.kb-opening-status { border: 1px solid #ffffff29; border-radius: 22px; background: #091628ad; padding: 20px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.kb-opening-status-row { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.5; font-weight: 550; }
.kb-opening-spinner { display: block; width: 18px; height: 18px; flex: none; border: 2px solid #ffffff32; border-top-color: var(--opening-accent); border-radius: 50%; animation: kb-opening-spin .9s linear infinite; }
.kb-opening-track { height: 2px; margin-top: 18px; border-radius: 9px; background: #ffffff24; overflow: hidden; }
.kb-opening-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--opening-accent); animation: kb-opening-scan 2.3s cubic-bezier(.45,0,.2,1) infinite; }
.kb-opening-footer { margin: 20px 0 0; font-size: 10px; letter-spacing: .045em; color: #d4dce7; text-align: center; line-height: 1.5; }
.kb-opening-slow { color: #c8d3e2; font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
.kb-opening.is-leaving { opacity: 0; pointer-events: none; }
.kb-opening-destination { height: 100%; }
.kb-opening-retry { margin-top: 14px; padding: 11px 18px; border-radius: 999px; border: 1px solid #ffffff60; background: #ffffff12; color: #fff; font: inherit; font-size: 13px; cursor: pointer; min-height: 44px; }
.kb-opening-retry:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.kb-opening [hidden] { display: none !important; }
@keyframes kb-opening-spin { to { transform: rotate(360deg); } }
@keyframes kb-opening-scan { 0% { transform: translateX(-105%); } 65%,100% { transform: translateX(345%); } }
@media(min-width: 700px) {
  .kb-opening-inner { padding-inline: 60px; padding-block: max(48px, env(safe-area-inset-top,0px)) max(28px, env(safe-area-inset-bottom,0px)); }
  .kb-opening-description { font-size: 18px; }
  .kb-opening-story { padding-block: 44px; }
  .kb-opening-footer { text-align: left; }
}
@media(max-height: 650px) {
  .kb-opening-inner { padding-top: max(20px, env(safe-area-inset-top,0px)); padding-bottom: max(14px, env(safe-area-inset-bottom,0px)); }
  .kb-opening-story { padding-block: 30px; }
  .kb-opening h1 { font-size: 46px; }
  .kb-opening-eyebrow { margin-bottom: 16px; }
  .kb-opening-description { margin-top: 18px; font-size: 14px; }
  .kb-opening-status { padding: 16px; }
  .kb-opening-footer { margin-top: 14px; }
}
@media(max-width: 359px) { .kb-opening-inner { padding-inline: 22px; } .kb-opening h1 { font-size: 44px; } .kb-opening-brand { font-size: 11px; } }
@media(prefers-reduced-motion: reduce) {
  .kb-opening { transition: none; }
  .kb-opening-spinner, .kb-opening-track span { animation: none; }
  .kb-opening-track span { width: 42%; opacity: .55; }
}