/* tarot.css — 別館「夜の川」テーマ
   スコープ: .tarot-theme（body 直下）配下のみ。ルート style.css は汚染しない。
   継承: --radius(18px) / --maxw(760px) はルート値を踏襲。フォントはルートで
   読込済みの Zen Maru Gothic（本文）/ Shippori Mincho（見出し）を使う。
*/

.tarot-theme {
  --tarot-bg: #0f1d26;
  --tarot-ink: #e9f1ee;
  --tarot-panel: #16303c;
  --tarot-teal: #5fb0bd;
  --tarot-moon: #f2e8d5;
  --tarot-line: rgba(233, 241, 238, .16);
  --tarot-muted: #a9bcc0;

  background: var(--tarot-bg);
  color: var(--tarot-ink);
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

/* 見出しは Shippori Mincho、本文色はカードコンテンツ内で var(--tarot-ink) */
.tarot-theme h1,
.tarot-theme h2,
.tarot-theme h3,
.tarot-theme .h2 {
  font-family: "Shippori Mincho", serif;
  color: var(--tarot-moon);
}

.tarot-theme a { color: var(--tarot-teal); }
.tarot-theme .muted { color: var(--tarot-muted); }

/* リンク先の視認性: focus リングをテーマ配色に */
.tarot-theme :focus-visible { outline-color: var(--tarot-teal); }

/* header / footer — 白背景オーバーレイをテーマ配色に差し替え */
.tarot-theme .site-header {
  background: rgba(15, 29, 38, .88);
  border-bottom: 1px solid var(--tarot-line);
}
.tarot-theme .logo { color: var(--tarot-moon); }
.tarot-theme .logo small { color: var(--tarot-teal); }
.tarot-theme .nav a { color: var(--tarot-muted); }
.tarot-theme .nav a:hover { color: var(--tarot-teal); }

.tarot-theme .site-footer {
  background: var(--tarot-bg);
  border-top: 1px solid var(--tarot-line);
  color: var(--tarot-muted);
}
.tarot-theme .site-footer a { color: var(--tarot-muted); }
.tarot-theme .site-footer a:hover { color: var(--tarot-teal); }

/* skip-link は独自背景を持つため単独で再配色 */
.tarot-theme .skip-link {
  background: var(--tarot-panel);
  color: var(--tarot-moon);
}

/* hero */
.tarot-theme .hero h1 { color: var(--tarot-moon); }
.tarot-theme .hero__lead { color: var(--tarot-muted); }
.tarot-theme .tarot-subline {
  color: var(--tarot-muted);
  font-size: .9rem;
  margin: 0 auto 18px;
  max-width: 30em;
}

/* noscript 通知 */
.tarot-theme .tarot-noscript {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--tarot-line);
  border-radius: var(--radius);
  background: var(--tarot-panel);
  color: var(--tarot-moon);
  text-align: center;
  font-size: .9rem;
}

/* card 系コンポーネント全般 */
.tarot-theme .card {
  background: var(--tarot-panel);
  border: 1px solid var(--tarot-line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  color: var(--tarot-ink);
}

/* ボタン */
.tarot-theme .btn {
  background: var(--tarot-teal);
  color: var(--tarot-bg);
  box-shadow: 0 6px 16px rgba(95, 176, 189, .32);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tarot-theme .btn:hover { box-shadow: 0 9px 20px rgba(95, 176, 189, .42); }
.tarot-theme .btn--ghost {
  background: transparent;
  color: var(--tarot-ink);
  border: 1.5px solid var(--tarot-line);
  box-shadow: none;
}

/* 「占いたいことをひとつ」プリセット群 */
.tarot-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 0;
}
.tarot-intent {
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  background: var(--tarot-bg);
  color: var(--tarot-ink);
  border: 1.5px solid var(--tarot-line);
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  transition: border-color .15s ease, background-color .15s ease;
}
.tarot-intent:hover { border-color: var(--tarot-teal); }

.tarot-freeform { margin-top: 16px; }
.tarot-freeform label {
  display: block;
  margin-bottom: 6px;
  color: var(--tarot-muted);
  font-size: .85rem;
}
.tarot-freeform input {
  width: 100%;
  max-width: 100%;
  font: inherit;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--tarot-line);
  background: var(--tarot-bg);
  color: var(--tarot-ink);
}
.tarot-freeform input:disabled { opacity: .55; }

/* カードの選ばれ方（乱数開示） */
.tarot-disclosure summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--tarot-teal);
  font-family: "Shippori Mincho", serif;
}
.tarot-disclosure[open] summary { margin-bottom: 10px; }
.tarot-disclosure p { color: var(--tarot-ink); }

/* 無料明示ボックス */
.tarot-free-notice {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--tarot-teal);
  background: rgba(95, 176, 189, .14);
}
.tarot-free-notice p {
  margin: 0;
  color: var(--tarot-ink);
  font-weight: 700;
}

/* カード面プレースホルダ（Task 6 が使う下地。裏面のみ・文様なし） */
.tarot-card {
  aspect-ratio: 7 / 12;
  display: block;
  border-radius: calc(var(--radius) * .55);
  background: var(--tarot-panel);
  border: 1px solid var(--tarot-line);
}

/* モバイルファースト: 375px 幅で横スクロールを出さない */
.tarot-theme,
.tarot-theme .wrap {
  max-width: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tarot-theme *,
  .tarot-theme *::before,
  .tarot-theme *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Task 6 — 引く体験の状態機械UI（夜の川：ゆっくり・静か）
   すべて .tarot-theme スコープ内で完結。JS(tarot.js)が組み立てる。
   ============================================================ */

.tarot-stage { min-height: 140px; }

/* 案内文・アクション行・エラー */
.tarot-guide {
  text-align: center;
  color: var(--tarot-muted);
  margin: 2px auto 8px;
  max-width: 28em;
  line-height: 1.8;
}
.tarot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 2px;
}
.tarot-error {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--tarot-teal);
  border-radius: var(--radius);
  background: rgba(95, 176, 189, .12);
  color: var(--tarot-moon);
  text-align: center;
  font-size: .92rem;
}

/* カード裏面（儀式で常時出る最重要アセット）。card-back.webp を最上層に敷く。
   既存グラデーションは読込中／失敗時の下地として下層に残す。inset の枠飾りは維持。 */
.tarot-card--back {
  position: relative;
  overflow: hidden;
  background:
    url("../img/cards/card-back.webp") center / cover no-repeat,
    radial-gradient(120% 78% at 50% -8%, rgba(95, 176, 189, .20), transparent 62%),
    repeating-linear-gradient(45deg, rgba(242, 232, 213, .045) 0 6px, transparent 6px 13px),
    linear-gradient(180deg, #163541, #0f2530);
  border: 1px solid var(--tarot-line);
  box-shadow: inset 0 0 0 3px rgba(242, 232, 213, .06), 0 8px 20px rgba(0, 0, 0, .34);
}

/* shuffle — 水面を漂う札の扇 */
.tarot-deck {
  position: relative;
  height: 232px;
  max-width: 300px;
  margin: 6px auto 2px;
  transform: translateX(var(--stir, 0px));
  transition: transform .5s ease;
  touch-action: pan-y;
  cursor: grab;
}
.tarot-deck.is-stirring { cursor: grabbing; transition: transform .12s ease; }
.tarot-deck__slot {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 118px;
  height: 202px;
  margin-left: -59px;
  transform-origin: 50% 92%;
}
.tarot-deck__slot:nth-child(1) { transform: rotate(-10deg) translateX(-58px); z-index: 1; }
.tarot-deck__slot:nth-child(2) { transform: rotate(-5deg)  translateX(-29px); z-index: 2; }
.tarot-deck__slot:nth-child(3) { transform: rotate(0deg); z-index: 3; }
.tarot-deck__slot:nth-child(4) { transform: rotate(5deg)   translateX(29px);  z-index: 2; }
.tarot-deck__slot:nth-child(5) { transform: rotate(10deg)  translateX(58px);  z-index: 1; }
.tarot-deck__card {
  width: 100%;
  height: 100%;
  animation: tarot-drift 7s ease-in-out infinite;
}
.tarot-deck__slot:nth-child(1) .tarot-deck__card { animation-delay: 0s; }
.tarot-deck__slot:nth-child(2) .tarot-deck__card { animation-delay: .9s; }
.tarot-deck__slot:nth-child(3) .tarot-deck__card { animation-delay: 1.8s; }
.tarot-deck__slot:nth-child(4) .tarot-deck__card { animation-delay: 2.7s; }
.tarot-deck__slot:nth-child(5) .tarot-deck__card { animation-delay: 3.6s; }
@keyframes tarot-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(.6deg); }
}

/* cut — 3つの山 */
.tarot-piles {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 14px 0 4px;
}
.tarot-pile {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tarot-pile .tarot-card { width: clamp(80px, 26vw, 108px); }
.tarot-pile__label { font-size: .82rem; color: var(--tarot-muted); }
.tarot-pile .tarot-card { transition: transform .2s ease, border-color .2s ease; }
.tarot-pile:hover .tarot-card,
.tarot-pile:focus-visible .tarot-card {
  transform: translateY(-4px);
  border-color: var(--tarot-teal);
}
.tarot-pile:focus-visible { outline: none; }

/* spread — 1/2/3枚の選択 */
.tarot-spreads {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 4px;
}
.tarot-spread {
  text-align: left;
  cursor: pointer;
  background: var(--tarot-bg);
  border: 1.5px solid var(--tarot-line);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 44px;
  color: var(--tarot-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .18s ease, transform .18s ease;
}
.tarot-spread:hover,
.tarot-spread:focus-visible { border-color: var(--tarot-teal); transform: translateY(-1px); }
.tarot-spread__name { font-family: "Shippori Mincho", serif; font-size: 1.05rem; color: var(--tarot-moon); }
.tarot-spread__tag { font-size: .85rem; color: var(--tarot-muted); }

/* reveal — 場に伏せた札 → タップでめくる（CSS 3D フリップ） */
.tarot-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin: 12px 0 4px;
}
.tarot-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tarot-slot__label {
  margin: 0;
  font-size: .82rem;
  color: var(--tarot-muted);
  font-family: "Shippori Mincho", serif;
  text-align: center;
}
.tarot-flip {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: clamp(96px, 30vw, 150px);
  aspect-ratio: 7 / 12;
  perspective: 1000px;
  touch-action: manipulation;
}
.tarot-table--n1 .tarot-flip { width: clamp(140px, 46vw, 188px); }
.tarot-flip__inner {
  display: block; /* 要素はspan(既定display:inline)のため、これがないとwidth/height:100%が無効になり
                      position:absoluteの裏表フェイスが正しくサイズされない（カード面が空白化するバグの修正） */
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.2, .7, .2, 1);
}
.tarot-flip.is-flipped .tarot-flip__inner { transform: rotateY(180deg); }
.tarot-flip__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: calc(var(--radius) * .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tarot-flip__front {
  transform: rotateY(180deg);
  gap: 6px;
  padding: 8px;
  text-align: center;
  background: linear-gradient(180deg, #1d3d4a, #12262f);
  border: 1px solid var(--tarot-line);
  box-shadow: inset 0 0 0 3px rgba(242, 232, 213, .08), 0 8px 20px rgba(0, 0, 0, .34);
}
.tarot-face__num { font-size: .78rem; color: var(--tarot-teal); letter-spacing: .10em; }
.tarot-face__name { font-family: "Shippori Mincho", serif; font-size: 1.1rem; line-height: 1.35; color: var(--tarot-moon); }
.tarot-face__orient { font-size: .72rem; color: var(--tarot-muted); }
.tarot-flip__front.is-reversed .tarot-face__num { transform: rotate(180deg); }

/* カード絵（700×1200 WebP）。front 面いっぱいに敷き、角丸は面に合わせる。 */
.tarot-face__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.tarot-flip__front.is-reversed .tarot-face__img { transform: rotate(180deg); }
/* 画像がある通常時はテキスト面を隠す。404 で is-noimg が付くと従来表示へ戻る。 */
.tarot-flip__front:not(.is-noimg) .tarot-face__num,
.tarot-flip__front:not(.is-noimg) .tarot-face__name,
.tarot-flip__front:not(.is-noimg) .tarot-face__orient { display: none; }
.tarot-flip:focus-visible { outline: 2px solid var(--tarot-teal); outline-offset: 3px; border-radius: calc(var(--radius) * .55); }

/* read — 読みの表示 */
.tarot-reading { margin-top: 4px; }
.tarot-reading__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--tarot-line);
}
.tarot-reading__item:last-child { border-bottom: 0; }
.tarot-reading__pos {
  margin: 0 0 3px;
  font-size: .82rem;
  color: var(--tarot-muted);
  font-family: "Shippori Mincho", serif;
}
.tarot-reading__card { margin: 0 0 8px; }
.tarot-reading__name { font-family: "Shippori Mincho", serif; font-size: 1.18rem; color: var(--tarot-moon); }
.tarot-reading__orient { font-size: .8rem; color: var(--tarot-muted); margin-left: 4px; }
.tarot-reading__text { margin: 0; line-height: 1.95; color: var(--tarot-ink); }
.tarot-reading__disclaimer { margin: 16px 0 6px; font-size: .82rem; color: var(--tarot-muted); line-height: 1.7; }
.tarot-reading__howline { margin: 0 0 4px; }
.tarot-reading__howlink { font-size: .9rem; }

/* ============================================================
   T2 — ジャーナル（read ステージの保存フォーム＋「これまでの読み」一覧）
   ============================================================ */
.tarot-journal-form {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--tarot-line);
  border-radius: var(--radius);
  background: var(--tarot-bg);
}
.tarot-journal-form__label {
  display: block;
  margin-bottom: 6px;
  color: var(--tarot-muted);
  font-size: .85rem;
}
.tarot-journal-form__input {
  width: 100%;
  max-width: 100%;
  font: inherit;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1.5px solid var(--tarot-line);
  background: var(--tarot-panel);
  color: var(--tarot-ink);
}
.tarot-journal-form__input:disabled { opacity: .55; }

#tarot-journal-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.tarot-journal-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--tarot-line);
}
.tarot-journal-item:last-child { border-bottom: 0; }
.tarot-journal-item p { margin: 0 0 4px; }
.tarot-journal-item__date {
  font-family: "Shippori Mincho", serif;
  font-size: .82rem;
  color: var(--tarot-muted);
}
.tarot-journal-item__intent { color: var(--tarot-muted); font-size: .88rem; }
.tarot-journal-item__cards { color: var(--tarot-moon); }
.tarot-journal-item__memo { color: var(--tarot-ink); }
.tarot-journal-item__delete { margin-top: 6px; }

/* T2 — シェア画像（Canvas プレビュー＋保存/共有ボタン） */
.tarot-share { margin: 16px 0 4px; text-align: center; }
.tarot-share__preview {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 14px auto 0;
  border-radius: var(--radius);
  border: 1px solid var(--tarot-line);
}
.tarot-share__actions { margin-top: 12px; }
.tarot-share__note { margin-top: 8px; }

/* reduced-motion: 漂い・フリップを即時化（フロー完走を保証） */
@media (prefers-reduced-motion: reduce) {
  .tarot-deck { transition: none; }
  .tarot-deck__card { animation: none; }
  .tarot-flip__inner { transition: none; }
  .tarot-pile .tarot-card,
  .tarot-spread { transition: none; }
}

/* ============================================================
   DD-015 — UI案内人「巫うなぎ」（ページ左下に漂う案内人）
   ページUI側の装飾レイヤ。tarot-guide.js が body 末尾に注入する。
   ブロック名は .tarot-eel（既存の shuffle 案内文 <p class="tarot-guide"> と
   紛れない一意名。新規ブロック命名時は既存クラスと grep 照合すること）。
   ============================================================ */
.tarot-theme .tarot-eel {
  position: fixed;
  left: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: clamp(64px, 15vw, 128px);
  aspect-ratio: 360 / 579;
  z-index: 30;
  pointer-events: none;
  user-select: none;
  opacity: .96;
  transition: opacity .8s ease;
}
/* ポーズ別・提灯アンカーのコンテナ相対座標（グローと帯の基準点） */
.tarot-theme .tarot-eel[data-pose="float"] { --lx: 13.3%; --ly: 51.6%; }
.tarot-theme .tarot-eel[data-pose="point"] { --lx: 10.6%; --ly: 58.4%; }
.tarot-theme .tarot-eel.is-hidden { opacity: 0; }
/* 読み文面が定位置に重なったら退避（M3対応。判定は tarot-guide.js の矩形交差） */
.tarot-theme .tarot-eel.is-dodge { opacity: 0; }

/* 漂いはこの層に（静かに・大げさにしない） */
.tarot-eel__inner {
  position: absolute;
  inset: 0;
  animation: tarot-eel-drift 8.5s ease-in-out infinite;
}
@keyframes tarot-eel-drift {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-7px) rotate(.8deg); }
}

/* 2ポーズを底辺揃えで重ね、data-pose でクロスフェード */
.tarot-eel__img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .7s ease;
}
.tarot-eel[data-pose="float"] .tarot-eel__img--float { opacity: 1; }
.tarot-eel[data-pose="point"] .tarot-eel__img--point { opacity: 1; }

/* 提灯の暖光（脈動）。lantern アンカー(--lx/--ly)を中心に置く */
.tarot-eel__glow {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242,214,138,.55), rgba(242,214,138,.18) 55%, transparent 72%);
  mix-blend-mode: screen;
  transition: left .7s ease, top .7s ease;
  animation: tarot-eel-glow 5.5s ease-in-out infinite;
}
@keyframes tarot-eel-glow {
  0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* 光の帯: 提灯からカードの並ぶ上方へ立ちのぼる導き。point のときだけ出す */
.tarot-eel__band {
  position: absolute;
  left: calc(var(--lx) - 6px);
  bottom: calc(100% - var(--ly));
  width: clamp(36px, 9vw, 64px);
  height: auto;
  opacity: 0;
  transition: opacity .9s ease, left .7s ease, bottom .7s ease;
}
.tarot-eel[data-pose="point"] .tarot-eel__band { opacity: .85; }

@media print { .tarot-theme .tarot-eel { display: none; } }

/* reduced-motion: 案内人の漂い・グロー脈動を停止（保険。実効の停止はテーマ全体の
   animation-duration:.001ms !important ルールが担う。上の animation 宣言より
   後置しないと源順で負けるため、DD-015 セクション末尾に置く） */
@media (prefers-reduced-motion: reduce) {
  .tarot-eel__inner { animation: none; }
  .tarot-eel__glow { animation: none; }
}