/* GO QUEST 冒頭。大会版の文字の加速・シアンの光跡を継承。既存画面のスタイルは変更しない。 */
html.is-intro, html.is-intro body { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: radial-gradient(120% 65% at 100% 0, rgba(38,120,150,.22), transparent 62%), var(--bg);
  color: var(--ink);
}
.intro:focus { outline: none; }
.intro__in { position: relative; max-width: 480px; height: 100%; margin: auto; }
.intro__head {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 20px; right: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.intro__logo { display: block; width: 120px; height: auto; mix-blend-mode: lighten; }
.intro__skip, .intro__start {
  min-height: 44px; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 18px; background: var(--bg); color: var(--ink); cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  touch-action: manipulation;
}
.intro__skip:focus-visible, .intro__start:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; }
.intro__skip { position: relative; z-index: 3; }
.intro__content {
  position: absolute; inset: 0; display: grid; align-content: center;
  padding: calc(82px + env(safe-area-inset-top)) 28px calc(110px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
}
.intro__scene { margin: 0; }
.intro__line { display: block; }
.intro__char { display: inline-block; }
.intro__title, .intro__body, .intro__invitation {
  margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: 0;
}
.intro__title { font-size: clamp(29px, calc((100vw - 56px) / 8.4), 49px); line-height: 1.45; }
.intro__title .intro__line:last-child { color: var(--ac); }
.intro__body { font-size: clamp(19px, calc((100vw - 56px) / 12.5), 27px); line-height: 1.85; }
.intro__body .intro__line:nth-child(3) { margin-top: 24px; }
.intro__body .intro__line:nth-child(n+3) { color: var(--ac); }
.intro__lead { margin: 0 0 22px; font-size: clamp(14px, 4vw, 18px); color: var(--mute); }
.intro__invitation { font-size: clamp(21px, calc((100vw - 56px) / 12.2), 33px); line-height: 1.65; }
.intro__invitation .intro__line:last-child { color: var(--ac); }
.intro__foot { position: absolute; z-index: 3; bottom: calc(28px + env(safe-area-inset-bottom)); left: 28px; right: 28px; }
.intro__start { display: block; margin-left: auto; min-width: 112px; border-color: var(--ac); color: var(--ac); }
.intro__track { height: 2px; margin-top: 22px; background: var(--hair); overflow: hidden; }
.intro__progress { display: block; height: 100%; background: var(--ac); transform-origin: left; }
.intro__fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.intro__streak { position: absolute; border-radius: 4px; transform-origin: left; opacity: 0; background: linear-gradient(90deg, transparent, var(--ac)); }
.intro__streak.is-white { background: linear-gradient(90deg, transparent, #fff); }
.intro.is-static .intro__content { display: block; }
.intro.is-static .intro__scene + .intro__scene { margin-top: 30px; }
.intro.is-static .intro__title { font-size: clamp(25px, 7.5vw, 34px); }
.intro.is-static .intro__body { font-size: clamp(17px, 4.7vw, 22px); }
.intro.is-static .intro__body .intro__line:nth-child(3) { margin-top: 14px; }
.intro.is-static .intro__invitation { font-size: clamp(19px, 5.3vw, 25px); }
.intro.is-static .intro__lead { margin-bottom: 12px; }
.intro.is-static .intro__track { visibility: hidden; }
@media (max-height: 560px) {
  .intro__content { align-content: start; padding-top: 78px; }
  .intro__body { font-size: 21px; }
}
@media (max-width: 280px) {
  .intro__head { left: 12px; right: 12px; gap: 8px; }
  .intro__logo { width: 70px; }
  .intro__skip { padding-inline: 12px; }
  .intro__content { padding-inline: 16px; }
}