/* Arcade boot screen — shown once per browser session (see /js/loader.js). Add ?noload to any URL to skip it. */
html.vf-loading, html.vf-loading body { overflow: hidden; }
.vf-loader {
  position: fixed; inset: 0; z-index: 100000; overflow: hidden; display: grid; place-items: center;
  background: #05010b; color: #fff; font-family: 'Orbitron', 'Rajdhani', system-ui, sans-serif; font-weight: 700;
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
}
.vf-loader.out { opacity: 0; transform: scale(1.14); filter: blur(7px) brightness(1.6); pointer-events: none; }
/* CRT scanlines + vignette + flicker, all on top of the scene */
.vf-loader::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .3) 2px 4px),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .8) 100%);
  animation: vflflick 3.4s infinite;
}
@keyframes vflflick { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .82; } 50% { opacity: 1; } 83% { opacity: .9; } 84% { opacity: 1; } }

.vfl-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #05010b 0%, #16042f 40%, #4d0f5c 62%, #b8185f 80%, #ff7a3c 100%); }
.vfl-stars { position: absolute; inset: 0 0 45% 0; opacity: .85;
  background-image: radial-gradient(1.5px 1.5px at 24px 40px, #fff, transparent), radial-gradient(1px 1px at 110px 80px, #ffe, transparent), radial-gradient(1.5px 1.5px at 170px 18px, #fcf, transparent), radial-gradient(1px 1px at 60px 110px, #fff, transparent);
  background-size: 230px 140px; animation: vfltw 2.2s ease-in-out infinite alternate; }
@keyframes vfltw { from { opacity: .35; } to { opacity: 1; } }
.vfl-sun { position: absolute; left: 50%; bottom: 25%; width: min(52vw, 460px); aspect-ratio: 1; transform: translateX(-50%); filter: drop-shadow(0 0 70px rgba(255, 45, 149, .75)); animation: vflsun 3s ease-in-out infinite alternate; }
@keyframes vflsun { from { transform: translateX(-50%) translateY(10px); } to { transform: translateX(-50%) translateY(-6px); } }
.vfl-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; perspective: 300px; overflow: hidden; background: linear-gradient(#1c0733, #05010b); }
.vfl-floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #ff2d95; box-shadow: 0 0 34px 8px #ff2d95; z-index: 2; }
.vfl-plane { position: absolute; left: -60%; width: 220%; top: 0; height: 240%; transform-origin: 50% 0; transform: rotateX(72deg);
  background-image: linear-gradient(rgba(255, 45, 149, .95) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 45, 149, .95) 2px, transparent 2px);
  background-size: 64px 64px; animation: vflgrid .7s linear infinite; }
@keyframes vflgrid { to { background-position: 0 64px; } }

/* hud removed */ .vfl-hud-off { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: space-between; gap: 12px; padding: 20px 26px; font-size: clamp(8px, 1.6vw, 12px); color: #2be4ff; text-shadow: 0 0 10px #2be4ff; }
.vfl-hud b { color: #fff; font-weight: 400; text-shadow: 0 0 10px #ff2d95; }
.vfl-hud .hi { color: #ffa23a; text-shadow: 0 0 10px #ffa23a; }

.vfl-center { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; text-align: center; width: 100%; }
.vfl-logo { width: min(460px, 76vw); aspect-ratio: 512 / 224; object-fit: cover; height: auto; filter: drop-shadow(0 0 28px rgba(255, 45, 149, .8)); animation: vflpulse 1.4s ease-in-out infinite alternate; }
@keyframes vflpulse { from { transform: scale(.97); filter: drop-shadow(0 0 16px rgba(255, 45, 149, .6)); } to { transform: scale(1.03); filter: drop-shadow(0 0 40px rgba(255, 45, 149, 1)); } }
.vfl-coin { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b8, #ffb23e 45%, #ff2d95 100%); box-shadow: 0 0 26px #ffb23e, inset 0 0 0 4px rgba(255, 255, 255, .25); animation: vflcoin 1s linear infinite; }
@keyframes vflcoin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.1); } }
.vfl-title { position: relative; font-size: clamp(18px, 3vw, 28px); letter-spacing: .3em; text-shadow: 0 0 10px #ff2d95, 0 0 34px #ff2d95; }
.vfl-title::before, .vfl-title::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.vfl-title::before { color: #2be4ff; text-shadow: none; transform: translate(-3px, 0); clip-path: inset(0 0 55% 0); animation: vflg1 2.4s steps(1) infinite; mix-blend-mode: screen; }
.vfl-title::after { color: #ffa23a; text-shadow: none; transform: translate(3px, 0); clip-path: inset(55% 0 0 0); animation: vflg2 2.4s steps(1) infinite; mix-blend-mode: screen; }
@keyframes vflg1 { 0%, 90%, 100% { transform: translate(0); } 92% { transform: translate(-6px, 1px); } 95% { transform: translate(5px, -1px); } }
@keyframes vflg2 { 0%, 85%, 100% { transform: translate(0); } 87% { transform: translate(6px, -1px); } 93% { transform: translate(-5px, 1px); } }

.vfl-bar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; width: min(540px, 82vw); padding: 8px; background: #0a0214; border: 3px solid #ff2d95; box-shadow: 0 0 26px #ff2d95, inset 0 0 20px rgba(255, 45, 149, .35); }
.vfl-bar i { height: 22px; background: #2a0b3d; }
.vfl-bar i.on { background: var(--c); box-shadow: 0 0 12px var(--c); }
.vfl-row { display: flex; justify-content: space-between; gap: 14px; width: min(540px, 82vw); font-size: clamp(11px, 1.5vw, 13px); letter-spacing: .12em; color: #cdbbff; }
.vfl-pct { color: #fff; text-shadow: 0 0 10px #ff2d95; }
.vfl-press { font-size: clamp(13px, 2.6vw, 22px); color: #2be4ff; text-shadow: 0 0 16px #2be4ff; letter-spacing: .1em; opacity: 0; height: 1.4em; }
.vf-loader.done .vfl-press { opacity: 1; animation: vflblink .6s steps(2) infinite; }
.vf-loader.done .vfl-row { opacity: .45; }
@keyframes vflblink { 50% { opacity: 0; } }
.vfl-skip { position: absolute; z-index: 4; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .08em; }

@media (max-width: 520px) { .vfl-hud span:nth-child(2) { display: none; } .vfl-bar i { height: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .vf-loader *, .vf-loader::after { animation: none !important; }
  .vf-loader { transition: opacity .2s ease; }
}

/* calm pass: simple dark loader, no sunset or grid */
.vfl-sky, .vfl-stars, .vfl-sun, .vfl-floor, .vfl-coin { display: none; }
.vf-loader { background: #0b0814; }
.vf-loader::after { display: none; }
.vf-loader.out { transform: none; filter: none; }
.vfl-logo { animation: none; filter: none; }
.vfl-title { font-size: 13px; letter-spacing: .35em; text-shadow: none; color: var(--muted, #a9a3bd); }
.vfl-title::before, .vfl-title::after { display: none; }
.vfl-bar { width: min(320px, 70vw); padding: 0; gap: 0; display: block; height: 4px; border: 0; background: rgba(255, 255, 255, .1); box-shadow: none; position: relative; }
.vfl-bar i { display: none; }
.vfl-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, #ff8a3d, #ff2d95, #7b3cff); }
.vfl-row { width: min(320px, 70vw); }
.vfl-pct { text-shadow: none; }
.vfl-skip { display: none; }