/* Fablepaws loading screen (branding handoff 2026-10-17). Linked first so it paints while the game loads.
   Logo, progress and tips are real UI over the art; the art keeps its aspect ratio (never stretched). */
@font-face { font-family: 'Lilita One'; src: url("../assets/fonts/LilitaOne-Regular.woff2") format("woff2"); font-display: swap; }
.boot {
  --gold: #FFD166; --cyan: #3EC4FF; --navy: #0E2A3A;
  position: fixed; inset: 0; z-index: 100; overflow: hidden; isolation: isolate; color: #f6ecd6;
  background: linear-gradient(180deg, #110a2c 0%, #331a5e 24%, #6f2a8a 46%, #3a1f3a 72%, var(--navy) 100%);
  transition: opacity .45s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.boot.done { opacity: 0; pointer-events: none; }
/* TEMPORARY art: a crop of the concept board (assets/brand/SS_loading-bg-temp.jpg) until a clean 1080×1920 piece exists */
.boot-art {
  position: absolute; z-index: -1; left: 50%; translate: -50% 0; width: min(100%, 560px); aspect-ratio: 554 / 672;
  bottom: calc(62px + env(safe-area-inset-bottom));
  background: url("../assets/brand/SS_loading-bg-temp.jpg") center / cover no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
}
.boot::after { content: ''; position: absolute; inset: auto 0 0; height: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(14, 42, 58, .55) 45%, rgba(10, 24, 34, .92)); }
.fp-logo { position: relative; aspect-ratio: 1300 / 676; }   /* brand logo, also used on Home */
.boot-logo {
  position: absolute; left: 50%; translate: -50% 0; top: calc(max(10px, env(safe-area-inset-top)) + 3dvh);
  width: min(96%, 480px); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
  animation: bootLogo .7s cubic-bezier(.215, .61, .355, 1) both;
}
@keyframes bootLogo { from { opacity: 0; scale: .92; } }
/* the artist's full logo (art-originals/fablepaws/logo-full.png) as a JPEG colour plate cut out by a PNG alpha
   mask: ~330 KB instead of a ~1.7 MB transparent PNG on the very first screen. The mask sits on a pseudo-element
   so the parent's drop shadow is not masked away. */
.fp-logo::before { content: ''; position: absolute; inset: 0;
  background: url("../assets/brand/logo-full-color.jpg") center / 100% 100% no-repeat;
  -webkit-mask: url("../assets/brand/logo-full-mask.png") center / 100% 100% no-repeat;
  mask: url("../assets/brand/logo-full-mask.png") center / 100% 100% no-repeat; }
.boot-bottom {
  position: absolute; left: 50%; translate: -50% 0; bottom: 0; width: min(100%, 460px);
  padding: 0 max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.boot-bar {
  --p: 0; position: relative; width: 100%; height: 24px; border-radius: 12px; padding: 3px;
  background: linear-gradient(180deg, #071820, #0d2733); border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px rgba(58, 26, 6, .9), 0 0 16px rgba(255, 209, 102, .35), inset 0 2px 4px rgba(0, 0, 0, .7);
}
.boot-bar > i {
  display: block; height: 100%; width: calc(var(--p) * 1%); min-width: 0; border-radius: 9px; transition: width .35s ease-out;
  background: linear-gradient(180deg, #b6eeff 0%, var(--cyan) 45%, #1677d2 100%); box-shadow: 0 0 10px rgba(62, 196, 255, .8);
}
.boot.ready .boot-bar > i { background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, #f39c12); box-shadow: 0 0 12px rgba(255, 209, 102, .9); }
/* before the scripts run there is no number yet: a soft shimmer instead of a fake percentage */
.boot:not(.live) .boot-bar::before {
  content: ''; position: absolute; inset: 3px; border-radius: 9px;
  background: linear-gradient(90deg, transparent, rgba(62, 196, 255, .45), transparent) 0 0 / 40% 100% no-repeat;
  animation: bootShimmer 1.3s linear infinite;
}
@keyframes bootShimmer { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.boot-bar > b { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font: 14px/1 'Lilita One', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .02em; }
.boot-paw {
  position: absolute; top: -26px; left: calc(3px + (100% - 6px) * var(--p) / 100); translate: -50% 0; width: 26px; height: 26px;
  transition: left .35s ease-out; opacity: 0;
}
.boot.live .boot-paw { opacity: 1; animation: bootPaw .9s ease-in-out infinite; }
.boot-paw svg { width: 100%; height: 100%; fill: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 170, 40, .95)) drop-shadow(0 1px 1px #3a1a06); }
@keyframes bootPaw { 50% { translate: -50% -3px; } }
.boot-stage { font-size: 11px; color: rgba(246, 236, 214, .6); min-height: 14px; letter-spacing: .02em; }
.boot-tip {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; max-width: 360px;
  font: 600 13.5px/1.35 Georgia, "Times New Roman", serif; text-align: center; text-shadow: 0 1px 3px #000; transition: opacity .3s;
}
.boot-tip.swap { opacity: 0; }
.boot-tip svg { flex: none; width: 26px; height: 26px; fill: rgba(255, 209, 102, .18); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
@media (max-height: 680px) { .boot-logo { width: min(80%, 380px); } .boot-tip { font-size: 12.5px; min-height: 34px; } }
@media (prefers-reduced-motion: reduce) { .boot-logo, .boot-paw, .boot:not(.live) .boot-bar::before { animation: none !important; } }