.intro-scene {
      position: absolute;
      left: 0;
      top: 0;
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      background: #000;
      user-select: none;
      cursor: pointer;
    }

    .intro-camera {
      position: absolute;
      inset: 0;
      z-index: 1;
      transition: filter 0.7s ease, transform 0.7s ease, opacity 0.7s ease;
    }

    .intro-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      z-index: 1;
      background: #000;

      /* 원본 영상 선명도 유지 */
      filter: none;
      opacity: 1;
      transform: none;
      image-rendering: auto;
    }

    .intro-vignette {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at center, transparent 44%, rgba(0,0,0,0.14) 100%),
        linear-gradient(to top, rgba(0,0,0,0.22), rgba(0,0,0,0.02));
      pointer-events: none;
      z-index: 2;
    }

    .intro-sunset {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(255,181,111,0.035) 0%,
        rgba(255,165,85,0.025) 35%,
        rgba(0,0,0,0.035) 100%
      );
      pointer-events: none;
      z-index: 3;
      transition: opacity 0.6s ease;
    }

    .intro-noise {
      /*
       * 3px/4px 격자 패턴은 게임 화면이 소수 배율로 축소될 때
       * 모아레와 계단 현상을 만들어 영상이 흐릿해 보일 수 있으므로 제거합니다.
       */
      display: none;
    }

#tablet-light {
  position: absolute;
  left: 60.7%;
  top: 73.8%;
  width: 9.2%;
  height: 5.1%;
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
  z-index: 45;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.45s ease;
}

#tablet-light.tablet-light-on {
  opacity: 1;
}

.tablet-screen-glow {
  display: none;
}

.tablet-arm-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  height: 220%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: radial-gradient(
    ellipse at center,
    rgba(120, 215, 255, 0.42) 0%,
    rgba(90, 190, 255, 0.22) 28%,
    rgba(70, 150, 255, 0.10) 48%,
    rgba(0, 0, 0, 0) 78%
  );
  filter: blur(18px);
}


    .intro-board-glitch {
      position: absolute;
      top: 22%;
      left: 27%;
      width: 24%;
      height: 18%;
      opacity: 0;
      pointer-events: none;
      transform: skewX(-6deg);
      background:
        linear-gradient(transparent 0 16%, rgba(0,255,255,0.22) 16% 24%, transparent 24% 100%),
        linear-gradient(transparent 0 50%, rgba(255,0,110,0.20) 50% 58%, transparent 58% 100%);
      mix-blend-mode: screen;
      z-index: 30;
    }

    .intro-board-glitch.active {
      animation: boardGlitchLong 1.8s steps(3, end);
    }

    .intro-flash {
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.92);
      opacity: 0;
      pointer-events: none;
      z-index: 35;
    }

    .intro-flash.active {
      animation: introFlashLong 0.85s ease;
    }

    .intro-glitch-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      background:
        linear-gradient(transparent 0 14%, rgba(0,255,255,0.22) 14% 18%, transparent 18% 100%),
        linear-gradient(transparent 0 36%, rgba(255,0,140,0.16) 36% 41%, transparent 41% 100%),
        linear-gradient(transparent 0 66%, rgba(255,255,255,0.14) 66% 69%, transparent 69% 100%);
      mix-blend-mode: screen;
      z-index: 34;
    }

    .intro-glitch-layer.active {
      animation: glitchBurstLong 1.45s steps(3, end);
    }

    .intro-dialogue.dialogue-shell{
      position:absolute;
      left:50%;
      bottom:28px;
      transform:translateX(-50%);
      z-index:9999;
      width:min(768px, calc(var(--eq-frame-width, 1920px) - var(--eq-shell-gap, 24px) * 2));
      align-items:center;
    }

    /* Reuse stage-intro skip look; keep above dialogue (z-index 9999). */
    .intro-scene .intro-skip-btn {
      z-index: 10050;
      cursor: pointer;
    }

    .intro-content{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-self:center;
      gap:6px;
      min-height:0;
    }

    /*
     * stages.css .intro-text(랜딩용 margin-bottom:14px)가
     * 인트로 대사창에도 먹혀 위쪽으로 치우쳐 보입니다.
     */
    .intro-dialogue .intro-text{
      margin:0;
    }

    .intro-hint{
      text-align:right;
      color:rgba(255,255,255,.58);
      font-size:13px;
    }

    .intro-hint:empty{
      display:none;
    }

    .hidden {
      display: none !important;
    }

    .intro-scene.freeze-warning .intro-camera {
      filter: brightness(0.92) contrast(1.14) saturate(0.88);
    }

    .intro-scene.time-frozen .intro-camera {
      filter: brightness(0.88) contrast(1.18) saturate(0.72) hue-rotate(-6deg);
    }

    .intro-scene.time-frozen .intro-sunset {
      opacity: 0.82;
    }

    .scene-fade-out {
      opacity: 0;
      transition: opacity 1.2s ease;
    }

    @keyframes boardGlitchLong {
      0%   { opacity: 0; transform: translateX(0) skewX(-6deg); }
      15%  { opacity: 0.9; transform: translateX(-10px) skewX(-9deg); }
      30%  { opacity: 0.35; transform: translateX(6px) skewX(-4deg); }
      45%  { opacity: 0.82; transform: translateX(-5px) skewX(-7deg); }
      65%  { opacity: 0.25; transform: translateX(4px) skewX(-3deg); }
      85%  { opacity: 0.58; transform: translateX(-2px) skewX(-5deg); }
      100% { opacity: 0; transform: translateX(0) skewX(-6deg); }
    }

    @keyframes introFlashLong {
      0%   { opacity: 0; }
      20%  { opacity: 0.92; }
      55%  { opacity: 0.26; }
      100% { opacity: 0; }
    }

    @keyframes glitchBurstLong {
      0%   { opacity: 0; transform: translateX(0); }
      12%  { opacity: 0.9; transform: translateX(-8px); }
      24%  { opacity: 0.3; transform: translateX(6px); }
      38%  { opacity: 0.82; transform: translateX(-5px); }
      54%  { opacity: 0.24; transform: translateX(3px); }
      72%  { opacity: 0.66; transform: translateX(-2px); }
      100% { opacity: 0; transform: translateX(0); }
    }

    @keyframes tabletPulse {
      0% {
        transform: scale(0.98);
        filter: brightness(0.95);
      }
      50% {
        transform: scale(1.02);
        filter: brightness(1.08);
      }
      100% {
        transform: scale(0.98);
        filter: brightness(0.95);
      }
    }

    .clock-cutscene {
      position: absolute;
      inset: 0;
      z-index: 80;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .clock-frame {
      position: relative;
      width: min(1920px, calc(1080px * 2542 / 1490));
      max-width: 1920px;
      max-height: 1080px;
      aspect-ratio: 2542 / 1490;
      background: url("../assets/images/clock.png") no-repeat center center;
      background-size: contain;
      background-color: #000;
    }

    .clock-dial {
      position: absolute;
      top: 49.4%;
      left: 53.1%;
      width: 40%;
      height: 71%;
      transform: translate(-50%, -50%);
    }

    .hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform-origin: bottom center;
      border-radius: 10px;
      z-index: 10;
    }

    .hour {
      width: 1.5%;
      height: 25%;
      background: #1a1a1a;
      margin-left: -0.75%;
    }

    .minute {
      width: 1%;
      height: 38%;
      background: #333;
      margin-left: -0.5%;
    }

    .second {
      width: 0.5%;
      height: 45%;
      background: #d40000;
      margin-left: -0.25%;
      transition: transform 0.15s cubic-bezier(.4, 2.08, .55, .44);
    }

    .center-pin {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4%;
      aspect-ratio: 1 / 1;
      background: #000;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
    }

    .hidden {
      display: none !important;
    }