/* Transición de carga en pixel art: bloques que cubren la pantalla, panel de carga y bloques que descubren. */
.pxt {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
.pxt canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pxt.is-static { background: #04041a; }
.pxt.is-static canvas { display: none; }

.pxt-panel {
  position: relative;
  box-sizing: border-box;
  width: min(360px, calc(100% - 32px));
  padding: 26px 26px 22px;
  text-align: center;
  visibility: hidden;
  background: rgba(5, 5, 36, 0.96);
}
.pxt.show-panel .pxt-panel {
  visibility: visible;
  animation: pxt-pop 0.35s steps(5) both;
}

.pxt-sprite {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  color: #c9b8ff;
}
.pxt-sprite span {
  position: absolute;
  inset: 0;
  display: grid !important;
  place-items: center;
}
.pxt-sprite .f1 { animation: pxt-a 0.6s steps(1) infinite; }
.pxt-sprite .f2 { animation: pxt-b 0.6s steps(1) infinite; color: #ff7ab6; }

.pxt-title {
  margin: 14px 0 4px;
  font: 700 1.6rem / 1 'Pixelify Sans', 'Courier New', monospace;
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
}
.pxt-dots span { animation: pxt-dot 1.2s steps(1) infinite; }
.pxt-dots span:nth-child(2) { animation-delay: 0.3s; }
.pxt-dots span:nth-child(3) { animation-delay: 0.6s; }

.pxt-sub {
  margin: 0 0 18px;
  font: 400 0.78rem / 1.3 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: #9a95d6;
  text-transform: uppercase;
}

.pxt-bar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 5px;
  border: 2px solid #3d3fe0;
  background: #05052b;
}
.pxt-bar i { height: 14px; background: #14145f; }
.pxt-bar i.on { background: linear-gradient(180deg, #a68bff, #6a3df0); }

.pxt-pct {
  margin: 12px 0 0;
  font: 400 0.8rem / 1 'Silkscreen', 'Courier New', monospace;
  letter-spacing: 0.2em;
  color: #b9b2ff;
}

@keyframes pxt-pop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pxt-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pxt-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pxt-dot { 0%, 24% { opacity: 0.15; } 25%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pxt *, .pxt *::before, .pxt *::after { animation: none !important; }
}