.round-intro-scene {
  position: absolute;
  left: 54px;
  top: 280px;
  width: 972px;
  height: 778px;
  overflow: hidden;
}

.round-intro-orbit,
.round-intro-orbit::before,
.round-intro-orbit::after {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.round-intro-orbit {
  left: 250px;
  top: 70px;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(38, 231, 255, .2);
  box-shadow: 0 0 80px rgba(38, 131, 255, .1);
  opacity: .5;
}

.round-intro-orbit::before {
  content: "";
  inset: 56px;
  border: 1px solid rgba(255, 212, 91, .16);
}

.round-intro-orbit::after {
  content: "";
  inset: 130px;
  background: radial-gradient(circle, rgba(38, 231, 255, .13), transparent 66%);
}

.round-intro-label {
  position: absolute;
  left: 0;
  top: 24px;
  width: 972px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyan);
  font-size: 46px;
  font-weight: 950;
  letter-spacing: .13em;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 420ms ease, transform 560ms var(--ease-enter);
}

.round-intro-title-panel {
  position: absolute;
  left: 0;
  top: 118px;
  width: 972px;
  height: 184px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 52px;
  border: 2px solid rgba(38, 231, 255, .43);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0, rgba(38, 231, 255, .15), transparent 54%),
    linear-gradient(145deg, rgba(12, 31, 69, .98), rgba(6, 11, 28, .99));
  box-shadow: var(--shadow-cyan), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  opacity: 0;
  transform: scale(.95);
  transition: opacity 460ms ease 100ms, transform 680ms var(--ease-impact) 100ms;
}

.round-intro-title-panel::before {
  content: "";
  position: absolute;
  left: -30%;
  top: 0;
  width: 28%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-14deg);
}

.round-intro-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-white);
  font-size: 86px;
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
}

.round-intro-category-panel {
  position: absolute;
  left: 0;
  top: 322px;
  width: 972px;
  height: 218px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  align-items: center;
  padding: 26px 34px;
  border: 2px solid rgba(255, 212, 91, .3);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(39, 30, 17, .94), rgba(9, 15, 34, .98));
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.04);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 440ms ease 280ms, transform 620ms var(--ease-enter) 280ms;
}

.round-intro-mode-icon {
  width: 156px;
  height: 156px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 2px solid rgba(255, 212, 91, .55);
  border-radius: 38px;
  background: radial-gradient(circle, rgba(255, 212, 91, .16), rgba(255, 212, 91, .025));
  color: var(--color-gold);
  font-size: 66px;
  font-weight: 950;
  box-shadow: inset 0 0 24px rgba(255, 212, 91, .08);
}

.round-intro-category-copy {
  min-width: 0;
  padding-left: 14px;
}

.round-intro-category-copy span {
  display: block;
  color: var(--color-muted);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .1em;
}

.round-intro-category-copy strong {
  display: block;
  margin-top: 12px;
  color: var(--color-gold);
  font-size: 52px;
  font-weight: 950;
  line-height: 1.02;
  text-wrap: balance;
}

.round-intro-category-copy small {
  display: block;
  margin-top: 14px;
  color: var(--color-white);
  font-size: 28px;
  font-weight: 750;
  line-height: 1.1;
}

.round-intro-rules-panel {
  position: absolute;
  left: 0;
  top: 560px;
  width: 972px;
  height: 192px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 400ms ease 480ms, transform 560ms var(--ease-enter) 480ms;
}

.round-intro-rule {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 18px;
  border: 2px solid rgba(123, 191, 255, .22);
  border-radius: 24px;
  background: rgba(8, 17, 39, .92);
  text-align: center;
}

.round-intro-rule span {
  color: var(--color-muted);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .085em;
}

.round-intro-rule strong {
  display: block;
  margin-top: 12px;
  color: var(--color-white);
  font-size: 30px;
  font-weight: 950;
  line-height: 1.05;
}

.round-intro-scene.is-visible .round-intro-label,
.round-intro-scene.is-visible .round-intro-title-panel,
.round-intro-scene.is-visible .round-intro-category-panel,
.round-intro-scene.is-visible .round-intro-rules-panel {
  opacity: 1;
  transform: none;
}

.round-intro-scene.is-visible .round-intro-title-panel::before {
  animation: round-title-sweep 1050ms var(--ease-enter) 500ms forwards;
}

.round-intro-scene.is-holding .round-intro-title-panel {
  box-shadow: 0 0 28px rgba(38, 231, 255, .24), 0 0 76px rgba(38, 131, 255, .1);
}

.round-intro-scene.is-exiting > * {
  opacity: 0 !important;
  transform: translateY(-24px) !important;
  transition-delay: 0ms !important;
}

.round-intro-scene.mode-category .round-intro-label { color: var(--color-gold); }
.round-intro-scene.mode-category .round-intro-title-panel { border-color: rgba(255, 212, 91, .46); box-shadow: var(--shadow-gold); }
.round-intro-scene.mode-rules .round-intro-title { font-size: 72px; }

@keyframes round-title-sweep {
  to { left: 118%; }
}

.reduced-motion .round-intro-scene * {
  animation: none !important;
  transition: none !important;
}