/* ============================================================
   css/intro.css - 게임 인트로 (오프닝 스토리 .in- / 타이틀 .tt-)
   그림이 없을 때는 슬라이드마다 내장 임시 장면(그라데이션+이모지)
   ============================================================ */

/* ===== 오프닝 스토리 ===== */
#screen-intro { background: #1d1440; }
.in-wrap { position: absolute; inset: 0; overflow: hidden; cursor: pointer; }

.in-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.8s ease, transform 3.4s ease; /* 크로스페이드 + 살짝 줌 */
  pointer-events: none;
}
.in-slide.in-on { opacity: 1; transform: scale(1); }

/* 임시 장면 배경 (assets/intro/storyN.png 이 없을 때) */
.in-ph-1 { background: linear-gradient(180deg, #7ec8f5 0%, #cdeaff 55%, #a9e293 100%); }
.in-ph-2 { background: linear-gradient(180deg, #2b1a55 0%, #4a2f7d 60%, #1d1440 100%); }
.in-ph-3 { background: linear-gradient(180deg, #6b7b95 0%, #93a3b8 60%, #c5ccd8 100%); }
.in-ph-4 { background: linear-gradient(180deg, #3a2472 0%, #7b5cd6 65%, #b79bff 100%); }
.in-ph-5 { background: linear-gradient(180deg, #b96a00 0%, #ffb547 55%, #ffe08a 100%); }
.in-ph-6 { background: linear-gradient(180deg, #ff9d6c 0%, #ffd0a0 45%, #7ec8f5 100%); }

.in-art {
  font-size: 120px;
  line-height: 1.2;
  letter-spacing: 14px;
  text-indent: 14px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3));
  animation: mw-bob 3s ease-in-out infinite;
}

.in-caption {
  position: absolute;
  left: 50%; bottom: 84px;
  transform: translateX(-50%);
  max-width: 84%;
  background: rgba(30, 24, 58, 0.82);
  color: #fff;
  font-size: 26px;
  line-height: 1.5;
  border-radius: 18px;
  padding: 14px 30px;
  text-align: center;
  box-shadow: var(--shadow);
  word-break: keep-all;
}

.in-counter {
  position: absolute;
  top: 18px; right: 22px;
  background: rgba(30, 24, 58, 0.6);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  border-radius: 999px;
  padding: 5px 14px;
  pointer-events: none;
}

.in-skip {
  position: absolute;
  right: 22px; bottom: 22px;
  font-family: var(--font);
  font-size: 17px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.12s;
}
.in-skip:hover { background: rgba(255, 255, 255, 0.3); }

/* ===== 타이틀(로고) 화면 ===== */
#screen-title { background: #2c1e63; }
.tt-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px;
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,0.65) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 34%, rgba(255,255,255,0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 34% 8%,  rgba(255,255,255,0.6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 42%, rgba(255,255,255,0.45) 0 1.5px, transparent 2.5px),
    radial-gradient(120% 55% at 20% 108%, #4a9e63 0 55%, rgba(74, 158, 99, 0) 56%),
    radial-gradient(130% 50% at 82% 110%, #59b374 0 52%, rgba(89, 179, 116, 0) 53%),
    linear-gradient(180deg, #1d1440 0%, #2c1e63 52%, #4a3390 100%);
}
.tt-has-bg { background-size: cover !important; background-position: center !important; }

.tt-stars {
  position: absolute; top: 60px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 230, 150, 0.8);
  font-size: 22px;
  letter-spacing: 26px;
  text-indent: 26px;
  animation: mw-bob 4s ease-in-out infinite;
}

.tt-logo { text-align: center; animation: mw-bob 3s ease-in-out infinite; }
.tt-logo-img {
  max-width: 62%;
  max-height: 46%;
  animation: mw-bob 3s ease-in-out infinite;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4));
}
.tt-wiz { font-size: 110px; line-height: 1.15; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4)); }
.tt-title {
  font-size: 88px;
  line-height: 1.05;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffe9a8, #ffb547 55%, #e8890c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 rgba(90, 50, 0, 0.55)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35));
}
.tt-sub {
  margin-top: 6px;
  font-size: 30px;
  color: #e8ddff;
  letter-spacing: 10px;
  text-indent: 10px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.tt-tap {
  position: absolute;
  bottom: 96px; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 24px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: tt-blink 1.6s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes tt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ===== 로그인 화면의 "이야기 다시 보기" 링크 ===== */
.login-story-link {
  display: inline-block;
  margin: 9px 0 0 14px;
  font-size: 14px;
  color: var(--c-text-soft);
  text-decoration: none;
}
.login-story-link:hover { color: var(--c-accent); text-decoration: underline; }

/* ============================================================
   세로 모드 (720x1280) — body.mw-portrait
   ============================================================ */
body.mw-portrait .in-art { font-size: 96px; letter-spacing: 10px; }
body.mw-portrait .in-caption { font-size: 24px; bottom: 120px; max-width: 88%; }
body.mw-portrait .tt-title { font-size: 68px; }
body.mw-portrait .tt-sub { font-size: 26px; }
body.mw-portrait .tt-wiz { font-size: 96px; }
body.mw-portrait .tt-tap { font-size: 26px; bottom: 130px; }
body.mw-portrait .tt-logo-img { max-width: 80%; }