/* ══════════════════════════════════════════
   ほしのこみち VN（会話劇）スタイル
   天幕の中・キャラ立ち絵・下部テロップ窓。style.cssの後に読む。
══════════════════════════════════════════ */
body.vnpage { overflow: hidden; }

.vn {
  position: fixed; inset: 0;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.vn img { -webkit-user-drag: none; user-drag: none; }
.vn__summary { user-select: text; -webkit-user-select: text; }
.vn button:focus-visible, .vn a:focus-visible, .vn select:focus-visible, .vn input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* 背景（天幕の中） */
.vn__bg { position: absolute; inset: 0; overflow: hidden; }
.vn__bg img { width: 100%; height: 100%; object-fit: cover; animation: bgin 2s ease both; }
@keyframes bgin { from { opacity: 0; transform: scale(1.05); } }
.vn__bg.nobg { background: radial-gradient(ellipse at 50% 30%, #241d4d, #0a0c1e 75%); }
.vn__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(10, 12, 30, .35), rgba(10, 12, 30, .12) 40%, rgba(10, 12, 30, .78) 82%);
}

/* こみちへ戻る */
.vn__home {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 30;
  padding: 8px 14px; border-radius: 20px; font-size: 12.5px; text-decoration: none;
  color: var(--ink); background: rgba(23, 18, 48, .55); backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}

/* キャラ立ち絵 */
.vn__char {
  position: absolute; left: 4%; bottom: 24dvh; z-index: 2;
  width: min(34dvh, 46vw);
  animation: charin 1.2s ease .4s both;
}
@keyframes charin { from { opacity: 0; transform: translateY(14px); } }
.vn__char img {
  width: 100%; border-radius: 50%;
  border: 3px solid var(--c, var(--gold));
  box-shadow: 0 0 34px color-mix(in srgb, var(--c, #ffd98d) 45%, transparent), 0 10px 40px rgba(0, 0, 0, .5);
  animation: breathe 4.2s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: translateY(-5px); } }
.vn.talking .vn__char img { animation: breathe 4.2s ease-in-out infinite, talkpulse 0.62s ease-in-out infinite; }
@keyframes talkpulse { 50% { box-shadow: 0 0 46px color-mix(in srgb, var(--c, #ffd98d) 65%, transparent), 0 10px 40px rgba(0, 0, 0, .5); } }

/* ステージ（カード・儀式の置き場） */
.vn__stage {
  position: absolute; left: 50%; top: 8dvh; transform: translateX(-50%);
  width: min(560px, 94vw); z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  max-height: 62dvh;
}
.ritual--vn { width: 100%; height: 180px; }
.tarot--vn { width: 100%; }

/* シャッフル演出 */
.vnshuffle { position: relative; width: 240px; height: 200px; margin-top: 30px; }
.vnshuffle__c {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 111px;
  margin: -55px 0 0 -37px; border-radius: 8px;
  background: linear-gradient(150deg, #2b2154, #1a1438);
  background-image: url(../assets/tarot/back.jpg);
  background-size: cover;
  border: 1px solid rgba(255, 217, 141, .4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  animation: shuf 1.15s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.17s);
}
@keyframes shuf {
  0%, 100% { transform: rotate(-9deg) translateX(-46px); }
  50% { transform: rotate(9deg) translateX(46px); }
}

/* 大きな1枚カード */
.vncard { text-align: center; animation: fadein .5s ease both; }
.vncard__face {
  position: relative; overflow: hidden;
  width: min(200px, 46vw); aspect-ratio: 2/3;
  margin: 0 auto 10px; border-radius: 14px;
  background: linear-gradient(165deg, #322762, #191340);
  border: 1.5px solid var(--c, var(--gold));
  box-shadow: 0 0 40px color-mix(in srgb, var(--c, #ffd98d) 40%, transparent), 0 14px 40px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  animation: vnflip .8s ease both;
}
@keyframes vnflip { from { transform: rotateY(92deg); } }
.vncard__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vncard__face.rev img, .vncard__face.rev .vncard__sym { transform: rotate(180deg); }
.vncard b { font-family: var(--serif); font-size: 16.5px; display: block; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.vncard small { color: var(--ink-dim); font-size: 12px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }

/* メッセージ窓（テロップ） */
.vn__msgwrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 0 12px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.vn__msg {
  max-width: 680px; margin: 0 auto;
  min-height: 21dvh;
  background: linear-gradient(165deg, rgba(26, 20, 52, .93), rgba(14, 11, 32, .95));
  border: 1px solid color-mix(in srgb, var(--c, #ffd98d) 55%, transparent);
  border-radius: 18px;
  padding: 26px 22px 20px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
}
.vn__name {
  position: absolute; top: -14px; left: 18px;
  padding: 4px 16px; border-radius: 16px;
  font-family: var(--serif); font-size: 13.5px; letter-spacing: .12em;
  color: var(--night); font-weight: 600;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c, #ffd98d) 80%, #fff), var(--c, #ffd98d));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--c, #ffd98d) 40%, transparent);
}
.vn__text {
  font-size: 15.5px; line-height: 2.05; color: var(--ink);
  font-family: var(--serif); min-height: 3em;
}
.vn__text i { color: var(--ink-dim); font-style: italic; }
.vn__text .kw { color: var(--c, var(--gold)); font-style: normal; }
.vn.narrating .vn__msg { border-color: rgba(255, 255, 255, .14); }
.vn__next {
  position: absolute; right: 18px; bottom: 10px;
  color: var(--c, var(--gold)); font-size: 13px;
  animation: nextbob 1s ease-in-out infinite;
}
@keyframes nextbob { 50% { transform: translateY(4px); opacity: .5; } }

/* 選択肢（メッセージ窓の上に浮く） */
.vn__choices {
  position: absolute; left: 0; right: 0; bottom: calc(21dvh + 34px + env(safe-area-inset-bottom));
  z-index: 11; padding: 0 16px;
  display: flex; flex-direction: column; gap: 9px; align-items: center;
  max-height: 56dvh; overflow-y: auto;
}
.vn__opt {
  width: min(460px, 100%);
  padding: 14px 18px; border-radius: 14px;
  font-size: 14.5px; letter-spacing: .04em; text-align: center;
  color: var(--ink);
  background: linear-gradient(165deg, rgba(26, 20, 52, .94), rgba(14, 11, 32, .96));
  border: 1px solid color-mix(in srgb, var(--c, #ffd98d) 45%, transparent);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
  animation: fadein .35s ease both;
  transition: transform .15s, border-color .15s;
}
.vn__opt:hover { transform: translateY(-2px); border-color: var(--c, var(--gold)); }
.vn__opt small { display: block; font-size: 11.5px; color: var(--ink-dim); margin-top: 3px; }
.vn__opt--go {
  color: var(--night); font-weight: 700;
  background: linear-gradient(160deg, #ffe4a8, #f0c268);
  border: 0;
}
.vn__form {
  width: min(460px, 100%);
  background: linear-gradient(165deg, rgba(26, 20, 52, .96), rgba(14, 11, 32, .97));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 16px;
}
.vn__form .bsel { justify-content: center; }
.vn__form .vn__opt--go { width: 100%; margin-top: 12px; }

/* 結果画面 */
.vn__summary {
  position: absolute; inset: 0; z-index: 20;
  overflow-y: auto;
  background: rgba(8, 9, 22, .82); backdrop-filter: blur(10px);
  animation: fadein .6s ease both;
}
.vnsum { max-width: 620px; margin: 0 auto; padding: 40px 18px 70px; }
.vnsum .rpage__site { text-align: center; font-family: var(--serif); color: var(--gold); letter-spacing: .18em; font-size: 19px; margin-bottom: 20px; }
.vnsum .dlg__again { display: block; text-align: center; text-decoration: none; margin-top: 8px; padding: 15px; border-radius: 14px; color: var(--ink-dim); border: 1px solid var(--line); }
.vnsum .reco__btn { text-decoration: none; }

/* フェード */
.vn__fade { position: absolute; inset: 0; z-index: 40; background: #06050f; opacity: 0; pointer-events: none; transition: opacity .5s; }

/* 横長PC: キャラを左に大きく */
@media (min-width: 900px) {
  .vn__char { left: 7%; width: min(42dvh, 350px); bottom: 26dvh; }
  .vn__msg { max-width: 760px; }
}
/* 縦長スマホ: キャラは窓の後ろ寄り */
@media (max-width: 600px) {
  .vn__char { left: 50%; transform: translateX(-50%); bottom: 23dvh; width: min(30dvh, 62vw); }
  .vn__stage { top: 6dvh; }
  .vn__text { font-size: 14.5px; }
}

/* ── 音ボタン ── */
.vn__snd {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--ink); font-size: 16px;
  background: rgba(23, 18, 48, .55); backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}
.vn__snd.off { opacity: .45; }

/* ── 長押しチャージ（ルーン石など） ── */
.vnhold { text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.vnhold .stone { filter: brightness(calc(.55 + var(--charge, 0) * .8)); transition: filter .1s; }
.vnhold .stone b { opacity: var(--charge, 0); }
.vnhold__gauge {
  width: 150px; height: 6px; margin: 12px auto 6px;
  border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden;
}
.vnhold__gauge i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--c, #ffd98d), #fff);
  transform: scaleX(0); transform-origin: left;
}
.vnhold__hint { font-size: 12px; color: var(--ink-dim); text-shadow: 0 2px 6px rgba(0,0,0,.8); animation: pulse 1.6s infinite; }

/* ── 星空タップ（シリウス） ── */
.vnsky { position: relative; width: min(440px, 92vw); height: 240px; }
.vnsky__star {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: none; border: 0; cursor: pointer;
  color: #fff2cf; font-size: 15px;
  text-shadow: 0 0 10px rgba(255, 242, 207, .9);
  animation: twk 1.6s infinite; animation-delay: var(--d, 0s);
}
.vnsky__star:hover { transform: scale(1.4); }

/* ── 数字タイル（ソフィア） ── */
.vntiles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.vntile {
  width: 46px; height: 56px; border-radius: 10px;
  font-family: var(--serif); font-size: 24px; color: var(--gold);
  background: linear-gradient(165deg, rgba(26, 20, 52, .95), rgba(14, 11, 32, .96));
  border: 1px solid var(--line); cursor: pointer;
  transition: transform .15s, opacity .3s, border-color .15s;
}
.vntile:hover { transform: translateY(-3px); border-color: var(--gold); }
.vntile.used { opacity: .18; transform: scale(.85); pointer-events: none; }
.vntiles__sum {
  width: 100%; text-align: center; margin-top: 12px;
  font-family: var(--serif); font-size: 20px; color: var(--ink);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8); min-height: 1.5em;
}

/* ── 木札（紫苑・柱を立てる） ── */
.vnfuda { display: flex; gap: 14px; justify-content: center; }
.vnfuda__t {
  width: 84px; height: 130px; border-radius: 10px;
  font-family: var(--serif); color: var(--ink);
  background: linear-gradient(165deg, #3a2f24, #241c12);
  border: 1px solid rgba(255, 217, 141, .45); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform .15s;
}
.vnfuda__t:hover { transform: translateY(-4px); }
.vnfuda__t small { font-size: 11px; color: var(--ink-dim); }
.vnfuda__t b { font-size: 26px; }
.vnfuda__t.up { background: linear-gradient(165deg, #4c3d2c, #2e2418); border-color: var(--gold); animation: fudaup .4s ease; pointer-events: none; }
@keyframes fudaup { 0% { transform: translateY(16px) scale(.92); } 60% { transform: translateY(-6px); } }

/* ── 朱印（ことは） ── */
.vnstamp { text-align: center; }
.vnstamp__pad {
  width: 92px; height: 92px; margin: 8px auto; border-radius: 50%;
  border: 2px dashed rgba(255, 159, 140, .6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 159, 140, .8); font-size: 12px;
  background: rgba(20, 14, 30, .5);
  transition: transform .12s;
}
.vnstamp__pad:hover { transform: scale(1.06); }
.vnstamp__pad.done {
  border-style: solid; border-color: #d33f2f; color: #fff;
  background: radial-gradient(circle, #c5392a 62%, #a52c1f 100%);
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  animation: stampin .35s cubic-bezier(.2, 2.2, .4, 1) both;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(197, 57, 42, .5);
}
@keyframes stampin { 0% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ── 儀式演出（占い師別） ── */
.vnfx { position: relative; width: min(440px, 92vw); height: 200px; overflow: hidden; }

/* 流星群（シリウス） */
.vnfx--meteor i {
  position: absolute; left: var(--x); top: var(--y);
  width: 130px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,242,207,0), #fff2cf 60%, #fff);
  transform: rotate(24deg);
  animation: vnmeteor 1.5s ease-in infinite;
  animation-delay: calc(var(--i) * 0.34s);
  opacity: 0;
}
@keyframes vnmeteor {
  0% { transform: rotate(24deg) translateX(-80px); opacity: 0; }
  12% { opacity: 1; }
  60% { opacity: .9; }
  100% { transform: rotate(24deg) translateX(260px); opacity: 0; }
}

/* 香の煙（紫苑） */
.vnfx--smoke i {
  position: absolute; bottom: 0; left: calc(38% + var(--i) * 11%);
  width: 3px; height: 120px; border-radius: 3px;
  background: linear-gradient(rgba(242,236,221,0), rgba(242,236,221,.5) 55%, rgba(242,236,221,0));
  filter: blur(2.5px);
  transform-origin: bottom center;
  animation: vnsmoke 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.15s);
}
@keyframes vnsmoke {
  0% { transform: translateY(26px) scaleY(.55) rotate(0deg); opacity: 0; }
  35% { opacity: .85; }
  60% { transform: translateY(-24px) scaleY(1.05) rotate(5deg); }
  100% { transform: translateY(-60px) scaleY(1.25) rotate(-6deg); opacity: 0; }
}

/* オーロラ（フレイヤ） */
.vnfx--aurora i {
  position: absolute; left: -12%; right: -12%; top: calc(22% + var(--i) * 20%);
  height: 42px; border-radius: 50%;
  background: linear-gradient(90deg,
    rgba(140,233,240,0), rgba(140,233,240,.4) 30%, rgba(180,140,255,.34) 60%, rgba(140,233,240,0));
  filter: blur(9px);
  animation: vnaurora 3.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.3s);
}
@keyframes vnaurora {
  from { transform: translateX(-26px) skewY(-3deg); opacity: .45; }
  to { transform: translateX(26px) skewY(3deg); opacity: .95; }
}

/* 墨の線（ことは・半紙の上に） */
.vnfx--ink { display: flex; align-items: center; justify-content: center; }
.vnfx--ink::before {
  content: ""; position: absolute; inset: 12% 8%;
  background: linear-gradient(165deg, #f4efe2, #e6dfcc);
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), inset 0 0 40px rgba(180, 160, 120, .25);
  animation: fadein .4s ease both;
}
.vnfx__stroke {
  display: block; position: relative; height: 7px; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #16121e, #3a3247 45%, #16121e 96%);
  box-shadow: 0 1px 8px rgba(0,0,0,.65);
  animation: vnink 1.7s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes vnink { 20% { width: 0; } 100% { width: 78%; } }
.vnfx__drop {
  position: absolute; top: 56%; left: calc(34% + var(--i) * 26%);
  width: 7px; height: 7px; border-radius: 50% 50% 50% 0;
  background: #241f30; transform: rotate(45deg) scale(0);
  animation: vndrop .5s ease-out forwards;
  animation-delay: calc(1s + var(--i) * 0.35s);
}
@keyframes vndrop { to { transform: rotate(45deg) scale(1) translateY(8px); } }

/* ── スマホ: 背景をゆっくり横パン（Ken Burns） ── */
@media (max-width: 700px) {
  .vn__bg img {
    width: 132%; max-width: none;
    animation: bgfade 2s ease both, bgpan 52s ease-in-out 1.2s infinite alternate;
  }
  @keyframes bgfade { from { opacity: 0; } }
  @keyframes bgpan { from { transform: translateX(0); } to { transform: translateX(-24%); } }
}

.vnsum__credit { margin-top: 18px; text-align: center; font-size: 10px; color: rgba(185,178,201,.55); }

/* Threadsフォロー導線（SITE.sns.threads設定時のみ出現） */
.vnsum__follow {
  display: block; text-align: center; margin: 0 0 18px;
  padding: 14px; border-radius: 14px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--ink);
  background: linear-gradient(165deg, rgba(167, 148, 230, .22), rgba(167, 148, 230, .08));
  border: 1px solid rgba(167, 148, 230, .5);
}

/* 結果カードの保存フォールバック（iOSでshareが使えない時） */
.savefb {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 7, 18, .88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.savefb__in { max-width: 480px; text-align: center; }
.savefb__in p { font-size: 14px; color: var(--ink); margin-bottom: 12px; line-height: 1.8; }
.savefb__in img { width: 100%; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 14px; }
.savefb__in .vn__opt { width: 100%; }

/* 動きに弱い人向け: アニメーションを止める（体験自体は同じように進む） */
@media (prefers-reduced-motion: reduce) {
  .vn *, .vn *::before, .vn *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .vn__bg img { animation: none !important; }
  .vn__char img { animation: none !important; }
  .vnshuffle__c, .vnfx i, .ritual__orb, .ritual__s { animation: none !important; }
}