@charset "UTF-8";

:root {
  --bg-cosmos: #0d0a18;
  --bg-velvet: #171226;
  --parchment-light: #fcf9f2;
  --parchment-mid: #f3e8d4;
  --ink-deep: #140e0c;
  --ink-soft: #382c26;
  --gold-bright: #ebd095;
  --gold-metallic: #c29b58;
  --gold-dark: #8c6a32;
  /* 六道＋涅槃の神秘ジュエルカラー */
  --gem-nehan: #ffe382;
  --gem-tendo: #7ce0ff;
  --gem-ningen: #8ce99a;
  --gem-shura: #ff758f;
  --gem-chikusho: #64dfdf;
  --gem-gaki: #d08bff;
  --gem-jigoku: #ff9f68;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-cosmos);
  background-image:
    radial-gradient(circle at 50% 30%, rgba(25, 18, 45, 0.9) 0%, rgba(10, 7, 18, 0.98) 100%),
    linear-gradient(180deg, #090611 0%, #161026 50%, #080610 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", "MS PMincho", serif;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink-deep);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: background-color 0.8s ease, filter 0.3s ease;
}

/* ============================================================================
   背景：色とりどりの星雲・オーロラの靄（コズミック・ネブラ）
   六道と涅槃の神秘的な光彩が、深宇宙の闇の中で呼吸するように漂う
   ============================================================================ */
.cosmic-nebula-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  opacity: 0.38;
  mix-blend-mode: screen;
  transform: translateZ(0);
  transition: opacity 1.2s ease, filter 1.2s ease;
}

.nebula-cloud {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* 1. 涅槃のシャンパンゴールドの靄 */
.nebula-gold {
  width: 55vw;
  height: 55vw;
  min-width: 420px;
  min-height: 420px;
  top: -15%;
  left: 15%;
  background: radial-gradient(circle, rgba(255, 227, 130, 0.48) 0%, rgba(218, 165, 32, 0.22) 45%, transparent 70%);
  animation: floatNebulaGold 24s ease-in-out infinite alternate;
}

/* 2. 天道のセレスティアル・シアンブルーの靄 */
.nebula-cyan {
  width: 60vw;
  height: 60vw;
  min-width: 480px;
  min-height: 480px;
  top: 10%;
  right: -10%;
  background: radial-gradient(circle, rgba(124, 224, 255, 0.45) 0%, rgba(0, 180, 216, 0.2) 50%, transparent 72%);
  animation: floatNebulaCyan 28s ease-in-out infinite alternate;
}

/* 3. 修羅道の妖艶なローズマゼンタの靄 */
.nebula-magenta {
  width: 52vw;
  height: 52vw;
  min-width: 400px;
  min-height: 400px;
  bottom: 5%;
  right: 8%;
  background: radial-gradient(circle, rgba(255, 117, 143, 0.4) 0%, rgba(184, 15, 60, 0.18) 48%, transparent 70%);
  animation: floatNebulaMagenta 26s ease-in-out infinite alternate;
}

/* 4. 餓鬼道のアメジストパープル・星雲の靄 */
.nebula-purple {
  width: 58vw;
  height: 58vw;
  min-width: 450px;
  min-height: 450px;
  bottom: -10%;
  left: -5%;
  background: radial-gradient(circle, rgba(208, 139, 255, 0.42) 0%, rgba(114, 9, 183, 0.2) 52%, transparent 72%);
  animation: floatNebulaPurple 30s ease-in-out infinite alternate;
}

/* 5. 人間道・畜生道のミスティック・エメラルドグリーンの靄 */
.nebula-emerald {
  width: 48vw;
  height: 48vw;
  min-width: 360px;
  min-height: 360px;
  top: 35%;
  left: 28%;
  background: radial-gradient(circle, rgba(100, 223, 223, 0.35) 0%, rgba(140, 233, 154, 0.18) 46%, transparent 68%);
  animation: floatNebulaEmerald 32s ease-in-out infinite alternate;
}

/* 微細な星間ダストのテクスチャレイヤー */
.nebula-dust-layer {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1) 0, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255, 215, 0, 0.08) 0, transparent 45%);
  animation: pulseDust 16s ease-in-out infinite alternate;
}

@keyframes floatNebulaGold {
  0% { transform: translate(0, 0) scale(1); opacity: 0.65; }
  50% { transform: translate(6vw, 4vh) scale(1.12); opacity: 0.88; }
  100% { transform: translate(-4vw, 8vh) scale(0.95); opacity: 0.7; }
}

@keyframes floatNebulaCyan {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-8vw, 6vh) scale(1.15); opacity: 0.95; }
  100% { transform: translate(-3vw, -5vh) scale(0.92); opacity: 0.65; }
}

@keyframes floatNebulaMagenta {
  0% { transform: translate(0, 0) scale(1); opacity: 0.65; }
  50% { transform: translate(-6vw, -8vh) scale(1.1); opacity: 0.88; }
  100% { transform: translate(5vw, -3vh) scale(0.96); opacity: 0.7; }
}

@keyframes floatNebulaPurple {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(7vw, -6vh) scale(1.14); opacity: 0.95; }
  100% { transform: translate(3vw, 5vh) scale(0.94); opacity: 0.68; }
}

@keyframes floatNebulaEmerald {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.6; }
  50% { transform: translate(-5vw, 6vh) scale(1.18) rotate(45deg); opacity: 0.85; }
  100% { transform: translate(6vw, -4vh) scale(0.92) rotate(-30deg); opacity: 0.58; }
}

@keyframes pulseDust {
  0% { opacity: 0.45; }
  100% { opacity: 0.9; }
}

/* 画面全体の背景に浮かぶ「六道大曼荼羅・天体タペストリー」SVGレイヤー */
.bg-rokudo-mural {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.26;
  overflow: hidden;
}

.bg-rokudo-mural svg {
  width: 115vmax;
  height: 115vmax;
  min-width: 680px;
  min-height: 680px;
  animation: slowCelestialRotate 160s linear infinite;
}

@keyframes slowCelestialRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 画面全体にキラキラ舞う金色の星屑パーティクルCanvas */
#sparkleCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================================
   メインの2カラム構成（PCは左サイドバー＋中央メイン、タブレット・スマホは1列縦並び）
   ============================================================================ */
.page-wrapper {
  position: relative;
  z-index: 2;
  display: grid;
  /* 左ウィジェット(250px)と中央タロット魔導書(680px)を美しい均整で中央配置 */
  grid-template-columns: 250px minmax(auto, 680px);
  justify-content: center;
  align-items: start;
  padding: 16px 20px 24px;
  gap: 24px;
  max-width: 1020px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  overflow-x: hidden;
}

.side-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  user-select: none;
  width: 100%;
}

.side-column.side-left {
  grid-column: 1;
  justify-self: end;
  width: 100%;
  max-width: 250px;
  margin-top: 0;
}

.grimoire-frame {
  grid-column: 2;
  width: 100%;
  max-width: 680px;
  margin: 0;
}

/* 左右の神秘的なガラス＆金細工ウィジェット（星雲が透けるグラスモーフィズム） */
.mystic-widget {
  width: 100%;
  max-width: 260px;
  background: linear-gradient(180deg, rgba(28, 22, 46, 0.85) 0%, rgba(16, 12, 28, 0.9) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(235, 208, 149, 0.65);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 3px rgba(13, 10, 24, 0.85),
    0 12px 28px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(235, 208, 149, 0.16);
  padding: 18px 15px;
  text-align: center;
  color: #f7efe1;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.mystic-widget:hover {
  border-color: rgba(235, 208, 149, 0.95);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 3px rgba(13, 10, 24, 0.85),
    0 16px 34px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(235, 208, 149, 0.26);
}

/* ウィジェット四隅の星辰ゴールドブローチ */
.widget-corner {
  position: absolute;
  font-size: 0.65rem;
  color: #c29b58;
  opacity: 0.85;
  user-select: none;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(235, 208, 149, 0.7);
  z-index: 2;
}

.wc-tl { top: 6px; left: 6px; }
.wc-tr { top: 6px; right: 6px; }
.wc-bl { bottom: 6px; left: 6px; }
.wc-br { bottom: 6px; right: 6px; }

/* ウィジェット内側の星辰二重枠 */
.widget-celestial-border {
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(194, 155, 88, 0.35);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.widget-header {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: #ffe6aa;
  border-bottom: 1px solid rgba(235, 208, 149, 0.35);
  padding-bottom: 7px;
  margin-bottom: 12px;
  text-transform: uppercase;
  word-break: keep-all;
  text-shadow: 0 0 8px rgba(235, 208, 149, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.widget-header-star {
  font-size: 0.68rem;
  color: #ffe382;
  text-shadow: 0 0 6px rgba(255, 227, 130, 0.6);
}

.widget-caption {
  font-size: 0.79rem;
  line-height: 1.72;
  color: #f5edd9;
  font-weight: 450;
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* 左ウィジェット：七灯籠スタンプコレクション */
.collection-counter {
  display: inline-block;
  background: rgba(235, 208, 149, 0.18);
  border: 1px solid rgba(235, 208, 149, 0.55);
  color: #fff0c7;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

/* コンプリート時のカウンターラッパー：二重枠や親の楕円形のはみ出しを解消 */
.collection-counter.completed,
.collection-counter:has(.stamp-complete-banner) {
  display: block;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto 10px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100%;
}

.lantern-stamp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0 12px;
}

.lantern-stamp {
  background: 
    radial-gradient(circle at 50% 0%, rgba(235, 208, 149, 0.14) 0%, transparent 65%),
    rgba(18, 13, 32, 0.92);
  border: 1px solid rgba(194, 155, 88, 0.5);
  outline: 1px dashed rgba(235, 208, 149, 0.28);
  outline-offset: -3px;
  border-radius: 8px;
  padding: 8px 4px 6px;
  color: #c8bddc;
  font-weight: 500;
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.lantern-stamp:hover {
  border-color: var(--gold-bright);
  outline-color: rgba(235, 208, 149, 0.65);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(235, 208, 149, 0.25), 0 0 12px rgba(124, 224, 255, 0.18);
}

.stamp-orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(235, 208, 149, 0.45);
  background: radial-gradient(circle, rgba(48, 40, 70, 0.7) 0%, rgba(18, 13, 30, 0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: rgba(235, 208, 149, 0.7);
  transition: all 0.35s ease;
}

.lantern-stamp.collected {
  border-style: solid;
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(64, 48, 98, 0.98) 0%, rgba(30, 22, 52, 1) 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(235, 208, 149, 0.35), inset 0 0 8px rgba(235, 208, 149, 0.2);
  cursor: pointer;
}

.lantern-stamp.collected:hover {
  border-color: #ffffff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(235, 208, 149, 0.5), 0 0 14px rgba(255, 248, 220, 0.6);
}

.lantern-stamp.collected:active {
  transform: translateY(0) scale(0.97);
}

.lantern-stamp.collected .stamp-orb {
  border-color: #ffffff;
  color: #1a1326;
  font-weight: bold;
  box-shadow: 0 0 14px currentColor, 0 0 24px currentColor;
}

/* 第8の禁忌スタンプ（隠しエンド到達後にのみ出現）：黒を真っ白に新装 */
.lantern-stamp.cursed-eighth {
  border-style: solid;
  border-color: #d90024;
  background: #ffffff;
  color: #c90022;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9), 0 0 20px rgba(217, 0, 36, 0.45);
}

.lantern-stamp.cursed-eighth:hover {
  border-color: #ff002b;
  background: #ffffff;
  color: #ff002b;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 24px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 0, 43, 0.85);
}

.lantern-stamp.cursed-eighth .stamp-orb {
  background: #ffffff;
  border-color: #d90024;
  color: #d90024;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(217, 0, 36, 0.4);
}

.lantern-stamp.cursed-eighth:hover .stamp-orb {
  border-color: #ff002b;
  color: #ff002b;
  box-shadow: 0 0 14px rgba(255, 0, 43, 0.7);
}

/* 輪廻外スタンプ確認待機時の妖しい脈動 */
.lantern-stamp.cursed-eighth.confirming {
  border-color: #ff002b;
  background: #ffffff;
  box-shadow: 0 0 24px rgba(255, 255, 255, 1), 0 0 35px rgba(255, 0, 43, 0.95);
  animation: cursedConfirmPulse 0.9s ease-in-out infinite alternate;
}

@keyframes cursedConfirmPulse {
  0% { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 18px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 0, 0, 0.7); }
  100% { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 42px rgba(255, 0, 0, 1); }
}

/* ============================================================================
   中央カラム：メインの神秘タロット占星書フレーム（幻想的な古代魔導書デザイン）
   ============================================================================ */
.grimoire-frame {
  background: var(--parchment-light);
  background-image:
    radial-gradient(rgba(194, 155, 88, 0.12) 1px, transparent 0),
    linear-gradient(180deg, #fdfbf5 0%, #f4e9d6 100%);
  background-size: 20px 20px, 100% 100%;
  border: 2px solid var(--gold-metallic);
  border-radius: 4px;
  box-shadow:
    0 0 0 5px rgba(18, 13, 30, 0.98),
    0 0 0 7px rgba(235, 208, 149, 0.75),
    0 0 32px rgba(124, 224, 255, 0.22),
    0 0 48px rgba(208, 139, 255, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.85);
  padding: 14px;
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

.grimoire-inner {
  border: 1px solid var(--gold-metallic);
  padding: 34px 32px 26px;
  position: relative;
  background: 
    radial-gradient(circle at 50% 28%, rgba(235, 208, 149, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(208, 139, 255, 0.08) 0%, transparent 55%),
    rgba(255, 253, 248, 0.97);
  box-shadow:
    inset 0 0 0 4px rgba(255, 253, 248, 0.95),
    inset 0 0 0 5px rgba(194, 155, 88, 0.35),
    inset 0 0 35px rgba(194, 155, 88, 0.12);
  color: var(--ink-deep);
  transition: background 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}

/* 羊皮紙上辺・下辺中央の星月クラウンフィリグリー */
.grimoire-crest-top {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #1f1633 0%, #100b1c 100%);
  border: 1px solid rgba(235, 208, 149, 0.7);
  padding: 2px 14px;
  border-radius: 999px;
  color: #c29b58;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(235, 208, 149, 0.3);
  pointer-events: none;
  z-index: 3;
}

.grimoire-crest-top .crest-main-star {
  color: #ffe382;
  font-size: 0.95rem;
  text-shadow: 0 0 8px rgba(255, 227, 130, 0.8);
}

.grimoire-crest-top .crest-moon {
  color: #ebd095;
  font-size: 0.8rem;
}

.grimoire-crest-top .crest-side-leaf {
  color: #a88344;
  font-size: 0.85rem;
  font-weight: 700;
}

.grimoire-crest-bottom {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(180deg, #1f1633 0%, #100b1c 100%);
  border: 1px solid rgba(235, 208, 149, 0.6);
  padding: 1px 12px;
  border-radius: 999px;
  color: #c29b58;
  font-size: 0.7rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(235, 208, 149, 0.2);
  pointer-events: none;
  z-index: 3;
}

.grimoire-crest-bottom .crest-main-star {
  color: #ffe382;
  font-size: 0.8rem;
  text-shadow: 0 0 6px rgba(255, 227, 130, 0.7);
}

.corner-ornament {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

.corner-tl {
  top: 4px;
  left: 4px;
}

.corner-tr {
  top: 4px;
  right: 4px;
  transform: scaleX(-1);
}

.corner-bl {
  bottom: 4px;
  left: 4px;
  transform: scaleY(-1);
}

.corner-br {
  bottom: 4px;
  right: 4px;
  transform: scale(-1, -1);
}

/* 六道＋涅槃の7色ジュエルオーブバー（星辰の天宮宝飾帯） */
.jewel-brooch-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0 auto 14px;
  padding: 5px 14px;
  background: radial-gradient(ellipse at center, rgba(255, 252, 242, 0.95) 0%, rgba(246, 238, 222, 0.75) 100%);
  border: 1px solid rgba(194, 155, 88, 0.45);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(140, 106, 50, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.8);
  flex-wrap: wrap;
  max-width: 95%;
  position: relative;
}

.brooch-wing-ornament {
  color: #c29b58;
  font-size: 0.95rem;
  opacity: 0.85;
  user-select: none;
  animation: mysticSparkle 3.5s ease-in-out infinite alternate;
}

@keyframes mysticSparkle {
  0% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.15) rotate(15deg); filter: drop-shadow(0 0 4px rgba(194, 155, 88, 0.7)); }
}

.jewel-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #2b1f1a;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(194, 155, 88, 0.5);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(140, 106, 50, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: default;
}

.jewel-pill:hover {
  transform: translateY(-1.5px) scale(1.04);
  border-color: #8c2432;
  box-shadow: 0 4px 12px rgba(140, 36, 50, 0.2), inset 0 0 6px rgba(255, 255, 255, 0.9);
}

.jewel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px currentColor, 0 0 2px rgba(255, 255, 255, 0.8);
  animation: gemBreathe 2.8s ease-in-out infinite alternate;
}

@keyframes gemBreathe {
  0% { transform: scale(0.95); opacity: 0.85; }
  100% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
}

/* ==========================================================================
   大聖堂ステンドグラス・アーチ天窓装飾（Cathedral Stained Glass Window）
   ========================================================================== */
.stained-glass-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stained-glass-container:hover {
  transform: translateY(-2px);
}

.stained-glass-arch {
  position: relative;
  width: 100%;
  height: 126px;
  border-radius: 999px 999px 12px 12px;
  overflow: hidden;
  border: 3px solid #c29b58;
  background: #1a1424;
  box-shadow:
    0 0 0 2px rgba(28, 20, 36, 0.95),
    0 0 0 4.5px rgba(235, 208, 149, 0.85),
    0 0 0 7px rgba(140, 106, 50, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 0 35px rgba(235, 208, 149, 0.35);
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
  z-index: 1;
}

.stained-glass-container:hover .stained-glass-arch {
  border-color: #ebd095;
  box-shadow:
    0 0 0 2px rgba(28, 20, 36, 0.95),
    0 0 0 5px rgba(255, 230, 160, 0.95),
    0 0 0 8px rgba(180, 130, 60, 0.5),
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 0 45px rgba(235, 208, 149, 0.55),
    0 0 60px rgba(124, 224, 255, 0.25);
}

.stained-glass-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  filter: saturate(1.22) contrast(1.1) brightness(1.02);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease;
}

.stained-glass-container:hover .stained-glass-img {
  transform: scale(1.045);
  filter: saturate(1.35) contrast(1.15) brightness(1.12);
}

/* 聖堂窓の鉛線（Lead came）とアンティーク金細工ベベル枠 */
.stained-glass-lead-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 0 0 3px rgba(32, 22, 44, 0.8),
    inset 0 0 16px rgba(0, 0, 0, 0.7),
    inset 0 0 32px rgba(194, 155, 88, 0.3);
  pointer-events: none;
  z-index: 2;
}

/* 聖堂ステンドグラスの光沢・ガラス反射ハイライト */
.stained-glass-reflection {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.15) 28%,
    transparent 45%,
    rgba(255, 255, 255, 0.08) 62%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* 差し込む天光の光芒（定期的に流れるサンビーム） */
.stained-glass-shimmer {
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: rotate(26deg);
  pointer-events: none;
  z-index: 4;
  animation: glassSunbeam 7s ease-in-out infinite;
}

@keyframes glassSunbeam {
  0%, 25% { left: -120%; opacity: 0; }
  45% { opacity: 0.65; }
  75% { left: 190%; opacity: 0; }
  100% { left: 190%; opacity: 0; }
}

/* ステンドグラス頭頂部の黄金星辰フィニアル章 */
.stained-glass-crest {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #2a1f33 55%, #150f1c 100%);
  border: 1.5px solid #ebd095;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(235, 208, 149, 0.85);
  pointer-events: none;
}

.crest-finial {
  color: #ffe382;
  font-size: 0.72rem;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 227, 130, 0.9);
  animation: finialTwinkle 3s ease-in-out infinite alternate;
}

@keyframes finialTwinkle {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.8; }
  100% { transform: scale(1.15) rotate(15deg); opacity: 1; }
}

/* 聖堂窓の背後に放たれる七色の天光オーラ */
.stained-glass-halo-glow {
  position: absolute;
  inset: -10px;
  border-radius: 999px 999px 24px 24px;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 225, 140, 0.38) 0%,
    rgba(124, 224, 255, 0.25) 45%,
    rgba(208, 139, 255, 0.2) 70%,
    transparent 90%
  );
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: glassAuraBreathe 5s ease-in-out infinite alternate;
}

@keyframes glassAuraBreathe {
  0% {
    opacity: 0.7;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
    filter: blur(14px) drop-shadow(0 0 18px rgba(255, 220, 130, 0.55));
  }
}

/* タップ・クリック時の共鳴パルス */
.stained-glass-container.gleam-active .stained-glass-arch {
  animation: glassGleamPulse 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes glassGleamPulse {
  0% {
    box-shadow:
      0 0 0 2px rgba(28, 20, 36, 0.95),
      0 0 0 5px rgba(255, 235, 170, 1),
      0 0 35px rgba(255, 220, 120, 0.95),
      0 0 65px rgba(124, 224, 255, 0.7);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(28, 20, 36, 0.95),
      0 0 0 4.5px rgba(235, 208, 149, 0.85),
      0 0 0 7px rgba(140, 106, 50, 0.4),
      0 10px 28px rgba(0, 0, 0, 0.4),
      0 0 35px rgba(235, 208, 149, 0.35);
  }
}

/* サブヘッダー：占星術・星辰タロットの天宮帯 */
.sub-header {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: #8c2432;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.sub-header::before,
.sub-header::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c29b58 50%, transparent);
  flex-shrink: 0;
}

.sub-header-star {
  font-size: 0.7rem;
  color: #c29b58;
  display: inline-block;
  opacity: 0.85;
}

/* メインタイトル：神聖幾何学と神秘の金赤金文字 */
h1.main-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0 10px;
  line-height: 1.35;
  text-align: center;
}

.main-title-lead {
  font-family: "Cinzel", "Shippori Mincho", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #9b783e;
  text-transform: uppercase;
  display: inline-block;
  opacity: 0.9;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.main-title-text {
  font-size: clamp(1.35rem, 4.4vw, 1.82rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1a0e0c;
  background: linear-gradient(180deg, #1f0b0d 0%, #4a121a 75%, #2a0b10 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 4px rgba(140, 36, 50, 0.15));
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.main-title-sub {
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
  font-size: clamp(0.84rem, 1.6vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8c2432;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.main-title-sub .sub-ornament {
  font-size: 0.72rem;
  color: #c29b58;
  opacity: 0.75;
}

/* ============================================================================
   ホーム画面：豪華絢爛メインタイトル（神聖幾何学＆優美なアンティーク箔押し）
   ============================================================================ */
h1.main-title.home-main-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2px auto 8px auto;
  padding: 2px 10px;
  text-align: center;
  line-height: 1.3;
}

/* タイトル背後の神聖光輪オーラ（文字コントラストを際立たせる澄んだ月光ハイライト） */
.title-crest-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96%;
  max-width: 480px;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.88) 0%, rgba(248, 238, 215, 0.3) 45%, rgba(255, 253, 248, 0) 72%);
  pointer-events: none;
  z-index: 0;
  filter: blur(12px);
}

/* タイトル頭上の金線フィリグリー（繊細な真鍮・月光星辰ライン） */
.title-top-filigree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  margin-bottom: 7px;
  position: relative;
  z-index: 1;
}

.title-top-filigree .filigree-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #c29b58 60%, #ebd095 100%);
  border-radius: 1px;
  opacity: 0.85;
}

.title-top-filigree .filigree-line:last-child {
  background: linear-gradient(90deg, #ebd095 0%, #c29b58 40%, transparent 100%);
}

.title-top-filigree .filigree-sparkle {
  font-size: 0.9rem;
  color: #b88a38;
  filter: drop-shadow(0 0 5px rgba(194, 155, 88, 0.6));
  animation: tenganPulse 3s infinite ease-in-out;
}

/* 「魂の転生タロット診断」：重厚な深紅ボルドー＆アンティークゴールド箔押しタイトル */
.home-main-title .main-title-text {
  position: relative;
  z-index: 1;
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.36rem, 4.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: clamp(0.08em, 1.2vw, 0.16em);
  padding: 2px 4px;
  color: #240d12;
  background: linear-gradient(180deg, 
    #1c080b 0%, 
    #3f131a 24%, 
    #692723 50%, 
    #46171e 76%, 
    #180608 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95)) 
          drop-shadow(0 2px 4px rgba(35, 12, 16, 0.22));
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-shadow: none;
}

/* 「あなたの来世はどこ？」：気品あるゴールドジュエリーラインと高視認性サブタイトル */
.home-main-title .main-title-sub {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin-top: 8px;
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
  font-size: clamp(0.86rem, 2.5vw, 1.12rem);
  font-weight: 700;
  letter-spacing: clamp(0.12em, 1.5vw, 0.22em);
  white-space: nowrap;
}

/* 左右に伸びる優美なアンティークゴールドライン */
.home-main-title .main-title-sub::before,
.home-main-title .main-title-sub::after {
  content: "";
  flex: 1;
  max-width: 44px;
  min-width: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #c29b58 100%);
  opacity: 0.85;
}

.home-main-title .main-title-sub::after {
  background: linear-gradient(90deg, #c29b58 0%, transparent 100%);
}

.home-main-title .main-title-sub .sub-text {
  color: #4a151e;
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: #4a151e;
  filter: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(45, 18, 22, 0.12);
  display: inline-block;
}

.home-main-title .main-title-sub .sub-ornament {
  font-size: 0.82rem;
  color: #b88a38;
  filter: drop-shadow(0 0 3px rgba(194, 155, 88, 0.5));
  display: inline-flex;
  align-items: center;
  user-select: none;
  transform: translateY(-0.5px);
}

.ornamental-divider {
  margin: 10px auto 16px;
  text-align: center;
  line-height: 1;
}

.ornamental-divider svg {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 3px rgba(194, 155, 88, 0.3));
}

/* 中央の極彩色・六道天球タロットエンブレム（7回連打ギミック） */
.emblem-stage {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 4px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.emblem-stage.is-compact {
  width: 76px;
  height: 76px;
  margin: 0 auto 4px;
}

/* 天球儀の背後の神秘的な七色オーラ光輪 */
.emblem-mystic-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 208, 149, 0.42) 0%, rgba(124, 224, 255, 0.18) 40%, rgba(208, 139, 255, 0.12) 65%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  animation: emblemAura 4.5s ease-in-out infinite alternate;
}

/* 天球儀を囲む繊細な星辰サークル（幾何学リング） */
.emblem-celestial-halo {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px dashed rgba(194, 155, 88, 0.45);
  pointer-events: none;
  z-index: 0;
  animation: slowHaloSpin 60s linear infinite;
}

.emblem-celestial-halo::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px dotted rgba(235, 208, 149, 0.35);
}

@keyframes slowHaloSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 天球の左右に静かに浮遊する星辰の小衛星 */
.emblem-satellite {
  position: absolute;
  top: 50%;
  font-size: 0.78rem;
  color: #c29b58;
  pointer-events: none;
  z-index: 2;
  user-select: none;
  text-shadow: 0 0 6px rgba(235, 208, 149, 0.8);
}

.emblem-satellite.orb-left {
  left: -12px;
  animation: satelliteFloatLeft 3.6s ease-in-out infinite alternate;
}

.emblem-satellite.orb-right {
  right: -12px;
  animation: satelliteFloatRight 3.6s ease-in-out infinite alternate;
}

@keyframes satelliteFloatLeft {
  0% { transform: translateY(-50%) translate(0, -6px) scale(0.9); opacity: 0.6; }
  100% { transform: translateY(-50%) translate(-4px, 6px) scale(1.15); opacity: 1; color: #ffe382; }
}

@keyframes satelliteFloatRight {
  0% { transform: translateY(-50%) translate(0, 6px) scale(1.15); opacity: 1; color: #7ce0ff; }
  100% { transform: translateY(-50%) translate(4px, -6px) scale(0.9); opacity: 0.6; }
}

@keyframes emblemAura {
  0% { transform: scale(0.92); opacity: 0.6; filter: hue-rotate(0deg); }
  100% { transform: scale(1.1); opacity: 0.95; filter: hue-rotate(25deg) drop-shadow(0 0 16px rgba(194, 155, 88, 0.5)); }
}

.emblem-stage svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(140, 106, 50, 0.28));
  transition: filter 0.3s ease;
}

.emblem-stage:hover svg {
  filter: drop-shadow(0 8px 24px rgba(194, 155, 88, 0.65)) drop-shadow(0 0 10px rgba(255, 227, 130, 0.4));
}

/* 神秘的な魂の神託板（アストラル・オラクルスクロールカード） */
.lead-oracle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: 
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(255, 245, 230, 0.8) 0%, transparent 70%),
    rgba(255, 253, 248, 0.98);
  border: 1.5px solid rgba(194, 155, 88, 0.65);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 auto 12px;
  box-shadow: 
    0 8px 28px rgba(140, 106, 50, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 0 25px rgba(235, 208, 149, 0.18);
  overflow: hidden;
  box-sizing: border-box;
}

/* カード内側の金糸飾り枠 */
.oracle-inner-border {
  position: absolute;
  inset: 5px;
  border: 1px double rgba(194, 155, 88, 0.45);
  border-radius: 7px;
  pointer-events: none;
}

/* カード背景の神秘的なアストラル透かし */
.oracle-astral-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(194, 155, 88, 0.05) 0%, transparent 65%),
    radial-gradient(rgba(194, 155, 88, 0.08) 1px, transparent 0);
  background-size: 100% 100%, 16px 16px;
  opacity: 0.85;
}

/* 神託板の上辺を飾る洗練されたアンティークゴールドライン */
.oracle-gold-aura {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #c29b58 35%, #ebd095 50%, #c29b58 65%, transparent 100%);
  opacity: 0.85;
}

/* 神秘的な四隅の星辰オーナメント */
.oracle-card-corner {
  position: absolute;
  font-size: 0.68rem;
  color: #c29b58;
  opacity: 0.75;
  user-select: none;
  line-height: 1;
}

.occ-tl { top: 6px; left: 8px; }
.occ-tr { top: 6px; right: 8px; }
.occ-bl { bottom: 6px; left: 8px; }
.occ-br { bottom: 6px; right: 8px; }

/* 神秘的な小見出しバッジ */
.oracle-destiny-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 12px;
}

.destiny-sparkle {
  color: #c29b58;
  font-size: 0.82rem;
  animation: mysticSparkle 3s ease-in-out infinite alternate;
}

.destiny-badge-text {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #8c2432;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(140, 36, 50, 0.08) 0%, rgba(194, 155, 88, 0.12) 100%);
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid rgba(194, 155, 88, 0.35);
}

/* 文章のレイアウトと詩的なリズム */
.oracle-prose-wrap {
  text-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.oracle-prose-wrap + .tengan-home-card {
  margin-top: 12px;
}

.oracle-prose-lead {
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  font-weight: 600;
  color: #241412;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
}

/* 「7つの彩り」のスピリチュアルな七色レインボーグラデーション文字 */
.seven-chroma-text {
  display: inline-block;
  font-weight: 700;
  background: linear-gradient(90deg, #d90429 0%, #d08bff 25%, #4361ee 50%, #2ec4b6 75%, #e76f51 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9));
  font-size: 1.02em;
  letter-spacing: 0.06em;
  padding: 0 2px;
}

/* 七色に瞬く星辰の七連ジュエルディバイダー */
.oracle-seven-constellation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 8px auto;
  max-width: 260px;
  width: 100%;
}

.constellation-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 155, 88, 0.45));
}

.oracle-seven-constellation .constellation-line:last-child {
  background: linear-gradient(90deg, rgba(194, 155, 88, 0.45), transparent);
}

.constellation-gem {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 5px currentColor;
  animation: gemPulseWave 2.8s ease-in-out infinite alternate;
}

.gem-nehan   { background: var(--gem-nehan); color: var(--gem-nehan); animation-delay: 0s; }
.gem-tendo   { background: var(--gem-tendo); color: var(--gem-tendo); animation-delay: 0.4s; }
.gem-ningen  { background: var(--gem-ningen); color: var(--gem-ningen); animation-delay: 0.8s; }
.gem-shura   { background: var(--gem-shura); color: var(--gem-shura); animation-delay: 1.2s; }
.gem-chikusho{ background: var(--gem-chikusho); color: var(--gem-chikusho); animation-delay: 1.6s; }
.gem-gaki    { background: var(--gem-gaki); color: var(--gem-gaki); animation-delay: 2.0s; }
.gem-jigoku  { background: var(--gem-jigoku); color: var(--gem-jigoku); animation-delay: 2.4s; }

@keyframes gemPulseWave {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
}

.oracle-prose-sub {
  font-size: clamp(0.85rem, 2.2vw, 0.92rem);
  color: #3b2823;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
}

.score-sparkle-tag {
  color: #8c2432;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(140, 36, 50, 0.08) 0%, rgba(140, 36, 50, 0.16) 100%);
  padding: 1px 6px;
  border-radius: 4px;
  border-bottom: 1.5px solid rgba(140, 36, 50, 0.4);
}

/* 星灯籠スタンプ案内インフォバー（すっきり整った品格あるミニバッジ） */
.lantern-guide-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 14px;
  background: linear-gradient(135deg, rgba(255, 252, 246, 0.95) 0%, rgba(250, 244, 233, 0.95) 100%);
  border: 1px solid rgba(194, 155, 88, 0.4);
  border-radius: 6px;
  margin-top: 10px;
}

.guide-gem-star {
  font-size: 0.8rem;
  color: #b88a38;
  filter: drop-shadow(0 0 3px rgba(194, 155, 88, 0.4));
  flex-shrink: 0;
}

.guide-ribbon-text-wrap {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
}

.guide-ribbon-title {
  font-family: "Cinzel", "Shippori Mincho", serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8c2432;
  white-space: nowrap;
}

.guide-ribbon-desc {
  font-size: 0.78rem;
  color: #4a342c;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

.guide-ribbon-desc strong {
  color: #8c2432;
  font-weight: 700;
}

/* フィクション＆演出注意書き（品よくまとめたアンティーク注記） */
.home-disclaimer-text {
  max-width: 480px;
  margin: 16px auto 14px;
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.82);
  border: 1px solid rgba(194, 155, 88, 0.35);
  font-size: 0.74rem;
  line-height: 1.65;
  color: #5c4436;
  text-align: center;
  letter-spacing: 0.025em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.caution-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 16px auto 14px;
  max-width: 480px;
}

.caution-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(255, 252, 246, 0.75);
  border: 1px solid rgba(194, 155, 88, 0.35);
  font-size: 0.72rem;
  font-weight: 600;
  color: #5c4436;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.caution-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #ebd095;
  transform: translateY(-1px);
}

.caution-pill-icon {
  font-size: 0.8rem;
  line-height: 1;
}

/* 診断前メタバッジ（全10問 / 約2分 / 完全無料） */
.start-meta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 0 auto 16px;
  max-width: 440px;
}

.start-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(25, 18, 41, 0.72);
  border: 1px solid rgba(194, 155, 88, 0.45);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(194, 155, 88, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.start-meta-badge .badge-icon {
  font-size: 0.78rem;
  color: #ffe382;
}

/* 呼び名入力ボックス（星辰の儀式枠） */
.ritual-input-box {
  background: 
    radial-gradient(circle at 50% 0%, rgba(235, 208, 149, 0.12) 0%, transparent 70%),
    #ffffff;
  border: 1.2px solid rgba(194, 155, 88, 0.55);
  padding: 8px 14px 10px;
  margin: 0 auto 10px;
  max-width: 400px;
  text-align: center;
  box-shadow: 
    inset 0 0 12px rgba(194, 155, 88, 0.08),
    0 2px 8px rgba(140, 106, 50, 0.06);
  border-radius: 6px;
}

.ritual-input-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px;
}

.ritual-input-header label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #2b1f1a;
  margin: 0;
  cursor: pointer;
}

.input-glyph {
  font-size: 0.76rem;
  color: #c29b58;
  opacity: 0.85;
}

.ritual-input-field-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}

.ritual-input-box input {
  width: 100%;
  padding: 8px 12px;
  background: #fdfcf9;
  border: 1.5px solid var(--gold-metallic);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #140e0c;
  text-align: center;
  letter-spacing: 0.04em;
  outline: none;
  transition: all 0.25s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ritual-input-box input::placeholder {
  color: #8c786a;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.ritual-input-box input:focus {
  background: #ffffff;
  border-color: #8c2432;
  box-shadow: 0 0 12px rgba(194, 155, 88, 0.4), 0 0 0 2px rgba(140, 36, 50, 0.15);
}

.ritual-input-hint {
  margin-top: 8px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #5c4436;
  letter-spacing: 0.04em;
}

/* 診断開始ボタン（タロット占星録をひらく）：重厚な神聖CTA */
.ritual-start-btn-wrap {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 8px;
}

.tarot-btn {
  background: linear-gradient(135deg, #2b1f3a 0%, #1a1224 50%, #251424 100%);
  color: #ffffff;
  font-weight: 600;
  border: 1.5px solid var(--gold-bright);
  outline: 1px solid rgba(235, 208, 149, 0.4);
  outline-offset: -3px;
  padding: 13px 34px;
  font-family: inherit;
  font-size: 0.98rem;
  letter-spacing: 0.2em;
  line-height: 1.45;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(24, 18, 36, 0.45), 0 0 16px rgba(235, 208, 149, 0.22);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ホームのメインCTAボタン強化 */
.home-cta-btn {
  padding: 14px 28px;
  position: relative;
  border-color: #ffd700;
  box-shadow: 0 8px 24px rgba(24, 18, 36, 0.5), 0 0 20px rgba(255, 215, 0, 0.28);
  animation: pulsePrimaryCta 3.2s ease-in-out infinite;
}

.home-cta-btn .tarot-btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.home-cta-btn .tarot-btn-main {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fffaf0;
  text-shadow: 0 0 8px rgba(255, 227, 130, 0.6);
}

.home-cta-btn .tarot-btn-sub {
  font-family: "Cinzel", "Shippori Mincho", serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--gold-bright);
  opacity: 0.88;
}

@keyframes pulsePrimaryCta {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(24, 18, 36, 0.5), 0 0 16px rgba(255, 215, 0, 0.25);
    border-color: var(--gold-bright);
  }
  50% {
    box-shadow: 0 10px 30px rgba(184, 15, 10, 0.4), 0 0 28px rgba(255, 215, 0, 0.5);
    border-color: #ffe382;
    transform: translateY(-1px);
  }
}

.tarot-btn-wing {
  font-size: 0.88rem;
  color: #ffe382;
  text-shadow: 0 0 6px rgba(255, 227, 130, 0.7);
  transition: transform 0.3s ease;
}

.tarot-btn:hover {
  background: linear-gradient(135deg, #8c2432 0%, #b80f0a 50%, #5a1721 100%);
  border-color: #ffe082;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(184, 15, 10, 0.5), 0 0 22px rgba(255, 224, 130, 0.35);
}

.tarot-btn:hover .tarot-btn-wing.left {
  transform: translateX(-3px) scale(1.2);
}

.tarot-btn:hover .tarot-btn-wing.right {
  transform: translateX(3px) scale(1.2);
}

.tarot-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(184, 15, 10, 0.4);
}

/* 診断結果操作ボタン全体のラッパー（縦積み） */
.result-actions-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  width: 100%;
}

/* 通常の主要ボタン群：PCでは中央揃え横並び、スマホでは縦並び */
.result-primary-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

@media (min-width: 600px) {
  .result-primary-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
}

/* メインCTA（X共有ボタンを主役として際立たせる） */
.result-cta-main {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 10px;
}

.result-cta-main .tarot-share-x-btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 255, 255, 0.15);
}

/* サブアクション群：コンパクト共有ツールバー（画像保存・LINE・コピーを極小ピルで1行集約） */
.share-compact-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 8px;
}

.mini-tool-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.mini-tool-btn:hover {
  transform: translateY(-1.5px);
}

.mini-tool-btn:active {
  transform: translateY(0);
}

.mini-tool-btn .mini-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* 画像保存ボタン（ゴールドコズミック） */
.save-img-btn {
  background: linear-gradient(135deg, rgba(38, 28, 54, 0.95), rgba(26, 18, 38, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.65);
  color: #f7e7c4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.save-img-btn:hover {
  border-color: #ffd700;
  background: linear-gradient(135deg, rgba(52, 38, 74, 0.95), rgba(36, 25, 54, 0.95));
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.25);
}

/* LINEで送るボタン（LINE公式グリーン基調） */
.line-share-btn {
  background: linear-gradient(135deg, rgba(10, 36, 20, 0.95), rgba(6, 24, 14, 0.95));
  border: 1px solid rgba(6, 199, 85, 0.65);
  color: #a3f7b5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.line-share-btn:hover {
  border-color: #06c755;
  background: linear-gradient(135deg, rgba(16, 54, 30, 0.95), rgba(10, 36, 20, 0.95));
  box-shadow: 0 3px 10px rgba(6, 199, 85, 0.3);
}

/* コピーボタン（スレートシック） */
.copy-text-btn {
  background: linear-gradient(135deg, rgba(32, 28, 40, 0.95), rgba(22, 18, 28, 0.95));
  border: 1px solid rgba(165, 150, 185, 0.45);
  color: #eeeaf5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.copy-text-btn:hover {
  border-color: rgba(215, 200, 235, 0.7);
  background: linear-gradient(135deg, rgba(45, 40, 58, 0.95), rgba(32, 28, 40, 0.95));
}

/* 周回＆コレクションツールバー（もう一度占う＋転生図鑑を横並び均等配置） */
.result-play-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.result-play-toolbar .tarot-btn {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.88rem;
  padding: 11px 14px;
  white-space: nowrap;
}

.result-play-toolbar .retry-btn {
  background: linear-gradient(135deg, rgba(62, 42, 30, 0.95) 0%, rgba(38, 26, 20, 0.98) 100%);
  border: 1.5px solid var(--gold-metallic);
  color: #fff4d6;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(194, 155, 88, 0.22);
  transition: all 0.25s ease;
}

.result-play-toolbar .retry-btn:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(88, 56, 38, 0.98) 0%, rgba(52, 32, 24, 1) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 215, 0, 0.35);
  transform: translateY(-1.5px);
}

.result-play-toolbar .codex-open-action-btn {
  background: linear-gradient(135deg, rgba(34, 30, 48, 0.92) 0%, rgba(22, 18, 32, 0.96) 100%);
  border: 1.5px solid rgba(124, 224, 255, 0.45);
  color: #e0f6ff;
  transition: all 0.25s ease;
}

.result-play-toolbar .codex-open-action-btn:hover {
  border-color: rgba(124, 224, 255, 0.85);
  background: linear-gradient(135deg, rgba(46, 40, 66, 0.95) 0%, rgba(28, 22, 42, 0.98) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(124, 224, 255, 0.28);
  transform: translateY(-1.5px);
}

.codex-count-badge {
  font-size: 0.74rem;
  opacity: 0.85;
  margin-left: 2px;
  letter-spacing: 0.02em;
}

/* 画像保存完了トースト */
.img-saved-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99999;
  background: rgba(22, 16, 32, 0.96);
  border: 1.5px solid #d4af37;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(212, 175, 55, 0.3);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.img-saved-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 転生拒否ボタン専用エリア（メインボタン群の直下に独立配置） */
.result-optout-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  min-height: 0;
  gap: 6px;
}

/* X（旧Twitter）共有ボタン */
.tarot-share-x-btn {
  background: #000000;
  color: #f3f4f6;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.1);
  transition: all 0.22s ease;
}

.tarot-share-x-btn:hover {
  background: #111827;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25), 0 0 16px rgba(255, 255, 255, 0.2);
}

.x-logo-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* 結果クリップボードコピーボタン（LINE/Discord/各種SNS共有用） */
.tarot-copy-btn {
  background: linear-gradient(135deg, #1b263b 0%, #0d1b2a 100%);
  color: #e0e1dd;
  border: 1px solid rgba(124, 224, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(124, 224, 255, 0.08);
  transition: all 0.22s ease;
}

.tarot-copy-btn:hover {
  background: linear-gradient(135deg, #24344d 0%, #112233 100%);
  border-color: #7ce0ff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 224, 255, 0.3);
}

.tarot-copy-btn.copy-success {
  background: linear-gradient(135deg, #143622 0%, #0d2316 100%) !important;
  border-color: #8ce99a !important;
  box-shadow: 0 0 16px rgba(140, 233, 154, 0.4) !important;
}

.copy-icon-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* 涅槃専用 X共有ボタン（ゴールド＆シアン光彩） */
.tarot-share-x-btn.nehan-x-btn {
  background: linear-gradient(135deg, #090e1d 0%, #000000 100%);
  border: 1.2px solid #ffd700;
  color: #fff9e6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 215, 0, 0.25);
}

.tarot-share-x-btn.nehan-x-btn:hover {
  background: linear-gradient(135deg, #182647 0%, #0a0e1c 100%);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(255, 215, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.35);
}

/* 地獄専用 X共有ボタン（黒鉄＆業火光彩） */
.tarot-share-x-btn.hell-x-btn {
  background: #0a0505;
  border: 1.2px solid #e63946;
  color: #ffe5e7;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 12px rgba(230, 57, 70, 0.28);
}

.tarot-share-x-btn.hell-x-btn:hover {
  background: #1f0b0d;
  border-color: #ff5263;
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(230, 57, 70, 0.55), 0 0 18px rgba(255, 82, 99, 0.35);
}

/* 統合プログレスバー（第○問と星ドットを1行に集約して画面縦幅を圧縮） */
.question-progress-integrated {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 520px;
  margin: 2px auto 10px;
  padding: 0 6px;
  gap: 12px;
}

.question-progress-integrated .question-header-badge {
  margin: 0;
  white-space: nowrap;
}

/* 質問プログレスバー（10個の煌めく星） */
.constellation-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0;
  flex-wrap: nowrap;
}

.star-dot {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1.5px solid var(--gold-metallic);
  background: transparent;
  transition: all 0.25s ease;
}

/* 正当に回答したときのひし形：赤 */
.star-dot.done-red,
.star-dot.done {
  background: #a82435;
  border-color: #801825;
  box-shadow: 0 0 8px rgba(168, 36, 53, 0.65);
}



.star-dot.active {
  background: rgba(140, 36, 50, 0.35);
  border-color: var(--gold-bright);
  transform: rotate(45deg) scale(1.35);
  box-shadow: 0 0 10px rgba(235, 208, 149, 0.7);
}

.question-header-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #8c2432;
  border-bottom: 1.5px solid var(--gold-metallic);
  padding: 2px 8px 4px;
  margin-bottom: 10px;
  cursor: default;
  user-select: none;
  transition: color 0.25s, text-shadow 0.25s, border-color 0.25s;
}

.question-header-badge.is-unsettling {
  color: #c9182b;
  border-bottom-color: rgba(201, 24, 43, 0.75);
  text-shadow: 0 0 10px rgba(201, 24, 43, 0.55);
  font-weight: bold;
  letter-spacing: 0.24em;
  animation: unsettlingBadgeFlicker 3s infinite alternate ease-in-out;
}

@keyframes unsettlingBadgeFlicker {
  0% { opacity: 0.88; text-shadow: 0 0 6px rgba(201, 24, 43, 0.4); }
  50% { opacity: 1; text-shadow: 0 0 12px rgba(255, 0, 43, 0.75); }
  100% { opacity: 0.82; text-shadow: 0 0 8px rgba(180, 20, 35, 0.45); }
}

.question-title {
  font-size: clamp(1.1rem, 3.8vw, 1.28rem);
  line-height: 1.76;
  color: #0d0705;
  margin: 6px 0 20px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.choices-grid {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 12px;
}



/* 画面遷移（キレのある高速スナップ＆フェードイン） */
@keyframes screenFadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.screen-enter {
  animation: screenFadeIn 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  will-change: opacity, transform;
}

.choice-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #d4be94;
  padding: 14px 18px;
  text-align: left;
  font-family: inherit;
  font-feature-settings: "palt" 1;
  font-size: 0.97rem;
  font-weight: 500;
  color: #140e0c;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  line-height: 1.68;
  box-shadow: 0 3px 10px rgba(36, 29, 27, 0.06);
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease;
}

/* 左端から差し込む金色の光彩ストライプ */
.choice-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #f7e7c4, var(--gold-metallic), #8c6a32);
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ホバー時に左から薄く広がる金色のシマーグラデーション */
.choice-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.04) 65%, transparent 100%);
  opacity: 0;
  transform: translateX(-15%);
  transition: opacity 0.3s ease, transform 0.3s ease-out;
  pointer-events: none;
}

.choice-card:hover {
  background: #fdf6ea;
  border-color: #8c2432;
  color: #000000;
  transform: translateX(5px) translateY(-1px);
  box-shadow: 0 6px 20px rgba(194, 155, 88, 0.3), 0 0 14px rgba(212, 175, 55, 0.2);
}

.choice-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.choice-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.choice-card:active {
  background: #f4e7d0;
  transform: translateX(2px) scale(0.99);
}

.choice-card.is-selected {
  background: linear-gradient(90deg, #fcedd0 0%, #fffbf2 100%) !important;
  border-color: #8c2432 !important;
  color: #000000 !important;
  transform: translateX(4px) scale(0.995);
  box-shadow: 0 0 16px rgba(140, 36, 50, 0.4), inset 0 0 12px rgba(235, 208, 149, 0.3) !important;
  transition: all 0.06s ease;
}

.choice-card.is-selected::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
  background: linear-gradient(to bottom, #ffe082, #8c2432) !important;
}

.choice-card.is-selected .roman-num {
  background: #8c2432 !important;
  color: #ffffff !important;
  border-color: #ffe082 !important;
}

/* 直前に選んでいた選択肢の復元表示（戻った時の一目でわかる親切UI） */
.choice-card.was-previously-selected {
  background: linear-gradient(90deg, #fcf8ee 0%, #ffffff 100%);
  border-color: #c29b58;
  box-shadow: 0 0 0 1.5px rgba(194, 155, 88, 0.5), 0 4px 14px rgba(194, 155, 88, 0.16);
}

.choice-card.was-previously-selected::before {
  opacity: 1;
  transform: scaleY(1);
}

.choice-card.was-previously-selected .roman-num {
  background: #c29b58;
  color: #ffffff;
  border-color: #ebd095;
}

.previously-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7a5823;
  background: rgba(194, 155, 88, 0.14);
  border: 1px solid rgba(194, 155, 88, 0.45);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 狂気侵食：モキュメンタリーホラー・破損アーカイブ風演出（派手さを抑えた静かな異常） */
.choice-card.is-corrupted {
  background: linear-gradient(90deg, #0e0708 0%, #1a0b0e 100%) !important;
  border: 1px solid rgba(190, 35, 45, 0.55) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(160, 20, 30, 0.25) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}

.choice-card.is-corrupted:hover {
  border-color: rgba(220, 45, 55, 0.85) !important;
  background: linear-gradient(90deg, #160a0c 0%, #220e12 100%) !important;
  box-shadow: 0 2px 18px rgba(180, 20, 30, 0.3), inset 0 0 12px rgba(180, 20, 30, 0.35) !important;
}

.choice-card.is-corrupted::before {
  opacity: 0.8 !important;
  transform: scaleY(1) !important;
  background: linear-gradient(to bottom, #991520, #4a060c) !important;
}

.choice-card.is-corrupted .roman-num {
  background: #1e0a0d !important;
  color: #df5866 !important;
  border-color: rgba(200, 40, 50, 0.6) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.choice-card.is-corrupted .choice-text-wrap {
  color: #e6b8be !important;
  font-family: "Courier New", monospace, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 4px rgba(190, 35, 45, 0.5) !important;
}

/* 画面全体のモキュメンタリー侵食モード（薄い走査線と冷たい沈降・画面シェイクは排す） */
body.is-heresy-active::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: 
    radial-gradient(circle at center, transparent 60%, rgba(15, 3, 5, 0.75) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 3px);
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

/* 設問下の冷徹な記録記号（文字を排し、記号だけを静かに表示） */
.heresy-omen-tracker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 0 8px;
  margin: 2px auto 6px;
}

.heresy-omen-tracker .heresy-mark {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.88rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.4s ease;
  user-select: none;
}

.heresy-omen-tracker .heresy-mark.is-carved {
  color: #c9182b;
  text-shadow: 0 0 8px rgba(201, 24, 43, 0.7);
  transform: scale(1.15);
}

.heresy-omen-tracker .heresy-mark-sep {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.15);
}

/* 文字化け狂気選択肢を選んだ時の凶星ドット：深紅の刻印（♰）と冷たい脈動 */
.star-dot.done-corrupted {
  background: #a81c2b !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 0 6px rgba(168, 28, 43, 0.8), inset 0 0 3px #000000 !important;
  animation: corruptedDotSubtlePulse 2s infinite ease-in-out !important;
  position: relative;
}

.star-dot.done-corrupted::after {
  content: "♰";
  position: absolute;
  font-size: 0.62rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-45deg);
}

@keyframes corruptedDotSubtlePulse {
  0% { transform: rotate(45deg) scale(1.05); opacity: 0.85; }
  50% { transform: rotate(45deg) scale(1.2); opacity: 1; box-shadow: 0 0 10px rgba(168, 28, 43, 0.9); }
  100% { transform: rotate(45deg) scale(1.05); opacity: 0.85; }
}

/* 狂気選択肢クリック時の冷酷・無機質な「真っ白・読み込み停止」カットイン */
.glitch-cutin-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #ffffff;
  color: #1f2328;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  user-select: none;
  pointer-events: all;
  box-sizing: border-box;
}

.glitch-cutin-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e1e4e8;
}

.glitch-native-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e1e4e8;
  border-top-color: #0969da;
  border-radius: 50%;
  animation: breachNativeSpin 0.7s linear infinite;
}

.glitch-cutin-body {
  font-size: 0.92rem;
  color: #24292f;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.glitch-cutin-sub {
  font-size: 0.76rem;
  color: #6e7781;
  font-family: Consolas, monospace;
  margin-top: 2px;
}

/* 4大トリガー直後の異常突入シークエンス */
.anomaly-breach-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  user-select: none;
  pointer-events: all;
  overflow: hidden;
}

/* フェーズ1：極めてシンプルで無機質な「真っ白」＆「勝手に何かに接続されていく」画面 */
.breach-phase-whiteout {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  color: #1f2328;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.breach-white-box {
  max-width: 540px;
  width: 92%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 上部のアドレスバー（URLが勝手に書き換わっていく） */
.breach-url-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  color: #24292f;
  transition: all 0.3s ease;
}

.breach-url-bar.is-danger {
  border-color: #cf222e;
  background: #ffebe9;
  color: #82071e;
}

.breach-url-lock {
  display: inline-block;
  font-size: 0.85rem;
  color: #57606a;
}

.breach-url-bar.is-danger .breach-url-lock {
  color: #cf222e;
}

.breach-url-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 中央：素朴なスピナーとステータス */
.breach-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}

.breach-native-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid #d0d7de;
  border-top-color: #0969da;
  border-radius: 50%;
  animation: breachNativeSpin 0.65s linear infinite;
  flex-shrink: 0;
}

.breach-status-row.is-danger .breach-native-spinner {
  border-top-color: #cf222e;
}

.breach-status-text {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2328;
  letter-spacing: 0.02em;
}

.breach-status-row.is-danger .breach-status-text {
  color: #cf222e;
}

@keyframes breachNativeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 勝手に何かに接続されていく通信ログ（カタカタと流れる） */
.breach-log-terminal {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #57606a;
  min-height: 110px;
  max-height: 140px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.breach-log-line {
  opacity: 0;
  transform: translateY(4px);
  animation: logLineIn 0.2s forwards ease-out;
  white-space: pre-wrap;
  word-break: break-all;
}

.breach-log-line.warn {
  color: #9a6700;
  font-weight: 600;
}

.breach-log-line.danger {
  color: #cf222e;
  font-weight: 700;
}

@keyframes logLineIn {
  to { opacity: 1; transform: translateY(0); }
}

/* プログレスバー：途中で暴走して右端を突き破る */
.breach-progress-wrap {
  width: 100%;
  height: 4px;
  background: #eaeef2;
  border-radius: 2px;
  overflow: visible;
  position: relative;
}

.breach-progress-bar {
  width: 0%;
  height: 100%;
  background: #0969da;
  border-radius: 2px;
  transition: width 0.25s linear, background-color 0.2s ease;
}

.breach-progress-bar.is-danger {
  background: #cf222e;
  box-shadow: 0 0 10px rgba(207, 34, 46, 0.8);
}

.breach-phase-whiteout {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  color: #1f2328;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.7s ease, filter 0.7s ease;
}

.breach-phase-whiteout.is-fading-out {
  opacity: 0;
  filter: blur(3px);
}

/* 漆黒の沈降・静寂（フラッシュを廃止し、静かな暗転から出現） */
.breach-phase-abyss {
  position: absolute;
  inset: 0;
  display: none;
  background: #000000;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.breach-phase-abyss.is-active {
  display: flex;
  opacity: 1;
}

.breach-abyss-content {
  text-align: center;
  max-width: 540px;
}

.breach-abyss-line1 {
  font-size: clamp(1rem, 3.2vw, 1.4rem);
  font-weight: 300;
  color: #e5e7eb;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
}

.breach-abyss-line2 {
  font-size: clamp(0.78rem, 2.2vw, 0.95rem);
  color: #6b7280;
  letter-spacing: 0.06em;
  font-family: Consolas, monospace;
}

/* ローマ数字バッジのマイクロ演出：ホバー時に反転して黄金に発光 */
.roman-num {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--gold-metallic);
  color: #8c2432;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fffefb;
  border-radius: 3px;
  transition: all 0.25s ease;
}

.choice-card:hover .roman-num {
  border-color: #f7e7c4;
  background: #8c2432;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(140, 36, 50, 0.5);
  transform: scale(1.06);
}

/* 連打ギミック解放後にのみ現れる欄外の赤文字 */
.hidden-omen-bar {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px dashed rgba(161, 53, 53, 0.4);
  font-size: 0.74rem;
  color: #8c5a5a;
  letter-spacing: 0.12em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.crimson-glitch {
  color: #b82828;
  font-weight: bold;
}

/* 診断結果画面（涅槃〜地獄共通コンテナ・見開きレスポンシブ） */
.result-view-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.result-top-bar {
  text-align: center;
  margin-bottom: 10px;
}

.result-score-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.result-spread-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-spread-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nehan-left-replay {
  margin-top: 8px;
  font-size: 0.76rem;
  padding: 6px 14px;
}

.result-spread-right {
  display: flex;
  flex-direction: column;
}

/* 結果画面のタロット絵画プレート枠（1〜5はすっきりとした白のタロット台紙） */
.tarot-plate-wrap {
  position: relative;
  width: min(252px, 78vw);
  margin: 10px auto 16px;
  padding: 8px;
  background: #ffffff;
  border: 1.5px solid #d4be94;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(24, 18, 36, 0.16), 0 0 16px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  user-select: none;
  perspective: 900px;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.tarot-plate-wrap:hover {
  border-color: #8c2432;
  box-shadow: 0 18px 42px rgba(24, 18, 36, 0.24), 0 0 20px rgba(140, 36, 50, 0.15);
}

.tarot-plate-insignia {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: #8c2432;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.tarot-plate-img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #d4be94;
  border-radius: 3px;
  pointer-events: none;
}

/* 金箔グレア（ホログラム金箔反射レイヤー） */
.tarot-plate-glare {
  position: absolute;
  inset: 8px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(255, 248, 220, 0.55) 0%,
      rgba(229, 200, 136, 0.25) 30%,
      transparent 68%);
  mix-blend-mode: overlay;
  transition: opacity 0.25s ease-out;
  z-index: 2;
}

.tarot-plate-wrap:hover .tarot-plate-glare {
  opacity: 1;
}

.score-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 235, 0.96));
  border: 1px solid rgba(194, 155, 88, 0.45);
  padding: 6px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #2b1c10;
  margin: 0;
  max-width: 100%;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(30, 20, 10, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.score-banner strong {
  color: #991b2b;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.stamp-unlocked-toast {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(43, 33, 58, 0.96), rgba(74, 42, 64, 0.96));
  border: 1px solid var(--gold-bright);
  color: #ffffff;
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 999px;
  margin: 0;
  max-width: 100%;
  line-height: 1.5;
  box-shadow: 0 3px 12px rgba(194, 155, 88, 0.25);
}

.reading-panel {
  background: #ffffff;
  border: 1.5px solid #d4be94;
  padding: 22px 24px;
  text-align: left;
  line-height: 2.05;
  font-size: 0.96rem;
  font-weight: 500;
  color: #110a08;
  margin-bottom: 18px;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.reading-lead {
  font-size: 0.96rem;
  line-height: 2.05;
  color: #110a08;
  font-weight: 500;
  margin-bottom: 14px;
}

.reading-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px dotted #c7a972;
}

/* ============================================================================
   転生先＆ラッキーアイテム：見やすく洗練された上下フィーチャーレイアウト
   ============================================================================ */
.result-reincarnation-suite {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px dotted #c7a972;
  text-align: left;
}

/* 1. ラッキーアイテム帯（すっきりとスマートに横長ハイライト） */
.lucky-item-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.86rem;
  background: rgba(251, 248, 240, 0.9);
  border: 1px solid rgba(212, 190, 148, 0.7);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.lucky-item-label {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #8c2432;
  white-space: nowrap;
}

.lucky-item-separator {
  color: #b08d55;
  font-weight: bold;
}

.lucky-item-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: #1a1210;
  letter-spacing: 0.02em;
}

/* 通常アルカナ用ラッキーアイテム帯 */
.normal-lucky-strip {
  background: #fbf6ec;
  border-color: #d8c29d;
}

/* 涅槃用ラッキーアイテム帯（神聖ゴールド） */
.nehan-lucky-strip {
  background: linear-gradient(135deg, rgba(255, 252, 244, 0.96), rgba(254, 243, 215, 0.92));
  border: 1px solid rgba(218, 165, 32, 0.55);
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.12);
}
.nehan-lucky-strip .lucky-item-label {
  color: #8c6218;
}
.nehan-lucky-strip .lucky-item-name {
  color: #3d2907;
}

/* 地獄道用ラッキーアイテム帯（ダーク不知火） */
.hell-lucky-strip {
  background: linear-gradient(135deg, rgba(34, 18, 22, 0.95), rgba(22, 12, 16, 0.98));
  border: 1px solid rgba(220, 50, 50, 0.45);
  box-shadow: 0 2px 8px rgba(220, 50, 50, 0.2);
}
.hell-lucky-strip .lucky-item-label {
  color: #ff6b6b;
}
.hell-lucky-strip .lucky-item-name {
  color: #ffe0e0;
}

/* 1. 具体的な転生先 メインフィーチャーカード（診断の主役：タロット託宣プレステージ仕様） */
.reincarnation-feature-card {
  position: relative;
  padding: 18px 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

/* カード上部の繊細な金彩アクセントバー */
.reincarnation-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c29b58, transparent);
  opacity: 0.85;
}

.rf-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rf-header-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* 「あなたの来世」クラシック・ピルバッジ */
.rf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mincho), "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* 激レアバッジ（上品な金箔グラデーション） */
.rf-rare-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(246, 226, 122, 0.15));
  border: 1px solid rgba(212, 175, 55, 0.65);
  color: #8c6218;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 4px rgba(212, 175, 55, 0.15);
}

/* 転生役職名（画面の主役：タロット託宣称号仕様） */
.rf-role-title {
  margin: 4px 0 2px;
  font-family: var(--font-mincho), "Shippori Mincho", "Yu Mincho", serif;
  font-size: clamp(1.22rem, 3.2vw, 1.48rem);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

/* 説明文（神託の言葉：気品ある羊皮紙クォート） */
.rf-desc-text {
  margin: 4px 0;
  padding: 10px 14px;
  font-family: var(--font-mincho), "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
  border-radius: 4px;
  border-left: 3.5px solid #b08d55;
  position: relative;
}

/* 統合メタリスト（整然としたインフォメーション・グリッド） */
.rf-meta-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed rgba(194, 155, 88, 0.35);
}

.rf-meta-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* メタラベル（中世タロットの金箔エンブレム風ミニタグ） */
.rf-meta-lbl {
  font-family: var(--font-mincho), "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2.5px 6px;
  text-align: center;
  border-radius: 4px;
  background: rgba(194, 155, 88, 0.14);
  border: 1px solid rgba(194, 155, 88, 0.38);
  color: #6d4a1b;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.rf-meta-val {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* アイテム値の品あるハイライト */
.rf-item-val {
  font-weight: 700;
}

/* 相性ラップ＆ミニピル */
.rf-compat-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.rf-compat-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   各テーマごとの美麗パレット
   ========================================================================== */

/* 通常アルカナテーマ（羊皮紙・アンティークゴールド） */
.normal-reincarnation-card {
  background: linear-gradient(145deg, #fffdfa 0%, #f7f2e7 100%);
  border: 1.2px solid rgba(194, 155, 88, 0.45);
  box-shadow: 
    0 6px 20px rgba(30, 20, 10, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 0 18px rgba(212, 190, 148, 0.12);
}
.normal-reincarnation-card .rf-badge {
  background: linear-gradient(135deg, rgba(140, 36, 50, 0.08) 0%, rgba(194, 155, 88, 0.12) 100%);
  color: #781824;
  border: 1px solid rgba(194, 155, 88, 0.4);
}
.normal-reincarnation-card .rf-role-title {
  color: #1a0f0b;
}
.normal-reincarnation-card .rf-desc-text {
  background: rgba(235, 215, 180, 0.18);
  border-left: 3.5px solid #a88242;
  color: #2b180d;
}
.normal-meta-list {
  border-top-color: rgba(180, 140, 80, 0.28);
}
.normal-meta-list .rf-meta-lbl {
  background: rgba(180, 140, 80, 0.12);
  border: 1px solid rgba(180, 140, 80, 0.32);
  color: #6a4816;
}
.normal-meta-list .rf-meta-val {
  color: #201308;
}
.normal-meta-list .rf-item-val {
  color: #8c5208;
}
.normal-meta-list .rf-compat-pill.ally {
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.25);
  color: #206824;
}
.normal-meta-list .rf-compat-pill.rival {
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.25);
  color: #a81c1c;
}

/* 涅槃テーマ（神聖白蓮＆サンクチュアリゴールド） */
.nehan-reincarnation-card {
  background: linear-gradient(145deg, #fffdf8 0%, #fbf3db 100%);
  border: 1px solid rgba(218, 165, 32, 0.65);
  box-shadow: 
    0 6px 24px rgba(218, 165, 32, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 0 20px rgba(255, 235, 170, 0.2);
}
.nehan-reincarnation-card::before {
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  height: 2.5px;
}
.nehan-reincarnation-card .rf-badge {
  background: rgba(218, 165, 32, 0.12);
  color: #8c6218;
  border: 1px solid rgba(218, 165, 32, 0.4);
}
.nehan-reincarnation-card .rf-role-title {
  color: #2b1c04;
}
.nehan-reincarnation-card .rf-desc-text {
  background: rgba(255, 243, 205, 0.5);
  border-left: 3px solid #d4af37;
  color: #2b1c04;
}
.nehan-meta-list {
  border-top-color: rgba(218, 165, 32, 0.28);
}
.nehan-meta-list .rf-meta-lbl {
  background: rgba(218, 165, 32, 0.12);
  border: 1px solid rgba(218, 165, 32, 0.35);
  color: #8c6218;
}
.nehan-meta-list .rf-meta-val {
  color: #2b1c04;
}
.nehan-meta-list .rf-item-val {
  color: #996c14;
}
.nehan-meta-list .rf-compat-pill.ally {
  background: rgba(46, 125, 50, 0.1);
  border: 1px solid rgba(46, 125, 50, 0.3);
  color: #1e6322;
}
.nehan-meta-list .rf-compat-pill.rival {
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.25);
  color: #a81c1c;
}

/* 地獄道テーマ（不知火＆漆黒の黒鉄） */
.hell-reincarnation-card {
  background: linear-gradient(145deg, #1c0e12 0%, #120709 100%);
  border: 1px solid rgba(220, 50, 50, 0.45);
  box-shadow: 
    0 6px 24px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 80, 80, 0.15),
    inset 0 0 20px rgba(180, 20, 20, 0.12);
}
.hell-reincarnation-card::before {
  background: linear-gradient(90deg, transparent, #ff4d4d, transparent);
  height: 2px;
}
.hell-reincarnation-card .rf-badge {
  background: rgba(220, 50, 50, 0.15);
  color: #ff7070;
  border: 1px solid rgba(220, 50, 50, 0.4);
}
.hell-reincarnation-card .rf-rare-badge {
  background: linear-gradient(135deg, rgba(255, 60, 60, 0.25), rgba(255, 120, 120, 0.15));
  border-color: rgba(255, 80, 80, 0.6);
  color: #ff9999;
}
.hell-reincarnation-card .rf-role-title {
  color: #ffe0e0;
  text-shadow: 0 0 10px rgba(255, 80, 80, 0.35);
}
.hell-reincarnation-card .rf-desc-text {
  background: rgba(45, 18, 22, 0.6);
  border-left: 3px solid #ff4d4d;
  color: #fce8e8;
}
.hell-meta-list {
  border-top-color: rgba(220, 50, 50, 0.3);
}
.hell-meta-list .rf-meta-lbl {
  background: rgba(220, 50, 50, 0.15);
  border: 1px solid rgba(220, 50, 50, 0.35);
  color: #ff8585;
}
.hell-meta-list .rf-meta-val {
  color: #fce8e8;
}
.hell-meta-list .rf-item-val {
  color: #ffb380;
}
.hell-meta-list .rf-compat-pill.ally {
  background: rgba(76, 175, 80, 0.16);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #81c784;
}
.hell-meta-list .rf-compat-pill.rival {
  background: rgba(244, 67, 54, 0.16);
  border: 1px solid rgba(244, 67, 54, 0.4);
  color: #e57373;
}

/* ========================================================
   超激レア転生先（isRare）専用プレミアムスタイル
   ======================================================== */
.reincarnation-feature-card.is-rare-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 250, 235, 0.98), rgba(254, 243, 210, 0.95)) !important;
  border: 2px solid #e0aa3e !important;
  box-shadow: 0 0 20px rgba(224, 170, 62, 0.35), 0 4px 18px rgba(0, 0, 0, 0.12), inset 0 0 15px rgba(255, 230, 150, 0.3) !important;
  overflow: hidden;
}

/* 激レアカード上を流れる光彩シマー */
.reincarnation-feature-card.is-rare-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  transform: rotate(25deg);
  animation: rareCardShimmer 3.5s infinite;
  pointer-events: none;
}

@keyframes rareCardShimmer {
  0% { transform: translateX(-100%) rotate(25deg); }
  35%, 100% { transform: translateX(100%) rotate(25deg); }
}

.hell-reincarnation-card.is-rare-card {
  background: linear-gradient(135deg, rgba(38, 18, 12, 0.98), rgba(24, 10, 8, 0.99)) !important;
  border: 2px solid #ffaa44 !important;
  box-shadow: 0 0 22px rgba(255, 170, 68, 0.4), inset 0 0 16px rgba(255, 120, 40, 0.2) !important;
}

.rf-header-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rf-rare-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #d4af37, #f6e27a, #cb9b25);
  color: #3b2503;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.45);
  animation: rareBadgePulse 2s infinite ease-in-out;
}

@keyframes rareBadgePulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.2); }
}

.rf-role-title.is-rare-role {
  background: linear-gradient(135deg, #8c4a00, #d48b14, #733c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(255, 230, 150, 0.3);
  letter-spacing: 0.04em;
}

.hell-reincarnation-card .rf-role-title.is-rare-role {
  background: linear-gradient(135deg, #ffe5a3, #ffaa44, #ff8833);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 170, 68, 0.5);
}

.lucky-item-strip.is-rare-card {
  border-color: #d4af37 !important;
  background: linear-gradient(90deg, rgba(255, 248, 225, 0.95), rgba(255, 240, 195, 0.85)) !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25) !important;
}

.hell-lucky-strip.is-rare-card {
  background: linear-gradient(90deg, rgba(45, 22, 10, 0.95), rgba(35, 15, 8, 0.9)) !important;
  border-color: #ffaa44 !important;
}

.rf-rare-item-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #d4af37;
  color: #2b1800;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* 互換用クラス */
.normal-meta-card {
  background: #fbf8f0;
  border: 1px solid #d4be94;
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.normal-meta-card .meta-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #8c2432;
  letter-spacing: 0.06em;
}

.normal-meta-card .meta-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1210;
  line-height: 1.45;
}

.meta-card-desc {
  font-size: 0.74rem;
  line-height: 1.55;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(194, 155, 88, 0.35);
  font-weight: normal;
  letter-spacing: 0.02em;
}

.normal-meta-desc {
  color: #5a453e;
}

.hell-meta-desc {
  color: #ffb8b8;
  border-top-color: rgba(255, 75, 75, 0.3);
}

.nehan-meta-desc {
  color: #6a5232;
  border-top-color: rgba(235, 208, 149, 0.45);
}

.reading-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px dotted #c7a972;
  font-size: 0.86rem;
  line-height: 1.7;
  color: #241712;
}

.reading-meta strong {
  color: #8c2432;
  font-weight: 600;
}

/* ============================================================================
   例外脱出リンク：スコアの直下・中央に佇む、生の素朴なハイパーリンク（青文字・下線）
   ============================================================================ */
.escape-void-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 6px auto 0;
  text-align: center;
}

.escape-void-link {
  position: relative;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.88rem;
  color: #0000ee !important; /* 昔ながらのブラウザ標準リンクブルー */
  text-decoration: underline !important; /* 下に棒があるやつ */
  text-underline-offset: 3px;
  background: transparent !important;
  border: none !important;
  padding: 4px 10px;
  margin: 0 auto;
  cursor: pointer;
  user-select: text;
  pointer-events: auto;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0.95;
  transition: all 0.2s ease;
}

.escape-void-link:hover {
  color: #0000cc !important;
  text-decoration: underline !important;
  transform: translateY(-1px);
}

.escape-void-link:active {
  color: #ee0000 !important;
  transform: translateY(0);
}

.escape-void-link.just-revealed {
  animation: rawLinkReveal 0.35s ease forwards;
}

@keyframes rawLinkReveal {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
  100% {
    opacity: 0.95;
    transform: translateY(0) scale(1);
  }
}

/* 1回クリック後（確認状態）：「この世界から逃げる」訪問済みパープル＋下線 */
.escape-void-link.is-confirming {
  color: #551a8b !important; /* 訪問済みリンクの標準パープル */
  text-decoration: underline !important;
  font-weight: 600;
  animation: rawLinkPulse 1.8s infinite ease-in-out;
}

@keyframes rawLinkPulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.55; color: #8c0000 !important; }
}

.escape-void-link.is-confirming:hover {
  color: #330d59 !important;
  text-decoration: underline !important;
}

@media (max-width: 640px) {
  .escape-void-link {
    font-size: 0.8rem;
    padding: 3px 8px;
  }
}

/* ============================================================================
   タロットカード段階的ダウナー変異（脱色・沈黙ホラー演出）
   巨大化・激震・赤い発光・ひび割れを全廃し、
   タップするたびに静かに色が抜け、世界の温度が下がっていくミニマルで不気味な変化
   ============================================================================ */
.tarot-plate-wrap {
  transition: filter 0.45s ease, opacity 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, transform 0.12s ease;
  transform-origin: center center;
}

/* タップ時のごくわずかな無機質の沈み込み（ダウナーなスイッチ感） */
.tarot-plate-wrap:active {
  transform: scale(0.985);
}

/* 段階ごとに静かに彩度と輝度が失われ、無機質に冷たく沈んでいく */
.tarot-plate-wrap.tarot-stage-1 {
  filter: grayscale(0.35) contrast(0.95);
  border-color: rgba(180, 180, 190, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.tarot-plate-wrap.tarot-stage-2 {
  filter: grayscale(0.65) contrast(0.9) brightness(0.92);
  border-color: rgba(150, 150, 165, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

.tarot-plate-wrap.tarot-stage-3 {
  filter: grayscale(0.9) contrast(0.85) brightness(0.84);
  border-color: rgba(125, 125, 140, 0.3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65);
}

.tarot-plate-wrap.tarot-stage-4 {
  filter: grayscale(1.0) contrast(0.8) brightness(0.72);
  border-color: rgba(95, 95, 110, 0.25);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.75);
}

.tarot-plate-wrap.tarot-stage-5 {
  filter: grayscale(1.0) contrast(0.7) brightness(0.28);
  opacity: 0.55;
  border-color: rgba(60, 60, 75, 0.18);
  box-shadow: none;
}

/* タロット直下に表示されるダウナーで静かな警告インジケータ（落ち着いた灰紫色、明朝体） */
.tarot-crack-indicator {
  position: relative;
  z-index: 10;
  margin-top: 20px;
  padding: 4px 8px;
  font-family: var(--font-rubric);
  font-size: clamp(0.78rem, 1.35vw, 0.88rem);
  letter-spacing: 0.14em;
  color: #9c97a4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.4s ease, color 0.4s ease;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarot-crack-indicator.is-visible {
  opacity: 0.88;
}

/* 5回目タップ時の静かな電源断ブラックアウト */
.screen-blackout-fade {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 999999;
  pointer-events: all;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}
.screen-blackout-fade.is-active {
  opacity: 1;
}

.clean-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  background: rgba(11, 8, 20, 0.92);
  border-top: 1px solid rgba(194, 155, 88, 0.35);
  padding: 14px 16px;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.6;
  color: #d8cde9;
  letter-spacing: 0.06em;
}

/* ============================================================================
   地獄道（第7の結果）専用：写真を使わずデザインだけを少し不気味にするミスリード演出
   ============================================================================ */
@keyframes hellIntroFlicker {
  0% {
    filter: brightness(1);
  }

  18% {
    filter: brightness(0.15) contrast(1.6) sepia(0.6) hue-rotate(-35deg);
  }

  32% {
    filter: brightness(0.85);
  }

  48% {
    filter: brightness(0.08) contrast(1.8);
  }

  70% {
    filter: brightness(0.65) sepia(0.35) hue-rotate(-25deg);
  }

  100% {
    filter: brightness(1);
  }
}

body.hell-flicker-intro {
  animation: hellIntroFlicker 1.35s ease-in-out forwards;
}

body.mode-hell {
  background-color: #1a080c;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(185, 32, 42, 0.32) 0%, transparent 52%),
    radial-gradient(circle at 20% 80%, rgba(130, 20, 28, 0.38) 0%, transparent 55%),
    linear-gradient(180deg, #140508 0%, #260a10 52%, #120406 100%);
  color: #fff0eb;
}

body.mode-hell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.65), inset 0 0 35px rgba(168, 20, 30, 0.3);
  animation: hellVignettePulse 4.5s ease-in-out infinite alternate;
}

@keyframes hellVignettePulse {
  0% {
    opacity: 0.45;
  }

  100% {
    opacity: 0.7;
  }
}

body.mode-hell .bg-rokudo-mural {
  opacity: 0.18;
  filter: sepia(0.8) hue-rotate(-45deg) saturate(2.5);
}

body.mode-hell .mystic-widget {
  background: linear-gradient(180deg, rgba(38, 12, 18, 0.95) 0%, rgba(22, 6, 10, 0.98) 100%);
  border-color: rgba(198, 52, 60, 0.65);
  box-shadow:
    inset 0 0 0 3px rgba(18, 5, 8, 0.95),
    inset 0 0 0 4px rgba(170, 42, 50, 0.35),
    0 14px 34px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(198, 42, 50, 0.22);
  color: #f7e6e2;
}

body.mode-hell .widget-header {
  color: #ff8585;
  border-bottom-color: rgba(198, 52, 60, 0.45);
}

body.mode-hell .grimoire-frame {
  background: #240d12;
  background-image:
    radial-gradient(rgba(195, 48, 58, 0.16) 1px, transparent 0),
    linear-gradient(180deg, #2d1016 0%, #1a070a 100%);
  background-size: 22px 22px, 100% 100%;
  border-color: #ab2e37;
  box-shadow:
    0 0 0 6px rgba(16, 4, 7, 0.96),
    0 0 0 8px rgba(188, 46, 54, 0.65),
    0 24px 70px rgba(0, 0, 0, 0.85),
    0 0 48px rgba(198, 34, 46, 0.35);
}

body.mode-hell .grimoire-inner {
  background: rgba(30, 10, 15, 0.95);
  border-color: rgba(188, 46, 54, 0.7);
  color: #fff2ed;
}

body.mode-hell h1.main-title {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(235, 45, 58, 0.6);
}

body.mode-hell .sub-header {
  color: #ff7882;
}

body.mode-hell .score-banner {
  background: rgba(56, 16, 22, 0.95);
  border-color: #bd323c;
  color: #ffffff;
}

body.mode-hell .score-banner strong {
  color: #ff7880;
}

body.mode-hell .tarot-plate-wrap {
  background: linear-gradient(135deg, #641c24 0%, #2b0a0f 50%, #7a202a 100%);
  border-color: #bd343d;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 28px rgba(220, 40, 52, 0.45);
  position: relative;
  animation: hellShiranuiFlame 4.2s ease-in-out infinite;
}

@keyframes hellShiranuiFlame {

  0%,
  100% {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(220, 40, 52, 0.4);
  }

  50% {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.82), 0 0 36px rgba(245, 55, 68, 0.58), 0 0 14px rgba(255, 110, 120, 0.35);
  }
}

body.mode-hell .tarot-plate-img {
  filter: contrast(1.08) brightness(1.02) saturate(1.05);
  border-color: #7a1d25;
}

body.mode-hell .stamp-unlocked-toast {
  background: linear-gradient(90deg, rgba(58, 14, 20, 0.96), rgba(95, 24, 32, 0.96));
  border-color: #bd343d;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(198, 56, 65, 0.35);
}

body.mode-hell .reading-panel {
  background: rgba(26, 8, 12, 0.95);
  border-color: rgba(188, 46, 54, 0.7);
  color: #ffffff;
  box-shadow: inset 0 0 22px rgba(160, 20, 30, 0.2);
}

body.mode-hell .reading-meta {
  border-top-color: rgba(188, 46, 54, 0.55);
  color: #fce1da;
}

body.mode-hell .tarot-btn {
  background: linear-gradient(135deg, #94222a 0%, #4f1015 50%, #881e26 100%);
  border-color: #bd343d;
  box-shadow: 0 4px 16px rgba(150, 34, 42, 0.45);
  color: #ffffff;
}

body.mode-hell .tarot-btn:hover {
  background: linear-gradient(135deg, #b32a34 0%, #66151c 50%, #a8252f 100%);
  border-color: #ee4a56;
  box-shadow: 0 6px 22px rgba(200, 50, 60, 0.7);
  color: #ffffff;
}

/* 地獄道専用：呪詛リボン */
.hell-curse-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(80, 10, 18, 0.4) 0%, rgba(140, 20, 28, 0.75) 50%, rgba(80, 10, 18, 0.4) 100%);
  border: 1px solid rgba(220, 40, 50, 0.75);
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: #ffcccc;
  text-shadow: 0 0 8px rgba(255, 40, 50, 0.8);
  box-shadow: 0 2px 14px rgba(180, 20, 30, 0.4), inset 0 0 8px rgba(255, 60, 60, 0.2);
  margin-bottom: 8px;
  animation: hellCursePulse 4s ease-in-out infinite;
}

@keyframes hellCursePulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 2px 14px rgba(180, 20, 30, 0.4); }
  50% { transform: translateY(-1px); box-shadow: 0 3px 20px rgba(255, 30, 40, 0.65), 0 0 10px rgba(255, 80, 80, 0.4); }
}

.hell-ribbon-skull {
  color: #ff4d4d;
  font-size: 0.8rem;
  filter: drop-shadow(0 0 6px #ff0000);
}

/* 地獄道タイトル */
body.mode-hell h1.main-title.hell-title {
  background: linear-gradient(135deg, #ffffff 0%, #ffb3b8 40%, #ff5262 75%, #e62233 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 16px rgba(255, 60, 75, 0.7), 0 0 32px rgba(180, 20, 30, 0.45);
  font-size: clamp(1.45rem, 4vw, 1.95rem);
  letter-spacing: 0.12em;
}

.hell-subtitle {
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  color: #ff999f;
  margin-top: -2px;
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(255, 120, 130, 0.5);
}

/* 地獄道スコアバナー */
.score-banner.hell-score-banner {
  background: linear-gradient(135deg, rgba(54, 14, 20, 0.96) 0%, rgba(28, 6, 10, 0.96) 100%);
  border: 1.5px solid #bd343d;
  border-radius: 999px;
  padding: 6px 18px;
  margin: 0;
  box-shadow: 0 4px 18px rgba(198, 46, 54, 0.35), inset 0 0 12px rgba(150, 20, 28, 0.25);
  color: #ffffff;
}

.hell-score-flame {
  font-size: 1.15rem;
  margin-right: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 0 8px #ff3333);
}

.hell-score-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #ffcccc;
  font-weight: 500;
}

.hell-score-val {
  background: linear-gradient(180deg, #ffffff 0%, #ff7880 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.35rem !important;
  font-weight: 900;
  margin: 0 4px;
  filter: drop-shadow(0 0 8px rgba(255, 80, 90, 0.75));
}

.hell-score-badge {
  display: inline-block;
  background: linear-gradient(90deg, #94222a, #bd343d);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  margin-left: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 1px solid #ff5262;
}

.hell-plate-insignia {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: #ffb3b3;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 50, 50, 0.8);
}

/* 地獄道リーディングパネル */
.reading-panel.hell-reading-panel {
  background: linear-gradient(180deg, rgba(34, 10, 15, 0.96) 0%, rgba(20, 5, 8, 0.98) 100%);
  border: 1.5px solid #a82e36;
  border-radius: 8px;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.8),
    inset 0 0 25px rgba(160, 20, 30, 0.2),
    0 0 18px rgba(200, 30, 40, 0.25);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.hell-reading-lead {
  font-size: 0.95rem;
  line-height: 2.0;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  position: relative;
  z-index: 1;
}

.hell-reading-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(188, 46, 54, 0.55);
}

.hell-meta-card {
  background: rgba(44, 12, 18, 0.9);
  border: 1px solid rgba(200, 52, 60, 0.6);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  box-shadow: inset 0 0 10px rgba(150, 20, 28, 0.2);
}

.hell-meta-card:hover {
  border-color: #ff5262;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(240, 50, 60, 0.4);
}

.hell-meta-label {
  font-size: 0.72rem;
  color: #ff858d;
  letter-spacing: 0.08em;
  font-weight: bold;
}

.hell-meta-value {
  font-size: 0.88rem;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 90, 100, 0.5);
}

.hell-meta-sub {
  font-size: 0.73rem;
  color: #fce1da;
  opacity: 1;
}

/* 地獄道の獄卒の走り書き（地獄のほうがまだマシだったという伏線） */
.hell-warden-note {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(18, 4, 7, 0.95);
  border: 1px dashed rgba(220, 50, 60, 0.7);
  border-left: 3.5px solid #ff3344;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.hell-warden-sigil {
  font-size: 1.5rem;
  color: #ff3344;
  text-shadow: 0 0 10px rgba(255, 51, 68, 0.8);
  flex-shrink: 0;
  line-height: 1.2;
}

.hell-warden-text {
  font-size: 0.82rem;
  line-height: 1.8;
  color: #fff0f0;
  letter-spacing: 0.04em;
}

.hell-warden-text strong {
  color: #ff8088;
  letter-spacing: 0.08em;
}

@keyframes subtleTremble {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-0.6px, 0.5px); }
  50% { transform: translate(0.6px, -0.4px); }
  75% { transform: translate(-0.4px, -0.5px); }
}

.hell-whisper-text {
  display: inline-block;
  animation: subtleTremble 3.2s infinite;
}

body.mode-hell .escape-void-link {
  display: inline-block !important;
  color: #6ea8fe !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
body.mode-hell .escape-void-link:hover {
  color: #9ec5fe !important;
}
body.mode-hell .escape-void-link.is-confirming {
  color: #ff4d6d !important;
}

body.mode-nehan .escape-void-link {
  color: #70b4ff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
body.mode-nehan .escape-void-link:hover {
  color: #a0cfff !important;
}
body.mode-nehan .escape-void-link.is-confirming {
  color: #d08bff !important;
}

@keyframes hellOptoutPulse {
  0%, 100% { border-color: rgba(180, 40, 50, 0.4); box-shadow: 0 0 10px rgba(180, 20, 30, 0.15); color: #b57a82; }
  50% { border-color: rgba(255, 60, 80, 0.85); box-shadow: 0 0 20px rgba(255, 30, 50, 0.45); color: #ff9aa6; }
}

/* ============================================================================
   涅槃（ねはん／100点満点）専用：大解脱・八葉蓮華と八功徳水の清流プレステージ演出
   ============================================================================ */
body.mode-nehan {
  background-color: #0b1424;
  background-image:
    radial-gradient(ellipse at 50% 10%, rgba(255, 182, 193, 0.28) 0%, transparent 60%), /* 蓮華の淡い薄紅光 */
    radial-gradient(ellipse at 20% 80%, rgba(128, 222, 234, 0.22) 0%, transparent 55%), /* 清流・八功徳水のエメラルドブルー */
    radial-gradient(ellipse at 80% 75%, rgba(255, 215, 0, 0.20) 0%, transparent 50%), /* 金蓮の光輪 */
    linear-gradient(180deg, #101c33 0%, #1c1538 45%, #0b1c2b 100%);
  color: #fff9e6;
}

body.mode-nehan::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 0 100px rgba(255, 182, 193, 0.18),
    inset 0 0 60px rgba(128, 222, 234, 0.16),
    inset 0 0 35px rgba(255, 248, 220, 0.3);
  animation: nehanHaloPulse 6s ease-in-out infinite alternate;
}

@keyframes nehanHaloPulse {
  0% {
    opacity: 0.65;
    filter: drop-shadow(0 0 12px rgba(255, 192, 203, 0.3));
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 28px rgba(178, 235, 242, 0.5));
  }
}

body.mode-nehan .bg-rokudo-mural {
  opacity: 0.32;
  filter: sepia(0.5) hue-rotate(330deg) saturate(1.8) brightness(1.2);
}

body.mode-nehan .grimoire-frame {
  background: #181938;
  background-image:
    radial-gradient(rgba(255, 200, 215, 0.2) 1.2px, transparent 0),
    radial-gradient(circle at 50% 100%, rgba(128, 222, 234, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #241d45 0%, #151d38 50%, #102130 100%);
  background-size: 20px 20px, 100% 100%, 100% 100%;
  border-color: #ffd54f;
  box-shadow:
    0 0 0 6px rgba(20, 18, 48, 0.95),
    0 0 0 8px rgba(255, 209, 220, 0.7),
    0 24px 75px rgba(8, 12, 28, 0.88),
    0 0 50px rgba(255, 182, 193, 0.35),
    0 0 35px rgba(128, 222, 234, 0.3);
}

body.mode-nehan .grimoire-inner {
  background: rgba(18, 16, 36, 0.98);
  border-color: rgba(255, 215, 140, 0.85);
  color: #ffffff;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}

/* 涅槃の角オーナメント：蓮華ゴールド＆薄紅 */
body.mode-nehan .corner-ornament path {
  stroke: #ffd54f;
}
body.mode-nehan .corner-ornament circle {
  fill: #ff85a2;
}

/* 蓮華の冠章バッジ（高視認性クリーン） */
.nehan-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(36, 26, 60, 0.95);
  border: 1.5px solid #ffd54f;
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff9e6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 6px;
}

.nehan-crest-lotus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 182, 193, 0.8));
}

.nehan-crest-lotus .lotus-blossom-svg {
  width: 100%;
  height: 100%;
}

/* 涅槃タイトル：文字の輪郭がシャープで最高に読みやすい */
body.mode-nehan h1.main-title.nehan-title {
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #fff0b8 60%, #ffd54f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.45rem, 3.8vw, 2.05rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.nehan-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #b2ebf2;
  margin-top: -2px;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 八功徳水・天上の清流ウェーブ仕切り線（スリムで視界を遮らない） */
.nehan-river-divider {
  width: 100%;
  max-width: 440px;
  margin: 2px auto 6px;
  overflow: visible;
  line-height: 0;
  opacity: 0.85;
}

.lotus-river-svg {
  width: 100%;
  height: auto;
  max-height: 24px;
  display: block;
}

.river-wave-line.r1 {
  animation: riverWaveShimmer 6s ease-in-out infinite alternate;
}
.river-wave-line.r2 {
  animation: riverWaveDash 14s linear infinite;
}

@keyframes riverWaveShimmer {
  0% { opacity: 0.75; transform: scaleY(0.95); }
  100% { opacity: 1; transform: scaleY(1.05); }
}

@keyframes riverWaveDash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 120; }
}

/* 涅槃スコアバナー（明瞭・高コントラスト） */
.score-banner.nehan-score-banner {
  background: #191630;
  border: 1.5px solid #ffd54f;
  border-radius: 999px;
  padding: 6px 18px;
  margin: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  color: #ffffff;
}

.nehan-score-label {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: #ffe082;
  font-weight: 700;
}

.nehan-score-val {
  color: #ffffff !important;
  font-size: 1.4rem !important;
  font-weight: 900;
  margin: 0 4px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  -webkit-text-fill-color: initial !important;
}

.nehan-score-badge {
  display: inline-block;
  background: #ffd54f;
  color: #151128;
  font-weight: 800;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  margin-left: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 涅槃スタンプトースト */
.stamp-unlocked-toast.nehan-toast {
  background: #2a1b42;
  border: 1.5px solid #ffd54f;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  font-weight: 600;
}

/* 涅槃タロットカード枠＆蓮華座 */
.tarot-plate-wrap.nehan-plate-wrap {
  background: #ffffff;
  border: 2px solid #ffd54f;
  border-radius: 8px;
  padding: 6px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(255, 215, 0, 0.35);
  animation: nehanPlateBreathe 4.5s ease-in-out infinite alternate;
  position: relative;
}

@keyframes nehanPlateBreathe {
  0% {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.3);
  }
  100% {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 215, 0, 0.5);
  }
}

.nehan-plate-insignia {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: #8c5315;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.tarot-plate-wrap.nehan-plate-wrap .tarot-plate-img {
  border: 1px solid #d4be94;
}

/* タロットカード足元の蓮華座オーナメント */
.nehan-card-lotus-seat {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -6px;
  margin-bottom: -8px;
  pointer-events: none;
}

.lotus-seat-blossom {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 6px rgba(255, 182, 193, 0.7));
}

/* 涅槃リーディングパネル：背景ノイズを完全撤廃し文字がクッキリ浮き立つ */
.reading-panel.nehan-reading-panel {
  background: #141228;
  border: 1.5px solid #d4af37;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  position: relative;
}

.nehan-reading-lead {
  font-size: 1.0rem;
  line-height: 2.0;
  color: #ffffff !important;
  font-weight: 500;
  text-shadow: none !important;
  position: relative;
  z-index: 1;
}

/* 象徴エレメント（白蓮）と守護モチーフ（清流）カード（高コントラスト） */
.nehan-reading-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1.5px solid rgba(255, 215, 140, 0.3);
}

.nehan-meta-card {
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.2s ease;
}

.nehan-meta-card.lotus-elem-card {
  background: #221a36;
  border: 1.5px solid #6b4c82;
}

.nehan-meta-card.lotus-elem-card:hover {
  border-color: #ffd54f;
  transform: translateY(-2px);
}

.nehan-meta-card.lotus-river-card {
  background: #152336;
  border: 1.5px solid #3c657a;
}

.nehan-meta-card.lotus-river-card:hover {
  border-color: #80deea;
  transform: translateY(-2px);
}

.meta-card-label {
  font-size: 0.8rem;
  color: #ffd54f;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.meta-card-value {
  font-size: 1.02rem;
  color: #ffffff;
  font-weight: 800;
}

.meta-card-sub {
  font-size: 0.78rem;
  color: #cfc8e6;
  line-height: 1.4;
}

/* 涅槃の白蓮・常楽我浄印章（明瞭読みやすいブロック） */
.nehan-seal-block {
  margin-top: 14px;
  padding: 10px 14px;
  background: #191630;
  border: 1.5px solid rgba(255, 215, 120, 0.5);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.nehan-seal-sigil {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seal-lotus-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255, 182, 193, 0.7));
}

.seal-lotus-icon .lotus-blossom-svg {
  width: 100%;
  height: 100%;
}

.nehan-seal-text {
  font-size: 0.84rem;
  line-height: 1.65;
  color: #f2edf9;
}

.nehan-seal-text strong {
  color: #ffd54f;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.nehan-seal-text p {
  margin: 2px 0 0;
  color: #e5e0f2;
}

/* 涅槃専用ボタン */
.tarot-btn.nehan-action-btn {
  background: linear-gradient(135deg, #d4af37 0%, #f7d884 100%);
  border-color: #ffffff;
  color: #120922;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.tarot-btn.nehan-action-btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #120922;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
  transform: translateY(-2px);
}

.tarot-btn.nehan-x-btn {
  background: #1a1a2e;
  border: 1.5px solid #ffd54f;
  color: #ffffff;
  font-weight: 700;
}

.tarot-btn.nehan-x-btn:hover {
  background: #2a2a46;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.tarot-btn.nehan-replay-btn {
  background: #221c3b;
  border: 1.5px solid #ffd54f;
  color: #fff8e7;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  margin-top: 6px;
}

.tarot-btn.nehan-replay-btn:hover {
  background: #352c5c;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ==========================================================================
   裏ルート3：純白・無機質な「404 Not Found」画面（ブラウザ標準エラー擬態）
   ========================================================================== */
body.mode-404 {
  background: #ffffff !important;
  /* グラデを廃し、無機質なブラウザの白に */
  background-image: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #202124 !important;
  /* Chrome標準エラーテキスト色 */
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  box-shadow: none !important;
  cursor: default;
}

/* 隠しギミック：テキストをドラッグ選択すると血の色になる */
body.mode-404 ::selection {
  background: #5a0000;
  color: #ffcccc;
}

body.mode-404::before,
body.mode-404::after,
body.mode-404 .bg-rokudo-mural,
body.mode-404 #sparkleCanvas,
body.mode-404 .page-wrapper,
body.mode-404 .site-footer,
body.mode-404 .mobile-floating-bar,
body.mode-404 .cosmic-nebula-wrap,
body.mode-404 .side-column,
body.mode-404 .lantern-collection-widget,
body.mode-404 .codex-trigger-wrap,
body.mode-404 #mobileStampStatusBtn,
body.mode-404 #mobileCodexStatusBtn {
  display: none !important;
}

.raw-404-wrap {
  position: relative;
  z-index: 100;
  max-width: 600px;
  width: 88%;
  margin: 12vh auto 40px auto;
  padding: 0;
  text-align: left;
  box-sizing: border-box;
  /* ごく稀に画面全体が1pxだけ横ズレする違和感 */
  animation: subtlePageGlitch 12s infinite steps(1);
}

@keyframes subtlePageGlitch {

  0%,
  98.5%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }

  98.7% {
    transform: translate(-2px, 0);
    opacity: 0.92;
  }

  98.9% {
    transform: translate(1px, 1px);
    filter: contrast(110%);
  }
}

/* ============================================================================
   本物のブラウザエラー（Chrome標準ネットワークエラー完全再現）
   「ステンドグラスのようにマジで見間違う」超リアル無機質画面
   ============================================================================ */
.chrome-net-error {
  max-width: 620px;
  margin: 10vh auto 0;
  padding: 0 24px;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #202124;
}

.chrome-error-icon {
  margin-bottom: 20px;
  opacity: 0.85;
}

.chrome-error-heading {
  font-size: 24px;
  font-weight: 500;
  color: #202124;
  margin: 0 0 16px 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.chrome-error-sub {
  font-size: 15px;
  line-height: 1.6;
  color: #5f6368;
  margin: 0 0 22px 0;
}

.chrome-error-sub strong {
  color: #202124;
  font-weight: 600;
}

.chrome-error-suggestions {
  font-size: 14px;
  line-height: 1.7;
  color: #5f6368;
  margin: 0 0 32px 0;
}

.chrome-error-suggestions p {
  margin: 0 0 8px 0;
}

.chrome-error-suggestions ul {
  margin: 0;
  padding-left: 20px;
}

.chrome-error-suggestions li {
  margin-bottom: 4px;
}

.chrome-error-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dadce0;
  padding-top: 20px;
}

.chrome-error-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: #5f6368;
  letter-spacing: 0.04em;
}

.chrome-details-btn {
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  color: #1a73e8;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
  outline: none;
}

.chrome-details-btn:hover {
  background: #f8f9fa;
  border-color: #dadce0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chrome-details-btn:active {
  background: #f1f3f4;
}

/* ==========================================================================
   Chromeエラー画面の右下「詳細」ボタン動作と遷移
   ========================================================================== */
.chrome-details-btn.is-glitching {
  color: #c92a2a;
  border-color: #c92a2a;
  animation: glitchShake 0.08s infinite;
}

/* ==========================================================================
   画面端に佇む異物リンク「外に出ますか？」
   （最初は古いHTMLの青リンクに擬態しているが、明朝体で微かに滲んでいる）
   ========================================================================== */
.genuine-404-corner-wrap {
  position: fixed;
  right: 32px;
  bottom: 24px;
  z-index: 102;
}

.genuine-404-corner-link {
  background: none;
  border: none;
  padding: 6px 10px;
  margin: 0;
  outline: none;
  font-size: 13.5px;
  color: #1a0dab;
  /* 初期インターネットの標準青リンク色 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  letter-spacing: 0.12em;
  font-weight: 600;
  /* ここだけゴシックではなく明朝体になっている違和感 */
  font-family: var(--font-mincho), "游明朝", "Yu Mincho", "MS PMincho", serif;
  transition: color 0.1s ease, letter-spacing 0.2s ease;
  animation: uncannyLinkBreath 6s infinite ease-in-out;
}

@keyframes uncannyLinkBreath {

  0%,
  88%,
  100% {
    color: #1a0dab;
    text-shadow: 0 0 0 transparent;
    transform: translate(0, 0);
    opacity: 0.75;
  }

  92% {
    /* 一瞬だけ赤黒いインクが滲んだようにブレる */
    color: #550000;
    text-shadow: 1.5px 0 0 rgba(180, 0, 0, 0.6), -1.5px 0 0 rgba(0, 0, 100, 0.4);
    transform: translate(-0.5px, 0.5px);
    opacity: 1;
  }

  94% {
    color: #1a0dab;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  }
}

/* ホバーした瞬間に擬態が解けて呪詛の色になる */
.genuine-404-corner-link:hover {
  color: #9e0000 !important;
  text-decoration-color: #9e0000;
  text-shadow: 2px 0 0 rgba(255, 0, 0, 0.35), -1px 0 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.28em;
  animation: jitterRapid 0.08s infinite;
}

/* 第二段階：「ほんとうに？」リンク（文字が縦に引き伸ばされ、激しく震える） */
.genuine-404-really-link {
  background: none;
  border: none;
  padding: 4px 8px;
  margin: 0;
  outline: none;
  font-size: 16px;
  color: #6b0000;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.25em;
  font-weight: 900;
  font-family: var(--font-mincho), "游明朝", "Yu Mincho", "MS PMincho", serif;
  display: inline-block;
  white-space: nowrap;
  /* 色収差と滲み */
  text-shadow: 2px 0 1px rgba(255, 0, 0, 0.7), -2px 0 1px rgba(0, 0, 0, 0.8);
  animation: jitterDistort 0.06s infinite steps(2);
}

@keyframes jitterRapid {
  0% {
    transform: translate(0.5px, -0.5px);
  }

  50% {
    transform: translate(-0.5px, 0.5px);
  }

  100% {
    transform: translate(0.5px, 0.5px);
  }
}

@keyframes jitterDistort {
  0% {
    transform: translate(1px, -1px) scaleY(1.15);
  }

  33% {
    transform: translate(-2px, 1px) scaleY(0.95) skewX(-4deg);
  }

  66% {
    transform: translate(1px, 2px) scaleY(1.25);
    filter: invert(0.1);
  }

  100% {
    transform: translate(-1px, -1px) scaleY(1);
  }
}

/* ============================================================================
   第8の隠しエンド「見放された聖堂（Sanctuarium Derelictorum）」
   黒を排し、冷たい純白と聖痕の鮮血色だけで構成する、静謐で神聖な狂気
   ============================================================================ */
:root {
  --sanctum-white: #fcfaf7;
  --sanctum-ivory: #f8f5f0;
  --sanctum-bone: #efe9e1;
  --blood-deep: #8a0303;
  --blood-mid: #b80f0a;
  --blood-bright: #d90429;
  --blood-line: #9e0000;
  --ink-oxblood: #2b0505;
  --ash-gray: #8e8783;
  --font-latin: "Cormorant Garamond", "Cinzel", Georgia, serif;
  --font-rubric: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-blackletter: "UnifrakturMaguntia", "Cinzel", Georgia, serif;
  --font-scripture: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --font-scrawl: "Zen Kurenaido", "Shippori Mincho", "Yu Mincho", serif;
}

body.mode-void {
  background: var(--sanctum-white);
  background-image: none;
  color: var(--ink-oxblood);
  font-family: var(--font-scripture);
  overflow: hidden;
}

body.mode-void .bg-rokudo-mural,
body.mode-void #sparkleCanvas,
body.mode-void .mobile-floating-bar,
body.mode-void .cosmic-nebula-wrap,
body.mode-void .side-column,
body.mode-void .lantern-collection-widget,
body.mode-void .codex-trigger-wrap {
  display: none !important;
}

@keyframes sanctumFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 白飛び（ホワイトアウト）のヴェール：眩しい白光の中に飲み込む */
.whiteout-veil {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #fffdf9 45%, #f4eee6 100%);
}

.veil-verse {
  font-family: var(--font-scripture);
  font-weight: 600;
  font-size: clamp(0.95rem, 3.6vw, 1.3rem);
  letter-spacing: 0.24em;
  line-height: 2;
  color: var(--blood-mid);
  text-align: center;
  text-shadow: 0 0 18px rgba(217, 4, 41, 0.12);
}

.veil-latin {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 1.6em;
  letter-spacing: 0.12em;
}

#flashCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: none;
}

.void-text-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  pointer-events: auto;
  cursor: pointer;
  padding: clamp(12px, 2vh, 28px) clamp(14px, 3vw, 36px);
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  /* 黒いビネットではなく「白い霧」で四隅を閉ざす */
  background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.72) 85%, rgba(255, 255, 255, 0.96) 100%);
}

/* 細い血の赤の二重枠と、四隅の荊 */
.sanctum-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: sanctumFadeIn 4s ease 0.8s forwards;
}

.sanctum-frame::before,
.sanctum-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(158, 0, 0, 0.42);
}

.sanctum-frame::after {
  inset: 18px;
  border-color: rgba(158, 0, 0, 0.16);
}

.thorn-corner {
  position: absolute;
  width: clamp(68px, 14vw, 130px);
  height: clamp(68px, 14vw, 130px);
  overflow: visible;
  pointer-events: none;
}

.thorn-corner.tc-tl {
  top: 6px;
  left: 6px;
}

.thorn-corner.tc-tr {
  top: 6px;
  right: 6px;
  transform: scaleX(-1);
}

.thorn-corner.tc-bl {
  bottom: 6px;
  left: 6px;
  transform: scaleY(-1);
}

.thorn-corner.tc-br {
  bottom: 6px;
  right: 6px;
  transform: scale(-1, -1);
}

.thorn-corner .vine,
.thorn-divider .vine {
  fill: none;
  stroke: var(--blood-line);
  stroke-width: 1.1;
}

.thorn-corner .vine-thin {
  stroke-width: 0.7;
  opacity: 0.6;
}

.thorn-corner .thorn,
.thorn-divider .thorn {
  fill: var(--blood-line);
}

.thorn-corner .cross,
.thorn-divider .cross {
  fill: none;
  stroke: var(--blood-mid);
  stroke-width: 1.6;
}

/* 荊冠と血の滴るラテン十字の区切り線 */
.thorn-divider {
  display: block;
  width: min(340px, 78vw);
  height: auto;
  margin: 14px auto 0;
  overflow: visible;
}

.thorn-divider .blood-drop {
  fill: var(--blood-bright);
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: bloodDrip 4.6s ease-in infinite;
}

@keyframes bloodDrip {
  0% {
    transform: translateY(-3px) scale(0.5);
    opacity: 0;
  }

  20% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  70% {
    transform: translateY(5px) scale(1, 1.18);
    opacity: 1;
  }

  100% {
    transform: translateY(14px) scale(0.8);
    opacity: 0;
  }
}

/* セラフィム／オファニム（車輪の中の車輪・無数の目・六つの翼） */
.seraph-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(125vw, 115vh, 980px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(217, 4, 41, 0.65)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.4));
  animation: seraphEmerge 3.5s ease 0.4s forwards;
}

@keyframes seraphEmerge {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate(-50%, -50%) scale(0.92);
  }

  to {
    opacity: 0.78;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}

.seraph-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: seraphBreath 8s ease-in-out infinite;
}

@keyframes seraphBreath {

  0%,
  100% {
    transform: scale(0.98);
  }

  50% {
    transform: scale(1.02);
  }
}

.seraph-svg .wing-feather {
  fill: none;
  stroke: var(--blood-mid);
  stroke-width: 0.9;
  opacity: 0.75;
}

.seraph-svg .ring-line {
  fill: none;
  stroke: var(--blood-mid);
  stroke-width: 1;
}

.seraph-svg .ring-dash {
  stroke-dasharray: 2 5;
  opacity: 0.6;
}

.seraph-svg .inverted-cross {
  stroke: var(--blood-deep);
  stroke-width: 1.4;
  opacity: 0.5;
}

.seraph-svg .eye-lid {
  fill: rgba(255, 255, 255, 0.9);
  stroke: var(--blood-deep);
  stroke-width: 0.9;
}

.seraph-svg .eye-iris {
  fill: none;
  stroke: var(--blood-mid);
  stroke-width: 0.8;
}

.seraph-svg .eye-pupil {
  fill: var(--blood-bright);
}

.seraph-svg .ring-outer {
  animation: ringSpin 36s linear infinite;
}

.seraph-svg .ring-mid {
  animation: ringSpin 24s linear infinite reverse;
}

.seraph-svg .ring-inner {
  animation: ringSpin 16s linear infinite;
}

.seraph-svg .seraph-wings {
  animation: wingBreath 9s ease-in-out infinite;
}

.seraph-svg .seraph-core .eye-pupil {
  animation: pupilWander 12s ease-in-out infinite;
}

@keyframes ringSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wingBreath {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.045);
  }
}

@keyframes pupilWander {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(4px, -1px);
  }

  55% {
    transform: translate(-4px, 1px);
  }

  80% {
    transform: translate(0, 2px);
  }
}

/* ジャンプスケア＆ストロボ演出（白と鮮血の閃光） */
.sanctum-strobe {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s ease-out;
}

.sanctum-strobe.active {
  opacity: 1;
}

.sanctum-strobe.flash-white {
  background: #ffffff;
}

.sanctum-strobe.flash-crimson {
  background: rgba(217, 4, 41, 0.88);
}

.sanctum-strobe.flash-heavy {
  background: radial-gradient(circle at 50% 50%, #ffffff 15%, #d90429 80%);
}

.void-text-overlay.shock-shake {
  animation: shockShake 0.22s ease-in-out;
}

@keyframes shockShake {
  0% {
    transform: translate(0, 0) scale(1);
  }

  20% {
    transform: translate(-12px, 9px) scale(1.04);
  }

  40% {
    transform: translate(14px, -10px) scale(1.03);
  }

  60% {
    transform: translate(-10px, -6px) scale(1.01);
  }

  80% {
    transform: translate(6px, 4px) scale(1.01);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.icon-plate.shock-zoom {
  animation: shockZoom 0.26s cubic-bezier(0.1, 0.9, 0.2, 1);
}

@keyframes shockZoom {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.22);
    filter: contrast(2.2) invert(0.2) saturate(3.5);
  }

  100% {
    transform: scale(1);
  }
}

.seraph-svg.seraph-flare {
  filter: drop-shadow(0 0 28px rgba(217, 4, 41, 0.95)) saturate(3.2);
  transform: scale(1.09);
  transition: filter 0.15s ease, transform 0.15s ease;
}

/* 宙に浮かんでは消えるラテン語の典礼文 */
.latin-float-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.latin-whisper {
  position: absolute;
  font-family: "Consolas", "Courier New", monospace;
  font-style: normal;
  font-weight: 700;
  color: rgba(138, 3, 3, 0.75);
  white-space: nowrap;
  letter-spacing: 0.16em;
  font-size: clamp(0.7rem, 1.8vw, 0.88rem);
  opacity: 0;
  transform: rotate(var(--tilt, 0deg));
  animation: latinWhisper 8s ease-in-out forwards;
}

@keyframes latinWhisper {
  0% {
    opacity: 0;
    filter: blur(2px);
    transform: rotate(var(--tilt, 0deg)) translateY(6px);
  }

  35% {
    opacity: 0.42;
    filter: blur(0);
  }

  70% {
    opacity: 0.25;
  }

  100% {
    opacity: 0;
    filter: blur(2px);
    transform: rotate(var(--tilt, 0deg)) translateY(-8px);
  }
}

/* 聖堂シーン中央ステージラッパー：上下中央寄せと画面収まりの完全制御 */
.sanctum-stage-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(820px, 94vw);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* 調査調書インシデントヘッダー */
.sanctum-header {
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: sanctumFadeIn 3.4s ease 0.4s forwards;
  max-width: min(840px, 92vw);
  width: 100%;
  margin: 0 auto clamp(8px, 1.4vh, 16px);
}

.rubric-chapter {
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--blood-mid);
  margin-bottom: 4px;
}

.rubric-chapter .blackletter {
  font-family: inherit;
  font-size: 1.05em;
  letter-spacing: 0.1em;
  color: var(--blood-deep);
}

.rubric-sub {
  font-family: var(--font-scripture);
  font-weight: 600;
  font-size: clamp(0.82rem, 2.4vw, 1.05rem);
  letter-spacing: 0.2em;
  color: var(--ink-oxblood);
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.9);
}

/* 観測圏外・回収記録：全画面背景写真（紹介ではなく背景として空間を浸食） */
.sanctum-bg-photo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(0.85) sepia(0.25) contrast(1.3) brightness(0.68);
  opacity: 0.42;
  z-index: 0;
  transition: opacity 0.28s ease, filter 0.22s ease, transform 0.45s ease-out;
  pointer-events: none;
  transform: scale(1.02);
}

.sanctum-bg-photo.is-shifting {
  opacity: 0.12;
  filter: blur(5px) grayscale(1) contrast(1.6);
  transform: scale(1.09);
}



/* 聖句ブロック：背景の光芒や明滅から文字を守り、最高コントラストで読ませる黒漆の祭壇カード */
.scripture-block {
  position: relative;
  z-index: 2;
  max-width: min(800px, 94vw);
  width: 100%;
  min-height: auto;
  margin: 0 auto;
  padding: clamp(14px, 2vh, 22px) clamp(16px, 3.2vw, 28px);
  background: rgba(10, 10, 14, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 10px;
  border: 1.5px solid rgba(217, 4, 41, 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.92), inset 0 0 28px rgba(180, 0, 0, 0.22);
  transition: opacity 0.28s ease, filter 0.28s ease;
  box-sizing: border-box;
}

.scripture-block.is-fading {
  opacity: 0;
  filter: blur(2px);
}

.verse-line {
  display: flex;
  gap: clamp(14px, 2.4vw, 22px);
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.verse-num {
  font-family: var(--font-rubric);
  font-weight: 700;
  font-size: clamp(0.86rem, 2.2vw, 1.05rem);
  letter-spacing: 0.12em;
  color: var(--blood-bright);
  flex-shrink: 0;
  padding-top: 2px;
  border-right: 1.5px solid rgba(184, 15, 10, 0.36);
  padding-right: clamp(12px, 2vw, 18px);
  white-space: nowrap;
  line-height: 1.8;
}

.verse-text {
  margin: 0;
  font-family: var(--font-scripture);
  font-weight: 600;
  font-size: clamp(0.96rem, 2.2vw, 1.2rem);
  line-height: 2.15;
  letter-spacing: 0.14em;
  color: var(--ink-oxblood);
  text-align: justify;
  text-justify: inter-ideograph;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.95);
}

/* 余白に残された、戻れなくなった人間の走り書き */
.marginalia {
  font-family: var(--font-scrawl);
  font-size: clamp(0.76rem, 2.8vw, 0.94rem);
  letter-spacing: 0.14em;
  color: rgba(110, 98, 94, 0.72);
  margin-top: 8px;
  opacity: 0;
  transform: rotate(var(--scrawl-tilt, -2deg));
}

.marginalia.is-visible {
  animation: scrawlIn 2.6s ease 1.4s forwards;
}

@keyframes scrawlIn {
  0% {
    opacity: 0;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.void-skip-btn {
  display: none !important;
}

/* ============================================================================
   神不在の聖堂・壮大にして不気味な空間演出（血脈・神聖光芒・オファニムの凝視）
   ============================================================================ */

/* 画面外周を侵食し、心拍音に合わせて脈動する血脈ビネット */
.sanctum-blood-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: radial-gradient(circle at 50% 50%,
      transparent 45%,
      rgba(184, 15, 10, 0.08) 70%,
      rgba(139, 0, 0, 0.28) 90%,
      rgba(40, 0, 0, 0.65) 100%);
  box-shadow: inset 0 0 100px rgba(184, 15, 10, 0.35);
  animation: bloodVignettePulse 3.8s ease-in-out infinite;
}

@keyframes bloodVignettePulse {

  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
    box-shadow: inset 0 0 80px rgba(184, 15, 10, 0.25);
  }

  50% {
    opacity: 1;
    transform: scale(1.015);
    box-shadow: inset 0 0 140px rgba(217, 4, 41, 0.55);
  }
}

/* 背景中央から静かに放射される、冷酷で神聖な白銀のゴッドレイ */
.sanctum-holy-glare {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.12) 0deg,
      transparent 20deg,
      rgba(255, 255, 255, 0.18) 45deg,
      transparent 65deg,
      rgba(255, 255, 255, 0.08) 90deg,
      transparent 120deg,
      rgba(255, 255, 255, 0.22) 160deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.12) 220deg,
      transparent 250deg,
      rgba(255, 255, 255, 0.18) 290deg,
      transparent 320deg,
      rgba(255, 255, 255, 0.12) 360deg);
  filter: blur(28px);
  opacity: 0.55;
  animation: holyGlareRotate 70s linear infinite;
}

@keyframes holyGlareRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 浮遊するオファニムの瞳フィールド */
.floating-eyes-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.floating-eye {
  position: absolute;
  width: 28px;
  height: 18px;
  opacity: 0;
  transform: scale(0.6) rotate(var(--eye-rot, 0deg));
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.floating-eye.is-open {
  opacity: 0.85;
  transform: scale(1) rotate(var(--eye-rot, 0deg));
  animation: eyeGazeBlink 2.4s ease-in-out infinite alternate;
}

@keyframes eyeGazeBlink {
  0% {
    transform: scale(1) rotate(var(--eye-rot, 0deg));
    filter: drop-shadow(0 0 4px #d90429);
  }

  85% {
    transform: scale(1) rotate(var(--eye-rot, 0deg));
  }

  92% {
    transform: scale(1, 0.08) rotate(var(--eye-rot, 0deg));
  }

  /* 瞬き */
  100% {
    transform: scale(1) rotate(var(--eye-rot, 0deg));
    filter: drop-shadow(0 0 10px #ff1a3c);
  }
}

/* 聖書章句のラテン語副題（威厳と静けさ） */
.verse-latin-sub {
  font-family: var(--font-cinzel);
  font-size: clamp(0.72rem, 1.6vw, 0.88rem);
  letter-spacing: 0.22em;
  color: #e5989b;
  text-transform: uppercase;
  margin: 0 0 clamp(6px, 1.2vh, 12px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(217, 4, 41, 0.35);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: latinGleam 4s ease-in-out infinite alternate;
}

.verse-latin-sub::before,
.verse-latin-sub::after {
  content: "";
  flex: 0 1 45px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(184, 15, 10, 0.45));
}

.verse-latin-sub::after {
  background: linear-gradient(to left, transparent, rgba(184, 15, 10, 0.45));
}

@keyframes latinGleam {
  0% {
    opacity: 0.75;
    letter-spacing: 0.24em;
  }

  100% {
    opacity: 1;
    letter-spacing: 0.28em;
    text-shadow: 0 0 16px rgba(217, 4, 41, 0.45);
  }
}

/* 多重マージナリア（狂気の手書き落書きの群れ） */
.marginalia-cluster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(16px, 2.5vh, 24px);
  padding-top: 14px;
  border-top: 1px dashed rgba(158, 0, 0, 0.22);
  width: 100%;
}

.marginalia-scrawl {
  font-family: var(--font-scripture);
  font-size: clamp(0.88rem, 2.2vw, 1.06rem);
  font-weight: 700;
  color: #8b0000;
  letter-spacing: 0.13em;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(6px) rotate(var(--scrawl-rot, 0deg));
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-shadow: 0 0 6px rgba(217, 4, 41, 0.35), 0 1px 2px rgba(255, 255, 255, 0.9);
  animation: scrawlJitter 0.25s infinite alternate ease-in-out;
}

.marginalia-scrawl.is-visible {
  opacity: 0.92;
  transform: translateY(0) rotate(var(--scrawl-rot, 0deg));
}

@keyframes scrawlJitter {
  0% {
    transform: translate(0, 0) rotate(var(--scrawl-rot, 0deg));
  }

  100% {
    transform: translate(1px, -1px) rotate(calc(var(--scrawl-rot, 0deg) + 0.6deg));
  }
}

/* 激しいカメラ揺れ・衝撃（ジャンプスケア用） */
.shock-shake,
.shake-violence {
  animation: shakeViolenceAnim 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes shakeViolenceAnim {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  12% {
    transform: translate(-18px, -20px) rotate(-3.5deg) scale(1.06);
  }

  28% {
    transform: translate(24px, 16px) rotate(4deg) scale(0.97);
  }

  45% {
    transform: translate(-28px, 18px) rotate(-2.5deg) scale(1.08);
  }

  62% {
    transform: translate(20px, -22px) rotate(3deg) scale(1.02);
  }

  78% {
    transform: translate(-14px, 10px) rotate(-1.5deg) scale(0.99);
  }

  90% {
    transform: translate(8px, -4px) rotate(1deg) scale(1.01);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

.shock-zoom {
  animation: shockZoomAnim 0.35s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes shockZoomAnim {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.18);
    filter: brightness(1.5) contrast(1.6);
  }

  100% {
    transform: scale(1);
    filter: none;
  }
}

/* 全画面サブリミナル・ジャンプスケア画像フラッシュ */
.jumpscare-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
  background: #000000;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.jumpscare-flash-overlay.active-shock {
  animation: jumpscareStrobe 0.38s ease forwards;
}

@keyframes jumpscareStrobe {
  0% {
    opacity: 1;
    background-color: #ffffff;
    filter: invert(0) contrast(3) brightness(1.6);
  }

  18% {
    opacity: 1;
    background-color: #000000;
    filter: invert(1) contrast(5) drop-shadow(0 0 40px #ff002b);
  }

  38% {
    opacity: 0.95;
    background-color: #ff002b;
    filter: invert(0) contrast(3.5) brightness(1.4);
  }

  62% {
    opacity: 1;
    background-color: #000000;
    filter: invert(1) contrast(4.5) drop-shadow(0 0 50px #ff002b);
  }

  82% {
    opacity: 0.9;
    background-color: #ffffff;
    filter: invert(0) contrast(3);
  }

  100% {
    opacity: 0;
    filter: none;
  }
}

.jumpscare-flash-img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform: scale(1.42);
  filter: contrast(2.2) brightness(1.3) drop-shadow(0 0 40px #ff002b);
}


/* ============================================================================
   終幕画面：白磁の祭壇と聖書の奥付（コロフォン）
   ============================================================================ */
/* 終幕画面：資料03と同じ写真（黒き砂漠と白き空、虚空の血脈）を全画面背景に配置 */
.final-bg-photo {
  position: fixed;
  inset: 0;
  z-index: 0; /* 確実に最背面 */
  pointer-events: none;
  overflow: hidden;
}

.final-bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 画面外周の深紅と漆黒のゴシック・ヴィネット */
.gothic-sacral-vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(90, 0, 0, 0.45), inset 0 0 180px rgba(8, 0, 0, 0.75);
}

/* 背後に浮遊・回転する巨大なゴシック薔薇窓（白と血の聖堂円環） */
.final-rose-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(130vw, 130vh, 1100px);
  height: min(130vw, 130vh, 1100px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.82;
  filter: drop-shadow(0 0 35px rgba(217, 4, 41, 0.75)) drop-shadow(0 0 70px rgba(255, 255, 255, 0.5));
  animation: rotateRoseWindow 45s linear infinite;
}

@keyframes rotateRoseWindow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.gothic-rose-window {
  width: 100%;
  height: 100%;
  display: block;
}

.final-end-screen {
  position: fixed;
  inset: 0;
  z-index: 1005;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(20px, 4vh, 48px) clamp(10px, 3vw, 24px) 64px;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  color: var(--ink-oxblood);
  font-family: var(--font-scripture);
  background: transparent;
  scroll-behavior: auto;
}

.red-threads-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 160px;
  pointer-events: none;
  z-index: 12;
}

/* 祭壇カード：四隅に茨の飾り角、血の二重枠、深紅の影（一番でかい大枠を透かし、背後の巨大回転薔薇窓をダイナミックに見せる） */
.altar-sheet {
  position: relative;
  z-index: 10; /* 写真より確実に手前・前面に配置 */
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 32px clamp(14px, 4vw, 36px) 26px;
  background: rgba(246, 243, 238, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(110, 26, 26, 0.42);
  outline: 1.2px dashed rgba(160, 130, 80, 0.35);
  outline-offset: 7px;
  border-radius: 200px 200px 8px 8px / 80px 80px 8px 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 35px rgba(80, 16, 16, 0.16);
  opacity: 0;
  animation: sanctumFadeIn 2.6s ease forwards;
  transition: max-width 0.3s ease;
}

.final-header-block {
  width: 100%;
  text-align: center;
}

.final-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 10px;
}

.final-col-left,
.final-col-right {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.altar-sheet .thorn-corner {
  opacity: 0.85;
  pointer-events: none;
}

.altar-sheet .thorn-corner.tc-tl {
  top: 14px;
  left: 14px;
}

.altar-sheet .thorn-corner.tc-tr {
  top: 14px;
  right: 14px;
}

.altar-sheet .thorn-corner.tc-bl {
  bottom: 8px;
  left: 8px;
}

.altar-sheet .thorn-corner.tc-br {
  bottom: 8px;
  right: 8px;
}

/* 異端審問の血の蝋封印章 */
.blood-wax-seal {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 15;
  pointer-events: none;
  transform: rotate(-9deg);
  filter: drop-shadow(0 3px 10px rgba(138, 3, 3, 0.4));
  opacity: 0.9;
}

@media (max-width: 600px) {
  .blood-wax-seal {
    top: 12px;
    right: 8px;
    transform: rotate(-9deg) scale(0.75);
  }
}

.final-sigil {
  width: 76px;
  height: 76px;
  margin: 0 auto 2px;
  opacity: 0.88;
}

.final-rubric {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: #7a1818;
  font-weight: 700;
}

.final-latin-subrubric {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: #6a2a2a;
  margin-top: 2px;
  margin-bottom: 6px;
}

.final-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 12px);
  margin: 6px 0 2px;
  width: 100%;
  max-width: 100%;
}

.sacral-cross-ornament {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: #6a1414;
  text-shadow: 0 0 8px rgba(106, 20, 20, 0.3);
  opacity: 0.9;
  flex-shrink: 0;
}

.final-end-word {
  font-family: var(--font-scripture);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.8vw, 1.95rem);
  letter-spacing: clamp(0.12em, 1.2vw, 0.42em);
  padding-left: clamp(0.12em, 1.2vw, 0.42em);
  color: #380808;
  text-shadow: 0 0 12px rgba(106, 20, 20, 0.2), 0 0 1px #fff;
  white-space: nowrap;
  max-width: 100%;
}

.final-end-latin {
  font-family: "Consolas", "Courier New", monospace;
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--ash-gray);
}

.final-divider {
  margin: 10px auto 14px;
}

.final-apocrypha-quote {
  font-family: var(--font-scripture);
  max-width: 550px;
  width: 100%;
  margin: 8px auto 12px;
  padding: 12px 14px 10px;
  text-align: left;
  background: radial-gradient(ellipse at top left, rgba(110, 20, 20, 0.04) 0%, rgba(255, 253, 249, 0.98) 100%);
  border: 1.2px solid rgba(110, 20, 20, 0.28);
  border-left: 3.5px solid #6a1414;
  border-radius: 6px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06), inset 0 0 16px rgba(110, 20, 20, 0.02);
  box-sizing: border-box;
}

.apocrypha-verse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-rubric);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: #6a1414;
  border-bottom: 1px dashed rgba(110, 20, 20, 0.22);
  padding-bottom: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.canon-sigil {
  color: #6a1414;
  font-size: 0.85rem;
  margin-right: 3px;
  vertical-align: -0.05em;
}

.apocrypha-code {
  font-family: var(--font-latin);
  color: #7a5858;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.apocrypha-scripture-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 8px;
}

.apocrypha-verse-item {
  position: relative;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: justify;
  font-size: 0.92rem;
}

/* 先頭文字の朱書（ルブリック）ドロップキャップ：落ち着いた古色ある深紅 */
.verse-rubric-lead {
  font-family: "Shippori Mincho", "Cinzel", serif;
  font-size: 1.58em;
  font-weight: 700;
  color: #6a1414;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.06em;
  margin-right: 2px;
  text-shadow: 0 0 6px rgba(106, 20, 20, 0.2);
  letter-spacing: normal;
}

/* 節番号（7, 8, 9）を先頭文字の左肩に古代写本風に上品に添える */
.verse-rubric-lead::before {
  content: attr(data-verse);
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(184, 15, 10, 0.6);
  margin-right: 4px;
  vertical-align: 0.55em;
  letter-spacing: -0.02em;
}

.verse-body-text {
  font-size: 0.88rem;
  color: #261313;
  font-weight: 500;
}

.apocrypha-source {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(158, 0, 0, 0.22);
  font-size: 0.72rem;
  line-height: 1.68;
  color: #6e4848;
  letter-spacing: 0.03em;
}

.source-tag {
  font-weight: 700;
  color: #8a1f26;
  margin-right: 3px;
}

/* ============================================================================
   「第三の場所」比較宗教学・諸経典解題パネル（省スペース・タブ型ビューア）
   ============================================================================ */
.third-place-lore-panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(106, 20, 20, 0.28);
  padding: 20px 20px 16px;
  margin: 14px auto 18px;
  text-align: left;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.lore-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.lore-header-pill {
  display: inline-block;
  font-family: var(--font-rubric);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #6a1414;
  background: rgba(106, 20, 20, 0.07);
  border: 1px solid rgba(106, 20, 20, 0.28);
  padding: 4px 12px;
  border-radius: 3px;
}

.lore-tab-hint {
  font-size: 0.76rem;
  font-weight: 600;
  color: #5c1818;
  letter-spacing: 0.06em;
}

.lore-lead-quote {
  font-family: var(--font-scripture);
  font-size: clamp(1.12rem, 3.6vw, 1.32rem);
  font-weight: 800;
  line-height: 1.65;
  color: #380808;
  border-left: 4px solid #6a1414;
  padding-left: 14px;
  margin: 8px 0 14px;
  letter-spacing: 0.03em;
}

.lore-intro-text {
  font-size: 0.92rem;
  line-height: 1.9;
  color: #381212;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}

.lore-intro-text strong {
  color: #5a1010;
  font-weight: 800;
}

/* 3つの記録を切り替えるタブセレクター */
/* 3つの記録を切り替えるタブセレクターバー */
.lore-tabs-nav {
  display: flex;
  gap: 8px;
  margin: 12px 0 12px;
  padding: 4px;
  background: rgba(70, 15, 15, 0.04);
  border: 1px solid rgba(90, 20, 20, 0.18);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* タブボタン：はっきりと「押せるボタン」とわかる立体感とコントラスト */
.lore-tab-btn {
  background: #ffffff;
  border: 1.5px solid #d4c7b2;
  border-bottom: 2.5px solid #b3a183;
  border-radius: 6px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: #381a1a;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ローマ数字バッジ（Ⅰ、Ⅱ、Ⅲ） */
.lore-tab-btn .tab-badge,
.lore-tab-btn .tab-num {
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 700;
  font-size: 0.78rem;
  background: rgba(106, 20, 20, 0.08);
  color: #6a1414;
  border: 1px solid rgba(106, 20, 20, 0.22);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.2;
  transition: all 0.18s ease;
}

.lore-tab-btn .tab-text {
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ホバー時：立体的に浮き上がり、落ち着いた深紅を帯びる */
.lore-tab-btn:hover {
  background: #faf6f2;
  border-color: #6a1414;
  border-bottom-color: #4a0c0c;
  color: #4a0c0c;
  transform: translateY(-1.5px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.lore-tab-btn:hover .tab-badge,
.lore-tab-btn:hover .tab-num {
  background: rgba(106, 20, 20, 0.14);
  border-color: #6a1414;
}

/* 押下時（クリック時）：沈み込むフィードバック */
.lore-tab-btn:active {
  transform: translateY(1px);
  border-bottom-width: 1.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 選択中（アクティブ時）：厳かな深紅ボルドーのプレミアムソリッドボタン */
.lore-tab-btn.active {
  background: linear-gradient(135deg, #6a1414 0%, #4a0c0c 100%);
  border: 1.5px solid #4a0c0c;
  border-bottom: 2.5px solid #2a0606;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(74, 12, 12, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transform: translateY(0);
}

.lore-tab-btn.active .tab-badge,
.lore-tab-btn.active .tab-num {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.lore-tab-btn.active:hover {
  background: linear-gradient(135deg, #781818 0%, #540e0e 100%);
  border-color: #4a0c0c;
  box-shadow: 0 4px 12px rgba(74, 12, 12, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.lore-tab-content-wrap {
  min-height: 110px;
}

.lore-scripture-item {
  display: none;
  background: #faf6ee;
  border: 1px solid rgba(106, 20, 20, 0.18);
  border-left: 3px solid #6a1414;
  padding: 12px 14px;
  border-radius: 4px;
  animation: loreFade 0.25s ease forwards;
}

.lore-scripture-item.active {
  display: block;
}

@keyframes loreFade {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lore-item-badge {
  font-size: 0.77rem;
  font-weight: 700;
  color: #6a1414;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.lore-scripture-item p {
  font-size: 0.79rem;
  line-height: 1.75;
  color: #2b1414;
  margin: 0;
}

.lore-item-note {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(106, 20, 20, 0.2);
  font-size: 0.72rem;
  line-height: 1.6;
  color: #5e4040;
}

/* 「第三の場所」資料アーカイブ：総括・締めの一文（厳かかつ印象的な強調） */
.lore-conclusion-box {
  background: linear-gradient(180deg, rgba(80, 15, 20, 0.04) 0%, rgba(55, 10, 15, 0.08) 100%);
  border: 1px solid rgba(106, 20, 20, 0.22);
  border-left: 3.5px solid #6a1414;
  padding: 14px 18px 14px;
  margin-top: 14px;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.02);
}

.conclusion-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  opacity: 0.7;
}

.conclusion-ribbon .ribbon-line {
  height: 1px;
  width: 44px;
  background: linear-gradient(90deg, transparent, rgba(106, 20, 20, 0.45), transparent);
}

.conclusion-ribbon .ribbon-symbol {
  font-size: 0.86rem;
  color: #6a1414;
  line-height: 1;
}

.conclusion-premise {
  font-family: "Cinzel", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 0.82rem;
  line-height: 1.85;
  color: #4a282b;
  margin: 0 0 8px;
  letter-spacing: 0.05em;
  text-align: center;
}

.conclusion-premise strong {
  color: #5a1010;
  font-weight: 700;
}

.conclusion-separator {
  width: 80%;
  max-width: 220px;
  height: 1px;
  margin: 10px auto;
  background: linear-gradient(90deg, transparent, rgba(106, 20, 20, 0.35), transparent);
}

.conclusion-question {
  font-family: "Cinzel", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  font-weight: 600;
  line-height: 1.9;
  color: #4a0e14;
  margin: 0;
  letter-spacing: 0.06em;
  text-align: center;
}

.conclusion-highlight {
  font-size: 1.1em;
  font-weight: 800;
  color: #6a1414;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(106, 20, 20, 0.15);
  display: inline-block;
  padding: 0 2px;
  border-bottom: 1.5px dotted rgba(106, 20, 20, 0.55);
}

.humble-author-box {
  background: var(--sanctum-ivory);
  border: 1px solid rgba(106, 20, 20, 0.22);
  border-left: 3px solid #6a1414;
  padding: 16px 18px;
  width: 100%;
  margin: 0 auto 20px;
  text-align: left;
  line-height: 1.75;
  font-size: 0.84rem;
  color: #381212;
  opacity: 0;
  animation: fadeInHumble 1.2s ease 0.9s forwards;
}

/* 輪廻外：作者からの小説宣伝ボックス（厳かな羊皮紙・バーガンディ） */
.humble-author-box.novel-promo-box {
  background: linear-gradient(135deg, rgba(255, 253, 250, 0.98) 0%, rgba(250, 244, 238, 0.98) 100%);
  border: 1.5px solid rgba(106, 20, 20, 0.32);
  border-left: 4.5px solid #6a1414;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 0 12px rgba(106, 20, 20, 0.03);
}

.promo-header-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(106, 20, 20, 0.24);
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: #5a1010;
}

.promo-tag-icon {
  font-size: 1rem;
}

.promo-tag-text {
  font-weight: bold;
}

.promo-tag-sub {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(106, 20, 20, 0.08);
  border: 1px solid rgba(106, 20, 20, 0.25);
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6a1414;
  letter-spacing: 0.04em;
  margin-left: auto;
}

.promo-text {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.72;
  color: #2b1d1d;
}

.promo-text strong {
  color: #5a1010;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-btn-wrap {
  text-align: center;
  margin-top: 6px;
}

@keyframes fadeInHumble {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.humble-author-box p {
  margin: 0 0 12px;
}

.humble-kakuyomu-btn {
  display: inline-block;
  max-width: 100%;
  padding: 10px 18px;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: #520e0e;
  border: 1px solid #520e0e;
  text-decoration: none;
  transition: all 0.25s ease;
}

.humble-kakuyomu-btn.promo-kakuyomu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 22px;
  font-weight: bold;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: linear-gradient(135deg, #6a1414 0%, #4a0c0c 100%);
  border: 1.2px solid #5a1010;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(74, 12, 12, 0.25);
}

.humble-kakuyomu-btn:hover {
  background: #6a1414;
  box-shadow: 0 6px 18px rgba(106, 20, 20, 0.2);
}

.humble-kakuyomu-btn.promo-kakuyomu-btn:hover {
  background: linear-gradient(135deg, #781818 0%, #540e0e 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(74, 12, 12, 0.32);
}

/* 終幕画面のアクションボタン群（見やすく・押しやすく・明確に区別） */
.final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 20px;
  position: relative;
  z-index: 25;
}

/* 1. 最初の画面に戻る（メインCTA・再診断ボタン）：厳かなボルドー＆アンティークゴールド */
.void-restart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-scripture);
  background: linear-gradient(135deg, #6a1414 0%, #520e0e 45%, #3a0808 100%);
  color: #ffffff !important;
  border: 1.5px solid rgba(212, 185, 130, 0.65);
  outline: 1px solid rgba(106, 20, 20, 0.4);
  outline-offset: -3px;
  border-radius: 6px;
  padding: 10px 20px;
  min-height: 46px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(58, 8, 8, 0.35), 0 0 8px rgba(212, 185, 130, 0.15);
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
  user-select: none;
  text-align: left;
}

.void-restart-btn .btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: #ffe382;
  text-shadow: 0 0 8px rgba(255, 227, 130, 0.6);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.void-restart-btn .btn-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.void-restart-btn .btn-main-label {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.2;
}

.void-restart-btn .btn-sub-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #ffcfcf;
  line-height: 1.1;
  font-weight: normal;
}

.void-restart-btn:hover {
  background: linear-gradient(135deg, #781818 0%, #5e1010 45%, #420a0a 100%);
  border-color: #dfc182;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(58, 8, 8, 0.45), 0 0 12px rgba(223, 193, 130, 0.25);
}

.void-restart-btn:hover .btn-icon {
  transform: rotate(-180deg);
}

.void-restart-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(58, 8, 8, 0.4);
}

/* 2. 讃美歌BGMコントロールボタン：状態がひと目でわかるサウンドスイッチ */
.hymn-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-scripture);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #5a1010;
  background: #ffffff;
  border: 1.5px solid rgba(106, 20, 20, 0.35);
  border-radius: 6px;
  padding: 10px 18px;
  min-height: 46px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hymn-toggle-btn .btn-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.hymn-toggle-btn:hover {
  background: rgba(106, 20, 20, 0.06);
  border-color: #6a1414;
  color: #380808;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hymn-toggle-btn:active {
  transform: translateY(1px);
}

/* ミュート停止中スタイル（落ち着いたグレー・オフ状態） */
.hymn-toggle-btn.is-muted {
  background: #f8f6f2;
  border-color: #9e8d89;
  color: #554440;
}

.hymn-toggle-btn.is-muted:hover {
  background: #ffffff;
  border-color: #6a1414;
  color: #6a1414;
}

.colophon {
  font-family: var(--font-rubric);
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  color: var(--blood-mid);
  border-top: 1px solid rgba(158, 0, 0, 0.22);
  padding-top: 14px;
}

.colophon span {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-scripture);
  color: var(--ash-gray);
}

/* 右カラム最下部・スマホ等で読み進めた読者のための安全な生還ツールバー */
.final-bottom-return-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed rgba(160, 130, 80, 0.4);
  position: relative;
  z-index: 30;
}

.final-return-btn,
.final-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  text-decoration: none;
}

.final-return-btn {
  background: linear-gradient(135deg, #6a1414 0%, #4a0d0d 100%);
  color: #fff9ea !important;
  border: 1.5px solid #ebd095;
  box-shadow: 0 4px 14px rgba(74, 13, 13, 0.4);
}

.final-return-btn:hover {
  background: linear-gradient(135deg, #821c1c 0%, #5e1111 100%);
  border-color: #ffe382;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(110, 26, 26, 0.5);
}

.final-retry-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #4a1212 !important;
  border: 1.5px solid rgba(160, 130, 80, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.final-retry-btn:hover {
  background: #ffffff;
  border-color: #8c6a32;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 106, 50, 0.25);
}
/* ============================================================================
   終幕画面：レスポンシブ見開きレイアウト
   ・PC（900px〜）：スクロール最小化・大聖堂祭壇画風 見開き2カラム
   ・スマホ（〜899px）：自然な縦スクロール1カラム
   ============================================================================ */

/* スマホ表示（〜899px） */
@media (max-width: 899px) {
  .final-end-screen {
    padding: clamp(16px, 3.5vh, 32px) 12px 64px;
    justify-content: flex-start;
  }
  .altar-sheet {
    max-width: 580px;
    margin: 0 auto;
    padding: 26px clamp(12px, 3.5vw, 16px) 24px;
    border-radius: 120px 120px 8px 8px / 60px 60px 8px 8px;
  }
  .final-col-left {
    display: contents; /* スマホでは子要素を直接順序制御 */
  }
  .final-apocrypha-quote {
    order: 1;
    margin: 8px auto 14px;
  }
  .final-col-right {
    order: 2;
  }
  .humble-author-box {
    order: 3;
    margin: 14px auto 16px;
  }
  .final-actions {
    order: 4;
    margin-bottom: 16px;
    width: 100%;
  }
  @media (max-width: 600px) {
    .final-actions {
      flex-direction: column;
      gap: 10px;
    }
    .void-restart-btn,
    .hymn-toggle-btn {
      width: 100%;
      justify-content: center;
    }
  }
  .colophon {
    order: 5;
  }
}

@media (max-width: 480px) {
  .final-end-word {
    font-size: clamp(0.98rem, 4.6vw, 1.25rem);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
  }
  .sacral-cross-ornament {
    font-size: 0.95rem;
  }
  .final-rubric {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
  }
  .final-latin-subrubric {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
  }
}

/* PC表示（900px以上）：見開き2カラム＆スクロール最小化 */
@media (min-width: 900px) {
  .final-end-screen {
    padding: clamp(16px, 2.5vh, 28px) clamp(16px, 2.5vw, 36px) clamp(28px, 4vh, 48px);
    justify-content: flex-start; /* 画面垂直中央寄せでなく上部から配置し、画面高さが低い場合でも上部タイトルが画面外へ突き抜けて見切れるのを確実に防止 */
    align-items: center;
  }

  .altar-sheet {
    margin: 0 auto; /* 常に上部から自然に配置し、最上部ヘッダーの可視性を100%保証 */
    max-width: 1140px;
    width: 100%;
    padding: clamp(16px, 2.2vh, 26px) clamp(24px, 3vw, 40px) clamp(16px, 2vh, 22px);
    border-radius: 140px 140px 10px 10px / 60px 60px 10px 10px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(184, 15, 10, 0.25);
  }

  /* 上部ヘッダー部をコンパクトに凝縮 */
  .final-header-block {
    margin-bottom: 4px;
  }
  .final-sigil {
    width: 54px;
    height: 54px;
    margin: 0 auto 0;
  }
  .final-rubric {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
  }
  .final-latin-subrubric {
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    margin-top: 1px;
    margin-bottom: 2px;
  }
  .final-title-row {
    margin: 2px 0 1px;
    gap: 10px;
  }
  .sacral-cross-ornament {
    font-size: 1.15rem;
  }
  .final-end-word {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    letter-spacing: clamp(0.2em, 1.8vw, 0.38em);
    padding-left: clamp(0.2em, 1.8vw, 0.38em);
    white-space: nowrap;
  }
  .final-end-latin {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
  .final-divider {
    margin: 4px auto 6px;
    height: 32px;
  }

  /* 見開き2カラム構造 */
  .final-content-grid {
    grid-template-columns: 1fr 1.08fr; /* 左翼：右翼 */
    gap: clamp(16px, 2.2vw, 28px);
    align-items: stretch;
    text-align: left;
    margin-top: 2px;
  }

  /* 左翼：イカロス外典引用 + カクヨム案内 + ボタン群 + 奥付 */
  .final-col-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
  }

  .final-apocrypha-quote {
    margin: 0;
    max-width: 100%;
    padding: 12px 16px 10px;
  }
  .apocrypha-verse-header {
    margin-bottom: 8px;
    padding-bottom: 5px;
    font-size: 0.62rem;
  }
  .apocrypha-scripture-body {
    gap: 8px;
    margin: 2px 0 6px;
  }
  .apocrypha-verse-item {
    line-height: 1.85;
  }
  .verse-rubric-lead {
    font-size: 1.48em;
  }
  .verse-body-text {
    font-size: 0.81rem;
    line-height: 1.85;
  }
  .apocrypha-source {
    margin-top: 8px;
    padding-top: 5px;
    font-size: 0.68rem;
    line-height: 1.5;
  }

  .humble-author-box {
    margin: 0;
    padding: 10px 14px;
    font-size: 0.78rem;
    line-height: 1.6;
  }
  .humble-author-box p {
    margin: 0 0 6px;
  }
  .humble-kakuyomu-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
  }

  .final-actions {
    margin: 4px 0 2px;
    gap: 10px;
    justify-content: flex-start;
    position: relative;
    z-index: 25;
  }
  .final-actions button {
    position: relative;
    z-index: 30;
    pointer-events: auto !important;
  }
  .void-restart-btn {
    padding: 8px 16px;
    min-height: 42px;
  }
  .void-restart-btn .btn-main-label {
    font-size: 0.86rem;
  }
  .void-restart-btn .btn-sub-label {
    font-size: 0.65rem;
  }
  .hymn-toggle-btn {
    padding: 8px 14px;
    min-height: 42px;
    font-size: 0.8rem;
  }

  .colophon {
    margin-top: 2px;
    padding-top: 6px;
    text-align: left;
    font-size: 0.6rem;
    line-height: 1.4;
  }
  .colophon span {
    margin-top: 2px;
    font-size: 0.68rem;
  }

  /* 右翼：宗教民俗学資料アーカイブパネル */
  .final-col-right {
    display: flex;
    flex-direction: column;
  }

  .third-place-lore-panel {
    margin: 0;
    padding: 14px 16px 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .lore-header-row {
    margin-bottom: 6px;
  }
  .lore-header-pill {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  .lore-tab-hint {
    font-size: 0.7rem;
  }

  .lore-lead-quote {
    font-size: 0.98rem;
    margin: 2px 0 6px;
    padding-left: 10px;
    line-height: 1.5;
  }

  .lore-intro-text {
    font-size: 0.8rem;
    line-height: 1.65;
    margin: 0 0 8px;
  }

  .lore-tabs-nav {
    margin: 4px 0 8px;
    padding: 3px;
    gap: 5px;
  }
  .lore-tab-btn {
    padding: 5px 8px;
    font-size: 0.73rem;
    gap: 5px;
  }
  .lore-tab-btn .tab-badge,
  .lore-tab-btn .tab-num {
    padding: 1px 4px;
    font-size: 0.72rem;
  }

  .lore-tab-content-wrap {
    min-height: 110px;
  }

  .lore-scripture-item {
    padding: 8px 12px;
  }
  .lore-item-badge {
    font-size: 0.74rem;
    margin-bottom: 4px;
  }
  .lore-scripture-item p {
    font-size: 0.78rem;
    line-height: 1.65;
  }
  .lore-item-note {
    margin-top: 6px;
    padding-top: 5px;
    font-size: 0.68rem;
    line-height: 1.5;
  }

  .lore-conclusion-box {
    margin-top: 10px;
    padding: 10px 12px 10px;
  }
  .conclusion-premise {
    font-size: 0.76rem;
    line-height: 1.65;
    margin-bottom: 6px;
  }
  .conclusion-question {
    font-size: 0.88rem;
    line-height: 1.7;
  }
}

@media (max-width: 600px) {
  .verse-line {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }

  .altar-sheet {
    padding: 24px 14px 22px;
    border-radius: 100px 100px 6px 6px / 40px 40px 6px 6px;
  }

  .void-skip-btn {
    bottom: 24px;
    right: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .seraph-svg,
  .seraph-svg .ring-outer,
  .seraph-svg .ring-mid,
  .seraph-svg .ring-inner,
  .seraph-svg .seraph-wings,
  .seraph-svg .seraph-core .eye-pupil,
  .thorn-divider .blood-drop {
    animation: none !important;
  }
}

/* ============================================================================
   診断結果画面（涅槃〜地獄）：PC環境での見開き一画面収容（スクロールレス）最適化
   ============================================================================ */
@media (min-width: 900px) {
  body.is-result-screen {
    overflow-y: auto;
  }

  body.is-result-screen .page-wrapper {
    max-width: 1380px;
    grid-template-columns: minmax(170px, 210px) minmax(0, 960px) minmax(170px, 210px);
    padding: clamp(6px, 1.2vh, 14px) 14px;
    gap: clamp(10px, 1.6vw, 20px);
    min-height: 100vh;
    box-sizing: border-box;
    align-items: center;
  }

  body.is-result-screen .side-column {
    gap: 12px;
  }

  body.is-result-screen .mystic-widget {
    padding: 10px 12px;
  }

  body.is-result-screen .grimoire-frame {
    max-width: 960px;
    padding: clamp(6px, 1vh, 10px);
    box-sizing: border-box;
  }

  body.is-result-screen .grimoire-inner {
    padding: clamp(10px, 1.4vh, 16px) clamp(16px, 2vw, 26px);
  }

  /* 上部ヘッダー群：上下余白をコンパクトに凝縮 */
  body.is-result-screen .result-top-bar {
    margin-bottom: clamp(4px, 0.8vh, 8px);
  }

  body.is-result-screen .sub-header {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    margin-bottom: 2px;
  }

  body.is-result-screen .main-title {
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    letter-spacing: 0.16em;
    margin: 1px 0 2px !important;
  }

  body.is-result-screen .nehan-crest,
  body.is-result-screen .hell-curse-ribbon {
    margin: 2px auto;
    padding: 2px 10px;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
  }

  body.is-result-screen .nehan-subtitle,
  body.is-result-screen .hell-subtitle {
    font-size: 0.64rem;
    margin-bottom: 2px;
  }

  body.is-result-screen .result-score-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 2px 0 4px;
    flex-wrap: wrap;
  }

  body.is-result-screen .score-banner {
    margin: 0;
    padding: 3px 12px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
  }

  body.is-result-screen .score-banner strong {
    font-size: 1.05rem;
  }

  body.is-result-screen .stamp-unlocked-toast {
    margin: 0;
    padding: 3px 12px;
    font-size: 0.72rem;
  }

  /* 見開き2カラム構造 */
  body.is-result-screen .result-spread-body {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: clamp(12px, 1.8vw, 22px);
    align-items: center;
  }

  /* 左翼：タロットカード */
  body.is-result-screen .result-spread-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  body.is-result-screen .tarot-plate-wrap {
    width: min(195px, 100%);
    margin: 0 auto;
    padding: 6px;
    box-shadow: 0 10px 24px rgba(24, 18, 36, 0.14);
  }

  body.is-result-screen .tarot-plate-insignia {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    margin-bottom: 4px;
  }

  body.is-result-screen .nehan-left-replay {
    margin-top: 6px;
    padding: 5px 12px;
    font-size: 0.72rem;
  }

  /* 右翼：解説文パネル ＋ アクションボタン群 */
  body.is-result-screen .result-spread-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 1vh, 10px);
    text-align: left;
  }

  body.is-result-screen .reading-panel {
    margin: 0;
    padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.6vw, 18px);
    font-size: clamp(0.86rem, 1.05vw, 0.94rem);
    line-height: 1.82;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  body.is-result-screen .reading-lead {
    margin-bottom: 6px;
    font-size: inherit;
    line-height: inherit;
  }

  /* 転生先＆ラッキーアイテムの上下フィーチャーカード最適化（高い視認性） */
  body.is-result-screen .result-reincarnation-suite {
    margin-top: 8px;
    padding-top: 8px;
    gap: 7px;
  }

  body.is-result-screen .lucky-item-strip {
    padding: 5px 10px;
    font-size: 0.82rem;
  }

  body.is-result-screen .reincarnation-feature-card {
    padding: 8px 12px;
    gap: 6px;
  }

  body.is-result-screen .rf-role-title {
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  }

  body.is-result-screen .rf-desc-box {
    padding: 6px 10px;
  }

  body.is-result-screen .rf-desc-text {
    font-size: 0.8rem;
    line-height: 1.55;
  }

  /* 互換用 */
  body.is-result-screen .reading-meta,
  body.is-result-screen .reading-meta-grid,
  body.is-result-screen .nehan-reading-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
  }

  /* 獄卒の戒め・涅槃の祝福印のコンパクト化（視認性向上） */
  body.is-result-screen .hell-warden-note,
  body.is-result-screen .nehan-seal-block {
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    gap: 8px;
  }

  /* アクションボタン群 */
  body.is-result-screen .result-actions-wrap {
    margin-top: 4px;
    text-align: left;
  }

  body.is-result-screen .result-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  body.is-result-screen .tarot-btn {
    padding: 6px 16px;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }



  /* 涅槃のPC見開きコンパクト調整（蓮華＆清流） */
  body.is-result-screen .nehan-river-divider {
    max-width: 440px;
    margin: 2px auto 4px;
  }
  body.is-result-screen .nehan-crest-lotus {
    width: 17px;
    height: 17px;
  }
  body.is-result-screen .lotus-seat-blossom {
    width: 38px;
    height: 38px;
  }
  body.is-result-screen .seal-lotus-icon {
    width: 26px;
    height: 26px;
  }
}

/* ============================================================================
   レスポンシブ対応（タブレット・スマートフォン向け最適化）
   ============================================================================ */
@media (max-width: 1080px) {
  .page-wrapper {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 12px 24px;
    gap: 18px;
  }

  /* スマホ・タブレットではメインの占星書を最上段（order: 1）に配置し、すぐ占えるようにする */
  .grimoire-frame {
    grid-column: auto;
    order: 1;
    max-width: 100%;
  }

  .side-column.side-left {
    grid-column: auto;
    justify-self: center;
    order: 2;
    max-width: 680px;
    margin: 0 auto;
  }

  .mystic-widget {
    max-width: 680px;
  }
}

@media (max-width: 899px) {
  .page-wrapper {
    /* モバイル上部固定バー（灯籠・図鑑・音声ON）の完全被り防止クリアランス */
    padding-top: 56px;
  }
}

@media (max-width: 600px) {
  .page-wrapper {
    padding: 52px 8px 20px;
    gap: 14px;
  }

  .grimoire-frame {
    padding: 8px;
    box-shadow:
      0 0 0 3px rgba(16, 12, 28, 0.95),
      0 0 0 5px rgba(235, 208, 149, 0.55),
      0 14px 36px rgba(0, 0, 0, 0.75);
  }

  .grimoire-inner {
    padding: 22px 14px 20px;
  }

  .corner-ornament {
    width: 32px;
    height: 32px;
  }

  .grimoire-crest-top {
    font-size: 0.65rem;
    padding: 1px 10px;
    top: -9px;
  }

  .grimoire-crest-bottom {
    font-size: 0.6rem;
    padding: 1px 8px;
    bottom: -8px;
  }

  .corner-tl {
    top: 3px;
    left: 3px;
  }

  .corner-tr {
    top: 3px;
    right: 3px;
  }

  .corner-bl {
    bottom: 3px;
    left: 3px;
  }

  .corner-br {
    bottom: 3px;
    right: 3px;
  }

  .stained-glass-container {
    max-width: 96%;
    margin-bottom: 8px;
  }

  .stained-glass-arch {
    height: 110px;
    border-radius: 999px 999px 10px 10px;
  }

  .jewel-brooch-row {
    gap: 5px;
    margin-bottom: 8px;
  }

  .jewel-pill {
    font-size: 0.66rem;
    padding: 2px 8px;
  }

  .sub-header {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    gap: 6px;
  }

  .sub-header::before,
  .sub-header::after {
    width: 16px;
  }

  h1.main-title {
    font-size: 1.22rem;
    letter-spacing: 0.08em;
  }

  h1.main-title.home-main-title {
    margin: 4px auto 6px auto;
    padding: 2px 6px;
  }

  .emblem-stage {
    width: 92px;
    height: 92px;
    margin: 2px auto 8px;
  }

  .emblem-stage.is-compact {
    width: 76px;
    height: 76px;
    margin: 0 auto 6px;
  }

  .emblem-stage.is-compact svg {
    width: 68px;
    height: 68px;
  }

  .pc-br {
    display: none;
  }

  .lead-text {
    font-size: 0.9rem;
    line-height: 1.95;
    color: #221712;
    text-align: left;
    padding: 0 2px;
  }

  .caution-notice-card {
    padding: 11px 14px;
    font-size: 0.78rem;
    line-height: 1.75;
    color: #2e2019;
  }

  .lead-oracle-card {
    padding: 14px 16px;
    margin: 0 auto 12px;
  }

  .oracle-prose-lead {
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
  }

  .oracle-seven-constellation {
    margin: 6px auto;
  }

  .oracle-prose-sub {
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
  }

  .ritual-input-box {
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  .tarot-btn {
    width: 100%;
    padding: 13px 14px;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
  }

  .question-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.7;
    margin: 6px 0 16px;
  }

  .choice-card {
    padding: 13px 14px;
    gap: 12px;
    font-size: 0.91rem;
    font-weight: 500;
  }

  .roman-num {
    width: 26px;
    height: 26px;
    font-size: 0.74rem;
  }

  .reading-panel {
    padding: 16px 16px;
    font-size: 0.92rem;
    line-height: 1.95;
  }

  .reading-meta-grid,
  .reading-meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .result-reincarnation-suite {
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .lucky-item-strip {
    padding: 6px 10px;
    font-size: 0.82rem;
  }

  .reincarnation-feature-card {
    padding: 10px 12px;
    gap: 6px;
  }

  .rf-role-title {
    font-size: 0.98rem;
  }

  .rf-desc-box {
    padding: 7px 10px;
  }

  .rf-desc-text {
    font-size: 0.81rem;
    line-height: 1.6;
  }

  .hidden-omen-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .evidence-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 10px;
  }

  .evidence-card img {
    height: 105px;
  }
}

/* ============================================================================
   大解脱・全灯籠コンプリート祝典スタイル（案3：二段階達成システム）
   ============================================================================ */
/* 曼荼羅の覚醒オーラ（七色の神秘光彩と加速回転） */
.bg-rokudo-mural.awakened svg {
  animation: awakenedMuralSpin 120s linear infinite, awakenedMuralGlow 6s ease-in-out infinite alternate !important;
}

@keyframes awakenedMuralSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes awakenedMuralGlow {
  0% {
    filter: drop-shadow(0 0 16px rgba(255, 227, 130, 0.45));
  }

  50% {
    filter: drop-shadow(0 0 28px rgba(124, 224, 255, 0.55)) drop-shadow(0 0 38px rgba(208, 139, 255, 0.4));
  }

  100% {
    filter: drop-shadow(0 0 24px rgba(255, 117, 143, 0.5));
  }
}

/* 七灯籠の一斉共鳴パルス */
@keyframes stampHarmonize {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px currentColor;
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 20px currentColor, 0 0 32px #ffffff;
  }
}

.lantern-stamp.stamp-harmonized {
  animation: stampHarmonize 2.4s ease-in-out infinite !important;
  border-color: #ffe382 !important;
}

/* スタンプカウンターのコンプリート記念バナー（クリックで再鑑賞可能） */
.stamp-complete-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 210px;
  margin: 0 auto;
}

.stamp-complete-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(140, 106, 50, 0.4) 0%, rgba(235, 208, 149, 0.5) 50%, rgba(140, 106, 50, 0.4) 100%);
  border: 1.5px solid var(--gold-bright);
  color: #fff4d0;
  font-family: "Yu Mincho", serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: bold;
  border-radius: 999px; /* 上品なカプセル楕円形ボタン */
  cursor: pointer;
  text-shadow: 0 0 8px rgba(235, 208, 149, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 14px rgba(194, 155, 88, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: bannerPulse 3s ease-in-out infinite;
  box-sizing: border-box;
}

.stamp-complete-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 22px rgba(235, 208, 149, 0.7);
  background: linear-gradient(135deg, rgba(194, 155, 88, 0.55) 0%, rgba(255, 243, 196, 0.65) 50%, rgba(194, 155, 88, 0.55) 100%);
  color: #ffffff;
}

/* 8種コンプ専用バナー（深宇宙と星辰の超越パルス・豪華仕様） */
.stamp-complete-banner.is-eight {
  background: linear-gradient(135deg, rgba(14, 28, 54, 0.92) 0%, rgba(26, 50, 94, 0.85) 45%, rgba(68, 38, 115, 0.85) 75%, rgba(14, 28, 54, 0.92) 100%);
  border: 1.5px solid #38bdf8;
  outline: 1px solid rgba(168, 85, 247, 0.45);
  outline-offset: -3px;
  color: #f0f9ff;
  font-weight: bold;
  letter-spacing: 0.16em;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.85), 0 0 18px rgba(168, 85, 247, 0.55);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(56, 189, 248, 0.42),
    0 0 28px rgba(168, 85, 247, 0.28),
    inset 0 0 10px rgba(56, 189, 248, 0.2);
  border-radius: 999px;
  animation: bannerPulseCosmic 3.2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.stamp-complete-banner.is-eight::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: rotate(25deg);
  animation: cosmicShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cosmicShimmer {
  0% { left: -60%; }
  30%, 100% { left: 140%; }
}

.stamp-complete-banner.is-eight:hover {
  background: linear-gradient(135deg, rgba(20, 42, 80, 0.96) 0%, rgba(36, 72, 134, 0.9) 45%, rgba(92, 48, 150, 0.9) 75%, rgba(20, 42, 80, 0.96) 100%);
  border-color: #7dd3fc;
  outline-color: rgba(192, 132, 252, 0.7);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(56, 189, 248, 0.75),
    0 0 38px rgba(168, 85, 247, 0.45),
    inset 0 0 14px rgba(56, 189, 248, 0.35);
  color: #ffffff;
  transform: translateY(-2px);
}

@keyframes bannerPulseCosmic {
  0%, 100% {
    opacity: 0.95;
    box-shadow:
      0 3px 12px rgba(0, 0, 0, 0.5),
      0 0 14px rgba(56, 189, 248, 0.35),
      0 0 24px rgba(168, 85, 247, 0.22),
      inset 0 0 8px rgba(56, 189, 248, 0.18);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(56, 189, 248, 0.65),
      0 0 34px rgba(168, 85, 247, 0.42),
      inset 0 0 12px rgba(56, 189, 248, 0.3);
  }
}

/* 8種揃っている時の7種祝典サブバナー */
.stamp-complete-banner.is-seven-secondary {
  font-size: 0.74rem;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(110, 80, 35, 0.35) 0%, rgba(200, 170, 110, 0.4) 50%, rgba(110, 80, 35, 0.35) 100%);
  border: 1px dashed var(--gold-bright);
  color: #fff0c2;
  border-radius: 999px;
  animation: none;
}

.stamp-complete-banner.is-seven-secondary:hover {
  background: linear-gradient(135deg, rgba(160, 125, 60, 0.5) 0%, rgba(235, 208, 149, 0.6) 50%, rgba(160, 125, 60, 0.5) 100%);
  border-style: solid;
  color: #ffffff;
}

/* 祝典モーダル内の切り替えボタン */
.grand-switch-btn {
  background: rgba(235, 208, 149, 0.12);
  border: 1px solid var(--gold-bright);
  color: #ffe8a3;
  font-family: "Yu Mincho", serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  padding: 10px 22px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(235, 208, 149, 0.25);
}

.grand-switch-btn:hover {
  background: var(--gold-bright);
  color: #1b142c;
  box-shadow: 0 0 18px rgba(235, 208, 149, 0.7);
  transform: translateY(-1px);
}

/* 大解脱モーダル全画面オーバーレイ */
.enlightenment-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(8, 5, 16, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  overflow-y: auto;
  opacity: 0;
  animation: modalFadeIn 0.8s ease forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.enlightenment-modal-card {
  position: relative;
  max-width: 860px;
  width: 100%;
  max-height: min(92vh, 740px);
  margin: auto;
  background:
    radial-gradient(circle at 50% 12%, rgba(235, 208, 149, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #1b142c 0%, #110c1e 100%);
  border: 2px solid var(--gold-bright);
  outline: 1px solid rgba(235, 208, 149, 0.35);
  outline-offset: 4px;
  border-radius: 8px;
  box-shadow:
    0 0 0 6px rgba(13, 10, 24, 0.9),
    0 0 45px rgba(235, 208, 149, 0.4),
    0 24px 60px rgba(0, 0, 0, 0.85);
  padding: 16px 20px 12px;
  color: var(--parchment-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ==========================================================================
   8灯真コンプ【真・全領域踏破の祝典】専用：深宇宙星雲（ネビュラ）・神聖幾何学オーラ
   ========================================================================== */

.enlightenment-modal-card.is-eight-complete {
  position: relative;
  border: 2px solid #38bdf8;
  outline: 1.5px solid rgba(192, 132, 252, 0.65);
  outline-offset: 4px;
  box-shadow:
    0 0 0 6px rgba(4, 7, 18, 0.96),
    0 0 45px rgba(56, 189, 248, 0.5),
    0 0 75px rgba(255, 112, 166, 0.35),
    0 0 100px rgba(52, 211, 153, 0.25),
    0 24px 60px rgba(0, 0, 0, 0.95);
  background:
    radial-gradient(ellipse at 25% 15%, rgba(56, 189, 248, 0.25) 0%, transparent 55%),
    radial-gradient(circle at 80% 25%, rgba(52, 211, 153, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 213, 79, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 20% 85%, rgba(255, 112, 166, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(192, 132, 252, 0.24) 0%, transparent 55%),
    linear-gradient(180deg, #050814 0%, #030409 50%, #06020c 100%);
  animation: modalNebulaAura 7s ease-in-out infinite alternate;
}

@keyframes modalNebulaAura {
  0% {
    box-shadow:
      0 0 0 6px rgba(4, 7, 18, 0.96),
      0 0 35px rgba(56, 189, 248, 0.45),
      0 0 65px rgba(192, 132, 252, 0.3),
      0 0 85px rgba(255, 112, 166, 0.2),
      0 24px 60px rgba(0, 0, 0, 0.95);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(4, 7, 18, 0.96),
      0 0 55px rgba(56, 189, 248, 0.65),
      0 0 85px rgba(255, 112, 166, 0.45),
      0 0 115px rgba(52, 211, 153, 0.35),
      inset 0 0 30px rgba(56, 189, 248, 0.12),
      0 24px 60px rgba(0, 0, 0, 0.95);
  }
  100% {
    box-shadow:
      0 0 0 6px rgba(4, 7, 18, 0.96),
      0 0 45px rgba(56, 189, 248, 0.5),
      0 0 75px rgba(192, 132, 252, 0.38),
      0 0 95px rgba(255, 213, 79, 0.25),
      0 24px 60px rgba(0, 0, 0, 0.95);
  }
}

/* 背景に静かに旋回する神聖幾何学・大天体銀河曼荼羅（Sacred Cosmic Galaxy Mandala） */
.spiritual-mandala-bg {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
  height: 580px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.5));
}

.spiritual-mandala-bg.is-eight-mandala {
  width: 620px;
  height: 620px;
  opacity: 0.24;
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.65)) drop-shadow(0 0 35px rgba(255, 112, 166, 0.35));
}

.spiritual-mandala-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: mandalaSlowRotate 90s linear infinite;
}

@keyframes mandalaSlowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* カード中央から静かに広がる深宇宙星雲パルスオーラ */
.enlightenment-modal-card.is-eight-complete::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(56, 189, 248, 0.15) 30%, rgba(255, 112, 166, 0.12) 55%, rgba(192, 132, 252, 0.08) 70%, transparent 85%);
  pointer-events: none;
  z-index: 0;
  animation: cosmicNebulaPulse 5.5s ease-in-out infinite alternate;
}

@keyframes cosmicNebulaPulse {
  0% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.12) rotate(45deg); opacity: 1; }
}

@keyframes nehanBreathe {
  0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* ==========================================================================
   大解脱・七道制覇【天上の大解脱祝典】専用：八葉蓮華・八功徳水・翡翠オーラスタイル
   ========================================================================== */

/* 7灯制覇時の涅槃カード（碧水・蓮華薄紅・翡翠・神聖ゴールドの極楽浄土） */
.enlightenment-modal-card.is-seven-complete {
  position: relative;
  border-color: #ffd54f;
  outline-color: rgba(128, 222, 234, 0.55);
  box-shadow:
    0 0 0 6px rgba(14, 25, 26, 0.96),
    0 0 45px rgba(128, 222, 234, 0.35),
    0 0 75px rgba(255, 182, 193, 0.28),
    0 0 95px rgba(167, 243, 208, 0.18),
    0 24px 60px rgba(0, 0, 0, 0.92);
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 213, 79, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 18% 38%, rgba(128, 222, 234, 0.15) 0%, transparent 52%),
    radial-gradient(circle at 82% 58%, rgba(255, 182, 193, 0.16) 0%, transparent 52%),
    radial-gradient(circle at 50% 92%, rgba(102, 187, 106, 0.14) 0%, transparent 58%),
    linear-gradient(180deg, #101c1e 0%, #0c1518 45%, #0d101c 100%);
  animation: modalNehanAura 8s ease-in-out infinite alternate;
}

@keyframes modalNehanAura {
  0% {
    box-shadow:
      0 0 0 6px rgba(14, 25, 26, 0.96),
      0 0 35px rgba(128, 222, 234, 0.3),
      0 0 65px rgba(255, 182, 193, 0.22),
      0 24px 60px rgba(0, 0, 0, 0.92);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(14, 25, 26, 0.96),
      0 0 55px rgba(128, 222, 234, 0.45),
      0 0 85px rgba(255, 182, 193, 0.35),
      0 0 105px rgba(167, 243, 208, 0.25),
      inset 0 0 25px rgba(128, 222, 234, 0.08),
      0 24px 60px rgba(0, 0, 0, 0.92);
  }
  100% {
    box-shadow:
      0 0 0 6px rgba(14, 25, 26, 0.96),
      0 0 42px rgba(128, 222, 234, 0.35),
      0 0 72px rgba(255, 182, 193, 0.26),
      0 24px 60px rgba(0, 0, 0, 0.92);
  }
}

/* 7灯制覇：背景に静かに旋回する八葉蓮華と八功徳水清流曼荼羅 */
.nehan-mandala-bg {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
  height: 580px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  filter: drop-shadow(0 0 16px rgba(128, 222, 234, 0.45));
}

.nehan-mandala-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: mandalaSlowRotate 90s linear infinite;
}

/* 7灯制覇：中央から静かに広がる白蓮華の常楽我浄オーラ */
.enlightenment-modal-card.is-seven-complete::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 227, 130, 0.08) 0%, rgba(128, 222, 234, 0.09) 35%, rgba(255, 182, 193, 0.08) 60%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  animation: nehanBreathe 6.5s ease-in-out infinite alternate;
}

/* 四隅の白蓮・清流コーナーオーナメント */
.enlightenment-corner.is-seven {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 6px rgba(128, 222, 234, 0.5));
}

/* 7灯制覇：八葉蓮華と八功徳水クレスト */
.nehan-celebration-crest {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 3px;
  height: 24px;
  filter: drop-shadow(0 0 6px rgba(255, 182, 193, 0.5));
  animation: nehanCrestBreathe 4s ease-in-out infinite alternate;
}

.nehan-crest-svg {
  width: 120px;
  height: 24px;
  display: block;
}

.sub-wing-nehan {
  color: #80deea;
  text-shadow: 0 0 8px rgba(128, 222, 234, 0.8);
  font-size: 0.85em;
}

/* 7灯制覇タイトル：白・金・清流アクアの澄んだグラデーション */
.enlightenment-title.is-seven-title {
  background: linear-gradient(135deg, #ffffff 0%, #fff9c4 35%, #b2ebf2 70%, #ffd54f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(255, 213, 79, 0.55));
  letter-spacing: 0.16em;
}

/* タイトル下の蓮華・清流ディバイダー */
.nehan-sub-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px auto 8px;
  width: 85%;
  max-width: 200px;
}

.nehan-sub-divider .nehan-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128, 222, 234, 0.5), transparent);
}

.nehan-sub-divider .nehan-sigil {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #ffd54f;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.7), 0 0 14px rgba(128, 222, 234, 0.5);
}

/* 7灯制覇：称号バッジ（白蓮・清流・翡翠光彩） */
.grand-badge.has-nehan-wings {
  position: relative;
  padding: 5px 20px;
  border-color: #ffd54f;
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.22) 0%, rgba(128, 222, 234, 0.24) 50%, rgba(167, 243, 208, 0.18) 100%);
  color: #fffde7;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.75);
  box-shadow: 0 0 16px rgba(128, 222, 234, 0.4), inset 0 0 10px rgba(255, 182, 193, 0.2);
  overflow: hidden;
}

.grand-badge.has-nehan-wings::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -70%;
  width: 45%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(25deg);
  animation: cosmicShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* 7灯制覇タロットカード背面の蓮華光背ヘイロー */
.tarot-nehan-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.tarot-nehan-halo.outer {
  width: 215px;
  height: 215px;
  border: 1px dashed rgba(128, 222, 234, 0.5);
  box-shadow: 0 0 20px rgba(128, 222, 234, 0.25), inset 0 0 16px rgba(167, 243, 208, 0.2);
  animation: haloSpinClockwise 45s linear infinite;
}

.tarot-nehan-halo.inner {
  width: 172px;
  height: 172px;
  border: 1px dotted rgba(255, 182, 193, 0.55);
  box-shadow: 0 0 16px rgba(255, 182, 193, 0.25), 0 0 12px rgba(255, 213, 79, 0.2);
  animation: haloSpinCounter 28s linear infinite;
}

/* 7灯制覇タロットカード本体（碧水翡翠・深紫グラデーション） */
.grand-tarot-card.is-seven-card {
  border-color: #ffd54f;
  outline-color: rgba(128, 222, 234, 0.45);
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 243, 196, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 50% 85%, rgba(128, 222, 234, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #18282b 0%, #151d27 50%, #161224 100%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.75),
    0 0 22px rgba(128, 222, 234, 0.35),
    0 0 35px rgba(255, 182, 193, 0.2);
}

.grand-tarot-card.is-seven-card:hover {
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(128, 222, 234, 0.55),
    0 0 45px rgba(255, 182, 193, 0.35);
}

/* タロットシンボル（SVG） */
.grand-tarot-symbol.nehan-grand-symbol {
  width: 100%;
  height: 100%;
  max-width: 130px;
  max-height: 130px;
  margin: 2px auto;
  filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.45));
}

/* タロットカード足元の蓮華座 */
.grand-card-lotus-seat {
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%) scale(0.68);
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
  z-index: 5;
}

/* 右カラム上部の清流ウェーブ仕切り線 */
.nehan-story-river-divider {
  margin-bottom: 8px;
  text-align: center;
  filter: drop-shadow(0 0 8px rgba(128, 222, 234, 0.4));
}

.nehan-story-river-divider .lotus-river-svg {
  width: 100%;
  max-width: 480px;
  height: 28px;
  display: inline-block;
}

/* ストーリーヘッダーバッジ */
.nehan-story-crest-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  margin-bottom: 8px;
  background: rgba(18, 38, 40, 0.75);
  border: 1px solid rgba(128, 222, 234, 0.5);
  border-radius: 16px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: #b2ebf2;
  box-shadow: 0 0 10px rgba(128, 222, 234, 0.2);
}

.nehan-story-crest-tag .lotus-sparkle {
  font-size: 0.85rem;
}

/* ストーリーボックス：清流翡翠と金の二重ボーダー */
.grand-story-box.is-seven-story {
  border-color: rgba(128, 222, 234, 0.4);
  background: rgba(14, 25, 28, 0.75);
  box-shadow: inset 0 0 14px rgba(128, 222, 234, 0.06);
}

/* エピローグボックス：清冽な蓮華スタイル */
.grand-epilogue-box.nehan-epilogue-style {
  border-color: rgba(255, 182, 193, 0.45);
  background: linear-gradient(135deg, rgba(14, 25, 28, 0.85) 0%, rgba(26, 18, 30, 0.85) 100%);
  box-shadow: 0 0 14px rgba(255, 182, 193, 0.15);
}

.nehan-epilogue-style .grand-epilogue-text {
  color: #fff9e6;
  text-shadow: 0 0 8px rgba(255, 227, 130, 0.35);
}

/* 四隅のスピリチュアル神聖幾何学コーナーオーナメント */
.enlightenment-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 25;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.45));
  transition: opacity 0.3s ease;
}

.enlightenment-corner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.enlightenment-corner-tl { top: 6px; left: 6px; }
.enlightenment-corner-tr { top: 6px; right: 6px; }
.enlightenment-corner-bl { bottom: 6px; left: 6px; }
.enlightenment-corner-br { bottom: 6px; right: 6px; }

/* 右上固定の✕閉じるボタン */
.modal-corner-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 30;
  background: rgba(18, 12, 28, 0.7);
  border: 1px solid var(--gold-bright);
  color: #fff4d0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.modal-corner-close-btn:hover {
  background: var(--gold-bright);
  color: #1a1228;
  transform: scale(1.08);
}

.is-eight-complete .modal-corner-close-btn {
  border-color: #38bdf8;
  color: #bae6fd;
  background: rgba(14, 22, 42, 0.85);
}

.is-eight-complete .modal-corner-close-btn:hover {
  background: #38bdf8;
  color: #040814;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.8);
}

/* モーダル内部のスクロール領域 */
.enlightenment-modal-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 4px 2px;
  margin-bottom: 6px;
}

.enlightenment-modal-scroll-area::-webkit-scrollbar {
  width: 5px;
}

.enlightenment-modal-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(235, 208, 149, 0.35);
  border-radius: 4px;
}

.is-eight-complete .enlightenment-modal-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
}

/* 2カラムボディ：PCでは左右分割、スマホでは縦並び */
.enlightenment-modal-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
  text-align: left;
}

.enlightenment-visual-col {
  text-align: center;
}

/* 涅槃の蓮華と星辰の超越クレスト（スピリチュアル・シンプル装飾） */
.spiritual-nehan-crest {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 3px;
  height: 24px;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
  animation: nehanCrestBreathe 4s ease-in-out infinite alternate;
}

.spiritual-nehan-svg {
  width: 110px;
  height: 24px;
  display: block;
}

@keyframes nehanCrestBreathe {
  0% { opacity: 0.82; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(-1px); }
}

.enlightenment-sub {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--gold-bright);
  margin-bottom: 3px;
}

.is-eight-complete .enlightenment-sub {
  background: linear-gradient(90deg, #38bdf8 0%, #c084fc 50%, #ff70a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.28em;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.8));
}

.enlightenment-title {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  letter-spacing: 0.14em;
  color: #fff9e6;
  margin: 0 0 4px;
  text-shadow: 0 0 14px rgba(235, 208, 149, 0.6);
}

.enlightenment-title.is-eight-title,
.is-eight-complete .enlightenment-title {
  background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 20%, #c084fc 45%, #ff70a6 70%, #34d399 85%, #ffd54f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.75)) drop-shadow(0 0 28px rgba(192, 132, 252, 0.5));
  letter-spacing: 0.18em;
}

/* タイトル下の神聖スピリチュアルディバイダー */
.spiritual-sub-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px auto 8px;
  width: 85%;
  max-width: 190px;
}

.spiritual-sub-divider .sp-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), transparent);
}

.spiritual-sub-divider.is-eight-divider .sp-line {
  background: linear-gradient(90deg, transparent, #38bdf8 25%, #ff70a6 50%, #ffd54f 75%, transparent);
}

.spiritual-sub-divider .sp-sigil {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #ffe382;
  text-shadow: 0 0 8px rgba(255, 227, 130, 0.75), 0 0 14px rgba(56, 189, 248, 0.5);
}

.spiritual-sub-divider.is-eight-divider .sp-sigil {
  background: linear-gradient(90deg, #38bdf8, #ff70a6, #ffd54f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.8));
}

/* 称号バッジ */
.grand-badge {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(194, 155, 88, 0.18);
  border: 1px solid var(--gold-bright);
  border-radius: 30px;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.76rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: #ffe382;
  margin-bottom: 10px;
  box-shadow: 0 0 12px rgba(194, 155, 88, 0.3);
}

.grand-badge.is-eight {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.18);
  color: #bae6fd;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.42), inset 0 0 10px rgba(56, 189, 248, 0.12);
}

/* 8種真コンプ時の神聖アストラルウィング付き称号バッジ（コズミック・ネビュラ光彩） */
.grand-badge.has-sacred-wings {
  position: relative;
  padding: 6px 24px;
  border: 1.5px solid #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(192, 132, 252, 0.3) 35%, rgba(255, 112, 166, 0.3) 70%, rgba(52, 211, 153, 0.25) 100%);
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.9), 0 0 18px rgba(255, 112, 166, 0.6);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.55), 0 0 35px rgba(192, 132, 252, 0.35), inset 0 0 16px rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.grand-badge.has-sacred-wings::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -70%;
  width: 45%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  animation: cosmicShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* 特製大アルカナタロットカード（2カラム左側） */
.grand-tarot-stage {
  perspective: 1000px;
  margin: 6px auto 0;
  width: 175px;
  aspect-ratio: 1 / 1.58;
  position: relative;
}

/* タロットカード背面に三重旋回する星辰光背（コズミック・ヘイロー） */
.tarot-cosmic-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.tarot-cosmic-halo.outer {
  width: 226px;
  height: 226px;
  border: 1.2px dashed rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.35), inset 0 0 20px rgba(255, 112, 166, 0.2);
  animation: haloSpinClockwise 40s linear infinite;
}

.tarot-cosmic-halo.middle {
  width: 194px;
  height: 194px;
  border: 1px dotted rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.25), inset 0 0 16px rgba(192, 132, 252, 0.22);
  animation: haloSpinCounter 26s linear infinite;
}

.tarot-cosmic-halo.inner {
  width: 162px;
  height: 162px;
  border: 1px dashed rgba(255, 213, 79, 0.65);
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.3);
  animation: haloSpinClockwise 18s linear infinite;
}

@keyframes haloSpinClockwise {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes haloSpinCounter {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

.grand-tarot-card {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1.5px solid var(--gold-bright);
  outline: 1px solid rgba(194, 155, 88, 0.4);
  outline-offset: -4px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 243, 196, 0.2) 0%, transparent 65%),
    linear-gradient(180deg, #271a3e 0%, #150f22 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 18px rgba(235, 208, 149, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: tarotCardFloat 6s ease-in-out infinite alternate;
}

.grand-tarot-card:hover {
  transform: translateY(-4px) rotateY(4deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8), 0 0 28px rgba(235, 208, 149, 0.6);
}

@keyframes tarotCardFloat {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(0.6deg); }
  100% { transform: translateY(2px) rotate(-0.6deg); }
}

.grand-tarot-num {
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--gold-bright);
}

.grand-tarot-symbol {
  width: 68px;
  height: 68px;
  margin: auto;
}

/* 神聖メルカバー・超次元星辰コア・無限ループシンボルの脈動 */
.spiritual-sacred-symbol {
  width: 100%;
  height: 100%;
  max-width: 130px;
  max-height: 130px;
  margin: 2px auto;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 22px rgba(255, 112, 166, 0.55));
  animation: symbolBreathePulse 4.5s ease-in-out infinite alternate;
}

@keyframes symbolBreathePulse {
  0% { transform: scale(0.96); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.75)) drop-shadow(0 0 18px rgba(255, 112, 166, 0.45)); }
  100% { transform: scale(1.04); filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 28px rgba(255, 112, 166, 0.75)); }
}

/* 祝奏（真・境界踏破祝奏）再生時の星辰共鳴パルス */
@keyframes sacredGrandChimePulse {
  0% {
    transform: scale(0.96);
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.75)) drop-shadow(0 0 18px rgba(255, 112, 166, 0.45));
  }
  15% {
    transform: scale(1.10);
    filter: drop-shadow(0 0 25px rgba(255, 215, 79, 0.95)) drop-shadow(0 0 45px rgba(56, 189, 248, 0.9)) drop-shadow(0 0 70px rgba(192, 132, 252, 0.8));
  }
  35% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 38px rgba(255, 112, 166, 0.7));
  }
  60% {
    transform: scale(1.07);
    filter: drop-shadow(0 0 30px rgba(255, 215, 79, 1)) drop-shadow(0 0 50px rgba(56, 189, 248, 0.9));
  }
  100% {
    transform: scale(1.0);
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 22px rgba(255, 112, 166, 0.55));
  }
}

.spiritual-sacred-symbol.sacred-chime-active {
  animation: sacredGrandChimePulse 5.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grand-chime-btn.chime-playing {
  box-shadow: 0 0 20px rgba(255, 215, 79, 0.7), 0 0 35px rgba(56, 189, 248, 0.5) !important;
  border-color: #ffd54f !important;
  color: #fff9e6 !important;
  transform: scale(1.04);
}

.grand-tarot-name {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.88rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: #fff9e6;
}

.grand-tarot-latin {
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
}

/* 8種真コンプ時の深宇宙タロットカード装飾（多色星雲ホログラフィック光彩 & 3D浮遊） */
.grand-tarot-card.is-eight-card,
.is-eight-complete .grand-tarot-card {
  border: 1.5px solid #38bdf8;
  outline: 1px solid rgba(255, 112, 166, 0.65);
  outline-offset: -4px;
  background:
    radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.35) 0%, transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(52, 211, 153, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(255, 112, 166, 0.28) 0%, transparent 55%),
    linear-gradient(180deg, #091224 0%, #050813 50%, #0d0519 100%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.9),
    0 0 28px rgba(56, 189, 248, 0.55),
    0 0 45px rgba(255, 112, 166, 0.35),
    0 0 65px rgba(52, 211, 153, 0.2);
  overflow: hidden;
  z-index: 2;
}

.is-eight-complete .grand-tarot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 15%, rgba(56, 189, 248, 0.2) 35%, rgba(255, 213, 79, 0.25) 50%, rgba(255, 112, 166, 0.22) 65%, transparent 85%);
  transform: translateX(-100%);
  animation: tarotHoloSweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tarotHoloSweep {
  0%, 25% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

.is-eight-complete .grand-tarot-card:hover {
  transform: translateY(-5px) rotateY(5deg) scale(1.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.75), 0 0 55px rgba(255, 112, 166, 0.5);
}

.is-eight-complete .grand-tarot-num {
  background: linear-gradient(90deg, #38bdf8, #ffd54f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
}

.is-eight-complete .grand-tarot-name {
  background: linear-gradient(135deg, #ffffff 0%, #bae6fd 50%, #fbcfe8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(186, 230, 253, 0.75));
}

.is-eight-complete .grand-tarot-latin {
  background: linear-gradient(90deg, #38bdf8, #ff70a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
}

/* カード足元の星辰天球座 */
.grand-card-cosmic-seat {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%) scale(0.72);
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8)) drop-shadow(0 0 14px rgba(255, 112, 166, 0.5));
  z-index: 5;
}

/* 右カラム上部のコズミックスターダストライン */
.cosmic-story-wave-divider {
  margin-bottom: 8px;
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6)) drop-shadow(0 0 16px rgba(255, 112, 166, 0.4));
}

.cosmic-story-wave-divider .cosmic-wave-svg {
  width: 100%;
  max-width: 480px;
  height: 28px;
  display: inline-block;
}

/* 涅槃のスピリチュアル・ストーリーヘッダー */
.spiritual-story-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.86rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  background: linear-gradient(90deg, #38bdf8 0%, #c084fc 35%, #ffd54f 65%, #ff70a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.7));
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(56, 189, 248, 0.45);
}

.spiritual-story-header .sp-lotus-mark {
  background: linear-gradient(90deg, #38bdf8, #ff70a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.82rem;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
}

/* 8種真コンプ時のストーリーボックス（深宇宙グラスモフィズム） */
.grand-story-box.is-eight-story,
.is-eight-complete .grand-story-box {
  background: rgba(7, 12, 28, 0.82);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    inset 0 0 20px rgba(56, 189, 248, 0.12),
    inset 0 0 35px rgba(255, 112, 166, 0.08);
}

/* 8種真コンプ時のエピローグボックス（深宇宙クリスタル） */
.grand-epilogue-box.cosmic-epilogue-style {
  border: 1px solid rgba(56, 189, 248, 0.5);
  background: linear-gradient(135deg, rgba(8, 16, 36, 0.9) 0%, rgba(24, 8, 32, 0.9) 100%);
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.35),
    0 0 28px rgba(255, 112, 166, 0.25);
}

.cosmic-epilogue-style .grand-epilogue-text {
  color: #f0f9ff;
  text-shadow: 0 0 10px rgba(186, 230, 253, 0.6), 0 0 16px rgba(255, 112, 166, 0.4);
}

/* 8種真コンプ時の感謝メッセージボックス */
.is-eight-complete .grand-thanks-box {
  border: 1.5px solid rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, rgba(10, 20, 44, 0.92) 0%, rgba(28, 10, 36, 0.92) 100%);
  box-shadow:
    0 0 26px rgba(56, 189, 248, 0.4),
    0 0 40px rgba(192, 132, 252, 0.3),
    inset 0 0 20px rgba(255, 112, 166, 0.1);
}

.is-eight-complete .grand-thanks-title {
  background: linear-gradient(90deg, #38bdf8 0%, #ffd54f 50%, #ff70a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.75));
}

/* 全生録叙事詩テキスト（2カラム右側） */
.grand-story-box {
  background: rgba(12, 8, 20, 0.65);
  border: 1px solid rgba(235, 208, 149, 0.28);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: left;
  line-height: 1.75;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--parchment-mid);
  margin-bottom: 8px;
}

.grand-story-box p {
  margin: 0 0 8px;
}

.grand-story-box p:last-child {
  margin-bottom: 0;
}

.is-eight-complete .grand-story-box {
  background: rgba(10, 16, 32, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 16px rgba(56, 189, 248, 0.08);
}

.grand-story-eight-part {
  border-top: 1px dashed rgba(56, 189, 248, 0.45);
  padding-top: 8px;
  margin-top: 8px;
  color: #bae6fd;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.grand-story-hidden-hint {
  border-top: 1px dashed rgba(230, 57, 70, 0.45);
  padding-top: 6px;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #ff5263;
  text-shadow: 0 0 10px rgba(255, 82, 99, 0.6);
  text-align: center;
}

/* 神の検閲・わざとらしく隠されたぼかしギミック */
.censor-blur {
  display: inline-block;
  filter: blur(5.5px);
  color: #ff5263 !important;
  text-shadow: 0 0 10px rgba(255, 82, 99, 0.7);
  background: rgba(230, 57, 70, 0.14);
  padding: 1px 6px;
  margin: 0 2px;
  border-radius: 3px;
  border-bottom: 1px dashed rgba(255, 82, 99, 0.6);
  cursor: pointer;
  user-select: none;
  transition: filter 0.35s ease, background 0.35s ease, text-shadow 0.35s ease;
  position: relative;
}

.censor-blur:hover {
  filter: blur(3.8px);
  background: rgba(230, 57, 70, 0.24);
  text-shadow: 0 0 14px rgba(255, 82, 99, 0.95);
}

.censor-blur.revealed {
  filter: blur(0) !important;
  background: rgba(230, 57, 70, 0.18) !important;
  border-bottom: 1px solid rgba(255, 82, 99, 0.7) !important;
  text-shadow: 0 0 8px rgba(255, 82, 99, 0.65) !important;
  user-select: text !important;
  animation: censorFlickerReveal 0.35s ease forwards;
}

@keyframes censorFlickerReveal {
  0% {
    filter: blur(5px);
    opacity: 0.6;
  }
  50% {
    filter: blur(1.5px);
    opacity: 0.9;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

.grand-epilogue-box {
  margin-bottom: 8px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(235, 208, 149, 0.2);
  border-radius: 6px;
}

.grand-thanks-box {
  position: relative;
  background: linear-gradient(135deg, rgba(12, 22, 44, 0.82) 0%, rgba(26, 40, 78, 0.72) 100%);
  border: 1.5px solid #38bdf8;
  outline: 1px dashed rgba(255, 227, 130, 0.35);
  outline-offset: -3px;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 0.78rem;
  line-height: 1.68;
  color: #e0f2fe;
  text-align: left;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.22);
}

.grand-kakuyomu-box {
  background: rgba(10, 18, 34, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #e0f2fe;
  text-align: left;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.12);
}

.grand-thanks-title {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 0.84rem;
  color: #7dd3fc;
  letter-spacing: 0.14em;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.75), 0 0 16px rgba(255, 227, 130, 0.4);
  text-align: center;
}

.grand-thanks-text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.68;
  color: #bae6fd;
}

/* 7種制覇時の輪廻外シークレットヒントボックス */
.grand-secret-hint-box {
  background: rgba(24, 16, 32, 0.8);
  border: 1px dashed rgba(235, 208, 149, 0.45);
  border-radius: 6px;
  padding: 9px 12px;
  text-align: left;
  box-shadow: 0 0 14px rgba(194, 155, 88, 0.15);
}

.grand-secret-hint-title {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-weight: bold;
  font-size: 0.79rem;
  color: #ffe382;
  margin-bottom: 5px;
  letter-spacing: 0.08em;
}

.grand-secret-hint-text {
  margin: 0 0 6px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #e8dccb;
}

.grand-secret-hint-text strong {
  color: #ffe382;
  font-weight: bold;
}

.grand-secret-hint-clues {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(10, 6, 16, 0.65);
  border-left: 2px solid #e63946;
  border-radius: 3px;
}

.grand-hint-item {
  font-size: 0.74rem;
  line-height: 1.6;
  color: #f5eedf;
}

.grand-hint-item strong {
  color: #ff5263;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 82, 99, 0.55);
}

.grand-hint-item .hint-key {
  color: #e63946;
  font-weight: bold;
}

/* 最下部固定アクションバー（スクロール不要で常に手元に鎮座） */
.enlightenment-sticky-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 4px 2px;
  border-top: 1px solid rgba(235, 208, 149, 0.25);
  width: 100%;
  z-index: 15;
  background: rgba(17, 12, 28, 0.7);
  box-sizing: border-box;
}

.is-eight-complete .enlightenment-sticky-footer {
  border-top-color: rgba(56, 189, 248, 0.35);
  background: rgba(8, 14, 28, 0.85);
}

/* 全灯制覇（境界の観測者）へ切り替えるボタン（コズミック豪華仕様） */
.grand-switch-btn.switch-to-eight {
  background: linear-gradient(135deg, rgba(14, 28, 54, 0.9) 0%, rgba(30, 56, 105, 0.82) 50%, rgba(68, 38, 115, 0.82) 100%);
  border: 1.5px solid #38bdf8;
  outline: 1px solid rgba(168, 85, 247, 0.45);
  outline-offset: -2px;
  color: #f0f9ff;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 14px rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  transition: all 0.25s ease;
}

.grand-switch-btn.switch-to-eight:hover {
  background: linear-gradient(135deg, rgba(22, 44, 86, 0.95) 0%, rgba(42, 80, 150, 0.9) 50%, rgba(95, 52, 160, 0.9) 100%);
  border-color: #7dd3fc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 22px rgba(56, 189, 248, 0.65), 0 0 30px rgba(168, 85, 247, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

/* 8灯真祝典モーダル内にいるときの七道制覇への戻り切り替えボタン */
.is-eight-complete .grand-switch-btn.switch-to-seven {
  background: rgba(235, 208, 149, 0.12);
  border: 1px solid var(--gold-bright);
  color: #ffe8a3;
  border-radius: 999px;
}

.is-eight-complete .grand-switch-btn.switch-to-seven:hover {
  background: var(--gold-bright);
  color: #1b142c;
  box-shadow: 0 0 14px rgba(235, 208, 149, 0.7);
}

.grand-chime-btn {
  background: rgba(235, 208, 149, 0.1);
  border: 1px solid rgba(235, 208, 149, 0.45);
  color: #ffe8a3;
  font-family: "Yu Mincho", serif;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.25s ease;
}

.grand-chime-btn:hover {
  background: rgba(235, 208, 149, 0.25);
  color: #ffffff;
}

.grand-close-btn {
  background: rgba(235, 208, 149, 0.2);
  border: 1.5px solid var(--gold-bright);
  color: #fff4d0;
  font-family: "Yu Mincho", serif;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  padding: 7px 24px;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(194, 155, 88, 0.35);
}

.grand-close-btn:hover {
  background: var(--gold-bright);
  color: #1b142c;
  box-shadow: 0 0 18px rgba(235, 208, 149, 0.75);
}

/* スマホ対応（縦並び＆極小タロット＆全画面フィット） */
@media (max-width: 767px) {
  .enlightenment-modal-card {
    padding: 14px 12px 10px;
    max-height: 94vh;
  }
  .enlightenment-modal-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
  }
  .enlightenment-visual-col {
    width: 100%;
  }
  .grand-tarot-stage {
    width: 115px;
    margin: 4px auto 6px;
  }
  .grand-tarot-card {
    padding: 8px 6px;
  }
  .grand-tarot-num {
    font-size: 0.8rem;
  }
  .grand-tarot-symbol {
    width: 48px;
    height: 48px;
  }
  .grand-tarot-symbol.nehan-grand-symbol {
    width: 58px;
    height: 58px;
    max-width: 58px;
    max-height: 58px;
  }
  .grand-card-lotus-seat {
    bottom: -9px;
    transform: translateX(-50%) scale(0.52);
  }
  .grand-card-cosmic-seat {
    bottom: -9px;
    transform: translateX(-50%) scale(0.55);
  }
  .nehan-story-river-divider .lotus-river-svg {
    height: 20px;
  }
  .cosmic-story-wave-divider .cosmic-wave-svg {
    height: 20px;
  }
  .spiritual-sacred-symbol {
    max-width: 58px;
    max-height: 58px;
  }
  .grand-tarot-name {
    font-size: 0.78rem;
  }
  .grand-tarot-latin {
    font-size: 0.52rem;
  }
  .grand-story-box {
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.65;
  }
  .enlightenment-sticky-footer {
    padding: 8px 2px 2px;
    gap: 6px;
  }
  .grand-close-btn {
    padding: 6px 18px;
    font-size: 0.76rem;
  }
}

/* 地獄道：少しだけ不気味で静寂な奈落アンビエント */
body.mode-hell {
  background-color: #09050d;
  background-image:
    radial-gradient(circle at 50% 25%, rgba(138, 17, 23, 0.2) 0%, transparent 58%),
    radial-gradient(circle at 80% 80%, rgba(50, 10, 15, 0.25) 0%, transparent 50%),
    linear-gradient(180deg, #07040c 0%, #13081a 50%, #09050d 100%);
}

body.mode-hell .grimoire-frame {
  border-color: #a8464f;
  box-shadow:
    0 0 0 6px rgba(12, 8, 18, 0.95),
    0 0 0 9px rgba(168, 70, 79, 0.45),
    0 26px 70px rgba(0, 0, 0, 0.9),
    0 0 45px rgba(180, 40, 50, 0.2);
}

/* ==========================================================================
   入ってはいけないサーバーにアクセスしてしまった演出（超リアル・内部監査コンソール）
   CCTV切断後、非公開ディレクトリ一覧と機密ファイル強制展開を経て資料一へ突入
   ========================================================================== */
.pre-horror-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #08090d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  pointer-events: all;
  user-select: none;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.22s ease;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.pre-horror-overlay.is-fading-out {
  opacity: 0;
}

/* 端末CRT微小走査線 */
.pre-horror-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.5) 3px,
    rgba(0, 0, 0, 0.5) 4px
  );
  pointer-events: none;
  z-index: 5;
  opacity: 0.75;
}

/* 内部監査端末フレーム */
.server-breach-console {
  position: relative;
  z-index: 10;
  max-width: 680px;
  width: 100%;
  background: rgba(12, 14, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 2.5px solid #c92a2a;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(201, 42, 42, 0.12);
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.console-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14171f;
  padding: 8px 14px;
  font-size: 11px;
  color: #adb5bd;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.console-header-bar .alert-tag {
  color: #ff6b6b;
  font-weight: 700;
}

.console-body {
  padding: 16px 18px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #ced4da;
}

.console-log-line {
  margin-bottom: 4px;
  color: #868e96;
}

.console-log-line.alert {
  color: #ff6b6b;
  font-weight: 700;
}

.console-log-line.warn {
  color: #ffd43b;
}

.console-log-line.info {
  color: #74c0fc;
}

.console-divider {
  color: #343a40;
  margin: 8px 0;
  user-select: none;
}

.console-vfs-header {
  color: #51cf66;
  font-weight: 700;
  margin: 6px 0 4px;
  letter-spacing: 0.02em;
}

.console-vfs-row {
  display: grid;
  grid-template-columns: 85px 85px 55px 1fr;
  gap: 8px;
  color: #868e96;
  font-size: 11px;
  padding: 1px 0;
}

.console-vfs-row.target {
  color: #f8f9fa;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
}

.console-vfs-row.target .vfs-name {
  color: #ffe066;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.console-status-box {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(201, 42, 42, 0.08);
  border: 1px solid rgba(201, 42, 42, 0.35);
  border-left: 3.5px solid #ff4444;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.console-blink-dot {
  width: 8px;
  height: 8px;
  background: #ff4444;
  border-radius: 50%;
  animation: consoleDotPulse 0.8s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes consoleDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 8px #ff4444; }
}

.console-status-msg {
  color: #f1f3f5;
  font-size: 11.5px;
  font-weight: 600;
}

.console-action-tag {
  margin-top: 10px;
  color: #ff8787;
  font-weight: 700;
  letter-spacing: 0.08em;
  animation: actionTagPulse 1.2s infinite steps(2);
}

@keyframes actionTagPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.question-title {
  cursor: default;
  user-select: none;
  transition: color 0.15s ease;
}

.question-title:active {
  transform: none;
}

/* ============================================================================
   「あなたはもう許されない」タップ時：白・赤・黒基調の極限ジャンプスケア・フラッシュ
   ============================================================================ */
html.jumpscare-unforgiven-active,
body.jumpscare-unforgiven-active {
  filter: invert(1) contrast(3.5) brightness(1.25) !important;
  background-color: #000000 !important;
  animation: unforgivenViolentShake 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
  user-select: none !important;
  pointer-events: none !important;
}

@keyframes unforgivenViolentShake {
  0% { transform: translate(0, 0) scale(1.04); }
  6% { transform: translate(-14px, 10px) scale(1.1) rotate(-2deg); }
  14% { transform: translate(14px, -10px) scale(1.07) rotate(1.8deg); }
  22% { transform: translate(-12px, -6px) scale(1.12) rotate(-1.5deg); }
  32% { transform: translate(10px, 8px) scale(1.08) rotate(1.2deg); }
  45% { transform: translate(-6px, 4px) scale(1.06) rotate(-0.8deg); }
  60% { transform: translate(5px, -3px) scale(1.04) rotate(0.6deg); }
  75% { transform: translate(-3px, 2px) scale(1.02) rotate(-0.3deg); }
  90% { transform: translate(1px, -1px) scale(1.01); }
  100% { transform: translate(0, 0) scale(1); }
}

/* 全画面ジャンプスケア・オーバーレイコンテナ */
.unforgiven-jumpscare-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  pointer-events: none;
  display: none;
  overflow: hidden;
  background: #000000;
}

.unforgiven-jumpscare-overlay.active {
  display: block;
}

/* 1. 白 × 赤 × 黒 のストロボ明滅レイヤー（序盤の閃光 ➔ 安定した不気味な闇 ➔ 暗転） */
.unforgiven-strobe-layer {
  position: absolute;
  inset: 0;
  animation: unforgivenTriColorStrobe 1.25s ease forwards;
}

@keyframes unforgivenTriColorStrobe {
  0% {
    background: #ffffff;
    opacity: 1;
  }
  10% {
    background: #000000;
    opacity: 1;
  }
  20% {
    background: #ff002b;
    opacity: 0.95;
  }
  30% {
    background: #ffffff;
    opacity: 0.9;
  }
  /* 40%〜80%（約0.5秒間）：黒を基調に文字と顔がしっかりと鮮明に見えるフェーズ */
  42% {
    background: #0a0002;
    opacity: 0.95;
  }
  78% {
    background: #050001;
    opacity: 1;
  }
  100% {
    background: #000000;
    opacity: 1;
  }
}

/* 2. 聖書的天使（オファニム・セラフィムの多眼輪）顕現レイヤー */
.unforgiven-biblical-angel {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: contrast(2.8) brightness(1.25) drop-shadow(0 0 60px rgba(255, 0, 43, 0.9));
  mix-blend-mode: screen;
  opacity: 0.95;
  animation: unforgivenAngelManifest 1.3s cubic-bezier(0.18, 0.8, 0.22, 1) forwards;
}

@keyframes unforgivenAngelManifest {
  0% {
    transform: scale(1.05) rotate(-1deg);
    opacity: 0;
    filter: contrast(3) brightness(2) blur(6px);
  }
  14% {
    transform: scale(1.26) rotate(1.5deg);
    opacity: 1;
    filter: contrast(2.8) brightness(1.35) blur(0);
  }
  /* 20%〜75%（約0.7秒間）：聖書的天使の無数の瞳がじっと見つめながらゆっくり迫り来る */
  45% {
    transform: scale(1.34) rotate(-1deg);
    opacity: 0.98;
  }
  75% {
    transform: scale(1.44) rotate(0.8deg);
    opacity: 0.92;
  }
  100% {
    transform: scale(1.56) rotate(0deg);
    opacity: 0;
    filter: contrast(3.5) brightness(0.6) blur(10px);
  }
}

/* 3. 鮮烈なクリムゾンレッド（鮮血スプラッター＆放射グロー） */
.unforgiven-crimson-splatter {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 0, 43, 0.85) 0%, rgba(180, 0, 20, 0.72) 45%, rgba(0, 0, 0, 0.95) 100%);
  mix-blend-mode: color-dodge;
  opacity: 0.88;
  animation: unforgivenPulseSplatter 1.3s ease forwards;
}

@keyframes unforgivenPulseSplatter {
  0% { opacity: 0.4; }
  18% { opacity: 0.95; }
  75% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* 4. 上部に浮かぶ洋風・荘厳なラテン語聖句「NON EST REMISSIO（赦しはない）」 */
.unforgiven-sacred-latin {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(1.1rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.55em;
  color: #ffccd5;
  white-space: nowrap;
  pointer-events: none;
  z-index: 12;
  text-shadow:
    0 0 10px #ffffff,
    0 0 25px #ff002b,
    0 0 50px #8b0000;
  animation: unforgivenLatinFloat 1.3s ease forwards;
}

@keyframes unforgivenLatinFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.9);
  }
  18% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.05);
  }
  75% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(1.1);
  }
}

/* 5. 画面中央に撃ち込まれる巨大呪詛テキスト「あなたはもう許されない」 */
.unforgiven-curse-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", "Sawarabi Mincho", "Noto Serif JP", serif;
  font-size: clamp(2.3rem, 7.8vw, 5.0rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 15;
  text-shadow:
    0 0 14px #ffffff,
    0 0 30px #ff002b,
    0 0 60px #ff002b,
    0 0 100px #8b0000,
    3px 3px 0 #000000,
    -3px -3px 0 #000000;
  animation: unforgivenCurseJolt 1.3s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes unforgivenCurseJolt {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    filter: blur(6px);
  }
  15% {
    transform: translate(-51%, -49%) scale(1.18) rotate(-1.5deg);
    opacity: 1;
    filter: blur(0);
    color: #ffffff;
  }
  /* 25%〜75%（約0.65秒間）：文字がはっきりと読め、じわじわと血のように赤く輝く */
  40% {
    transform: translate(-49%, -51%) scale(1.14) rotate(1deg);
    color: #ff3352;
  }
  65% {
    transform: translate(-50%, -50%) scale(1.22) rotate(-0.5deg);
    opacity: 1;
    color: #ffffff;
    text-shadow:
      0 0 16px #ffffff,
      0 0 35px #ff002b,
      0 0 75px #ff0000,
      0 0 120px #ff002b;
  }
  85% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.45);
    opacity: 0;
    filter: blur(10px);
  }
}

/* 6. 下部に浮かぶ洋風・聖なるサブタイトル「O C U L I   D O M I N I（主の目）」 */
.unforgiven-sacred-subtitle {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translate(-50%, 50%);
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(0.9rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.65em;
  color: #ff002b;
  white-space: nowrap;
  pointer-events: none;
  z-index: 12;
  text-shadow:
    0 0 8px #ffffff,
    0 0 20px #ff002b,
    0 0 40px #000000;
  animation: unforgivenSubtitleFloat 1.3s ease forwards;
}

@keyframes unforgivenSubtitleFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 70%) scale(0.9);
  }
  18% {
    opacity: 0.9;
    transform: translate(-50%, 50%) scale(1.05);
  }
  75% {
    opacity: 0.85;
    transform: translate(-50%, 50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 30%) scale(1.1);
  }
}

/* 5. 漆黒の暗黒ビネット */
.unforgiven-vignette-black {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.98) 100%);
  pointer-events: none;
}

/* ============================================================================
   リアルウイルス感染 ＆ システム強制破壊クラッシュ演出
   （マルウェア侵食ログ・CRT走査線・画面水平歪み・Windows BSoDブルースクリーン）
   ============================================================================ */
.virus-infection-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #08080a;
  color: #00ff66;
  overflow: hidden;
  font-family: Consolas, "Lucida Console", "Courier New", monospace;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* CRTモニター走査線＆微細フリッカー */
.virus-infection-screen::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.38) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
  z-index: 20;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
}

/* 上部：緊迫感あるウイルス感染警告ヘッダー */
.virus-alert-header {
  position: relative;
  z-index: 10;
  background: #1c0004;
  border-bottom: 2px solid #ff1a35;
  padding: 10px 18px;
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.virus-alert-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.virus-badge {
  background: #ff1a35;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  animation: virusBadgeBlink 0.4s infinite alternate;
}

@keyframes virusBadgeBlink {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(0.98); }
}

.virus-threat-tag {
  color: #ff8896;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.virus-pid {
  margin-left: auto;
  color: #888899;
  font-size: 0.74rem;
}

.virus-sub-warning {
  font-size: 0.72rem;
  color: #ffa3af;
  letter-spacing: 0.04em;
}

/* 侵食ログ領域 */
.virus-log-container {
  position: relative;
  z-index: 10;
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.8rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.virus-log-line {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: inherit;
  color: #4ade80;
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.35);
}

.virus-log-line.log-warn {
  color: #facc15;
  text-shadow: 0 0 4px rgba(250, 204, 21, 0.4);
}

.virus-log-line.log-danger {
  color: #f87171;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

.virus-log-line.log-fatal {
  color: #ffffff;
  background: #b91c1c;
  padding: 1px 6px;
  display: inline-block;
  font-weight: 700;
  width: fit-content;
}

.virus-log-line.log-hex {
  color: #94a3b8;
  font-size: 0.74rem;
}

/* リアルな画面水平グリッチ・引き裂き */
.virus-glitching {
  animation: screenGlitchTear 0.22s infinite steps(2) !important;
}

@keyframes screenGlitchTear {
  0% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  20% { transform: translate(-5px, 2px); clip-path: inset(15% 0 60% 0); }
  40% { transform: translate(5px, -2px); clip-path: inset(45% 0 35% 0); }
  60% { transform: translate(-3px, 1px); clip-path: inset(70% 0 10% 0); }
  80% { transform: translate(3px, -1px); clip-path: inset(20% 0 50% 0); }
  100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

/* ============================================================================
   Windows リアル・ブルースクリーン（BSoD）画面
   ============================================================================ */
.bsod-screen {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: #0078d7;
  color: #ffffff;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 9vw 10vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.bsod-emoticon {
  font-size: 6rem;
  line-height: 1;
  margin-bottom: 24px;
  font-weight: 300;
}

.bsod-main-message {
  font-size: 1.55rem;
  line-height: 1.45;
  font-weight: 300;
  max-width: 760px;
  margin-bottom: 32px;
}

.bsod-progress {
  font-size: 1.25rem;
  margin-bottom: 38px;
  font-weight: 300;
}

.bsod-bottom-info {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: auto;
}

.bsod-qr-dummy {
  width: 90px;
  height: 90px;
  background: #ffffff;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2px;
}

.bsod-qr-dummy span {
  background: #0078d7;
}

.bsod-stop-codes {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.95;
}

.bsod-stop-codes strong {
  font-weight: 600;
}

/* CRTモニター電源断エフェクト（中央に一本の光線となってプツンと消える） */
.crt-power-off {
  animation: crtTurnOff 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

@keyframes crtTurnOff {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
    opacity: 1;
  }
  50% {
    transform: scale(1, 0.004);
    filter: brightness(4);
    background: #ffffff;
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    filter: brightness(10);
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .bsod-screen {
    padding: 12vw 6vw;
  }
  .bsod-emoticon {
    font-size: 4rem;
    margin-bottom: 16px;
  }
  .bsod-main-message {
    font-size: 1.15rem;
    margin-bottom: 24px;
  }
  .bsod-progress {
    font-size: 1rem;
    margin-bottom: 24px;
  }
  .bsod-qr-dummy {
    width: 65px;
    height: 65px;
  }
  .bsod-stop-codes {
    font-size: 0.72rem;
  }
}

/* ============================================================================
   輪廻の外（第8のスタンプ点灯者限定）：白と赤を基調にした『第三の場所』案内カード＆ボタン
   ============================================================================ */
.eighth-unlocked-promo-card {
  margin: 22px auto 6px;
  max-width: 460px;
  background: 
    radial-gradient(circle at 50% 0%, rgba(255, 240, 243, 0.95) 0%, transparent 60%),
    #ffffff;
  border: 1.5px solid #d90024;
  outline: 1px dashed rgba(217, 0, 36, 0.35);
  outline-offset: -4px;
  border-radius: 8px;
  padding: 16px 20px 18px;
  text-align: center;
  box-shadow: 
    0 6px 20px rgba(217, 0, 36, 0.12),
    0 0 24px rgba(255, 255, 255, 0.95),
    inset 0 0 16px rgba(217, 0, 36, 0.04);
  animation: eighthPromoEnter 0.6s ease-out, eighthCardPulse 4s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}

@keyframes eighthPromoEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes eighthCardPulse {
  0% { box-shadow: 0 4px 16px rgba(217, 0, 36, 0.1), 0 0 16px rgba(255, 255, 255, 0.9); }
  100% { box-shadow: 0 8px 24px rgba(217, 0, 36, 0.22), 0 0 28px rgba(255, 255, 255, 1); }
}

.promo-secret-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #d90024;
  padding: 3px 14px;
  border-radius: 999px;
  color: #c90022;
  font-family: "Cinzel", "Shippori Mincho", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(217, 0, 36, 0.12);
}

.promo-secret-badge .badge-cross {
  font-size: 0.78rem;
  color: #d90024;
}

.promo-secret-desc {
  font-size: 0.83rem;
  line-height: 1.75;
  color: #4a121a;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.promo-secret-desc strong {
  color: #c90022;
  font-weight: 700;
}

.promo-secret-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 白と赤を基調にしたオシャレな宣伝ボタン */
.eighth-secret-read-btn {
  background: #ffffff;
  border: 1.5px solid #d90024;
  outline: 1px solid rgba(217, 0, 36, 0.25);
  outline-offset: -3px;
  border-radius: 6px;
  padding: 10px 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #c90022;
  box-shadow: 0 4px 14px rgba(217, 0, 36, 0.15);
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}

.eighth-secret-read-btn .read-btn-icon {
  font-size: 0.88rem;
  color: #d90024;
  transition: transform 0.28s ease, color 0.28s ease;
}

.eighth-secret-read-btn .read-btn-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1px;
}

.eighth-secret-read-btn .read-btn-title {
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c90022;
  transition: color 0.28s ease;
}

.eighth-secret-read-btn .read-btn-sub {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: #883a45;
  transition: color 0.28s ease;
}

/* ホバー時の洗練された深紅×純白エフェクト */
.eighth-secret-read-btn:hover {
  background: linear-gradient(135deg, #c90022 0%, #a0001a 100%);
  border-color: #ff3b56;
  outline-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 
    0 6px 22px rgba(201, 0, 34, 0.45),
    0 0 16px rgba(255, 59, 86, 0.35);
}

.eighth-secret-read-btn:hover .read-btn-icon {
  color: #ffffff;
  transform: translateX(4px);
}

.eighth-secret-read-btn:hover .read-btn-title {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.eighth-secret-read-btn:hover .read-btn-sub {
  color: #ffe6e8;
}

.eighth-secret-read-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(201, 0, 34, 0.3);
}

/* ============================================================================
   質問画面：ホームに戻るナビゲーションバー＆ボタン
   ============================================================================ */
.question-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  padding: 2px 0;
  position: relative;
  z-index: 10;
}

.question-nav-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.question-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(24, 18, 40, 0.72);
  border: 1px solid rgba(235, 208, 149, 0.45);
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--gold-bright);
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}

.question-home-btn .q-home-ornament {
  font-size: 0.7rem;
  color: var(--gold-metallic);
  transition: transform 0.3s ease;
}

.question-home-btn .q-home-icon {
  font-size: 0.88rem;
  line-height: 1;
}

.question-home-btn:hover {
  background: rgba(45, 32, 70, 0.9);
  border-color: var(--gold-bright);
  color: #fff9ea;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(235, 208, 149, 0.28);
}

.question-home-btn:hover .q-home-ornament {
  transform: rotate(45deg);
}

.question-home-btn:active {
  transform: translateY(1px);
}

.question-prev-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(24, 18, 40, 0.72);
  border: 1px solid rgba(235, 208, 149, 0.45);
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--gold-bright);
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}

.question-prev-btn .q-prev-arrow {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--gold-metallic);
  transition: transform 0.25s ease;
}

.question-prev-btn:hover {
  background: rgba(45, 32, 70, 0.9);
  border-color: var(--gold-bright);
  color: #fff9ea;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(235, 208, 149, 0.28);
}

.question-prev-btn:hover .q-prev-arrow {
  transform: translateX(-2px);
}

.question-prev-btn:active {
  transform: translateY(1px);
}

.question-step-indicator {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: "Cinzel", serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(235, 208, 149, 0.7);
}

.question-step-indicator .step-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.question-step-indicator .step-ratio {
  font-weight: 700;
  color: var(--gold-bright);
}

/* 画面最下部のさりげない「ホームに戻る」リンク */
.question-bottom-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 4px;
}

.question-home-link-btn {
  background: transparent;
  border: none;
  color: rgba(235, 208, 149, 0.6);
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  border-bottom: 1px dotted rgba(235, 208, 149, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.question-home-link-btn:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
  transform: translateY(-1px);
}

.question-home-link-btn:active {
  transform: translateY(0);
}

/* ============================================================================
   管理者確認用・裏アーカイブ秘儀盤（ADMIN ARCANUM // ARCHIVUM OCCULTUM）
   ============================================================================ */

/* フッター連続タップ時の微光フィードバック */
.admin-tap-spark {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  font-size: 14px;
  color: #ffd54f;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.9), 0 0 16px rgba(56, 189, 248, 0.8);
  animation: adminSparkFly 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes adminSparkFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -80%) scale(1.3) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -140%) scale(0.2) rotate(90deg);
  }
}

/* URLパラメータ(?admin=1等)で有効化された際の右下常駐フロートトリガー */
.admin-float-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(14, 18, 36, 0.88);
  border: 1px solid rgba(235, 208, 149, 0.45);
  border-radius: 999px;
  color: #ffe8a3;
  font-family: "Cinzel", "Shippori Mincho", serif;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 12px rgba(235, 208, 149, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.admin-float-trigger:hover {
  background: rgba(26, 32, 60, 0.96);
  border-color: #ffd54f;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 213, 79, 0.5);
}

.admin-float-trigger .admin-trigger-icon {
  font-size: 0.95rem;
  color: #ffd54f;
  animation: adminSpinSlow 12s linear infinite;
}

@keyframes adminSpinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 管理者パネル・全画面オーバーレイ */
.admin-occult-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at center, rgba(10, 14, 28, 0.88) 0%, rgba(3, 5, 12, 0.96) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.admin-occult-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 管理者パネル本体 */
.admin-occult-modal {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(18, 24, 46, 0.96) 0%, rgba(11, 15, 30, 0.98) 100%);
  border: 1.5px solid rgba(235, 208, 149, 0.45);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 35px rgba(235, 208, 149, 0.2), inset 0 0 20px rgba(235, 208, 149, 0.04);
  color: #e2e8f0;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.admin-occult-overlay.is-active .admin-occult-modal {
  transform: scale(1) translateY(0);
}

/* 金細工装飾フレーム */
.admin-modal-filigree {
  position: absolute;
  pointer-events: none;
  color: rgba(235, 208, 149, 0.3);
  font-size: 13px;
  line-height: 1;
  user-select: none;
}
.admin-mf-tl { top: 8px; left: 10px; }
.admin-mf-tr { top: 8px; right: 10px; }
.admin-mf-bl { bottom: 8px; left: 10px; }
.admin-mf-br { bottom: 8px; right: 10px; }

/* パネルヘッダー */
.admin-modal-header {
  padding: 20px 24px 14px 24px;
  border-bottom: 1px solid rgba(235, 208, 149, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: rgba(8, 12, 24, 0.65);
}

.admin-header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-latin-title {
  font-family: "Cinzel", "Shippori Mincho", serif;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: #ffe8a3;
  text-shadow: 0 0 10px rgba(255, 232, 163, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-latin-title .admin-emblem {
  color: #ffd54f;
  font-size: 1rem;
}

.admin-sub-title {
  font-size: 0.76rem;
  color: rgba(235, 208, 149, 0.7);
  letter-spacing: 0.08em;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-esc-badge {
  font-size: 0.68rem;
  color: rgba(235, 208, 149, 0.55);
  border: 1px solid rgba(235, 208, 149, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.admin-close-btn {
  background: transparent;
  border: 1px solid rgba(235, 208, 149, 0.35);
  color: #ffe8a3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-close-btn:hover {
  background: rgba(235, 208, 149, 0.2);
  border-color: #ffd54f;
  color: #ffffff;
  transform: rotate(90deg);
}

/* タブナビゲーション */
.admin-tabs-nav {
  display: flex;
  background: rgba(7, 10, 20, 0.75);
  border-bottom: 1px solid rgba(235, 208, 149, 0.18);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 6px 12px 0 12px;
  gap: 6px;
}
.admin-tabs-nav::-webkit-scrollbar { display: none; }

.admin-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: rgba(226, 232, 240, 0.65);
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.admin-tab-btn:hover {
  color: #ffe8a3;
  background: rgba(235, 208, 149, 0.06);
}

.admin-tab-btn.is-active {
  color: #ffd54f;
  background: rgba(18, 24, 46, 0.95);
  border-color: rgba(235, 208, 149, 0.35);
  border-bottom: 1px solid rgba(18, 24, 46, 0.95);
  margin-bottom: -1px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.5);
}

/* タブコンテンツ領域 */
.admin-tab-content-wrap {
  padding: 22px 24px;
  overflow-y: auto;
  max-height: calc(90vh - 145px);
}

.admin-tab-pane {
  display: none;
  animation: adminFadeIn 0.25s ease;
}

.admin-tab-pane.is-active {
  display: block;
}

@keyframes adminFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* セクション見出し */
.admin-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffe8a3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(235, 208, 149, 0.4);
}

.admin-section-desc {
  font-size: 0.76rem;
  color: rgba(226, 232, 240, 0.7);
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ボタングリッド */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

/* アクションボタン共通 */
.admin-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(235, 208, 149, 0.25);
  background: rgba(14, 20, 38, 0.7);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.admin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  border-color: rgba(235, 208, 149, 0.6);
}

.admin-btn:active {
  transform: translateY(0);
}

.admin-btn-label {
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.admin-btn-sub {
  font-size: 0.7rem;
  opacity: 0.75;
  line-height: 1.35;
}

/* ボタン種別カラーリング */

/* 祝典・七道制覇：翡翠・八葉蓮華ゴールド */
.admin-btn-seven {
  border-color: rgba(255, 227, 130, 0.4);
  background: linear-gradient(135deg, rgba(34, 46, 32, 0.8) 0%, rgba(20, 32, 36, 0.85) 100%);
}
.admin-btn-seven:hover {
  border-color: #ffd54f;
  background: linear-gradient(135deg, rgba(46, 68, 44, 0.9) 0%, rgba(28, 48, 52, 0.9) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 213, 79, 0.4);
}
.admin-btn-seven .admin-btn-label {
  color: #ffe8a3;
  text-shadow: 0 0 6px rgba(255, 213, 79, 0.5);
}

/* 祝典・全灯制覇：超次元コズミック・シアン・マゼンタ */
.admin-btn-eight {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(16, 28, 58, 0.85) 0%, rgba(45, 24, 72, 0.85) 100%);
}
.admin-btn-eight:hover {
  border-color: #7dd3fc;
  background: linear-gradient(135deg, rgba(24, 42, 88, 0.9) 0%, rgba(68, 36, 108, 0.9) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 18px rgba(56, 189, 248, 0.5);
}
.admin-btn-eight .admin-btn-label {
  color: #e0f2fe;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

/* ホラー・裏ルート：深紅・戒律 */
.admin-btn-horror {
  border-color: rgba(185, 28, 28, 0.45);
  background: linear-gradient(135deg, rgba(45, 12, 16, 0.8) 0%, rgba(26, 10, 14, 0.85) 100%);
}
.admin-btn-horror:hover {
  border-color: #f87171;
  background: linear-gradient(135deg, rgba(65, 18, 24, 0.9) 0%, rgba(40, 15, 20, 0.9) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(239, 68, 68, 0.45);
}
.admin-btn-horror .admin-btn-label {
  color: #fca5a5;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

/* 音響・SE系：ラベンダー・アストラル */
.admin-btn-audio {
  border-color: rgba(192, 132, 252, 0.35);
  background: linear-gradient(135deg, rgba(28, 20, 48, 0.75) 0%, rgba(18, 16, 36, 0.8) 100%);
}
.admin-btn-audio:hover {
  border-color: #d8b4fe;
  background: linear-gradient(135deg, rgba(42, 30, 72, 0.85) 0%, rgba(28, 24, 54, 0.85) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(192, 132, 252, 0.4);
}
.admin-btn-audio .admin-btn-label {
  color: #f3e8ff;
}

/* 停止・リセット系：アンバー・警告 */
.admin-btn-warn {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(36, 24, 12, 0.75);
}
.admin-btn-warn:hover {
  border-color: #fbbf24;
  background: rgba(54, 34, 16, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.4);
}
.admin-btn-warn .admin-btn-label {
  color: #fef3c7;
}

/* 全音停止ボタン */
.admin-btn-mute {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(45, 14, 14, 0.8);
}
.admin-btn-mute:hover {
  border-color: #f87171;
  background: rgba(65, 20, 20, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(239, 68, 68, 0.5);
}
.admin-btn-mute .admin-btn-label {
  color: #fca5a5;
}

/* スタンプ個別トグルグリッド */
.admin-stamp-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  background: rgba(8, 12, 22, 0.65);
  border: 1px solid rgba(235, 208, 149, 0.2);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
}

.admin-stamp-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #e2e8f0;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.18s ease;
  user-select: none;
}

.admin-stamp-check-item:hover {
  background: rgba(235, 208, 149, 0.1);
}

.admin-stamp-check-item input[type="checkbox"] {
  accent-color: #ffd54f;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* LocalStorage インスペクター */
.admin-storage-inspector {
  background: rgba(5, 7, 14, 0.85);
  border: 1px solid rgba(235, 208, 149, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: monospace;
  font-size: 0.74rem;
  color: #94a3b8;
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 18px;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .admin-occult-modal {
    max-height: 94vh;
    border-radius: 14px;
  }
  .admin-modal-header {
    padding: 16px 18px 12px 18px;
  }
  .admin-latin-title {
    font-size: 1rem;
  }
  .admin-tab-content-wrap {
    padding: 16px;
    max-height: calc(94vh - 130px);
  }
  .admin-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .admin-stamp-toggles {
    grid-template-columns: 1fr 1fr;
  }
}
/* 選択肢テキスト折返しラッパー＆視認性強化 */
.choice-text-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  word-break: break-word;
}

.choice-text-main {
  font-size: clamp(0.96rem, 2.5vw, 1.02rem);
  font-weight: 550;
  line-height: 1.65;
  color: #110b09;
  letter-spacing: 0.01em;
}


/* ============================================================================
   モバイル用常設スタンプ＆転生図鑑バー（スマホ〜タブレット時のみ左上に固定表示）
   ============================================================================ */
.mobile-floating-bar {
  display: none;
}

@media (max-width: 899px) {
  .mobile-floating-bar {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-stamp-status-btn,
  .mobile-codex-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(18, 12, 32, 0.94);
    border: 1px solid rgba(235, 208, 149, 0.6);
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
    color: var(--gold-bright);
    font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), inset 0 0 10px rgba(194, 155, 88, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .mobile-codex-status-btn {
    border-color: rgba(218, 165, 32, 0.55);
    background: rgba(30, 20, 48, 0.88);
  }

  .mobile-codex-status-btn.all-collected {
    border-color: #f6e27a;
    background: linear-gradient(135deg, rgba(78, 52, 28, 0.95), rgba(45, 30, 60, 0.95));
    box-shadow: 0 0 10px rgba(246, 226, 122, 0.5);
  }

  .mobile-stamp-status-btn:hover,
  .mobile-codex-status-btn:hover {
    background: rgba(45, 32, 70, 0.95);
    border-color: #ffe382;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 227, 130, 0.3);
  }

  .mobile-stamp-icon,
  .mobile-codex-icon {
    font-size: 0.88rem;
  }

  .mobile-stamp-icon {
    filter: drop-shadow(0 0 4px rgba(255, 159, 104, 0.6));
  }

  .mobile-codex-icon {
    filter: drop-shadow(0 0 4px rgba(246, 226, 122, 0.6));
  }

  .mobile-stamp-label,
  .mobile-codex-label {
    font-weight: 700;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .mobile-floating-bar {
    top: 10px;
    left: 10px;
    gap: 6px;
  }

  .mobile-stamp-status-btn,
  .mobile-codex-status-btn {
    padding: 5px 9px 5px 8px;
    font-size: 0.7rem;
    gap: 4px;
  }
}

.lantern-collection-widget.just-focused {
  animation: pulseWidgetFocus 1.2s ease-out;
}

@keyframes pulseWidgetFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8);
    transform: scale(1.02);
  }
  70% {
    box-shadow: 0 0 30px 10px rgba(255, 215, 0, 0.4);
    transform: scale(1.01);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

/* ============================================================================
   常設グローバル音声切り替えボタン（全画面・常時最前面固定表示）
   ============================================================================ */
.global-sound-toggle-btn {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 12, 32, 0.94);
  border: 1px solid rgba(235, 208, 149, 0.6);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  color: var(--gold-bright);
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), inset 0 0 10px rgba(194, 155, 88, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.global-sound-toggle-btn:hover {
  background: rgba(45, 32, 70, 0.95);
  border-color: var(--gold-bright);
  color: #fff9ea;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(235, 208, 149, 0.25);
}

.global-sound-toggle-btn:active {
  transform: translateY(1px);
}

.global-sound-toggle-btn.is-muted {
  background: rgba(18, 14, 28, 0.78);
  border-color: rgba(194, 155, 88, 0.3);
  color: rgba(235, 208, 149, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.global-sound-toggle-btn.is-muted:hover {
  color: var(--gold-bright);
  border-color: rgba(235, 208, 149, 0.6);
}

.global-sound-toggle-btn .sound-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.global-sound-toggle-btn .sound-btn-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.global-sound-toggle-btn .sound-btn-label {
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .global-sound-toggle-btn {
    top: 10px;
    right: 10px;
    padding: 5px 9px 5px 8px;
    font-size: 0.7rem;
    gap: 4px;
  }
}

/* ============================================================================
   スマホ表示（〜600px）における結果画面のスクロール最適化
   タロットカードのサイズを引き締め、ファーストビュー直下で「転生先」が目に入るようにする
   ============================================================================ */
@media (max-width: 600px) {
  .result-view-container {
    padding: 14px 10px 32px;
  }

  .result-top-bar {
    margin-bottom: 12px;
  }

  .main-title {
    font-size: 1.35rem;
    margin-bottom: 6px;
  }

  .result-score-row {
    margin-bottom: 12px;
  }

  .score-banner {
    padding: 6px 12px;
    font-size: 0.82rem;
  }

  .stamp-unlocked-toast {
    font-size: 0.74rem;
    padding: 4px 10px;
    margin-top: 6px;
  }

  /* タロットカードのコンパクト化 */
  .tarot-plate-wrap {
    max-width: 210px;
    margin: 0 auto 14px;
  }

  .reading-lead {
    font-size: 0.84rem;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  /* 転生先カードのパディング調整 */
  .reincarnation-feature-card {
    padding: 12px 14px;
    margin-top: 8px;
  }

  .rf-header .rf-role-title {
    font-size: 1.15rem;
    margin-top: 4px;
  }

  .lucky-item-strip {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  /* 結果ボタングループの縦積み・押しやすさ調整 */
  .result-primary-actions {
    gap: 8px;
  }

  .result-primary-actions .tarot-btn {
    width: 100%;
    padding: 11px 18px;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
  }
}

/* ==========================================================================
   転生大図鑑（REINCARNATION CODEX）モーダル ＆ トリガーボタンスタイル
   ========================================================================== */
.codex-trigger-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(218, 165, 32, 0.3);
  text-align: center;
}

.codex-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(38, 26, 54, 0.95), rgba(24, 16, 36, 0.98));
  border: 1px solid rgba(218, 165, 32, 0.55);
  border-radius: 8px;
  color: #f7e7c4;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(218, 165, 32, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.codex-trigger-btn:hover {
  background: linear-gradient(135deg, rgba(58, 38, 80, 0.98), rgba(35, 22, 52, 0.98));
  border-color: #f6e27a;
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(218, 165, 32, 0.3), inset 0 0 12px rgba(246, 226, 122, 0.2);
}

.codex-open-action-btn {
  background: linear-gradient(135deg, rgba(58, 38, 80, 0.95), rgba(35, 22, 52, 0.98)) !important;
  border-color: rgba(218, 165, 32, 0.6) !important;
  color: #fff4d9 !important;
}

.codex-open-action-btn:hover {
  background: linear-gradient(135deg, rgba(78, 52, 108, 0.98), rgba(48, 30, 72, 0.98)) !important;
  border-color: #f6e27a !important;
  box-shadow: 0 4px 14px rgba(218, 165, 32, 0.3) !important;
}

.codex-icon {
  font-size: 1.05rem;
}

.codex-badge {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(218, 165, 32, 0.2);
  border: 1px solid rgba(218, 165, 32, 0.4);
  color: #ffe382;
  letter-spacing: 0.05em;
}

.codex-badge.all-collected {
  background: linear-gradient(135deg, #d4af37, #f6e27a);
  color: #2b1800;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(246, 226, 122, 0.6);
}

/* モーダルオーバーレイ */
.codex-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(8, 5, 14, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.codex-modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

body.codex-modal-open {
  overflow: hidden !important;
}

/* モーダル本体ダイアログ */
.codex-modal-dialog {
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  background: linear-gradient(145deg, #1f152d, #120a1c 90%);
  border: 1.5px solid rgba(218, 165, 32, 0.6);
  border-radius: 14px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(218, 165, 32, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.codex-modal-overlay.is-visible .codex-modal-dialog {
  transform: scale(1);
}

/* ヘッダー */
.codex-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  background: rgba(26, 16, 38, 0.95);
  border-bottom: 1px solid rgba(218, 165, 32, 0.25);
}

.codex-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.codex-modal-insignia {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #d4af37;
  text-transform: uppercase;
}

.codex-modal-title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  color: #fff4d9;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.codex-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e0d5c1;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.codex-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #f6e27a;
  color: #fff;
  transform: rotate(90deg);
}

/* 進捗プログレスバー */
.codex-progress-banner {
  padding: 14px 24px;
  background: rgba(18, 11, 26, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.codex-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  color: #ecdab9;
  margin-bottom: 8px;
}

.codex-percentage {
  font-weight: 800;
  color: #f6e27a;
  letter-spacing: 0.05em;
}

.codex-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.codex-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #f6e27a, #8ce99a);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(246, 226, 122, 0.5);
}

.codex-tip-text {
  margin-top: 8px;
  font-size: 0.76rem;
  color: #a898b8;
  line-height: 1.4;
}

/* 本文スクロールエリア */
.codex-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* スクロールバー装飾 */
.codex-modal-body::-webkit-scrollbar {
  width: 8px;
}
.codex-modal-body::-webkit-scrollbar-track {
  background: rgba(15, 8, 22, 0.6);
}
.codex-modal-body::-webkit-scrollbar-thumb {
  background: rgba(218, 165, 32, 0.35);
  border-radius: 4px;
}
.codex-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(218, 165, 32, 0.6);
}

/* 界ごとのグループ */
.codex-realm-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.codex-realm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(30, 20, 42, 0.7);
  border-left: 4px solid #d4af37;
  border-radius: 0 6px 6px 0;
}

.codex-realm-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.codex-realm-icon {
  font-size: 1.1rem;
}

.codex-realm-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

.codex-realm-code {
  font-size: 0.72rem;
  color: #c7b593;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.codex-realm-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ecdab9;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 9px;
  border-radius: 12px;
}

/* グリッドカード */
.codex-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.codex-item-card {
  background: rgba(28, 18, 38, 0.85);
  border: 1px solid rgba(218, 165, 32, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
  position: relative;
}

.codex-item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(218, 165, 32, 0.5);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
}

/* 激レアカード */
.codex-item-card.is-rare {
  background: linear-gradient(135deg, rgba(46, 30, 20, 0.95), rgba(32, 20, 14, 0.98));
  border: 1.5px solid #d4af37;
  box-shadow: 0 0 14px rgba(218, 165, 32, 0.3), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.codex-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.codex-item-type {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #c7b593;
}

.codex-item-card.is-rare .codex-item-type {
  background: linear-gradient(135deg, #d4af37, #f6e27a);
  color: #2b1800;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.codex-item-num {
  font-size: 0.7rem;
  color: #8c7b9c;
}

.codex-item-role {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff0d4;
  line-height: 1.35;
}

.codex-item-role.is-rare-role {
  background: linear-gradient(135deg, #ffe5a3, #f6e27a, #e0aa3e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(246, 226, 122, 0.3);
}

.codex-item-artifact {
  display: flex;
  align-items: center;
  font-size: 0.76rem;
  color: #dfceb1;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 2px;
}

.codex-item-artifact .artifact-label {
  color: #a89574;
}

.codex-item-artifact .artifact-name {
  font-weight: 700;
  color: #f7e7c4;
}

.codex-item-desc {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #baaec7;
}

/* 未解禁カード（シルエット） */
.codex-item-card.is-locked {
  background: rgba(20, 13, 28, 0.65);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  opacity: 0.65;
}

.codex-item-card.is-locked .codex-item-role {
  color: #6d5e7d;
  letter-spacing: 0.1em;
}

.codex-item-card.is-locked .codex-item-type {
  color: #6d5e7d;
}

.codex-item-card.is-locked .codex-item-type.is-rare-type {
  color: #b08d55;
  background: rgba(218, 165, 32, 0.12);
  border: 1px dashed rgba(218, 165, 32, 0.35);
}

.codex-item-card.is-locked .artifact-name {
  color: #6d5e7d;
}

.codex-locked-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 6px;
}

.locked-icon {
  font-size: 1.25rem;
  color: #554466;
  opacity: 0.7;
}

/* フッター */
.codex-modal-footer {
  padding: 12px 24px;
  background: rgba(22, 14, 32, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}

.codex-footer-close-btn {
  padding: 8px 24px;
  font-size: 0.88rem;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .codex-modal-overlay {
    padding: 10px;
  }
  .codex-modal-dialog {
    max-height: 94vh;
  }
  .codex-modal-header {
    padding: 14px 16px 12px;
  }
  .codex-progress-banner {
    padding: 10px 16px;
  }
  .codex-modal-body {
    padding: 14px 16px;
    gap: 20px;
  }
  .codex-items-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .codex-item-card {
    padding: 10px 12px;
  }
  .codex-modal-footer {
    padding: 10px 16px;
  }
}





/* ステンドグラス秘匿警告（Webエラーページ風・完全質素・白地に黒文字） */
.stained-hint-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.stained-hint-card {
  max-width: 520px;
  width: 100%;
  background: #ffffff;
  color: #000000;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.stained-hint-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.stained-hint-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: #000000;
  font-family: monospace;
}

.stained-hint-close {
  background: none;
  border: none;
  color: #0000ee;
  text-decoration: underline;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.stained-hint-close:hover {
  color: #551a8b;
}

.stained-hint-title {
  font-size: clamp(0.96rem, 2.2vw, 1.15rem);
  font-weight: 700;
  color: #000000;
  margin: 0 0 12px 0;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.stained-hint-lead {
  font-size: 0.88rem;
  color: #222222;
  margin-bottom: 16px;
  line-height: 1.55;
}

.anomaly-simple-list {
  list-style: disc;
  margin: 0 0 20px 20px;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #000000;
}

.anomaly-simple-list li {
  margin-bottom: 6px;
}

.stained-hint-footer {
  font-size: 0.8rem;
  color: #555555;
  border-top: 1px solid #eeeeee;
  padding-top: 10px;
  margin-top: 10px;
  line-height: 1.65;
  word-break: break-all;
}

/* ステンドグラスの段階的ホラーグリッチアニメーション */
.stained-glass-container.glass-flicker-1 {
  animation: glassCreepFlicker1 0.22s ease-out;
}

@keyframes glassCreepFlicker1 {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(0.975) skewX(0.5deg); filter: brightness(0.6) contrast(1.4); }
  70% { transform: scale(1.01); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

.stained-glass-container.glass-flicker-2 {
  animation: glassCreepFlicker2 0.35s ease-out;
}

@keyframes glassCreepFlicker2 {
  0% { transform: scale(1); filter: none; }
  20% { transform: translate(-3px, 1px) scale(0.96); filter: invert(0.3) saturate(2); }
  40% { transform: translate(3px, -2px) scale(1.02); filter: brightness(0.4) hue-rotate(90deg); }
  60% { transform: translate(-2px, 0) scale(0.98); filter: brightness(1.6); }
  80% { transform: translate(1px, 1px) scale(1.01); filter: contrast(1.8); }
  100% { transform: translate(0, 0) scale(1); filter: none; }
}

.stained-glass-container.glass-flicker-break {
  animation: glassCreepBreak 0.45s ease-out;
}

@keyframes glassCreepBreak {
  0% { transform: scale(1); }
  15% { transform: translate(-5px, 3px) scale(1.05) skewX(-2deg); filter: invert(1) contrast(3); }
  30% { transform: translate(4px, -3px) scale(0.94) skewX(2deg); filter: brightness(0.2); }
  50% { transform: translate(-3px, -2px) scale(1.03); filter: hue-rotate(180deg) brightness(2); }
  75% { transform: translate(2px, 1px) scale(0.98); filter: contrast(2); }
  100% { transform: translate(0, 0) scale(1); filter: none; }
}

/* 画面全体の衝撃微振動 */
body.stained-glitch-body-shake {
  animation: bodyGlitchTremble 0.28s ease;
}

@keyframes bodyGlitchTremble {
  0% { transform: translate(0, 0); filter: none; }
  25% { transform: translate(-2px, 1.5px); filter: contrast(1.3) brightness(0.85); }
  50% { transform: translate(2px, -1.5px); filter: contrast(1.5) hue-rotate(20deg); }
  75% { transform: translate(-1px, 0.5px); filter: brightness(1.2); }
  100% { transform: translate(0, 0); filter: none; }
}

/* ==========================================================================
   お助けアイテム：星辰の天眼鏡（透視レンズ）システム
   ========================================================================== */

/* ホーム画面の天眼鏡案内・切替カード */
.tengan-home-card {
  margin: 14px auto 8px auto;
  max-width: 540px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(28, 14, 38, 0.92) 0%, rgba(18, 10, 26, 0.96) 100%);
  border: 1px solid rgba(192, 132, 252, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(168, 85, 247, 0.12);
  text-align: left;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.tengan-home-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(234, 179, 8, 0.7), rgba(192, 132, 252, 0.9), transparent);
}

.tengan-home-card.is-locked {
  background: linear-gradient(135deg, rgba(22, 16, 26, 0.85) 0%, rgba(14, 10, 18, 0.92) 100%);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.tengan-home-card.is-locked:hover {
  border-color: rgba(192, 132, 252, 0.6);
  background: linear-gradient(135deg, rgba(32, 20, 42, 0.9) 0%, rgba(20, 12, 28, 0.96) 100%);
  transform: translateY(-1px);
}

.tengan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.tengan-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.tengan-lens-gem {
  font-size: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.7));
  animation: tenganGemGlow 3s infinite alternate ease-in-out;
}

.tengan-lens-gem.is-locked {
  filter: grayscale(0.5);
  animation: none;
  font-size: 1.1rem;
}

@keyframes tenganGemGlow {
  0% { filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4)); transform: scale(1); }
  100% { filter: drop-shadow(0 0 9px rgba(234, 179, 8, 0.8)); transform: scale(1.06); }
}

.tengan-title-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tengan-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ebd095;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.tengan-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: #ebd095;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.35);
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  margin-left: 6px;
}

/* 3ステップ解放インジケーター（文字を排し●●○で直感的に進捗を提示） */
.tengan-unlock-steps {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(192, 132, 252, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
}

.unlock-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3f3f46;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.unlock-step-dot.is-filled {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  border-color: #ebd095;
  box-shadow: 0 0 6px #c084fc;
}

.unlock-step-text {
  font-family: "Cinzel", "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e4d4f4;
  margin-left: 3px;
  letter-spacing: 0.05em;
}

.tengan-toggle-btn {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.8), rgba(59, 7, 100, 0.95));
  border: 1px solid #c084fc;
  color: #faf5ff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.tengan-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(126, 34, 206, 0.95), rgba(88, 28, 135, 1));
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.6);
  transform: translateY(-1px);
}

.tengan-toggle-btn:active {
  transform: translateY(1px);
}

.tengan-toggle-btn:not(.is-active) {
  background: rgba(39, 39, 42, 0.8);
  border-color: #52525b;
  color: #d4d4d8;
}

.tengan-lock-notice {
  font-size: 0.74rem;
  color: #fca5a5;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.tengan-card-desc {
  font-size: 0.74rem;
  line-height: 1.55;
  color: #bfa5a9;
  margin: 0;
}

/* 設問画面トップバー内のレイアウト */
.question-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 580px;
  margin: 0 auto 8px auto;
  padding: 0 4px;
}

/* ==========================================================================
   モダン・スライドトグルスイッチ（Toggle Switch UI）
   ========================================================================== */
.tengan-switch-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 12, 30, 0.85);
  border: 1px solid rgba(192, 132, 252, 0.4);
  padding: 3px 6px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tengan-switch-container:hover {
  border-color: #ebd095;
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.45);
}

.tengan-switch-container.tengan-home-switch {
  padding: 3px 5px;
  background: rgba(14, 8, 20, 0.9);
  border-color: rgba(234, 179, 8, 0.35);
}

.tengan-switch-icon {
  font-size: 0.92rem;
  filter: drop-shadow(0 0 4px #c084fc);
  flex-shrink: 0;
  margin-left: 2px;
}

/* スイッチ本体（label） */
.tengan-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

/* ネイティブcheckboxを非表示 */
.tengan-switch .tengan-switch-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0;
}

/* トグルスライダー（トラック） */
.tengan-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3f3f46;
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.24s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.24s ease, box-shadow 0.24s ease;
}

/* トグルつまみ（Thumb） */
.tengan-slider-thumb {
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.24s ease;
}

/* ON状態のトラック */
.tengan-switch-checkbox:checked + .tengan-slider {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border-color: #ebd095;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

/* ON状態のつまみスライド */
.tengan-switch-checkbox:checked + .tengan-slider .tengan-slider-thumb {
  transform: translateX(20px);
  background-color: #fef08a;
  box-shadow: 0 0 6px #facc15;
}

/* スイッチ横のON/OFFステータステキスト */
.tengan-switch-state-text {
  font-size: 0.72rem;
  font-weight: 800;
  color: #a1a1aa;
  letter-spacing: 0.05em;
  min-width: 26px;
  text-align: center;
  transition: color 0.2s ease;
}

.tengan-switch-state-text.is-active {
  color: #facc15;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.5);
}

/* ==========================================================================
   設問画面上部：リアルタイム予測バー（シームレス開閉アニメーション）
   ========================================================================== */
.tengan-live-tracker {
  max-width: 580px;
  margin: 0 auto 12px auto;
  padding: 8px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(24, 12, 34, 0.95) 0%, rgba(15, 8, 22, 0.98) 100%);
  border: 1px solid rgba(192, 132, 252, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 0 8px rgba(168, 85, 247, 0.15);
  text-align: left;
  overflow: hidden;
  transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 天眼鏡OFF時はシームレスに畳まれる */
:root:not(.tengan-lens-enabled) .tengan-live-tracker {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

:root.tengan-lens-enabled .tengan-live-tracker {
  opacity: 1;
  max-height: 120px;
  margin-bottom: 12px;
  transform: translateY(0);
}

.tengan-tracker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tengan-tracker-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tengan-tracker-sigil {
  font-size: 0.95rem;
  filter: drop-shadow(0 0 4px #c084fc);
}

.tengan-tracker-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ebd095;
  letter-spacing: 0.05em;
}

.tengan-score-current {
  font-size: 0.78rem;
  color: #f3e8ff;
  letter-spacing: 0.03em;
}

.tengan-score-current strong {
  font-size: 0.94rem;
  color: #facc15;
}

.tengan-tracker-body {
  font-size: 0.75rem;
  color: #cfbebe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.tengan-range-tag strong {
  color: #f3e8ff;
}

.tengan-target-hint {
  color: #fbcfe8;
  font-weight: 700;
  margin-left: 4px;
}

/* ==========================================================================
   選択肢カード内の天眼鏡点数バッジ（超高視認性ダークピル・ネオンプレート構造）
   ========================================================================== */
.choice-card .choice-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.tengan-choice-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 6px;
  background: #140d1e;
  border: 1.5px solid #a855f7;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  margin-top: 6px;
  user-select: none;
  overflow: hidden;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 天眼鏡OFF時はシームレスにフェードアウト＆高さを畳む */
:root:not(.tengan-lens-enabled) .tengan-choice-badge {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transform: translateY(-4px) scale(0.96);
  pointer-events: none;
}

:root.tengan-lens-enabled .tengan-choice-badge {
  opacity: 1;
  max-height: 48px;
  transform: translateY(0) scale(1);
}

.tengan-badge-sigil {
  font-size: 0.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.tengan-score-num {
  font-family: "Cinzel", "Inter", sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

.tengan-target-realm {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* --- 各得点別の超高コントラスト配色 --- */

/* +10pt：至高の涅槃・天道（ゴールド＆ホワイト） */
.tengan-choice-badge.tengan-pill-10 {
  background: #1c1507;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(245, 158, 11, 0.45);
}
.tengan-choice-badge.tengan-pill-10 .tengan-score-num {
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
.tengan-choice-badge.tengan-pill-10 .tengan-target-realm {
  color: #fffbeb;
}

/* +8pt：清廉な天道・人間道（アメジスト＆パープル） */
.tengan-choice-badge.tengan-pill-8 {
  background: #160e24;
  border-color: #a855f7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(168, 85, 247, 0.45);
}
.tengan-choice-badge.tengan-pill-8 .tengan-score-num {
  color: #c084fc;
  text-shadow: 0 0 6px rgba(192, 132, 252, 0.6);
}
.tengan-choice-badge.tengan-pill-8 .tengan-target-realm {
  color: #fdf4ff;
}

/* +5pt：激動の修羅道・畜生道（フレアオレンジ＆アンバー） */
.tengan-choice-badge.tengan-pill-5 {
  background: #201006;
  border-color: #f97316;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(249, 115, 22, 0.45);
}
.tengan-choice-badge.tengan-pill-5 .tengan-score-num {
  color: #fb923c;
  text-shadow: 0 0 6px rgba(251, 146, 60, 0.6);
}
.tengan-choice-badge.tengan-pill-5 .tengan-target-realm {
  color: #fff7ed;
}

/* +3pt：渇望の餓鬼道・地獄道（鮮烈ブラッドレッド） */
.tengan-choice-badge.tengan-pill-3 {
  background: #20080d;
  border-color: #ef4444;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(239, 68, 68, 0.45);
}
.tengan-choice-badge.tengan-pill-3 .tengan-score-num {
  color: #f87171;
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
}
.tengan-choice-badge.tengan-pill-3 .tengan-target-realm {
  color: #fff1f2;
}

/* 天眼鏡アンロック祝典モーダル */
.tengan-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 4, 14, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tenganModalFadeIn 0.3s ease-out;
}

.tengan-modal-overlay.is-closing {
  opacity: 0;
  transition: opacity 0.28s ease;
}

@keyframes tenganModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tengan-modal-sheet {
  background: linear-gradient(145deg, #1d0f28 0%, #120718 60%, #0a030d 100%);
  border: 2px solid #ebd095;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.75), 0 0 24px rgba(192, 132, 252, 0.35);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  padding: 28px 24px 24px 24px;
  text-align: center;
  position: relative;
  animation: tenganSheetPop 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes tenganSheetPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.tengan-modal-sigil {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.9));
  margin-bottom: 4px;
  animation: tenganGemGlow 2.5s infinite alternate ease-in-out;
}

.tengan-modal-badge {
  font-family: "Cinzel", "Shippori Mincho", serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: #ebd095;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.tengan-modal-title {
  font-family: "Cinzel", "Shippori Mincho", "Yu Mincho", serif;
  font-size: 1.22rem;
  color: #fff;
  margin: 0 0 12px 0;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.tengan-modal-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ebd095, transparent);
  margin: 0 auto 14px auto;
}

.tengan-modal-lead {
  font-size: 0.85rem;
  line-height: 1.65;
  color: #e2d9d9;
  margin-bottom: 16px;
}

.tengan-modal-lead strong {
  color: #facc15;
}

.tengan-modal-features {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.tengan-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #d1c4c8;
}

.tengan-feat-item .feat-icon {
  color: #ebd095;
  font-size: 0.82rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.tengan-feat-item strong {
  color: #fff;
}

.tengan-modal-btn-wrap {
  display: flex;
  justify-content: center;
}

.tengan-modal-btn {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 60%, #581c87 100%);
  border: 1px solid #ebd095;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 24px;
  cursor: pointer;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.45);
  transition: all 0.2s ease;
}

.tengan-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(168, 85, 247, 0.65);
  border-color: #fff;
}

.tengan-modal-btn:active {
  transform: translateY(1px);
}

/* ============================================================================
   大聖堂監視カメラ（CCTV / angel.mp4）リアル流出映像演出
   （大枠のみ・砂嵐ノイズで始まり砂嵐ノイズで終わる）
   ============================================================================ */
.cctv-surveillance-screen {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  background: #000000;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  color: #ffffff;
}

/* ビデオ配置領域（全画面・自然な監視カメラアスペクト） */
.cctv-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  overflow: hidden;
}

/* 動画が読み込まれるまでの背景静止画・フォールバック */
.cctv-fallback-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(110%) brightness(95%);
  z-index: 1;
}

.cctv-video-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(125%) brightness(92%) grayscale(90%) sepia(20%) hue-rotate(60deg);
  pointer-events: none;
  z-index: 2;
  background: transparent;
}

/* レンズ歪み＆暗視ケラレ（四隅のリアルな光学ビネット） */
.cctv-lens-distortion {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.75) 100%);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.85);
}

/* 監視カメラ走査線（高密度インターレーススキャンライン） */
.cctv-scanlines {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.45) 3px,
    rgba(0, 0, 0, 0.45) 4px
  );
  pointer-events: none;
  opacity: 0.9;
}

/* 水平トラッキングノイズ（時折画面を横切る同期ズレ帯） */
.cctv-tracking-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 22;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(1px);
  opacity: 0;
  animation: cctvTrackingBar 4s infinite ease-in-out;
}

@keyframes cctvTrackingBar {
  0%, 85%, 100% { opacity: 0; top: -20px; }
  87% { opacity: 0.7; top: 35%; height: 24px; transform: scaleY(1.5); }
  89% { opacity: 0.85; top: 62%; height: 12px; }
  92% { opacity: 0.3; top: 90%; }
}

/* 本物の高周波グレイン砂嵐ノイズ（SVGフラクタルタービュランス） */
.cctv-static-noise {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.65"/></svg>');
  background-size: 160px 160px;
}

.cctv-static-noise.is-active {
  opacity: 0.98;
  animation: staticFlickerReal 0.05s steps(3) infinite;
}

@keyframes staticFlickerReal {
  0% { transform: translate(0, 0) scale(1); filter: contrast(350%) brightness(1.6); }
  25% { transform: translate(-2px, 3px) scale(1.02); filter: contrast(400%) invert(0.15); }
  50% { transform: translate(3px, -2px) scale(0.98); filter: contrast(300%) brightness(2.1); }
  75% { transform: translate(-3px, -1px) scale(1.01); filter: contrast(500%) invert(0.3); }
  100% { transform: translate(1px, 2px) scale(1); filter: contrast(380%); }
}

/* 監視カメラ終了時：激しい回線途絶シグナル */
.cctv-signal-lost {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  color: #ff3344;
  letter-spacing: 0.15em;
  text-align: center;
}
.cctv-signal-lost h2 {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 8px;
  text-shadow: 0 0 12px #ff2233;
}
.cctv-signal-lost p {
  font-size: 0.9rem;
  color: #bbb;
}

/* ==========================================================================
   超リアル演出：ブラウザハイジャック・ネット漂流（Net Drift）
   404エラーから怪しいまとめサイト、スケアウェア詐欺、ダークウェブを経てCCTVへ
   ========================================================================== */
.browser-hijack-screen {
  position: fixed;
  inset: 0;
  z-index: 999995;
  background: #0b0d11;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

/* ==========================================================================
   DEVICE 1: 現代 PC / Google Chrome ウィンドウ枠
   ========================================================================== */
.bh-chrome-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}
.bh-chrome-bar {
  background: #dfe1e5;
  border-bottom: 1px solid #c5c8cc;
  flex-shrink: 0;
}
.bh-chrome-tabs {
  display: flex;
  align-items: flex-end;
  padding: 8px 10px 0;
  gap: 4px;
  background: #dfe1e5;
}
.bh-chrome-tab {
  background: #ffffff;
  border-radius: 8px 8px 0 0;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: #3c4043;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-weight: 500;
}
.bh-chrome-tab.inactive {
  background: transparent;
  box-shadow: none;
  color: #5f6368;
  max-width: 160px;
}
.bh-chrome-toolbar {
  background: #ffffff;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e0e0e0;
}
.bh-chrome-nav-btn {
  color: #5f6368;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}
.bh-chrome-omnibox {
  flex: 1;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  color: #202124;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid transparent;
}
.bh-chrome-bookmarks {
  background: #ffffff;
  padding: 4px 16px;
  display: flex;
  gap: 16px;
  font-size: 0.7rem;
  color: #5f6368;
  border-bottom: 1px solid #eee;
}
.bh-chrome-bookmarks span {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bh-chrome-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f0f2f5;
  scroll-behavior: smooth;
  position: relative;
}
.bh-load-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #1a73e8;
  z-index: 999;
  animation: bhLoadAnim 0.4s ease forwards;
}
@keyframes bhLoadAnim {
  0% { width: 0%; opacity: 1; }
  60% { width: 80%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* ==========================================================================
   DEVICE 2: 2008年 Windows XP + Internet Explorer 7 (IE7) 完全再現
   ========================================================================== */
.bh-xp-screen {
  width: 100%;
  height: 100%;
  background: #004e98;
  background-image: radial-gradient(circle at 50% 30%, #306cd9 0%, #174bb4 60%, #0d348a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px 28px;
  box-sizing: border-box;
  position: relative;
  font-family: "MS PGothic", "MS UI Gothic", "Meiryo", Tahoma, sans-serif;
}
.bh-xp-window {
  width: 100%;
  max-width: 1140px;
  height: 94vh;
  background: #ece9d8;
  border: 3px solid #0055ea;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 16px 50px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* XP Luna タイトルバー */
.bh-xp-titlebar {
  background: linear-gradient(180deg, #0058ee 0%, #3593ff 4%, #288eff 6%, #126dff 8%, #034fe5 10%, #0045dc 14%, #0045dc 20%, #0048e2 40%, #0053ee 60%, #0057f5 80%, #0047db 90%, #0037c4 100%);
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  flex-shrink: 0;
  user-select: none;
}
.bh-xp-title-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  font-size: 13px;
}
.bh-xp-title-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bh-xp-btn-group {
  display: flex;
  gap: 2px;
  margin-left: 8px;
}
.bh-xp-btn {
  width: 21px;
  height: 21px;
  border-radius: 3px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.bh-xp-btn-min, .bh-xp-btn-max {
  background: linear-gradient(180deg, #3c8df6 0%, #175ec2 100%);
  color: #fff;
}
.bh-xp-btn-close {
  background: linear-gradient(180deg, #f8725f 0%, #d82b1b 100%);
  color: #fff;
  font-size: 13px;
}
/* XP メニューバー */
.bh-xp-menubar {
  background: #ece9d8;
  border-bottom: 1px solid #dcdad1;
  padding: 2px 8px;
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #000;
  flex-shrink: 0;
}
.bh-xp-menubar span {
  cursor: pointer;
}
/* IE7 ツールバー・アドレスバー */
.bh-xp-toolbar {
  background: linear-gradient(180deg, #f2efe4 0%, #e2ded0 100%);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #999;
  flex-shrink: 0;
}
.bh-xp-nav-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7be250 0%, #359816 100%);
  border: 1px solid #23680e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}
.bh-xp-nav-circle.disabled {
  background: #ccc;
  border-color: #aaa;
  color: #888;
  opacity: 0.7;
}
.bh-xp-address-box {
  flex: 1;
  background: #ffffff;
  border: 1px solid #7f9db9;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #000;
  height: 22px;
}
.bh-xp-go-btn {
  background: linear-gradient(180deg, #85e865 0%, #3eb61a 100%);
  border: 1px solid #287a10;
  color: #fff;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 2px;
  cursor: pointer;
}
/* IE7 黄色いActiveX警告情報バー */
.bh-xp-infobar {
  background: #ffffcc;
  border-bottom: 1px solid #e6db55;
  color: #665500;
  font-size: 11px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bh-xp-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fbf9f4;
  scroll-behavior: smooth;
}
/* XP 下部ステータスバー */
.bh-xp-statusbar {
  background: #ece9d8;
  border-top: 1px solid #999;
  padding: 2px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #333;
  flex-shrink: 0;
  height: 20px;
}
/* XP風ポップアップダイアログ（Web拍手など） */
.bh-xp-dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.bh-xp-dialog {
  width: 380px;
  background: #ece9d8;
  border: 2px solid #0055ea;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  font-family: "MS PGothic", sans-serif;
  overflow: hidden;
}
.bh-xp-dialog-header {
  background: linear-gradient(180deg, #0058ee, #0037c4);
  color: #fff;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bh-xp-dialog-body {
  padding: 16px 20px;
  font-size: 12px;
  line-height: 1.6;
  color: #000;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.bh-xp-dialog-icon {
  font-size: 28px;
}
.bh-xp-dialog-footer {
  padding: 8px 16px 12px;
  text-align: center;
}
.bh-xp-dialog-btn {
  background: #ece9d8;
  border: 1px solid #003c74;
  outline: 1px solid #7a96df;
  padding: 3px 24px;
  font-size: 12px;
  cursor: pointer;
}

/* ==========================================================================
   DEVICE 3: 深夜のスマートフォン (iPhone 15 / Safari) 実機フレーム
   ========================================================================== */
.bh-phone-screen {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1b212c 0%, #060709 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  user-select: none;
}
/* iPhone 実機ボディ */
.bh-iphone-frame {
  width: 390px;
  height: 780px;
  max-height: 94vh;
  background: #000000;
  border-radius: 50px;
  box-shadow: 0 25px 90px rgba(0,0,0,0.95), 0 0 0 4px #2c2d30, 0 0 0 7px #121316;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Dynamic Island */
.bh-iphone-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 29px;
  background: #000000;
  border-radius: 20px;
  z-index: 200;
}
/* iOS ステータスバー */
.bh-iphone-statusbar {
  height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 26px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  z-index: 150;
  background: #b92b27;
}
.bh-iphone-time {
  letter-spacing: -0.02em;
}
.bh-iphone-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
/* Safari アドレスバー */
.bh-iphone-safari-top {
  background: #b92b27;
  padding: 6px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.bh-iphone-url-pill {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 11.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  letter-spacing: -0.01em;
}
/* スマホ画面内部のスクロールビュー */
.bh-iphone-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f8f5ee;
  position: relative;
  scroll-behavior: smooth;
}
/* Safari 下部ナビゲーションツールバー */
.bh-iphone-safari-bottom {
  height: 48px;
  background: rgba(248, 245, 238, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  color: #b92b27;
  padding-bottom: 6px;
  z-index: 100;
}
.bh-iphone-safari-btn {
  cursor: pointer;
  opacity: 0.85;
}
/* スマホ操作用の指紋タッチカーソル */
.bh-phone-touch-point {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 300;
  transform: translate(-50%, -50%) scale(1);
  transition: top 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s ease;
  display: none;
}
.bh-phone-touch-point.tapping {
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(255, 100, 100, 0.9);
}

/* ==========================================================================
   超リアル・モキュメンタリー（ネット漂流）スタイル群
   各サイトごとの本物の質感・色合い・人間味・細部装飾を徹底追求
   ========================================================================== */

/* 1. 大手ニュースポータル風（JAPAN NEWS ONLINE） */
.bh-news-page-wrap {
  background: #f0f2f5;
  min-height: 100%;
  color: #222;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.75;
}
.bh-news-breaking-bar {
  background: #111;
  color: #ddd;
  font-size: 0.7rem;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #333;
}
.bh-news-breaking-badge {
  background: #d90429;
  color: #fff;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.65rem;
}
.bh-news-weather-info {
  margin-left: auto;
  color: #aaa;
}
.bh-news-nav-bar {
  background: #004b91;
  color: #ffffff;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  border-bottom: 2px solid #00366b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.bh-news-nav-brand {
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.bh-news-nav-links {
  display: flex;
  gap: 16px;
}
.bh-news-nav-links span {
  cursor: pointer;
  opacity: 0.88;
}
.bh-news-nav-links span.active {
  font-weight: bold;
  opacity: 1;
  border-bottom: 2px solid #ffffff;
}
.bh-news-search-box {
  background: #ffffff;
  color: #777;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bh-news-container {
  background: #ffffff;
  padding: 24px 32px;
  max-width: 920px;
  margin: 14px auto 30px;
  border: 1px solid #e1e5ea;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.bh-news-breadcrumb {
  font-size: 0.74rem;
  color: #666;
  margin-bottom: 12px;
}
.bh-news-headline {
  font-size: 1.48rem;
  font-weight: 800;
  line-height: 1.45;
  color: #111;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.bh-news-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: #666;
  margin-bottom: 12px;
  border-bottom: 1px solid #edf0f2;
  padding-bottom: 8px;
}
.bh-news-sns-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.7rem;
}
.bh-news-sns-btn {
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}
.bh-news-sns-x { background: #000; }
.bh-news-sns-fb { background: #1877f2; }
.bh-news-sns-line { background: #06c755; }
.bh-news-sns-hatena { background: #00a4de; }

.bh-news-content-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 26px;
}
@media (max-width: 740px) {
  .bh-news-content-grid {
    grid-template-columns: 1fr;
  }
}
.bh-news-body-text {
  font-size: 0.94rem;
  color: #2b2b2b;
  line-height: 1.88;
}
.bh-news-body-text p {
  margin-bottom: 14px;
}
.bh-news-reporter-sig {
  text-align: right;
  font-size: 0.78rem;
  color: #666;
  font-style: italic;
  margin: 10px 0 16px;
}
.bh-news-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 20px;
}
.bh-news-tag {
  background: #f0f4f8;
  color: #004b91;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 12px;
  text-decoration: none;
}
.bh-news-image-frame {
  background: #f8fafc;
  border: 1px solid #dcdfe3;
  padding: 10px;
  margin: 16px 0;
  font-size: 0.74rem;
  color: #555;
  border-radius: 2px;
}
.bh-news-img-box {
  width: 100%;
  height: 140px;
  background: #181d22;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0aec0;
  font-size: 0.78rem;
  margin-bottom: 6px;
  border: 1px solid #333;
}
.bh-news-related {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px 14px;
  margin-top: 18px;
}
.bh-news-related-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #004b91;
  margin-bottom: 6px;
}
.bh-news-related-link {
  font-size: 0.84rem;
  color: #1a0dab;
  text-decoration: underline;
  display: block;
  margin-bottom: 4px;
  cursor: pointer;
}

/* ヤフコメ風コメント欄 */
.bh-news-comments-section {
  margin-top: 28px;
  border-top: 2px solid #004b91;
  padding-top: 16px;
}
.bh-news-comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.bh-news-comments-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111;
}
.bh-news-comments-sort {
  font-size: 0.72rem;
  color: #666;
}
.bh-news-comment-card {
  background: #fafbfc;
  border: 1px solid #e5e8ec;
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.bh-news-comment-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 6px;
}
.bh-news-comment-user strong {
  color: #222;
}
.bh-news-comment-body {
  font-size: 0.86rem;
  color: #333;
  line-height: 1.65;
  margin-bottom: 8px;
}
.bh-news-comment-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  color: #777;
}
.bh-news-vote-btn {
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ニュースサイドバー */
.bh-news-sidebar-box {
  background: #fbfcfd;
  border: 1px solid #e1e4e8;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 16px;
}
.bh-news-rank-title {
  font-weight: bold;
  color: #222;
  border-bottom: 2px solid #004b91;
  padding-bottom: 4px;
  margin-bottom: 10px;
  font-size: 0.82rem;
}
.bh-news-rank-item {
  margin-bottom: 8px;
  line-height: 1.45;
  color: #333;
}
.bh-news-rank-item strong {
  color: #004b91;
  margin-right: 4px;
}
.bh-news-ad-banner {
  background: #ffffff;
  border: 1px solid #d1d5db;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 0.72rem;
  color: #475569;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.bh-news-ad-tag {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.62rem;
  color: #94a3b8;
  border: 1px solid #cbd5e1;
  padding: 0 4px;
  border-radius: 2px;
}
.bh-news-ad-title {
  font-weight: bold;
  color: #0f172a;
  font-size: 0.78rem;
  margin-bottom: 3px;
}
.bh-news-ad-desc {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.35;
}

/* 2. 15年前で更新が止まった個人の日記ブログ風（2008年 Web1.0〜2.0初期 FC2 / JUGEM風） */
.bh-blog-page-wrap {
  background: #e9e5dc;
  min-height: 100%;
  padding: 16px 12px 30px;
  font-family: "MS PGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #333333;
  line-height: 1.85;
}
.bh-blog-archive-notice {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #795548;
  padding: 8px 14px;
  font-size: 0.76rem;
  margin: 0 auto 14px;
  max-width: 880px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bh-blog-container {
  background: #ffffff;
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid #d0c8ba;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.bh-blog-header-banner {
  background: #3e332a;
  color: #f7f2ea;
  padding: 22px 28px;
  border-bottom: 3px solid #8c7258;
}
.bh-blog-title {
  font-size: 1.45rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.bh-blog-desc {
  font-size: 0.76rem;
  color: #cfc2b2;
}
.bh-blog-layout-2col {
  display: grid;
  grid-template-columns: 215px 1fr;
  border-top: 1px solid #dfd8cb;
}
@media (max-width: 700px) {
  .bh-blog-layout-2col {
    display: flex;
    flex-direction: column;
  }
  .bh-blog-main {
    order: 1;
  }
  .bh-blog-sidebar {
    order: 2;
    border-right: none;
    border-top: 1px solid #dfd8cb;
  }
}
.bh-blog-sidebar {
  background: #f7f4ed;
  border-right: 1px solid #dfd8cb;
  padding: 16px 12px;
  font-size: 0.75rem;
  color: #555;
}
.bh-blog-side-widget {
  background: #ffffff;
  border: 1px solid #dfd8cb;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.bh-blog-side-widget h4 {
  font-size: 0.78rem;
  color: #4a3e35;
  border-bottom: 1px dotted #baa68c;
  padding-bottom: 4px;
  margin-bottom: 8px;
  font-weight: bold;
}
.bh-blog-counter {
  font-family: monospace;
  font-size: 0.95rem;
  letter-spacing: 2px;
  background: #111;
  color: #00ff66;
  padding: 3px 8px;
  display: inline-block;
  font-weight: bold;
  border-radius: 2px;
}
.bh-blog-profile-box {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.bh-blog-avatar-frame {
  width: 48px;
  height: 48px;
  background: #d8d0c2;
  border: 1px solid #baa68c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #666;
  flex-shrink: 0;
}
.bh-blog-widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.55;
}
.bh-blog-widget-list li {
  margin-bottom: 4px;
  border-bottom: 1px dotted #eee;
  padding-bottom: 2px;
}
.bh-blog-widget-list a {
  color: #4a3e35;
  text-decoration: none;
}
.bh-blog-widget-list a:hover {
  text-decoration: underline;
}

/* 2008年12月のカレンダーテーブル */
.bh-blog-cal-table {
  width: 100%;
  font-size: 0.68rem;
  text-align: center;
  border-collapse: collapse;
}
.bh-blog-cal-table th, .bh-blog-cal-table td {
  padding: 2px 1px;
}
.bh-blog-cal-table th { color: #888; }
.bh-blog-cal-table .sun { color: #cc0000; }
.bh-blog-cal-table .sat { color: #0055cc; }
.bh-blog-cal-table .active-day {
  background: #8c7258;
  color: #ffffff;
  font-weight: bold;
  border-radius: 2px;
}
.bh-blog-rank-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.bh-blog-rank-badge {
  background: #eee;
  border: 1px solid #ccc;
  padding: 3px 6px;
  font-size: 0.65rem;
  text-align: center;
  color: #666;
}

.bh-blog-main {
  background: #ffffff;
  padding: 24px 28px;
}
.bh-blog-breadcrumb {
  font-size: 0.72rem;
  color: #8c7258;
  margin-bottom: 10px;
}
.bh-blog-entry-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #2c2017;
  border-left: 5px solid #8c7258;
  padding-left: 10px;
  margin-bottom: 6px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.bh-blog-entry-date {
  font-size: 0.74rem;
  color: #8c7258;
  margin-bottom: 18px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 6px;
}
.bh-blog-body {
  font-size: 0.88rem;
  line-height: 2.1;
  color: #222;
}
.bh-blog-photo-frame {
  background: #faf8f5;
  border: 1px solid #d4c8b6;
  padding: 8px;
  margin: 16px 0;
  display: inline-block;
  max-width: 100%;
}
.bh-blog-photo-inner {
  width: 280px;
  height: 170px;
  background: #1b1612;
  border: 1px solid #554433;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cfc2b2;
  font-size: 0.74rem;
  position: relative;
}
.bh-blog-photo-stamp {
  position: absolute;
  bottom: 6px;
  right: 8px;
  color: #ff9900;
  font-family: monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
}
.bh-blog-photo-cap {
  font-size: 0.72rem;
  color: #665544;
  margin-top: 4px;
}
.bh-blog-stream-box {
  background: #fbf9f5;
  border: 1px dashed #b5a48f;
  padding: 12px 14px;
  margin: 18px 0;
  font-family: monospace;
  font-size: 0.8rem;
  color: #4a3828;
  line-height: 1.6;
}
.bh-blog-comments-wrap {
  margin-top: 26px;
  border-top: 1px dotted #baa68c;
  padding-top: 14px;
}
.bh-blog-comment-item {
  background: #faf8f4;
  border-bottom: 1px dotted #ddd;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.78rem;
}
.bh-blog-comment-author {
  font-weight: bold;
  color: #5d4a37;
}
.bh-blog-comment-time {
  font-size: 0.7rem;
  color: #888;
  margin-left: 6px;
}

/* 3. 5ちゃんねる風オカルト検証スレまとめブログ */
.bh-matome-page-wrap {
  background: #f8f5ee;
  min-height: 100%;
  color: #222;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.7;
}
.bh-matome-header {
  background: #b92b27;
  color: #ffffff;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 3px solid #8e1c18;
}
.bh-matome-sitename {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.bh-matome-tagline {
  font-size: 0.7rem;
  color: #ffcccc;
}
.bh-matome-rss-bar {
  background: #fff;
  padding: 6px 14px;
  font-size: 0.72rem;
  color: #444;
  border-bottom: 1px solid #e2dac9;
  display: flex;
  gap: 12px;
  overflow: hidden;
  white-space: nowrap;
}
.bh-matome-top-ad {
  background: #fff9e6;
  border: 1px dashed #e6c280;
  padding: 8px 14px;
  max-width: 900px;
  margin: 10px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}
.bh-matome-container {
  max-width: 900px;
  margin: 12px auto 30px;
  background: #ffffff;
  border: 1px solid #e5dcce;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.bh-matome-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #111;
  line-height: 1.45;
  margin-bottom: 6px;
  background: #ffebeb;
  padding: 10px 14px;
  border-left: 6px solid #b92b27;
}
.bh-matome-date {
  font-size: 0.72rem;
  color: #777;
  margin-bottom: 18px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 6px;
}
.bh-matome-res-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
}
.bh-res-item {
  background: #ffffff;
  border: 1px solid #eedec8;
  padding: 10px 14px;
  border-radius: 4px;
}
.bh-res-meta {
  font-size: 0.75rem;
  color: #008000;
  font-weight: bold;
  margin-bottom: 4px;
}
.bh-res-id {
  color: #777;
  font-weight: normal;
}
.bh-res-quote {
  color: #008000;
  font-size: 0.82rem;
  margin-bottom: 2px;
}
.bh-res-body {
  color: #222;
}
.bh-matome-highlight-yellow {
  background: #fff176;
  color: #000;
  font-weight: bold;
  padding: 0 2px;
}
.bh-res-body.danger {
  color: #d90429;
  font-weight: bold;
}
.bh-matome-danger-big {
  color: #d90429;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.5;
  background: #ffe5e5;
  padding: 6px 10px;
  border-left: 4px solid #d90429;
  display: block;
  margin-top: 4px;
}
.bh-matome-video-link {
  display: inline-block;
  background: #1a1a1a;
  color: #ffdd77;
  padding: 10px 18px;
  border: 1px solid #ffaa00;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.88rem;
  margin-top: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
}
.bh-matome-video-link.highlight {
  background: #d90429;
  color: #ffffff;
  border-color: #ff3344;
  transform: scale(1.03);
}

/* iPhone画面内用の最適化 */
.bh-iphone-viewport .bh-matome-container {
  margin: 4px 0 24px;
  padding: 12px 12px;
  border-left: none;
  border-right: none;
  box-shadow: none;
}
.bh-iphone-viewport .bh-matome-title {
  font-size: 1.02rem;
  padding: 8px 10px;
  line-height: 1.4;
}
.bh-iphone-viewport .bh-matome-top-ad {
  margin: 6px 8px 0;
  padding: 6px 10px;
  font-size: 0.68rem;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.bh-iphone-viewport .bh-res-item {
  padding: 8px 10px;
  font-size: 0.8rem;
}
.bh-iphone-viewport .bh-matome-danger-big {
  font-size: 0.95rem;
}
.bh-iphone-viewport .bh-matome-video-link {
  font-size: 0.8rem;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* モキュメンタリー演出内：押せるタブおよび次のサイトアクションバー */
.bh-chrome-tab.bh-next-tab-link {
  background: #e8f0fe !important;
  border: 1.5px solid #1a73e8 !important;
  color: #1a73e8 !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: bhPulseTab 2.2s infinite ease-in-out;
  position: relative;
}
.bh-chrome-tab.bh-next-tab-link:hover {
  background: #d2e3fc !important;
  border-color: #0b57d0 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.4), 0 6px 14px rgba(26, 115, 232, 0.3) !important;
}
.bh-chrome-tab.bh-next-tab-link:hover .bh-tab-arrow-hint {
  transform: translate(3px, -3px);
  color: #0b57d0;
}
@keyframes bhPulseTab {
  0%, 100% { border-color: #1a73e8; box-shadow: 0 0 0 rgba(26,115,232,0); }
  50% { border-color: #0b57d0; box-shadow: 0 0 10px rgba(26,115,232,0.55); }
}

.bh-tab-arrow-hint {
  font-size: 11px;
  color: #1a73e8;
  font-weight: 900;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* 「ここが次に押す場所」と一目でわかる共通ガイドチップ */
.bh-next-guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  transition: all 0.22s ease;
  background: #e8f0fe;
  color: #1a73e8;
  border: 1px solid #bfdbfe;
}
.bh-guide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #1a73e8;
  display: inline-block;
  animation: bhGuideDotPulse 1.2s infinite ease-in-out;
}
.bh-guide-dot.red {
  background-color: #ef4444;
}
@keyframes bhGuideDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.45; }
}

/* XPスタイル：IE7タイトルバーの次へタブボタン */
.bh-xp-next-tab-btn {
  background: #ffffff;
  border: 1px solid #0055ea;
  color: #003399;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* 現代ニュースサイト風：自然で目立つ「関連記事」カード */
.bh-news-related-section {
  margin: 28px 0 20px;
  padding: 18px;
  background: #fbfcfd;
  border: 1.5px solid #dbeafe;
  border-radius: 10px;
}
.bh-news-related-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.bh-news-related-badge {
  background: #004b91;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.bh-news-related-sub {
  font-size: 0.74rem;
  color: #64748b;
  font-weight: 500;
}
.bh-news-related-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  outline: none;
}
.bh-news-related-card:hover {
  border-color: #1a73e8;
  background: #f0f7ff;
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.28), 0 10px 24px rgba(0, 75, 145, 0.18);
}
.bh-news-related-card:hover .bh-next-guide-chip {
  background: #1a73e8;
  color: #ffffff;
  border-color: #1a73e8;
  box-shadow: 0 0 12px rgba(26, 115, 232, 0.5);
}
.bh-news-related-card:hover .bh-guide-dot {
  background-color: #ffffff;
}
.bh-news-related-thumb {
  width: 76px;
  height: 76px;
  background: #eef4fb;
  border: 1px solid #d0e0f0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 2px;
  transition: transform 0.2s ease;
}
.bh-news-related-card:hover .bh-news-related-thumb {
  transform: scale(1.05);
}
.bh-news-related-thumb-label {
  font-size: 0.58rem;
  font-weight: 800;
  color: #004b91;
  letter-spacing: 0.5px;
}
.bh-news-related-thumb-icon {
  font-size: 1.6rem;
}
.bh-news-related-body {
  flex: 1;
  min-width: 0;
}
.bh-news-related-tag-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: #64748b;
  margin-bottom: 4px;
}
.bh-news-related-source {
  font-weight: 600;
  color: #004b91;
}
.bh-news-related-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1a0dab;
  line-height: 1.45;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}
.bh-news-related-card:hover .bh-news-related-title {
  color: #0b57d0;
  text-decoration: underline;
}
.bh-news-related-snippet {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bh-news-related-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.bh-news-related-read-btn {
  background: #004b91;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.22s ease;
  box-shadow: 0 2px 6px rgba(0, 75, 145, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bh-news-related-card:hover .bh-news-related-read-btn {
  background: #1a73e8;
  box-shadow: 0 0 14px rgba(26, 115, 232, 0.6);
  transform: translateX(4px);
}
.bh-news-related-list {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dotted #cbd5e1;
  font-size: 0.78rem;
  color: #475569;
}
.bh-news-related-subitem {
  margin-bottom: 6px;
  line-height: 1.4;
}
.bh-bullet {
  color: #004b91;
  margin-right: 4px;
}

/* 2008年ブログ風：リアルなトラックバック / 外部言及セクション */
.bh-blog-trackback-section {
  margin-top: 24px;
  background: #faf7f2;
  border: 1px solid #d4c8b6;
  padding: 16px;
  border-radius: 4px;
}
.bh-blog-trackback-header {
  font-size: 0.82rem;
  font-weight: bold;
  color: #4a3e35;
  border-bottom: 1px dotted #baa68c;
  padding-bottom: 6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bh-blog-trackback-card {
  display: block;
  background: #ffffff;
  border: 1.5px solid #c8beaf;
  border-left: 5px solid #0055cc;
  padding: 14px 16px;
  text-decoration: none;
  color: #333333;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  cursor: pointer;
  position: relative;
}
.bh-blog-trackback-card:hover {
  background: #edf5ff;
  border-color: #0055cc;
  border-left: 7px solid #0055cc;
  box-shadow: 0 0 0 3px rgba(0, 85, 204, 0.25), 0 8px 20px rgba(0, 85, 204, 0.2);
  transform: translateX(4px) translateY(-2px);
}
.bh-next-guide-chip.bh-xp-guide {
  background: #e6f0fa;
  color: #0044bb;
  border: 1px solid #99c2ff;
}
.bh-blog-trackback-card:hover .bh-next-guide-chip.bh-xp-guide {
  background: #0055cc;
  color: #ffffff;
  border-color: #0055cc;
  box-shadow: 0 0 10px rgba(0, 85, 204, 0.5);
}
.bh-blog-trackback-card:hover .bh-next-guide-chip.bh-xp-guide .bh-guide-dot {
  background-color: #ffffff;
}
.bh-blog-tb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #776655;
  margin-bottom: 5px;
}
.bh-blog-tb-source {
  font-weight: bold;
  color: #0055cc;
}
.bh-blog-tb-time {
  color: #888888;
}
.bh-blog-tb-title-link {
  font-size: 0.94rem;
  font-weight: bold;
  color: #0000cc;
  line-height: 1.45;
  margin-bottom: 6px;
  text-decoration: underline;
  transition: color 0.2s ease;
}
.bh-blog-trackback-card:hover .bh-blog-tb-title-link {
  color: #b91c1c;
}
.bh-blog-tb-summary {
  font-size: 0.78rem;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 8px;
}
.bh-blog-tb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  padding-top: 8px;
  border-top: 1px dotted #e0d8cc;
}
.bh-blog-tb-jump {
  background: #0055cc;
  color: #ffffff;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 3px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 85, 204, 0.3);
}
.bh-blog-trackback-card:hover .bh-blog-tb-jump {
  background: #003399;
  box-shadow: 0 0 10px rgba(0, 51, 153, 0.5);
  transform: translateX(3px);
}
.bh-blog-tb-url {
  color: #888888;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
.bh-blog-tb-ping-info {
  margin-top: 10px;
  font-size: 0.68rem;
  color: #887766;
}

/* XP/IE7 リンクバー風 */
.bh-xp-linksbar {
  background: #ece9d8;
  border-bottom: 1px solid #dcdcdc;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: #333;
  font-family: "MS PGothic", Tahoma, sans-serif;
}
.bh-xp-links-label {
  color: #666;
  font-weight: bold;
}
.bh-xp-link-item {
  color: #003399;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bh-xp-link-item:hover {
  background: #ffffff;
  text-decoration: underline;
}
.bh-xp-link-item.active {
  background: #e3efff;
  border: 1px solid #7eaadb;
  color: #003399;
  font-weight: bold;
  animation: bhPulseTab 2.4s infinite ease-in-out;
}
.bh-xp-link-item.active:hover {
  background: #cfe2ff;
  border-color: #0055cc;
  box-shadow: 0 0 6px rgba(0, 85, 204, 0.3);
  transform: translateY(-1px);
}

/* 5chまとめサイト風：リアルで目立つ動画直リンク / 魚拓プレビューカード */
.bh-matome-video-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 6px;
  padding: 14px 16px;
  background: #14171f;
  border: 2px solid #2e384d;
  border-radius: 10px;
  text-decoration: none;
  color: #f1f5f9;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  position: relative;
}
.bh-matome-video-card:hover {
  border-color: #ef4444;
  background: #1f181c;
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45), 0 10px 28px rgba(220, 38, 38, 0.5);
}
.bh-next-guide-chip.bh-phone-guide {
  background: rgba(220, 38, 38, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.45);
  font-size: 0.64rem;
  padding: 2px 8px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.bh-matome-video-card:hover .bh-next-guide-chip.bh-phone-guide {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.7);
}
.bh-matome-video-preview {
  width: 78px;
  height: 78px;
  background: #000000;
  border: 1.5px solid #475569;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.bh-matome-video-card:hover .bh-matome-video-preview {
  border-color: #ef4444;
}
.bh-matome-video-overlay-icon {
  font-size: 1.7rem;
  color: #ffffff;
  opacity: 0.92;
  text-shadow: 0 0 8px rgba(229, 62, 62, 0.8);
  transition: transform 0.22s ease, color 0.22s ease;
}
.bh-matome-video-card:hover .bh-matome-video-overlay-icon {
  transform: scale(1.22);
  color: #ff3366;
  text-shadow: 0 0 16px rgba(255, 51, 102, 0.95);
}
.bh-matome-live-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(220, 38, 38, 0.9);
  color: #ffffff;
  font-size: 0.52rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  animation: bhLivePulse 1.6s infinite ease-in-out;
}
@keyframes bhLivePulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.4; }
}
.bh-matome-rec-time {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-family: monospace;
  font-size: 0.58rem;
  color: #00ff66;
  letter-spacing: 0.5px;
}
.bh-matome-video-info {
  flex: 1;
  min-width: 0;
}
.bh-matome-video-url {
  font-family: monospace;
  font-size: 0.72rem;
  color: #60a5fa;
  text-decoration: underline;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bh-matome-video-caption {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 4px;
  transition: color 0.2s ease;
}
.bh-matome-video-card:hover .bh-matome-video-caption {
  color: #fca5a5;
}
.bh-matome-video-subtext {
  font-size: 0.68rem;
  color: #f87171;
  line-height: 1.3;
}
.bh-matome-video-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.bh-matome-video-cta span {
  background: #dc2626;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  transition: all 0.22s ease;
}
.bh-matome-video-card:hover .bh-matome-video-cta span {
  background: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.8);
  transform: translateX(3px);
}

/* モキュメンタリー専用：黒塗り・機密抹消（SCP/公文書風）スタイル */
.bh-censored {
  display: inline-block;
  background-color: #111111;
  color: #111111;
  user-select: none;
  padding: 0 4px;
  margin: 0 1px;
  border-radius: 2px;
  line-height: 1.1;
  font-family: monospace;
  letter-spacing: -1px;
  vertical-align: baseline;
}
.bh-censored.light {
  background-color: #222222;
  color: #222222;
}

/* モキュメンタリー専用：自然な文字化け（赤色や過剰演出を排し、デコード崩れを再現） */
.bh-corrupt-text {
  font-family: inherit;
  color: inherit;
  letter-spacing: normal;
  font-size: 1em;
  background: transparent;
  padding: 0;
  border-radius: 0;
  animation: none;
  user-select: text;
}

/* モキュメンタリー画面警告バッジ（別サイト誤認防止） */
.bh-anomaly-alert-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff0f0;
  border: 1px solid #ffc9c9;
  color: #c92a2a;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

/* 聖堂シーン：古い断片・第四章を画面内に完璧に美しく収めるスタイル */
.sanctum-scripture-container {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 10px 10px;
  box-sizing: border-box;
  max-height: none;
  overflow: visible;
}
.sanctum-verse-para {
  margin-bottom: clamp(10px, 1.6vh, 16px);
  font-size: clamp(0.92rem, 1.8vw, 1.08rem);
  font-weight: 500;
  color: #f7f4ee;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.98), 0 0 16px rgba(217, 4, 41, 0.25);
  letter-spacing: 0.05em;
  line-height: 1.85;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  opacity: 0;
  transform: translateY(6px);
  animation: sanctumTextFadeIn 0.8s ease forwards;
}
.sanctum-verse-para:last-child {
  margin-bottom: 4px;
}
.sanctum-verse-para:nth-child(1) { animation-delay: 0.2s; }
.sanctum-verse-para:nth-child(2) { animation-delay: 0.8s; }
.sanctum-verse-para:nth-child(3) { animation-delay: 1.4s; }

@keyframes sanctumTextFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sanctum-continue-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffe6c7;
  text-shadow: 0 0 10px rgba(255, 200, 120, 0.65), 0 2px 4px rgba(0, 0, 0, 0.95);
  background: rgba(18, 12, 12, 0.72);
  border: 1.5px solid rgba(230, 185, 120, 0.55);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85), 0 0 14px rgba(200, 140, 60, 0.25);
  border-radius: 9999px;
  padding: 8px 22px;
  margin: 16px auto 4px;
  letter-spacing: 0.12em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: sanctumPulseHint 2.2s infinite ease-in-out;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}
.sanctum-continue-hint:hover {
  background: rgba(48, 22, 18, 0.92);
  border-color: #ffd899;
  color: #ffffff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 22px rgba(255, 185, 80, 0.6), 0 0 0 3px rgba(255, 215, 158, 0.35);
}
@keyframes sanctumPulseHint {
  0%, 100% {
    opacity: 0.8;
    border-color: rgba(230, 185, 120, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 10px rgba(200, 140, 60, 0.2);
  }
  50% {
    opacity: 1;
    border-color: rgba(255, 215, 158, 0.95);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.9), 0 0 20px rgba(230, 170, 80, 0.55);
  }
}

.bh-fake-cursor {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 999;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="0,0 0,19 5,14 11,22 14,20 8,12 15,12" fill="white" stroke="black" stroke-width="1.5"/></svg>');
}

/* ==========================================================================
   ユーザー親切機能：七灯籠コレクション ポップアップ・トースト通知・安心UI
   ========================================================================== */

/* 1. 七灯籠ウィジェット内の親切表示 */
.collection-counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}

.collection-sub-tip {
  font-size: 0.72rem;
  color: #c9ab6e;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.lantern-confirm-reset-btn {
  background: transparent;
  border: 1px solid rgba(194, 155, 88, 0.4);
  border-radius: 12px;
  color: #ebd095;
  font-size: 0.68rem;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.lantern-confirm-reset-btn:hover {
  background: rgba(194, 155, 88, 0.15);
  border-color: #ebd095;
  color: #ffffff;
}

/* 2. 灯籠ポップアップモーダル */
.celestial-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(10, 8, 18, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: celestialModalFadeIn 0.22s ease-out;
}

@keyframes celestialModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.celestial-modal-content {
  position: relative;
  background: radial-gradient(circle at 50% 0%, #221a36 0%, #120e20 70%, #0a0814 100%);
  border: 1.5px solid #ebd095;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 24px rgba(235, 208, 149, 0.25);
  width: 100%;
  max-width: 500px;
  color: #f7eedc;
  overflow: hidden;
  animation: celestialModalPop 0.26s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes celestialModalPop {
  from { transform: scale(0.92) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.celestial-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 1px solid rgba(235, 208, 149, 0.35);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: #ebd095;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}
.celestial-modal-close:hover {
  background: rgba(235, 208, 149, 0.2);
  color: #ffffff;
  transform: rotate(90deg);
}

.lantern-modal-box {
  padding: 24px 26px 20px;
}

.lantern-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(235, 208, 149, 0.2);
}

.lantern-modal-orb {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid currentColor;
  box-shadow: 0 0 16px currentColor;
  flex-shrink: 0;
}

.lantern-modal-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lantern-modal-tag {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lantern-modal-title {
  margin: 0;
  font-family: 'Shippori Mincho', 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.lantern-modal-body {
  margin-bottom: 20px;
}

.lantern-modal-desc-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(194, 155, 88, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.lm-desc-label {
  font-size: 0.72rem;
  color: #c9ab6e;
  font-weight: bold;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.lantern-modal-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #ece3d3;
}

.lantern-modal-hint-box {
  background: rgba(194, 155, 88, 0.08);
  border: 1px dashed rgba(235, 208, 149, 0.45);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #ebd095;
}

.lantern-modal-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lantern-modal-dontshow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #bfa888;
  cursor: pointer;
  user-select: none;
}
.lantern-modal-dontshow input[type="checkbox"] {
  accent-color: #ebd095;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.lantern-modal-dontshow:hover {
  color: #ebd095;
}

.lantern-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-celestial-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(235, 208, 149, 0.4);
  color: #ebd095;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-celestial-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: #ebd095;
}

.btn-celestial-primary {
  background: linear-gradient(135deg, #7c3540 0%, #4a1f26 100%);
  border: 1.5px solid #ebd095;
  color: #ffffff;
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 53, 64, 0.4), 0 0 10px rgba(235, 208, 149, 0.3);
  transition: all 0.22s ease;
  letter-spacing: 0.04em;
}
.btn-celestial-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 53, 64, 0.6), 0 0 16px rgba(235, 208, 149, 0.5);
  background: linear-gradient(135deg, #913c4b 0%, #5b2630 100%);
}

/* 3. 画面上部トースト通知 */
.celestial-toast-wrap {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  pointer-events: none;
  animation: toastDrop 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes toastDrop {
  from { transform: translate(-50%, -24px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.celestial-toast-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(22, 16, 36, 0.94);
  border: 1.5px solid #ebd095;
  border-radius: 24px;
  padding: 9px 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 16px rgba(235, 208, 149, 0.35);
  color: #fff6e5;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.celestial-toast-icon {
  color: #ffe382;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .celestial-toast-wrap {
    top: 14px;
    width: 90%;
  }
  .celestial-toast-card {
    justify-content: center;
    font-size: 0.82rem;
    padding: 8px 14px;
  }
}

.tengan-info-btn {
  background: rgba(208, 139, 255, 0.15);
  border: 1px solid rgba(208, 139, 255, 0.4);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  color: #e0b0ff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  transition: all 0.2s ease;
}
.tengan-info-btn:hover {
  background: rgba(208, 139, 255, 0.35);
  border-color: #ebd095;
  color: #ffffff;
  transform: scale(1.15);
}

/* ============================================================================
   低解像度・ノートPC（画面高さ 750px 未満、MacBook Air / 1280x647 等）
   ファーストビュー（スクロール不要でSTARTボタンが中央に収まる黄金比配置）
   ============================================================================ */
@media (max-height: 750px) {
  .page-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 16px;
  }
  .side-column {
    transform: scale(0.92);
    transform-origin: top center;
  }
  .grimoire-inner {
    padding: 10px 18px 12px;
  }
  .stained-glass-container {
    max-width: 320px;
    margin: 0 auto 6px;
  }
  .stained-glass-arch {
    height: 82px;
  }
  h1.main-title.home-main-title {
    margin: 2px auto 4px auto;
  }
  .home-main-title .main-title-text {
    font-size: 1.45rem;
  }
  .home-main-title .main-title-sub {
    font-size: 0.8rem;
    margin-top: 1px;
  }
  .divider-decor {
    margin: 2px auto;
  }
  .emblem-stage.is-compact {
    width: 52px;
    height: 52px;
    margin: 0 auto 4px;
  }
  .emblem-stage.is-compact svg {
    width: 52px;
    height: 52px;
  }
  .lead-oracle-card {
    padding: 10px 12px;
    margin: 0 auto 6px;
  }
  .oracle-prose-lead {
    font-size: 0.86rem;
    line-height: 1.4;
    margin: 0;
  }
  .oracle-seven-constellation {
    margin: 4px auto;
    gap: 5px;
  }
  .constellation-gem {
    width: 10px;
    height: 10px;
  }
  .oracle-prose-sub {
    font-size: 0.74rem;
    line-height: 1.4;
    margin: 0;
  }
  .ritual-input-box {
    padding: 5px 10px 6px;
    margin: 0 auto 6px;
    max-width: 340px;
  }
  .ritual-input-header {
    margin-bottom: 3px;
  }
  .ritual-input-header label {
    font-size: 0.75rem;
  }
  .ritual-input-box input {
    padding: 5px 10px;
    font-size: 13px;
  }
  .ritual-start-btn-wrap {
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .tarot-btn.home-cta-btn {
    padding: 8px 26px;
    font-size: 0.88rem;
  }
  .tarot-btn-main {
    font-size: 0.95rem;
  }
  .tarot-btn-sub {
    font-size: 0.65rem;
  }
  .caution-pills-row {
    margin-top: 4px;
    gap: 4px;
  }
  .caution-pill {
    padding: 2px 7px;
    font-size: 0.64rem;
  }
}

/* ============================================================================
   ✦ 究極のマルチデバイス・レスポンシブ ＆ iPhone最適化 ✦
   PC、iPad/タブレット、iPhone（iPhone 17 / 16 / 15 / SE等）全画面完全対応
   ============================================================================ */

/* 全体のタッチ最適化（ダブルタップズーム遅延防止・タップ反応性向上） */
button, 
a, 
.choice-card, 
.tarot-btn, 
.bh-chrome-tab, 
.bh-xp-btn, 
.bh-matome-video-link, 
.escape-void-link, 
.lantern-stamp,
.mobile-stamp-status-btn,
.mobile-codex-status-btn,
.global-sound-toggle-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(235, 208, 149, 0.25);
  cursor: pointer;
}

/* タップ時の小気味よいフィードバック */
.choice-card:active,
.tarot-btn:active,
.bh-chrome-tab.bh-next-tab-link:active,
.bh-matome-video-link:active,
.mobile-stamp-status-btn:active,
.mobile-codex-status-btn:active,
.global-sound-toggle-btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease !important;
}

/* 1. PC大画面（1024px以上）：神聖な左右均等バランスと中央配置 */
@media (min-width: 1024px) {
  .page-wrapper {
    display: grid !important;
    grid-template-columns: 240px minmax(auto, 680px) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 28px !important;
    max-width: 1040px !important;
    margin: 20px auto 36px !important;
    padding: 0 20px !important;
  }

  /* 結果画面でのPC 3カラム崩れ（右側空白）の完全修正 */
  body.is-result-screen .page-wrapper {
    grid-template-columns: 220px minmax(0, 960px) !important;
    max-width: 1260px !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 24px !important;
    padding: 20px 24px 40px !important;
  }

  .mobile-floating-bar {
    display: none !important;
  }

  .global-sound-toggle-btn {
    position: fixed !important;
    top: 18px !important;
    right: 24px !important;
    z-index: 100000 !important;
  }
}

/* 2. タブレット（769px 〜 1023px）：ゆったりと自然な縦並び */
@media (min-width: 769px) and (max-width: 1023px) {
  .page-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 24px 20px 40px !important;
    gap: 24px !important;
  }

  .grimoire-frame {
    order: 1 !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }

  .side-column.side-left {
    order: 2 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }

  .mystic-widget {
    max-width: 720px !important;
  }

  .mobile-floating-bar {
    display: none !important;
  }

  .global-sound-toggle-btn {
    top: 16px !important;
    right: 20px !important;
  }
}

/* 3. スマートフォン（768px以下）：専用アプリのようなグラスモーフィズム・ヘッダー＆極上レイアウト */
@media (max-width: 768px) {
  /* スマホ専用グラスモーフィズム固定ヘッダーバー */
  .mobile-floating-bar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 52px !important;
    background: rgba(13, 9, 23, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(194, 155, 88, 0.35) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
    padding: 0 12px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 99999 !important;
  }

  /* 音声ONボタンをヘッダーバーの右端に美しくドッキング */
  .global-sound-toggle-btn {
    position: fixed !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 100000 !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    height: 36px !important;
    background: rgba(28, 18, 48, 0.95) !important;
    border: 1px solid rgba(235, 208, 149, 0.65) !important;
  }

  .mobile-stamp-status-btn,
  .mobile-codex-status-btn {
    height: 36px !important;
    padding: 6px 12px !important;
    font-size: 0.74rem !important;
    background: rgba(30, 20, 52, 0.95) !important;
    border: 1px solid rgba(235, 208, 149, 0.5) !important;
    border-radius: 999px !important;
    color: var(--gold-bright) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ヘッダーバーの高さ分の安全余白（絶対にコンテンツと被らない） */
  .page-wrapper {
    grid-template-columns: 1fr !important;
    padding: 64px 10px 28px !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  body.is-result-screen .page-wrapper {
    grid-template-columns: 1fr !important;
    padding: 64px 8px 36px !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
    gap: 16px !important;
    max-width: 100% !important;
  }

  /* メイン魔導書フレームのスマホ最適化 */
  .grimoire-frame {
    order: 1 !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
  }

  .grimoire-inner {
    padding: 20px 12px 18px !important;
    box-sizing: border-box !important;
  }

  /* 四隅の装飾金具が文字に被らないよう縮小 */
  .corner-ornament {
    width: 26px !important;
    height: 26px !important;
  }

  /* タイトルとテキストのスマホ流麗スケーリング */
  h1.main-title {
    font-size: clamp(1.2rem, 5.2vw, 1.45rem) !important;
    line-height: 1.4 !important;
    margin: 6px auto 10px !important;
  }

  .home-main-title .main-title-text {
    font-size: clamp(1.25rem, 5.4vw, 1.55rem) !important;
  }

  .lead-text, .oracle-prose-lead {
    font-size: 0.88rem !important;
    line-height: 1.8 !important;
  }

  /* 質問選択肢カード：スマホの親指で押しやすいタップ領域 */
  .choice-card {
    padding: 13px 14px !important;
    min-height: 52px !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
  }

  .roman-num {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 0.74rem !important;
  }

  /* 診断スタートボタン */
  .tarot-btn {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
  }

  /* 下部灯籠スタンプ帳のスマホ最適化 */
  .side-column.side-left {
    order: 2 !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .mystic-widget {
    max-width: 100% !important;
    padding: 14px 12px !important;
  }

  .lantern-stamp-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  /* 結果画面のタロットカード・アクションボタンのスマホ最適化 */
  .result-primary-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .result-primary-actions button,
  .result-primary-actions a {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* モーダルウィンドウのスマホ画面収容 */
  .celestial-modal-content,
  .codex-modal-dialog,
  .enlightenment-modal-card {
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 0 auto !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   ✦ 隠し演出（モキュメンタリー画面）のiPhone・スマホ完全最適化 ✦
   右側の見切れを100%解消し、タップ操作性を劇的に向上させる
   ============================================================================ */
@media (max-width: 768px) {
  /* 1. 隠し演出の親コンテナ：横揺れ・はみ出し完全防止 */
  #raw404Container,
  .raw-404-wrap,
  .bh-chrome-window,
  .bh-xp-screen,
  .bh-phone-screen {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* 2. Chrome風 ニュースサイト（renderNews）の見切れ解消＆タップ調整 */
  .bh-chrome-tabs {
    padding: 4px 6px 0 !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bh-chrome-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .bh-chrome-tab {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 130px !important;
    padding: 8px 10px !important;
    font-size: 0.7rem !important;
    box-sizing: border-box !important;
  }

  /* 「次のタブへ進む」ボタンをスマホで押しやすく強調 */
  .bh-chrome-tab.bh-next-tab-link {
    min-height: 38px !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
  }

  .bh-chrome-toolbar {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .bh-chrome-omnibox {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
  }

  .bh-chrome-bookmarks {
    display: none !important; /* スマホの縦領域節約 */
  }

  .bh-news-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px 30px !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .bh-news-headline {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }

  .bh-news-body-text {
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
  }

  .bh-news-content-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ニュース内の関連リンク：親指で確実にタップできるボタン化 */
  .bh-news-related-link {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
    background: #eef4fc !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
  }

  /* 3. Windows XP風 ブログ（renderBlog）の見切れ解消＆タップ調整 */
  .bh-xp-screen {
    padding: 0 !important;
    min-height: 100dvh !important;
  }

  .bh-xp-window {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .bh-xp-titlebar {
    padding: 4px 8px !important;
  }

  .bh-xp-title-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
  }

  /* XPの閉じるボタン（×）をスマホで押しやすく拡大 */
  .bh-xp-btn-close {
    min-width: 38px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: bold !important;
  }

  .bh-xp-address-bar {
    padding: 4px 6px !important;
  }

  .bh-blog-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .bh-blog-header-banner {
    padding: 14px 12px !important;
  }

  .bh-blog-title {
    font-size: 1.18rem !important;
  }

  .bh-blog-main {
    padding: 14px 12px 24px !important;
  }

  .bh-blog-layout-2col {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 4. iPhone風 まとめサイト（renderMatome）：右見切れの完全根本解決！ */
  /* スマホ実機で閲覧時は、外側の枠線を取り払い、実機フルスクリーン化 */
  .bh-phone-screen {
    padding: 0 !important;
    background: #ffffff !important;
    min-height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bh-iphone-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* 実機iPhoneで重複するDynamic Islandを非表示にしてスッキリ */
  .bh-iphone-island {
    display: none !important;
  }

  .bh-matome-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px 32px !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .bh-matome-title {
    font-size: 1.05rem !important;
    padding: 8px 10px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }

  /* まとめスレの動画リンク：親指で超押しやすいフル幅ボタン化 */
  .bh-matome-video-link {
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    font-size: 0.94rem !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  /* 5. フェイク404画面（Chromeエラー風）：スマホ画面幅ピッタリ収容 */
  .raw-404-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6vh auto 20px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .chrome-net-error {
    max-width: 100% !important;
    margin: 4vh auto 0 !important;
    padding: 0 10px !important;
  }

  .chrome-error-heading {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .escape-void-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
  }
}

/* 4. 極小スマートフォン（画面幅375px以下：iPhone SE等） */
@media (max-width: 375px) {
  .mobile-stamp-status-btn,
  .mobile-codex-status-btn {
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
  }

  .global-sound-toggle-btn {
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
  }

  .sound-btn-label {
    display: inline !important;
  }

  .grimoire-inner {
    padding: 16px 8px 14px !important;
  }

  .lantern-stamp-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }

  .bh-chrome-tab {
    min-width: 110px !important;
    padding: 6px 6px !important;
    font-size: 0.65rem !important;
  }
}