.intro {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: grid; place-items: center; font-family: var(--font-osd); color: var(--paper);
}
.intro-disc, .intro-osd, .intro-warning { grid-area: 1 / 1; }
.intro-disc {
  width: min(52vmin, 280px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#ddd, #6a6a8a, #f4f4ff, #55556f, #ddd, #8a8aa8, #f4f4ff, #6a6a8a, #ddd);
  -webkit-mask: radial-gradient(circle, transparent 7%, #000 8%);
  mask: radial-gradient(circle, transparent 7%, #000 8%);
  animation: intro-spin 0.9s linear infinite;
}
.intro-osd {
  align-self: end; margin-bottom: 12vh; font-size: 2rem; letter-spacing: 0.1em;
  color: var(--yellow); text-shadow: var(--glow);
}
.intro-warning {
  display: none; max-width: min(34rem, 88vw); padding: 1.5rem;
  border: 4px solid var(--paper); text-align: center; font-size: 1.5rem; line-height: 1.3;
}
.intro-warning-title { font-family: var(--font-title); font-size: 2.6rem; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.intro-warning-line + .intro-warning-line { margin-top: 0.6rem; }
.intro.is-warning { background: var(--blue); }
.intro.is-warning .intro-disc, .intro.is-warning .intro-osd { display: none; }
.intro.is-warning .intro-warning { display: block; }
@keyframes intro-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .intro-disc { animation: none; } }