/* Boot screen (src/ui/boot-screen.js). Plain dark, on top of everything
   until the game is ready; pointer-events off as soon as it fades.
   Constant on-screen size: html's desktop zoom (--ui-zoom, ≥901px) changes
   during the boot (first-paint formula, then the saved / physical-width
   one), so every length here is divided by --boot-k, which follows
   --ui-zoom where that zoom applies and is 1 elsewhere. */
#bootScreen{
  --boot-k: 1;
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, hsl(38 18% 9%) 0%, hsl(38 16% 4%) 70%);
  color: var(--c-text, #ebe6dc);
  opacity: 1; transition: opacity .4s ease;
}
@media (min-width: 901px){ #bootScreen{ --boot-k: var(--ui-zoom, 1); } }
#bootScreen.bootOut{ opacity: 0; pointer-events: none; }
.bootInner{ display: flex; flex-direction: column; align-items: center; gap: calc(10px / var(--boot-k)); padding: 0 16px; text-align: center; }
.bootLogo{
  width: calc(150px / var(--boot-k)); height: calc(150px / var(--boot-k)); object-fit: contain;
  animation: bootBreathe 2.4s ease-in-out infinite;
  -webkit-user-drag: none; user-select: none;
}
@keyframes bootBreathe{
  0%, 100%{ filter: drop-shadow(0 0 12px hsl(38 60% 55% / .15)) drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
  50%{ filter: drop-shadow(0 0 26px hsl(38 60% 60% / .4)) drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
}
.bootName{ font: 700 calc(42px / var(--boot-k))/1 var(--f-display, 'Fraunces', serif); letter-spacing: -.01em; margin-top: calc(6px / var(--boot-k)); }
.bootName .bootDot{ color: var(--accent, #c8a24d); }
.bootTagline{ font: 500 calc(15px / var(--boot-k))/1.3 var(--f-body, 'Instrument Sans', sans-serif); color: var(--c-dim, #aca595); letter-spacing: .02em; }
.bootBar{ width: calc(240px / var(--boot-k)); max-width: 60vw; height: calc(3px / var(--boot-k)); margin-top: calc(18px / var(--boot-k)); border-radius: 3px; background: hsl(38 20% 90% / .1); overflow: hidden; }
.bootBarFill{ width: 100%; height: 100%; background: var(--accent, #c8a24d); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.bootMsg{ display: none; flex-direction: column; align-items: center; gap: calc(12px / var(--boot-k)); margin-top: calc(14px / var(--boot-k)); }
.bootMsg p{ margin: 0; color: var(--c-text, #ebe6dc); font-size: calc(15px / var(--boot-k)); }
#bootScreen .bootMsg button{ font-size: calc(15px / var(--boot-k)); min-height: calc(52px / var(--boot-k)); padding: 0 calc(20px / var(--boot-k)); }
#bootScreen.bootBlocked .bootMsg{ display: flex; }
#bootScreen.bootBlocked .bootBar{ display: none; }
#bootScreen.bootBlocked .bootLogo{ animation: none; }
@media (max-width: 720px){
  .bootLogo{ width: 110px; height: 110px; }
  .bootName{ font-size: 34px; }
}