.nwp-start { background: #000; }
.nwp-bd {
  position: absolute; inset: -2%; z-index: 0; background: #000 center / cover no-repeat;
  transform-origin: 58% 42%; will-change: transform;
  animation: nwp-bd-in 1.1s var(--ease) both, nwp-kb 24s ease-in-out 0.2s infinite alternate;
}
@keyframes nwp-bd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nwp-kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.nwp-start::before {
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 65% at 50% 46%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.62) 62%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 22%, transparent 55%, rgba(0, 0, 0, 0.85));
}
.nwp-start-inner { z-index: 2; gap: 6px; }
.nwp-start-back { position: absolute; z-index: 3; top: 20px; left: clamp(16px, 2.4vw, 36px); }
.nwp-start-back svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); }

.nwp-stage { position: relative; width: 84px; height: 84px; margin-bottom: 20px; display: grid; place-items: center; }
.nwp-stage > * { grid-area: 1 / 1; }
.nwp-spin {
  position: relative; width: 84px; height: 84px; display: grid; place-items: center;
  opacity: 0; transform: scale(0.82); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.nwp-spin::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: radial-gradient(circle, rgba(4, 10, 20, 0.72) 55%, rgba(4, 10, 20, 0.45)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nwp-spin svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: rot 1.1s linear infinite; filter: drop-shadow(0 0 6px rgba(30, 144, 255, 0.55)); }
.nwp-spin circle { fill: none; stroke-width: 3; }
.nwp-spin .trk { stroke: rgba(255, 255, 255, 0.1); }
.nwp-spin .arc { stroke: url(#nwp-arc); stroke-linecap: round; stroke-dasharray: 70 185; transform-origin: 42px 42px; animation: nwp-arc 1.8s ease-in-out infinite; }
@keyframes nwp-arc { 0% { stroke-dasharray: 18 237; stroke-dashoffset: 0; } 50% { stroke-dasharray: 120 135; stroke-dashoffset: -40; } 100% { stroke-dasharray: 18 237; stroke-dashoffset: -254; } }
.nwp-spin img { width: 44px; height: 44px; object-fit: contain; animation: nwp-logo 1.8s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(30, 144, 255, 0.45)); }
@keyframes nwp-logo { 0%, 100% { opacity: 0.72; transform: scale(0.93); } 50% { opacity: 1; transform: scale(1); } }
.nwp.is-loading .nwp-spin { opacity: 1; transform: none; }

.nwp-start .nwp-bigplay { margin: 0; opacity: 0; transform: scale(0.8); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.2s; }
.nwp.is-loading .nwp-bigplay { background: #fff; }
.nwp.is-loading .nwp-bigplay svg { opacity: 1; }
.nwp.is-ready:not(.is-loading) .nwp-bigplay { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.08s; }
.nwp.is-ready:not(.is-loading) .nwp-bigplay:hover { transform: scale(1.08); transition-delay: 0s; }

.nwp-start-title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.nwp-status {
  min-height: 20px; margin-top: 12px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 38%, #fff 47%, #bfe0ff 52%, rgba(255, 255, 255, 0.5) 62%, rgba(255, 255, 255, 0.5) 100%);
  background-size: 250% 100%; animation: nwp-shine 2.4s linear infinite;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.nwp.has-status .nwp-status { opacity: 1; }
.nwp:not(.is-loading) .nwp-status { animation: none; background-position: 100% 0; }
@keyframes nwp-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.nwp-status.dots::after { content: "..."; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: nwp-dots 1.4s steps(4, jump-none) infinite; }
@keyframes nwp-dots { from { width: 0; } to { width: 0.9em; } }

.nwp.ui-off .nwp-ui .nwp-top [data-act="close"] { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .nwp-bd { animation: nwp-bd-in 0.4s linear both; }
  .nwp-spin img, .nwp-status { animation: none; }
  .nwp-spin svg { animation-duration: 2s; }
  .nwp-spin .arc { animation: none; }
}

.nwp-start .nwp-bd, .nwp-start::before, .nwp-start-title { display: none; }
.nwp-stage, .nwp-spin { width: 74px; height: 74px; }
.nwp-spin::before, .nwp-spin img { display: none; }
.nwp-spin svg { filter: none; animation: rot 0.9s linear infinite; }
.nwp-spin circle { stroke-width: 3.2; }
.nwp-spin .trk { stroke: rgba(255, 255, 255, 0.08); }
.nwp-spin .arc { stroke: #1e90ff; animation: none; stroke-dasharray: 62 193; stroke-dashoffset: 0; }
.nwp-status { color: rgba(255, 255, 255, 0.55); background: none; -webkit-background-clip: border-box; background-clip: border-box; font-weight: 500; font-size: 13px; animation: none; opacity: 0; }
.nwp.has-status.is-loading .nwp-status { animation: nwp-late 0.5s ease 8s both; }
.nwp.has-status:not(.is-loading) .nwp-status { opacity: 1; }
@keyframes nwp-late { from { opacity: 0; } to { opacity: 1; } }

.nwp-start-inner { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; transform: none; }
.nwp-stage { margin: 0; }
.nwp-start-sub { display: none; }
.nwp-status { position: absolute; left: 0; right: 0; top: calc(50% + 58px); margin: 0; text-align: center; }
.nwp-wait span { width: 74px; height: 74px; border: 3.2px solid rgba(255, 255, 255, 0.08); border-top-color: #1e90ff; animation: rot 0.9s linear infinite; }