/* ══════════════════════════════════════════════════════════════════════
   PIXEL UP! · PERF layer styles (UX lane 6) — pairs with assets/ux/perf.js
   · .pf-boot   the "warming up the cabinet" skeleton that sits inside
                <main id="main"> until route() paints the first view
   · .pf-wait   the cabinet panel while the word list downloads
   · .pf-ph     the one-node stand-in ART.coverLazy() returns for a cover
                that is not on screen yet (fills the same box the svg would)
   Uses the arcade tokens from arcade.css; falls back to literals if this
   file is ever loaded before it.
   ══════════════════════════════════════════════════════════════════ */

/* ── boot skeleton ── */
.pf-boot{max-width:var(--rail,1420px);margin:0 auto;padding:28px var(--gut,20px) 40px}
.pf-boot-hd{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-weight:900;
  font-size:clamp(17px,2.2vw,23px);letter-spacing:-.02em;color:var(--txt,#f4ecff)}
.pf-boot-hd .coin{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sun,#ffd21f);
  border:3px solid var(--ink,#0b0710);box-shadow:var(--pop-0,2px 2px 0 #0b0710);
  animation:pf-spin 1.1s steps(8) infinite}
.pf-boot-hd .dots i{animation:pf-blink 1.2s infinite;font-style:normal}
.pf-boot-hd .dots i:nth-child(2){animation-delay:.2s}
.pf-boot-hd .dots i:nth-child(3){animation-delay:.4s}
.pf-boot-hd small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--dim,#8f7cae);text-transform:uppercase}
.pf-boot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.pf-boot-grid i{display:block;aspect-ratio:1;border-radius:16px;border:3px solid var(--ink,#0b0710);
  box-shadow:var(--pop-1,4px 4px 0 #0b0710);
  background:linear-gradient(100deg,var(--panel,#1c1330) 30%,var(--panel-2,#241838) 50%,var(--panel,#1c1330) 70%) 0 0/300% 100%;
  animation:pf-sheen 1.4s linear infinite}
.pf-boot-grid i:nth-child(1){grid-column:span 2;grid-row:span 2}
.pf-boot-grid i:nth-child(2n){animation-delay:.12s}
.pf-boot-grid i:nth-child(3n){animation-delay:.24s}

/* ── cabinet: word list on its way ── */
.pf-wait{position:absolute;inset:10px;z-index:6;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:22px;border-radius:10px;
  background:rgba(11,7,16,.94);color:var(--txt,#f4ecff)}
.pf-wait b{font-size:clamp(18px,3.4vw,28px);font-weight:900;letter-spacing:-.02em;color:var(--sun,#ffd21f)}
.pf-wait b .dots{font-style:normal}
.pf-wait b .dots i{font-style:normal;animation:pf-blink 1.2s infinite}
.pf-wait b .dots i:nth-child(2){animation-delay:.2s}
.pf-wait b .dots i:nth-child(3){animation-delay:.4s}
.pf-wait span{color:var(--txt-2,#bda9d8);font-weight:700;font-size:13px}
.pf-wait .bar{display:block;width:min(260px,70%);height:12px;border-radius:7px;border:3px solid var(--ink,#0b0710);
  background:linear-gradient(90deg,var(--cool,#22e3ff) 0 30%,var(--ink-2,#171024) 30%) 0 0/200% 100%;
  box-shadow:var(--pop-0,2px 2px 0 #0b0710);animation:pf-load 1s linear infinite}
.pf-wait.fail b{color:var(--hot,#ff2d78)}

/* ── lazy cover stand-in: same box the svg fills ── */
.pf-ph{display:block;width:100%;height:100%;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px),var(--ink-2,#171024)}

@keyframes pf-sheen{to{background-position:-300% 0}}
@keyframes pf-load{to{background-position:-200% 0}}
@keyframes pf-blink{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes pf-spin{to{transform:rotateY(360deg)}}

@media (prefers-reduced-motion: reduce){
  .pf-boot-grid i,.pf-wait .bar,.pf-boot-hd .coin,.pf-boot-hd .dots i,.pf-wait b .dots i{animation:none}
}