/* Module 01: all colors reference the game's existing palette. */
.bf-splash {
  --ui-scale: 1;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --space-xs: 6px; --space-sm: 10px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 80px;
  --layout-margin: clamp(16px, 3vw, 72px);
  --splash-content-max: calc(680px * var(--ui-scale));
  --splash-progress-width: 70%; --fx-glow-strength: .8;
  position: fixed; inset: var(--viewport-offset-top, 0px) auto auto var(--viewport-offset-left, 0px); z-index: 2147483000;
  inline-size: var(--splash-width, 100%); block-size: var(--splash-height, 100dvh);
  overflow: hidden; color: var(--text); background: var(--bg0, var(--bg));
  font-family: inherit; touch-action: manipulation;
}
.bf-splash[hidden] { display: none; }
html.bf-loading-active, html.bf-loading-active body { overflow: hidden !important; }
html.bf-loading-active body::before, html.bf-loading-active body::after { animation-play-state: paused; }
.bf-splash *, .bf-splash *::before, .bf-splash *::after { box-sizing: border-box; }
.bf-splash__background, .bf-splash__halo, .bf-splash__ambient { position: absolute; inset: 0; pointer-events: none; }
.bf-splash__background {
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cyan2) 10%, transparent), transparent 42%),
    radial-gradient(circle at 19% 58%, color-mix(in srgb, var(--mag) 7%, transparent), transparent 30%),
    linear-gradient(var(--bg1), var(--bg0));
}
.bf-splash__background::after {
  content: ''; position: absolute; inset: 0; opacity: .12;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(var(--line) 1px, transparent 1px);
  background-size: calc(64px * var(--ui-scale)) calc(64px * var(--ui-scale));
  mask-image: radial-gradient(circle at center, transparent 12%, var(--bg0) 90%);
}
.bf-splash__halo {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  inline-size: min(95vw, 95dvh, calc(1050px * var(--ui-scale))); aspect-ratio: 1;
  block-size: auto; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan2) 20%, transparent), color-mix(in srgb, var(--mag) 6%, transparent) 38%, transparent 68%);
  opacity: var(--fx-glow-strength); align-self: center;
}
.bf-splash__ambient { inline-size: 100%; block-size: 100%; }
.bf-splash__safe {
  position: relative; block-size: 100%; inline-size: 100%;
  padding-block-start: calc(var(--safe-top) + var(--layout-margin));
  padding-block-end: calc(var(--safe-bottom) + var(--layout-margin));
  padding-inline-start: calc(var(--safe-left) + var(--layout-margin));
  padding-inline-end: calc(var(--safe-right) + var(--layout-margin));
  display: grid; grid-template-rows: 1fr auto 1.16fr; justify-items: center;
}
.bf-splash__content {
  grid-row: 2; display: flex; flex-direction: column; align-items: center; min-inline-size: 0;
  inline-size: min(100%, clamp(320px, 32vw, var(--splash-content-max)));
}
.bf-splash[dir=rtl] .bf-splash__safe { padding-inline-start: calc(var(--safe-right) + var(--layout-margin)); padding-inline-end: calc(var(--safe-left) + var(--layout-margin)); }
.bf-brand-logo { inline-size: 100%; display: block; aspect-ratio: 2 / 1; }
.bf-logo-filter { position: absolute; pointer-events: none; }
.bf-brand-logo img { display: block; inline-size: 100%; block-size: auto; object-fit: contain; visibility: hidden; filter: url(#bf-logo-matte); }
.bf-brand-logo[data-loaded] img { visibility: visible; }
.bf-splash__feedback { inline-size: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--space-sm) * var(--ui-scale)); margin-block-start: clamp(24px, 8vh, calc(var(--space-2xl) * var(--ui-scale))); }
.bf-loading-progress { inline-size: var(--splash-progress-width, 70%); flex: none; }
.bf-loading-progress__track { position: relative; overflow: hidden; block-size: clamp(6px, calc(8px * var(--ui-scale)), 12px); border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 20%, transparent); }
.bf-loading-progress__fill, .bf-loading-progress__energy { position: absolute; inset: 0; border-radius: inherit; }
.bf-loading-progress__fill { background: linear-gradient(90deg, var(--cyan2), var(--cyan)); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform 180ms ease-out; }
[dir=rtl] .bf-loading-progress__fill { transform-origin: right; }
.bf-loading-progress__energy { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 40%, transparent), transparent); opacity: .35; }
.bf-loading-progress[data-variant=error] .bf-loading-progress__fill { background: var(--danger); }
.bf-loading-progress[data-variant=complete] .bf-loading-progress__track { border-color: var(--cyan); }
.bf-loading-status { margin: 0; inline-size: 100%; min-block-size: 2.8em; font-size: clamp(13px, calc(15px * var(--ui-scale)), 24px); line-height: 1.4; text-align: center; color: var(--text); overflow-wrap: anywhere; }
.bf-splash-error { inline-size: 100%; text-align: center; }
.bf-splash-error[hidden] { display: none; }
.bf-splash-error p { font-size: clamp(13px, calc(15px * var(--ui-scale)), 24px); line-height: 1.4; margin: 0 0 var(--space-md); overflow-wrap: anywhere; color: var(--text); }
.bf-splash-error p::before { content: '!'; display: inline-grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; border: 1px solid var(--danger); border-radius: 50%; color: var(--danger); margin-inline-end: .6em; }
.bf-splash-error .adv-button { min-inline-size: 120px; min-block-size: 48px; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; font-size: clamp(14px, calc(15px * var(--ui-scale)), 22px); }
.bf-splash-error .adv-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.bf-splash-error .adv-button:disabled { opacity: .6; cursor: wait; }
.bf-splash-error .adv-button:active { transform: scale(.98); }
.bf-loading-indicator { display: inline-block; inline-size: 3em; vertical-align: middle; }
.bf-splash[data-layout=portrait] { --splash-progress-width: 76%; }
.bf-splash[data-layout=portrait] .bf-splash__content { inline-size: min(100%, 80vw); }
.bf-splash[data-layout=tablet-portrait] .bf-splash__content { inline-size: min(100%, 64vw, var(--splash-content-max)); }
.bf-splash[data-layout=compact-landscape] .bf-splash__content { inline-size: min(100%, clamp(260px, 40vw, var(--splash-content-max))); }
.bf-splash[data-layout$=portrait] .bf-splash__safe { grid-template-rows: 1fr auto 1.35fr; }
.bf-splash[data-layout$=portrait] .bf-splash__feedback { margin-block-start: clamp(24px, 10vh, 100px); }
.bf-splash[data-variant=fullscreen] .bf-splash__content { max-inline-size: calc(480px * var(--ui-scale)); }
.bf-splash[data-quality=LOW] .bf-splash__background::after { display: none; }
@media (orientation: portrait) { .bf-splash__content { inline-size: min(100%, 80vw); } }
@media (max-height: 500px) {
  .bf-splash { --layout-margin: 16px; }
  .bf-splash .bf-splash__content { inline-size: min(70vw, calc(60dvh), var(--splash-content-max)); }
  .bf-splash .bf-splash__feedback { margin-block-start: 16px; gap: 6px; }
  .bf-loading-status { min-block-size: 1.4em; }
  .bf-splash-error p { margin-block-end: 8px; }
}