/* Portada de apertura: una escena completa, no una pantalla de carga genérica. */
#app-splash { display: none; }
html.splash-active #app-splash {
  display: block;
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  color: #29241e;
  background: #e9dcc3 url("assets/continuum-splash-clean-v3.webp") center / cover no-repeat;
  opacity: 1;
  isolation: isolate;
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1);
}
/* Un velo muy ligero reserva contraste para la marca sin borrar la textura. */
html.splash-active #app-splash::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 52%, #fff8e9d1 0 19%, #fff8e965 38%, transparent 61%),
    linear-gradient(180deg, #2b190914 0, transparent 18%, transparent 78%, #291a1330 100%);
}

/* Las cartas son capas reales: flotan por separado sin arrastrar el astrolabio ni el globo. */
#app-splash .splash-floating-cards,
#app-splash .splash-sunlight {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#app-splash .splash-float-card {
  --tilt: 0deg;
  --spin: 1.2deg;
  --drift-x: 5px;
  --drift-y: -9px;
  position: absolute;
  width: clamp(112px, 31vw, 190px);
  aspect-ratio: 2 / 3;
  margin: 0;
  padding: 5px;
  border: 1px solid #7d5734;
  border-radius: 10px;
  background: linear-gradient(145deg, #d4b784, #6e4327 11%, #b58a55 90%, #4f2f1d);
  box-shadow: 0 18px 28px #43271159, inset 0 0 0 2px #e4c9998f;
  opacity: .9;
  transform: rotate(var(--tilt));
  will-change: transform;
}
#app-splash .splash-float-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #f2d49a99;
  border-radius: 6px;
  box-shadow: inset 0 0 22px #2a170c55;
}
#app-splash .splash-float-card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  filter: sepia(.16) saturate(.78) contrast(.93) brightness(1.05);
}
/* `--deal` es cuándo entra cada carta y `--from-*`, desde dónde llega repartida. */
#app-splash .splash-card-tl { top: 3%; left: -12%; --tilt: -17deg; --drift-x: 8px; --drift-y: 7px; --period: 8.8s; --deal: .75s; --from-x: -260px; --from-y: -120px; --from-r: -50deg; }
#app-splash .splash-card-tr { top: 7%; right: -11%; --tilt: 16deg; --spin: -1.1deg; --drift-x: -7px; --period: 10.2s; --deal: .95s; --from-x: 260px; --from-y: -140px; --from-r: 45deg; }
#app-splash .splash-card-ml { top: 48%; left: -23%; --tilt: 13deg; --spin: -1.4deg; --drift-x: 9px; --drift-y: -7px; --period: 9.6s; --deal: 1.15s; --from-x: -280px; --from-y: 40px; --from-r: -25deg; }
#app-splash .splash-card-mr { top: 42%; right: -23%; --tilt: 13deg; --drift-x: -8px; --drift-y: 8px; --period: 8.2s; --deal: 1.3s; --from-x: 280px; --from-y: -30px; --from-r: 50deg; }
#app-splash .splash-card-br { right: -16%; bottom: -7%; --tilt: -14deg; --spin: 1deg; --drift-x: -5px; --drift-y: -10px; --period: 10.8s; --deal: 1.45s; --from-x: 220px; --from-y: 260px; --from-r: 30deg; }

/* Un rayo de atardecer cruza la escena; los puntos de luz dan el tintineo sin parpadeos bruscos. */
#app-splash .splash-sunbeam {
  position: absolute;
  top: -18%;
  left: -25%;
  width: min(78vw, 620px);
  height: 124%;
  background: linear-gradient(100deg, transparent 12%, #ffd99414 28%, #fff2bd61 48%, #ffcf741e 67%, transparent 84%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: .6;
  transform: rotate(-13deg);
  transform-origin: 50% 0;
  will-change: opacity, transform;
}
#app-splash .splash-sparkles {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 13%, #fff9d8 0 1px, #ffcf738c 2px, transparent 5px),
    radial-gradient(circle at 26% 28%, #fff7c9 0 1.5px, #ffc7677a 3px, transparent 7px),
    radial-gradient(circle at 78% 18%, #fffbdc 0 1px, #ffd17b8a 3px, transparent 6px),
    radial-gradient(circle at 85% 56%, #fff8cc 0 1.5px, #ffbd5575 3px, transparent 7px),
    radial-gradient(circle at 18% 73%, #fffbe2 0 1px, #ffd37d80 3px, transparent 6px),
    radial-gradient(circle at 67% 78%, #fff8ca 0 1px, #ffbd5870 3px, transparent 6px);
  opacity: .42;
  will-change: opacity, filter;
}
@media (prefers-reduced-motion: no-preference) {
  /* Las cartas llegan repartidas desde fuera de la pantalla y después se quedan flotando. */
  #app-splash .splash-float-card {
    animation:
      splash-card-deal .95s var(--deal) cubic-bezier(.16,.84,.3,1.08) both,
      splash-card-drift var(--period) calc(var(--deal) + .95s) ease-in-out infinite;
  }
  #app-splash .splash-sunbeam { animation: splash-beam-in 2.4s .5s ease-out both, splash-sunbeam-shimmer 7.5s 2.9s ease-in-out infinite; }
  #app-splash .splash-sparkles { animation: splash-sparkle 3.8s 1s ease-in-out infinite alternate backwards; }
}
@keyframes splash-card-deal {
  from { opacity: 0; transform: translate3d(var(--from-x), var(--from-y), 0) rotate(var(--from-r)) scale(.85); }
  35% { opacity: .9; }
  to { opacity: .9; transform: translate3d(0, 0, 0) rotate(var(--tilt)); }
}
@keyframes splash-beam-in {
  from { opacity: 0; transform: rotate(-30deg) scaleX(.6); }
  to { opacity: .38; transform: rotate(-13deg) translate3d(-1.5%, 0, 0) scaleX(.95); }
}
@keyframes splash-card-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt)); }
  50% { transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(calc(var(--tilt) + var(--spin))); }
}
@keyframes splash-sunbeam-shimmer {
  0%, 100% { opacity: .38; transform: rotate(-13deg) translate3d(-1.5%, 0, 0) scaleX(.95); }
  46% { opacity: .72; transform: rotate(-12deg) translate3d(2%, 0, 0) scaleX(1.06); }
  58% { opacity: .55; }
}
@keyframes splash-sparkle {
  0% { opacity: .25; filter: brightness(.9); }
  55% { opacity: .7; filter: brightness(1.25); }
  100% { opacity: .42; filter: brightness(1.05); }
}
/* La salida es larga a propósito: el telón se disuelve, no se retira. */
html.splash-active #app-splash.splash-exit { opacity: 0; }
html.splash-active #app-splash.splash-exit .splash-masthead,
html.splash-active #app-splash.splash-exit .splash-actions,
html.splash-active #app-splash.splash-exit .splash-sound,
html.splash-active #app-splash.splash-exit .splash-status { opacity: 0; }
html.splash-active #app-splash .splash-masthead { transition: opacity 420ms cubic-bezier(.22,.61,.36,1); }
html.splash-active #app-splash .splash-actions,
html.splash-active #app-splash .splash-sound,
html.splash-active #app-splash .splash-status { transition: opacity 460ms ease-out; }

#app.app-arrive { animation: app-arrive 420ms cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes app-arrive { from { opacity: 0; } to { opacity: 1; } }

html.splash-active #app-splash .splash-masthead {
  position: absolute;
  top: 46%;
  /* Centrado sin depender de `translate(-50%)`: algunos Android lo dejaban desplazado a la derecha. */
  left: 0;
  right: 0;
  width: min(92vw, 560px);
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  padding: 0;
  opacity: 1;
  text-align: center;
  margin-inline: auto;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}
#app-splash .splash-crest {
  grid-row: auto;
  width: clamp(250px, 76vw, 440px);
  margin: 0 auto -4px;
  filter: drop-shadow(0 12px 14px #4e2a173d);
}
#app-splash .splash-crest::before { display: none; }
#app-splash .splash-crest img { display: block; width: 100%; height: auto; }
#app-splash .home-wordmark {
  color: #27231f;
  font: 500 clamp(2.65rem, 11.8vw, 5rem)/.9 var(--font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -.045em;
  text-shadow: 0 1px 0 #fff9ecb8;
  text-transform: uppercase;
}
#app-splash .home-tagline {
  margin-top: 16px;
  color: #5d5145;
  font: 700 clamp(.58rem, 2.35vw, .78rem)/1.4 var(--ui-font, system-ui, sans-serif);
  letter-spacing: .31em;
  text-transform: uppercase;
}
#app-splash .home-ornament { margin-top: 23px; }
#app-splash .home-ornament span { background: #8c673f8f; }
#app-splash .home-ornament i { border-color: #9b6f38; background: #f4e8ce80; }

/* Intro de apertura: la misma secuencia que docs/promo/intro.html. Empieza con el primer
   pintado de la portada, no con `splash-ready`, para que nunca se vea el final antes que
   el principio. */
#app-splash .splash-backdrop,
#app-splash .splash-curtain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Copia exacta del fondo de la portada (incluida su posición) que solo existe para
   acercarse al abrir; al terminar coincide píxel a píxel con el de debajo. */
#app-splash .splash-backdrop { z-index: -2; background: inherit; }
#app-splash .splash-curtain { z-index: 20; display: none; background: radial-gradient(ellipse at 50% 40%, #3a220f 0, #120b06 70%); }

/* El emblema es una moneda: canto oscuro entre anverso y reverso. */
#app-splash .splash-crest-in,
#app-splash .splash-coin,
#app-splash .splash-coin-face { position: relative; height: 100%; }
#app-splash .splash-crest-in { perspective: 1100px; }
#app-splash .splash-coin { transform-style: preserve-3d; }
#app-splash .splash-coin-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(3px); }
#app-splash .splash-coin-back { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(3px); }
#app-splash .splash-coin-back img { filter: sepia(.1) saturate(.78) contrast(.94) brightness(.9); }
#app-splash .splash-coin-edge { position: absolute; inset: 0; display: none; transform: translateZ(var(--z)); }
#app-splash.splash-coin-settled .splash-crest-in { perspective: none; }
#app-splash.splash-coin-settled .splash-coin { animation: none !important; transform: none; transform-style: flat; }
#app-splash.splash-coin-settled .splash-coin-face { transform: none; }
#app-splash.splash-coin-settled :is(.splash-coin-edge, .splash-coin-back) { display: none !important; }
#app-splash .splash-coin-edge img { filter: brightness(.5) sepia(.6) saturate(1.4); }
#app-splash .splash-halo,
#app-splash .splash-swirl,
#app-splash .splash-glint { display: none; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  html.splash-active #app-splash .splash-curtain { display: block; animation: splash-fade-out 1.3s .1s ease-in both; }
  html.splash-active #app-splash .splash-backdrop { animation: splash-settle 8.5s cubic-bezier(.25,.6,.25,1) both; }
  html.splash-active #app-splash .splash-coin-edge { display: block; }

  /* Torbellino: el emblema aparece pequeño girando muy deprisa, crece mientras frena y se queda quieto. */
  html.splash-active #app-splash .splash-crest-in { animation: splash-crest-in 2.3s 1s cubic-bezier(.16,.7,.24,1) both; }
  html.splash-active #app-splash .splash-coin { animation: splash-coin-spin 2.4s 1s cubic-bezier(.1,.55,.2,1) both; }
  html.splash-active #app-splash .splash-swirl {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    display: block;
    width: 115%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #ffe4a000 0deg, #ffe7a8cc 8deg, #ffe4a000 22deg, #fff6d800 40deg, #f6cf7c99 47deg, #ffe4a000 60deg);
    -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 42%, #0008 58%, transparent 70%);
    mask: radial-gradient(circle, transparent 0 28%, #000 42%, #0008 58%, transparent 70%);
    filter: blur(2px);
    animation: splash-swirl 2.5s 1s cubic-bezier(.2,.6,.3,1) both;
  }
  /* Halo de luz que se abre detrás del emblema cuando se posa. */
  html.splash-active #app-splash .splash-halo {
    position: absolute;
    z-index: -1;
    top: 52%;
    left: 50%;
    display: block;
    width: 127%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6d8 0, #ffe7a8a8 22%, #ffd78a33 45%, transparent 68%);
    animation: splash-halo 2.2s 2.9s ease-out both;
  }
  /* Destello dorado que recorre el metal del emblema, recortado a su silueta. */
  html.splash-active #app-splash .splash-glint {
    position: absolute;
    inset: 0;
    display: block;
    -webkit-mask: url("assets/continuum-emblem-800.webp") center / contain no-repeat;
    mask: url("assets/continuum-emblem-800.webp") center / contain no-repeat;
    background: linear-gradient(105deg, transparent 36%, #fff3c800 38%, #fff3c8b3 50%, #fff3c800 62%, transparent 64%) no-repeat;
    background-size: 250% 100%;
    mix-blend-mode: screen;
    animation: splash-glint 1.2s 3.5s ease-in-out both;
  }

  /* El nombre se escribe letra a letra; después, el lema palabra a palabra y el adorno. */
  html.splash-active #app-splash .home-wordmark span { display: inline-block; animation: splash-letter-in .7s calc(2.85s + var(--i) * 70ms) cubic-bezier(.2,.7,.2,1) both; }
  html.splash-active #app-splash .home-tagline span { display: inline-block; animation: splash-word-in .55s calc(3.85s + var(--i) * 260ms) ease-out both; }
  html.splash-active #app-splash .home-ornament i { animation: splash-diamond-in .6s 4.55s cubic-bezier(.2,.7,.2,1) both; }
  html.splash-active #app-splash .home-ornament span { animation: splash-line-in .6s 4.7s ease-out both; }
  html.splash-active #app-splash .home-ornament span:first-child { transform-origin: 100% 50%; }
  html.splash-active #app-splash .home-ornament span:last-child { transform-origin: 0 50%; }
}
/* Las letras van sueltas para la intro, pero el nombre no puede partirse en dos líneas. */
#app-splash .home-wordmark { white-space: nowrap; }
#app-splash .home-wordmark span:nth-child(2) { --i: 1; }
#app-splash .home-wordmark span:nth-child(3) { --i: 2; }
#app-splash .home-wordmark span:nth-child(4) { --i: 3; }
#app-splash .home-wordmark span:nth-child(5) { --i: 4; }
#app-splash .home-wordmark span:nth-child(6) { --i: 5; }
#app-splash .home-wordmark span:nth-child(7) { --i: 6; }
#app-splash .home-wordmark span:nth-child(8) { --i: 7; }
#app-splash .home-wordmark span:nth-child(9) { --i: 8; }
#app-splash .home-tagline span:nth-child(2) { --i: 1; }
#app-splash .home-tagline span:nth-child(3) { --i: 2; }
#app-splash .home-wordmark span,
#app-splash .home-tagline span:first-child { --i: 0; }
@keyframes splash-fade-out { to { opacity: 0; } }
@keyframes splash-settle {
  from { transform: scale(1.16) translateY(2%); filter: brightness(.55) sepia(.4); }
  30% { filter: brightness(1) sepia(0); }
  to { transform: none; filter: none; }
}
@keyframes splash-crest-in {
  from { opacity: 0; transform: translateY(40px) scale(.15) rotate(-35deg); filter: blur(3px); }
  18% { opacity: 1; }
  55% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes splash-coin-spin { from { transform: rotateY(-2160deg); } to { transform: rotateY(0deg); } }
@keyframes splash-swirl {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.3); }
  20% { opacity: .9; }
  65% { opacity: .6; }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(-900deg) scale(1.2); }
}
@keyframes splash-halo {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  35% { opacity: 1; }
  to { opacity: .35; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes splash-glint {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}
@keyframes splash-letter-in {
  from { opacity: 0; transform: translateY(22px) scale(1.08); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes splash-word-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes splash-line-in { from { transform: scaleX(0); } }
@keyframes splash-diamond-in { from { opacity: 0; transform: rotate(-135deg) scale(0); } }

/* El botón real queda separado del fondo para conservar foco, traducción y accesibilidad. */
#app-splash .splash-actions {
  position: absolute;
  left: 50%;
  bottom: max(16svh, calc(78px + env(safe-area-inset-bottom)));
  width: min(78vw, 440px);
  display: grid;
  z-index: 2;
  gap: 12px;
  transform: translateX(-50%);
  /* Llega cuando la intro ya ha dibujado la marca; tocar antes también entra. */
  animation: splash-play-in 700ms 5s cubic-bezier(.2,.7,.2,1) both;
}
#app-splash .splash-play {
  width: 100%;
  min-height: 72px;
  padding: 18px 28px;
  border: 2px solid #6f301f;
  border-radius: 16px;
  background: linear-gradient(180deg, #a04c32, #87351f 75%, #782b1b);
  color: #fff5df;
  font: 600 clamp(1.25rem, 5vw, 1.65rem)/1 var(--font-display, Georgia, "Times New Roman", serif);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #3b160e;
  box-shadow:
    inset 0 0 0 3px #c69458,
    inset 0 0 0 5px #5f2418,
    0 13px 28px #44261757,
    0 2px 0 #f3cc8d80;
  cursor: pointer;
  transition: filter 160ms ease, transform 120ms ease, box-shadow 160ms ease;
  position: relative;
  overflow: hidden;
}
/* Un brillo cruza el botón una vez, recién llegado, para invitar a pulsar. */
#app-splash .splash-play::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, #ffe9c055 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 120% 0;
  animation: splash-glint .9s 5.9s ease-in-out both;
}
#app-splash .splash-play:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 3px #c69458, inset 0 0 0 5px #5f2418, 0 7px 16px #4426174f;
}
#app-splash .splash-play:focus-visible { outline: 3px solid #f8e2af; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  #app-splash .splash-play:hover { filter: brightness(1.08) saturate(1.05); }
}

#app-splash .splash-sound {
  position: fixed;
  z-index: 2;
  top: max(24px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #8f3c27;
  border-radius: 50%;
  color: #86351f;
  background: #f7eddaeb;
  box-shadow: 0 7px 20px #40220e2f, inset 0 0 0 1px #fff9e7;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 120ms ease;
  animation: splash-sound-in 460ms 5.2s ease-out both;
}
@keyframes splash-sound-in { from { opacity: 0; } }
#app-splash .splash-sound svg { width: 23px; height: 23px; overflow: visible; }
#app-splash .splash-sound path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#app-splash .splash-sound .sound-speaker { fill: currentColor; stroke: none; }
#app-splash .splash-sound .sound-muted { display: none; }
#app-splash .splash-sound[data-enabled="true"] { color: #6c2919; background: #fff7e8f5; }
#app-splash .splash-sound[data-enabled="false"] .sound-waves { display: none; }
#app-splash .splash-sound[data-enabled="false"] .sound-muted { display: block; }
#app-splash .splash-sound:active { transform: scale(.94); }
#app-splash .splash-sound:focus-visible { outline: 3px solid #8f3c27; outline-offset: 3px; }

#app-splash .splash-status {
  position: absolute;
  left: 50%;
  bottom: max(17svh, calc(90px + env(safe-area-inset-bottom)));
  width: min(78vw, 440px);
  margin: 0;
  color: #57483b;
  font: 700 .78rem/1.4 var(--ui-font, system-ui, sans-serif);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px #fff8e2;
  animation: splash-play-in 400ms ease-out both;
}
/* Los hitos solo aparecen al montar la aplicación, como indicador discreto. */
#app-splash .splash-hitos { height: 7px; margin-top: 16px; opacity: 0; transition: opacity 180ms ease; }
#app-splash.splash-entering .splash-hitos { opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  #app-splash.splash-entering .splash-hitos i { animation: splash-hito-latido 1.4s ease-in-out infinite; }
  #app-splash.splash-entering .splash-hitos i:nth-child(2) { animation-delay: .14s; }
  #app-splash.splash-entering .splash-hitos i:nth-child(3) { animation-delay: .28s; }
  #app-splash.splash-entering .splash-hitos i:nth-child(4) { animation-delay: .42s; }
  #app-splash.splash-entering .splash-hitos i:nth-child(5) { animation-delay: .56s; }
}
@keyframes splash-hito-latido {
  0%, 60%, 100% { background: #f3e7ce; }
  25% { background: #8e3a24; }
}
@keyframes splash-play-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* En móviles bajos se compacta la marca, pero se conserva el globo de la parte inferior. */
@media (max-height: 700px) {
  html.splash-active #app-splash .splash-masthead { top: 43%; }
  #app-splash .splash-crest { width: clamp(205px, 57svh, 360px); }
  #app-splash .home-wordmark { font-size: clamp(2.25rem, 9.8vw, 3.6rem); }
  #app-splash .home-tagline { margin-top: 10px; }
  #app-splash .home-ornament { margin-top: 13px; }
  #app-splash .splash-hitos { margin-top: 8px; }
  #app-splash .splash-actions { bottom: max(7svh, calc(28px + env(safe-area-inset-bottom))); }
  #app-splash .splash-play { min-height: 60px; }
}
@media (min-aspect-ratio: 4/3) and (max-height: 760px) {
  html.splash-active #app-splash { background-position: center 48%; }
  html.splash-active #app-splash .splash-masthead { top: 45%; width: min(50vw, 480px); }
  #app-splash .splash-crest { width: min(36vw, 320px); }
  #app-splash .home-wordmark { font-size: clamp(2.2rem, 5vw, 3.5rem); }
  #app-splash .splash-actions { width: min(36vw, 390px); bottom: max(4svh, 22px); }
}
@media (prefers-reduced-motion: reduce) {
  html.splash-active #app-splash,
  html.splash-active #app-splash .splash-masthead,
  html.splash-active #app-splash .splash-actions,
  html.splash-active #app-splash .splash-sound,
  html.splash-active #app-splash .splash-status { transition: none; }
  #app.app-arrive { animation: none; }
  html.splash-active #app-splash * { animation: none !important; }
}