/* ===================================================================
   メログラフィ - デザイントークン + 共通スタイル
   仕様書 v7 準拠
=================================================================== */

:root {
  --bg: #07080F;
  --bg-deep: #03040A;
  --panel: #0E1020;
  --panel-2: #131634;
  --border: #1E2240;
  --border-2: #2A2F5C;
  --accent1: #7C3AED;  /* 紫・魔法 */
  --accent2: #06B6D4;  /* シアン・電子 */
  --accent3: #F472B6;  /* ピンク・召喚 */
  --gold:    #F5D061;
  --danger:  #ff5b6d;
  --text: #E2E8F0;
  --text-2: #94A3B8;
  --muted: #64748B;
  --shadow-glow-1: 0 0 32px rgba(124,58,237,.45);
  --shadow-glow-2: 0 0 32px rgba(6,182,212,.40);
  --shadow-glow-3: 0 0 32px rgba(244,114,182,.40);
  --gradient-magic: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --gradient-summon: linear-gradient(135deg, #F472B6 0%, #7C3AED 100%);

  /* ===================================================================
     A案「魔導書ポップ」トークン  (2026-06-13 追加 / 土台のみ・未適用)
     GPT 提案のトーン見本に基づく。既存トークン(上)は温存し、ここでは
     "置き場" を用意するだけ。各コンポーネントへの適用は次工程で行う。
  =================================================================== */
  /* 紙・羊皮紙 */
  --paper:      #E7D9BA;   /* 台本・カードの地 (現状ハードコード #F5EFDE の置換先) */
  --parchment:  #DAC59C;   /* 一段濃い羊皮紙 (見開き本の外側など) */
  --ink:        #15111A;   /* 紙の上に乗る文字色 */
  /* 渋い金 (既存 --gold #F5D061 はネオン演出用に温存) */
  --gold-aged:  #C8A15B;
  /* 封蝋の赤 (装飾用・エラー色 --danger #ff5b6d とは別物) */
  --seal:       #B65555;
  /* 暖色テキスト (既存 --text/--text-2 は寒色のまま温存) */
  --text-warm:  #F4ECDF;
  --text-soft:  #C8BEA9;
  /* 黒紫の地・魔法紫 (既存 --bg #07080F / --accent1 は温存) */
  --bg-arcane:  #15111A;
  --arcane:     #6E4BC4;
  /* 角丸スケール */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  /* 物理的な落ち影 3 段 (既存 --shadow-glow-* のネオン発光は温存) */
  --shadow-soft:   0 4px 16px rgba(0,0,0,.35);
  --shadow-mid:    0 8px 24px rgba(0,0,0,.45);
  --shadow-strong: 0 12px 32px rgba(0,0,0,.6);
  /* フォント役割 (A案: 和文=明朝 / ラベル=Cormorant SC / 数字=Cinzel) */
  --font-jp:    'Shippori Mincho B1', 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  --font-label: 'Cormorant SC', 'Cinzel', serif;
  --font-num:   'Cinzel', 'Cormorant Garamond', serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  overflow: hidden;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ===== レイアウトステージ — 16:9 にスケール ===== */
#stage-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #0a0d22 0%, #03040a 70%);
  overflow: hidden;
}
#stage {
  width: 1280px;
  height: 720px;
  position: relative;
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,.8), 0 0 0 1px rgba(124,58,237,.15);
}

/* ===== ベース魔導陣ノイズ背景 ===== */
.bg-noise::before {
  content:"";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(124,58,237,.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(6,182,212,.10) 0%, transparent 40%);
  pointer-events: none;
}
.bg-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ===== タイポグラフィ ===== */
.logo, .h-orbit {
  font-family: 'Orbitron', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.title-jp {
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ===== ボタン共通 — グリモア統一トーン =====
   旧: purple-tint グラデでデフォルトが「魔法ボタン」過剰
   新: 墨×薄い金グレーズの基底。primary だけが押印 (.btn.primary 参照)
*/
.btn {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 11px 28px;
  border-radius: 2px;
  border: 1px solid rgba(200,162,74,0.32);
  background: linear-gradient(180deg, rgba(245,208,97,0.06) 0%, rgba(7,8,15,0.55) 100%);
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
  letter-spacing: 0.12em;
  overflow: hidden;
}
.btn::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(245,208,97,.10) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s;
}
.btn:hover::before { transform: translateX(100%); }
.btn:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(245,208,97,0.12) 0%, rgba(7,8,15,0.55) 100%);
  color: var(--gold);
  box-shadow: 0 0 18px rgba(245,208,97,0.18);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* ===== .btn.primary — 金箔押印 (seal-stamp) スタイル =====
   旧 purple→cyan generic グラデを撤廃。グリモア世界観に合う重厚な押印感に。
   召喚開始 (タイトル) / 準備完了 (mictest) など、ユーザー意思の境界を踏むCTA。
*/
.btn.primary {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.32em;
  padding-left: calc(36px + 0.32em);
  color: #3A1E02;
  background:
    radial-gradient(ellipse 80% 60% at 32% 24%, rgba(255,235,180,0.55) 0%, transparent 60%),
    linear-gradient(180deg, #F5D061 0%, #D9A93F 45%, #B07C2E 100%);
  border: 1px solid #C8A24A;
  border-radius: 2px;
  box-shadow:
    0 6px 18px rgba(176,124,46,0.45),
    0 0 28px rgba(245,208,97,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -3px 6px rgba(140,90,30,0.4);
  /* わずかに傾けて押印した質感 */
  transform: rotate(-0.6deg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.btn.primary::before { display: none; }   /* シャイマー上書きを消す (押印感の純度を守る) */
.btn.primary:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow:
    0 10px 26px rgba(176,124,46,0.55),
    0 0 40px rgba(245,208,97,0.32),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -3px 6px rgba(140,90,30,0.4);
  filter: brightness(1.05);
}
.btn.primary:active {
  transform: rotate(-0.6deg) translateY(1px);
  box-shadow:
    0 3px 10px rgba(176,124,46,0.5),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(140,90,30,0.5);
}
.btn.primary:disabled {
  background: linear-gradient(180deg, #6e5e3a 0%, #4a3e25 100%);
  color: rgba(58,30,2,0.6);
  border-color: #5a4a2c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transform: rotate(-0.6deg);
  cursor: not-allowed;
  filter: none;
}
.btn.summon {
  background: var(--gradient-summon);
  border-color: transparent;
  color: white;
}
.btn.ghost {
  background: transparent;
  border-color: rgba(245,239,222,0.18);
  color: var(--text-2);
  font-size: 13.5px;
  padding: 9px 22px;
  letter-spacing: 0.18em;
}
.btn.ghost:hover {
  border-color: rgba(245,208,97,0.5);
  color: var(--gold);
  background: rgba(245,208,97,0.04);
  box-shadow: none;
}
.btn.danger {
  background: linear-gradient(180deg, rgba(255,91,109,.2), rgba(255,91,109,.05));
  border-color: rgba(255,91,109,.5);
}

/* ===== カードパネル ===== */
.panel {
  background: linear-gradient(180deg, rgba(14,16,32,.85) 0%, rgba(7,8,15,.9) 100%);
  border: 1px solid var(--border);
  border-radius: 6px;
  position: relative;
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-mid);   /* A案: 物理的な落ち影でカードを浮かせる */
}
.panel-corner::before,
.panel-corner::after {
  content:"";
  display: none;   /* 結果画面の水色コーナー装飾を撤去 (ユーザー要望 2026-06-17) */
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--accent2);
  pointer-events: none;
}
.panel-corner::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.panel-corner::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ===== 画面遷移 ===== */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* ===== 魔導陣SVG ===== */
.runic {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
}
@keyframes spin-slow { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes spin-rev  { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes pulse-glow {
  0%,100% { filter: drop-shadow(0 0 8px var(--accent1)); opacity: .6; }
  50%     { filter: drop-shadow(0 0 24px var(--accent1)); opacity: 1; }
}
.spin-slow { animation: spin-slow 30s linear infinite; }
.spin-fast { animation: spin-slow 12s linear infinite; }
.spin-rev  { animation: spin-rev  18s linear infinite; }

/* ===== パーティクル ===== */
@keyframes float-up {
  0% { transform: translateY(20px) translateX(0); opacity: 0; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{transform: translateY(-200px) translateX(var(--drift,20px)); opacity: 0; }
}
.particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  pointer-events: none;
  animation: float-up linear infinite;
}

/* ===== Type writer ===== */
@keyframes typewriter-blink {
  0%,100% { opacity: 1; } 50% { opacity: 0; }
}
.typed-caret::after {
  content:"▍";
  margin-left: 4px;
  animation: typewriter-blink 0.8s infinite;
  color: var(--accent1);
}

/* ===== レンジバー ===== */
.meter-track {
  width: 100%;
  height: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent1) 50%, var(--accent3) 100%);
  transition: width 0.05s linear;
  box-shadow: 0 0 12px var(--accent1);
}

/* ===== 録音台本カードのスクロールバー (手動スクロールを見やすく・掴みやすく) ===== */
.record-paper::-webkit-scrollbar { width: 12px; }
.record-paper::-webkit-scrollbar-track { background: rgba(120,90,50,0.10); border-radius: 6px; margin: 6px; }
.record-paper::-webkit-scrollbar-thumb {
  background: rgba(120,90,50,0.42);
  border-radius: 6px;
  border: 3px solid #F5EFDE;
}
.record-paper::-webkit-scrollbar-thumb:hover { background: rgba(120,90,50,0.65); }
.record-paper { scrollbar-width: thin; scrollbar-color: rgba(120,90,50,0.5) rgba(120,90,50,0.12); }

/* ===== 8軸バーの伸びアニメ (純CSS=rAF非依存・最終状態は実値) ===== */
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===== シェイク ===== */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  10%,30%,50%,70%,90% { transform: translateX(-4px); }
  20%,40%,60%,80% { transform: translateX(4px); }
}
.shake { animation: shake 0.6s ease-in-out infinite; }

/* ===== フラッシュ ===== */
@keyframes flash {
  0% { opacity: 0; }
  10%{ opacity: 1; }
  100%{opacity: 0; }
}

/* ===== ホバー時の魔導陣 ===== */
.choice-btn {
  position: relative;
  padding: 24px 36px;
  background: linear-gradient(180deg, rgba(14,16,32,.9), rgba(7,8,15,.95));
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: all 0.25s;
  overflow: hidden;
}
.choice-btn .rune-bg {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.choice-btn:hover {
  border-color: var(--accent1);
  background: linear-gradient(180deg, rgba(124,58,237,.18), rgba(7,8,15,.95));
  box-shadow: var(--shadow-glow-1);
}
.choice-btn:hover .rune-bg { opacity: 0.4; }
.choice-btn.selected {
  border-color: var(--accent2);
  background: linear-gradient(180deg, rgba(6,182,212,.18), rgba(7,8,15,.95));
  box-shadow: var(--shadow-glow-2);
}

/* ===== 結果カード細部 ===== */
.label-tag {
  font-family: var(--font-label);   /* A案: Cormorant SC (旧 Orbitron) */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-aged);          /* A案: 渋い金 (旧 cyan) */
  text-transform: uppercase;
  margin-bottom: 4px;
}
/* ===== スクロールバー ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent1); }

/* ===== 図鑑グリッド ===== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.catalog-cell {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.catalog-cell:hover { border-color: var(--accent2); transform: translateY(-2px); }
.catalog-cell.is-mine {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(245,208,97,.4);
}
.catalog-cell.is-collected-main {
  border-color: var(--accent3);
  box-shadow: 0 0 14px rgba(244,114,182,.25);
}
.catalog-cell.is-collected-sub {
  border-color: var(--accent2);
  box-shadow: 0 0 10px rgba(6,182,212,.18);
}
.catalog-cell .row-thumbs {
  display: flex; gap: 4px;
}
.catalog-cell .thumb {
  width: 32px; height: 44px;
  background-size: cover; background-position: center;
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* ===== 呪文書 (旧・茶色羊皮紙風) — legacy / 互換用 ===== */
.spellbook {
  background:
    radial-gradient(circle at 50% 0, rgba(255,220,150,.18), transparent 60%),
    linear-gradient(180deg, #3a2a1a 0%, #2a1d10 100%);
  padding: 32px 40px;
  border: 2px solid #5a3e1f;
  border-radius: 4px;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.6),
    inset 0 0 20px rgba(255,200,100,.15),
    0 12px 40px rgba(0,0,0,.7);
  color: #f0d9b0;
  font-family: 'Zen Kaku Gothic New', serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 2;
  letter-spacing: 0.06em;
  position: relative;
  white-space: pre-line;
  text-wrap: pretty;
}
.spellbook::before, .spellbook::after {
  content:"";
  position: absolute;
  left: 0; right: 0; height: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.4), transparent);
  pointer-events: none;
}
.spellbook::before { top: 0; }
.spellbook::after  { bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,.4), transparent); }

/* ===== シチュボ台本ビュー (S5 新) — 同人音声台本風 ===== */
.script-stage {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,114,182,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(124,58,237,.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(14,16,32,.88) 0%, rgba(7,8,15,.96) 100%);
  border: 1px solid rgba(245,208,97,.4);
  padding: 28px 42px;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 2.05;
  letter-spacing: 0.08em;
  color: #E8E2D0;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  white-space: pre-line;
  text-wrap: pretty;
  overflow-y: auto;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.45),
    0 12px 32px rgba(0,0,0,.6);
}
/* 上下のフェードグラデ */
.script-stage::before, .script-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 36px;
  pointer-events: none;
  z-index: 2;
}
.script-stage::before {
  top: 0;
  background: linear-gradient(180deg, rgba(7,8,15,.95) 0%, transparent 100%);
}
.script-stage::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(7,8,15,.95) 0%, transparent 100%);
}
/* 4 隅 gold brackets */
.script-stage .stage-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--gold);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(245,208,97,.5));
}
.script-stage .stage-corner.tl { top: -1px;    left: -1px;    border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.script-stage .stage-corner.tr { top: -1px;    right: -1px;   border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.script-stage .stage-corner.bl { bottom: -1px; left: -1px;    border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.script-stage .stage-corner.br { bottom: -1px; right: -1px;   border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

/* 台本ヘッダ - 商品ラベル風 */
.script-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(245,208,97,.06), rgba(244,114,182,.06), rgba(124,58,237,.06));
  border: 1px solid rgba(245,208,97,.25);
  margin-bottom: 8px;
}
.script-header .left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.script-header .chip {
  padding: 2px 8px;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  border: 1px solid currentColor;
  line-height: 1;
}
.script-header .chip.scene { color: var(--gold); }
.script-header .chip.rel   { color: var(--accent2); }
.script-header .chip.mood  { color: var(--accent3); }
.script-header .timing {
  font-family: 'Cinzel', 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* ===================================================================
   S7 召喚カード — 装飾フルセット
=================================================================== */
.summon-card {
  position: relative;
  width: 420px;
  height: 520px;
}

/* 背面ハロー（神々しい光輪） */
.summon-card .halo {
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(circle at 50% 42%,
      rgba(255,244,200,.55) 0%,
      rgba(244,114,182,.32) 18%,
      rgba(124,58,237,.18) 40%,
      transparent 65%);
  pointer-events: none;
  z-index: 1;
  animation: halo-breathe 3.4s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%,100% { opacity: .85; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.05); }
}

/* 放射状の光線 (conic) */
.summon-card .rays {
  position: absolute;
  inset: -40px;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,244,200,.22) 6deg, transparent 14deg,
      transparent 30deg, rgba(244,114,182,.18) 36deg, transparent 44deg,
      transparent 60deg, rgba(124,58,237,.22) 66deg, transparent 74deg,
      transparent 90deg, rgba(255,244,200,.22) 96deg, transparent 104deg,
      transparent 120deg, rgba(244,114,182,.18) 126deg, transparent 134deg,
      transparent 150deg, rgba(124,58,237,.22) 156deg, transparent 164deg,
      transparent 180deg, rgba(255,244,200,.22) 186deg, transparent 194deg,
      transparent 210deg, rgba(244,114,182,.18) 216deg, transparent 224deg,
      transparent 240deg, rgba(124,58,237,.22) 246deg, transparent 254deg,
      transparent 270deg, rgba(255,244,200,.22) 276deg, transparent 284deg,
      transparent 300deg, rgba(244,114,182,.18) 306deg, transparent 314deg,
      transparent 330deg, rgba(124,58,237,.22) 336deg, transparent 344deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 24%, black 38%, black 62%, transparent 76%);
          mask: radial-gradient(circle, transparent 24%, black 38%, black 62%, transparent 76%);
  animation: spin-slow 22s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* 召喚陣プレート（足元、楕円ディスク） */
.summon-card .platter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  width: 440px;
  height: 440px;
  transform: translateX(-50%) rotateX(72deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.6));
  animation: platter-breathe 3s ease-in-out infinite;
}
@keyframes platter-breathe {
  0%,100% { transform: translateX(-50%) rotateX(72deg) scale(1);    opacity: .9; }
  50%     { transform: translateX(-50%) rotateX(72deg) scale(1.03); opacity: 1; }
}

/* キャラ本体 */
.summon-card .portrait-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding-bottom: 16px;
  z-index: 5;
}
.summon-card .portrait {
  height: 460px;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 36px rgba(124,58,237,.75));
}

/* 額装フレーム */
.summon-card .frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245,208,97,.45);
  background:
    linear-gradient(180deg,
      rgba(245,208,97,.07) 0%,
      transparent 8%,
      transparent 92%,
      rgba(245,208,97,.07) 100%);
  pointer-events: none;
  z-index: 4;
  box-shadow:
    inset 0 0 0 2px rgba(7,8,15,.6),
    inset 0 0 0 3px rgba(244,114,182,.35),
    0 0 36px rgba(124,58,237,.35);
}
/* 上下バナー帯（金線） */
.summon-card .frame::before,
.summon-card .frame::after {
  content:"";
  position: absolute;
  left: 7%;
  right: 7%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,208,97,.2) 8%,
    var(--gold) 25%,
    var(--accent3) 50%,
    var(--gold) 75%,
    rgba(245,208,97,.2) 92%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(245,208,97,.7), 0 0 18px rgba(244,114,182,.4);
}
.summon-card .frame::before { top: 18px; }
.summon-card .frame::after  { bottom: 18px; }

/* コーナー宝石（八芒星） */
.summon-card .gem {
  position: absolute;
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle at 50% 50%,
      #ffffff 0%,
      var(--gold) 25%,
      var(--accent3) 55%,
      rgba(124,58,237,.6) 80%,
      transparent 100%);
  clip-path: polygon(
    50% 0%, 58% 42%, 100% 50%, 58% 58%,
    50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 14px var(--accent3));
  z-index: 7;
  animation: gem-twinkle 2.6s ease-in-out infinite;
}
.summon-card .gem.tl { top: -14px; left: -14px;  animation-delay: 0s; }
.summon-card .gem.tr { top: -14px; right: -14px; animation-delay: .65s; }
.summon-card .gem.bl { bottom: -14px; left: -14px;  animation-delay: 1.3s; }
.summon-card .gem.br { bottom: -14px; right: -14px; animation-delay: 1.95s; }
@keyframes gem-twinkle {
  0%,100% { transform: rotate(0deg)   scale(1);    opacity: .9; }
  50%     { transform: rotate(180deg) scale(1.18); opacity: 1; }
}

/* L字コーナーブラケット（HUD風） */
.summon-card .bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--accent2);
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 0 10px rgba(6,182,212,.55);
}
.summon-card .bracket.tl { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.summon-card .bracket.tr { top: 6px;    right: 6px;   border-left:  none; border-bottom: none; }
.summon-card .bracket.bl { bottom: 6px; left: 6px;    border-right: none; border-top:    none; }
.summon-card .bracket.br { bottom: 6px; right: 6px;   border-left:  none; border-top:    none; }

/* HUD 属性チップ */
.summon-card .attr-chip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(14,16,32,.92), rgba(7,8,15,.95));
  border: 1px solid var(--border-2);
  z-index: 7;
  text-align: center;
  min-width: 84px;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 18px rgba(6,182,212,.25), inset 0 0 12px rgba(124,58,237,.18);
}
.summon-card .attr-chip.left  { left:  -116px; }
.summon-card .attr-chip.right { right: -116px; }
.summon-card .attr-chip .chip-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent2);
  text-transform: uppercase;
  display: block;
}
.summon-card .attr-chip .chip-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(245,208,97,.6);
  margin-top: 3px;
  display: block;
}
.summon-card .attr-chip.right .chip-value {
  color: var(--accent3);
  text-shadow: 0 0 10px rgba(244,114,182,.6);
}
.summon-card .attr-chip .chip-sub {
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.12em;
  margin-top: 4px;
  display: block;
}
.summon-card .attr-chip::before {
  content:"";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent2), transparent);
  transform: translateY(-50%);
}
.summon-card .attr-chip.left::before  { right: -18px; }
.summon-card .attr-chip.right::before { left:  -18px; background: linear-gradient(270deg, var(--accent2), transparent); }

/* 下部ネームプレート（石板風・小さめ） */
.summon-card .plinth {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  padding: 6px 22px;
  background: linear-gradient(180deg, rgba(28,20,40,.95), rgba(7,8,15,.98));
  border: 1px solid rgba(245,208,97,.45);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 7;
  box-shadow: 0 0 18px rgba(245,208,97,.3), inset 0 0 10px rgba(124,58,237,.4);
  text-shadow: 0 0 8px rgba(245,208,97,.6);
}

/* ===== モーダル ===== */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3,4,10,.92);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* ===== S7: カードスタンプイン（scale 4→1, 中央固定） ===== */
@keyframes card-stamp {
  from { transform: translate(-50%, -50%) scale(4); opacity: 0; }
  6%   { opacity: 1; }
  62%  { transform: translate(-50%, -50%) scale(0.91); }
  80%  { transform: translate(-50%, -50%) scale(1.05); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

/* ===== 画面シェイク（S7 名前確定時・S8 VICTORY 時） ===== */
@keyframes screen-shake {
  0%   { transform: translate(0, 0); }
  14%  { transform: translate(-10px, -3px); }
  28%  { transform: translate(10px, 3px); }
  42%  { transform: translate(-7px, -2px); }
  57%  { transform: translate(5px, 2px); }
  71%  { transform: translate(-3px, -1px); }
  86%  { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ===== S8: VICTORY ズームイン ===== */
@keyframes victory-in {
  from { transform: scale(1.5); opacity: 0; }
  60%  { transform: scale(0.96); }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== S8: 黒フェードアウト（S9 への遷移） ===== */
@keyframes fade-to-black {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===================================================================
   新デザイン: 演出強化用アニメーション (design package v2 由来)
=================================================================== */

/* S1 魔王城: ゆっくりズームイン (28秒で 1.08 → 1.55) */
@keyframes demon-zoom {
  from { transform: scale(1.08) translateY(0); }
  to   { transform: scale(1.55) translateY(-4%); }
}

/* S2 女神: ブラーから明瞭になる降臨演出 */
@keyframes goddess-reveal {
  0%   { transform: scale(1.1); opacity: 0; filter: brightness(2.5) blur(20px); }
  30%  { opacity: 0.7; }
  70%  { filter: brightness(1.3) blur(0); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1) blur(0); }
}

/* S7 顕現: リングが拡散 */
@keyframes reveal-ring {
  0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 0; }
  30%  { opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

/* S7 顕現: 後光が脈動 */
@keyframes halo-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.85; }
  50%     { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
}

/* S7 顕現: portrait の浮遊 */
@keyframes portrait-drift {
  0%,100% { transform: translate(-50%,-50%); }
  50%     { transform: translate(-50%, calc(-50% - 6px)); }
}

/* S7 顕現: 宝石パルス */
@keyframes gem-pulse {
  0%,100% {
    box-shadow: 0 0 16px #F472B6, inset 0 0 6px rgba(255,255,255,0.6);
    transform: rotate(45deg) scale(1);
  }
  50% {
    box-shadow: 0 0 28px #F472B6, 0 0 48px #F5D061, inset 0 0 6px rgba(255,255,255,0.8);
    transform: rotate(45deg) scale(1.15);
  }
}

/* S7 顕現: charName 一字ずつ顕現 (blur から明瞭に) */
@keyframes reveal-char {
  0%   { opacity: 0; transform: translateY(-12px) scale(1.6); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0); }
}

/* S7 顕現: 文字フェードイン */
@keyframes char-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* S8 必殺技: VICTORY スタンプ */
@keyframes victory-stamp {
  0%   { transform: scale(2.4); opacity: 0; letter-spacing: 0.5em; }
  60%  { transform: scale(0.96); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; letter-spacing: 0.1em; }
}

/* S8 必殺技: 雷ボルトが中央に収束 */
@keyframes bolt-converge {
  0%   { transform: rotate(var(--angle, 0)) scaleX(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: rotate(var(--angle, 0)) scaleX(1); opacity: 0; }
}

/* S8 必殺技: 白い大爆発 */
@keyframes white-burst {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0.85; }
}

/* S8 必殺技: 着弾フラッシュ */
@keyframes impact-burst {
  0%   { transform: translate(-50%,-50%) scale(0.05); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.4);  opacity: 0; }
}

/* S8 必殺技: 飛び散る破片 */
@keyframes shrapnel {
  0%   { transform: translate(-50%,-50%); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; }
}

/* S8 必殺技: ライン発光 */
@keyframes line-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.25); }
}

/* S8 必殺技: 上空魔法陣の登場 */
@keyframes sigil-emerge {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-30deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(0deg); }
}

/* 上昇粒子 (魔王崩壊オーラ) */
@keyframes float-up-particle {
  from { transform: translateY(40px); opacity: 0; }
  15%  { opacity: 0.9; }
  to   { transform: translateY(-700px); opacity: 0; }
}

/* S8 phase 6: 光柱ビーム (眷属→魔王) — scaleX で伸びる */
@keyframes beam-extend {
  0%   { opacity: 0; transform: rotate(-32deg) scaleX(0); }
  18%  { opacity: 1; }
  60%  { transform: rotate(-32deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(-32deg) scaleX(1); opacity: 0; }
}

/* S8 phase 7: 沈黙テキストが、息を吐くようにゆっくり立ち上がる
   blur 6→0 + slight translateY で「言葉が場にゆっくり刻まれる」感を出す */
@keyframes silence-emerge {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px); filter: blur(6px); }
  35%  { opacity: 0.5; filter: blur(2px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); }
}

/* グロー脈動 */
@keyframes pulse-glow-soft {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}

/* S5 録音: 残り 5s 警告 — 紙が琥珀色にフラッシュ */
@keyframes rec-warn-flash {
  0%,100% {
    box-shadow:
      0 24px 60px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4),
      inset 0 0 0 1px rgba(120,90,50,0.22),
      inset 0 0 0 3px rgba(220,140,40,0.55),
      0 0 24px rgba(220,140,40,0.4);
  }
  50% {
    box-shadow:
      0 24px 60px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4),
      inset 0 0 0 1px rgba(120,90,50,0.22),
      inset 0 0 0 3px rgba(245,128,40,1),
      0 0 36px rgba(245,128,40,0.75);
  }
}

/* S5 録音: 録音中ボタンの脈動グロー */
@keyframes rec-pulse {
  0%,100% {
    box-shadow:
      0 6px 18px rgba(0,0,0,0.6),
      0 0 16px rgba(220,80,60,0.4),
      inset 0 1px 2px rgba(245,208,97,0.3),
      inset 0 -3px 8px rgba(40,10,0,0.6);
  }
  50% {
    box-shadow:
      0 6px 22px rgba(0,0,0,0.6),
      0 0 32px rgba(255,90,70,0.75),
      inset 0 1px 2px rgba(245,208,97,0.35),
      inset 0 -3px 8px rgba(40,10,0,0.6);
  }
}

/* S5 録音: 録音ドット (右上の赤丸) 点滅 */
@keyframes rec-dot-blink {
  0%,100% { opacity: 1;   transform: scale(1); }
  50%     { opacity: 0.45; transform: scale(0.85); }
}

/* S5 録音: 3-2-1 カウントダウン数字の pop */
@keyframes rec-count-pop {
  0%   { transform: scale(0.4); opacity: 0; filter: blur(8px); }
  35%  { transform: scale(1.1); opacity: 1; filter: blur(0); }
  70%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(0.92); opacity: 0.55; }
}

/* 召喚ボタンの安定フェードイン (flash で消えないように) */
@keyframes summon-fade-in {
  from { opacity: 0; transform: scale(0.94); }
  60%  { opacity: 1; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* 一般用フェードイン (消えないで残るバージョン)
   flash は 100% で opacity:0 に戻るため、出してそのまま見せたい要素は
   こちらを使う */
@keyframes fade-in-soft {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* カード出現 (S7 用、translate を含まない scale only バージョン)
   外側 wrap div が既に left/top で配置済みなので、translate を当てない */
@keyframes card-emerge {
  from { transform: scale(4); opacity: 0; }
  6%   { opacity: 1; }
  62%  { transform: scale(0.91); }
  80%  { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* ===================================================================
   シチュボ/同人テイスト 巻物・台本カード (S3 性別/シナリオ/強さ選択用)
=================================================================== */

/* 巻物カード */
/* 台本ページ(C構成): スクロールバーは金枠に被らないよう隠す */
.record-paper, .record-paper-tx { -ms-overflow-style: none; scrollbar-width: none; }
.record-paper::-webkit-scrollbar, .record-paper-tx::-webkit-scrollbar { display: none; }

.scroll-card {
  position: relative;
  width: 368px;
  min-height: 451px;
  /* A案: 縦長巻物(案2)を余白切り詰め。3枚並びで程よい大きさに */
  background: url("../final_images/game_assets/ui/scroll_frame_2_t.png") center / contain no-repeat;
  border: none;
  /* 巻物の羊皮紙領域に中身を縦中央でバランス良く配置 */
  padding: 60px 44px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), filter 0.25s;
  overflow: visible;
  isolation: isolate;
}
.scroll-card:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 22px rgba(124,58,237,.45)) brightness(1.04);
}
.scroll-card.is-selected {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 20px rgba(244,114,182,.6)) drop-shadow(0 0 12px rgba(245,208,97,.7));
}
/* 焼き込み1枚絵カード(性別選択): 巻物に挿絵を描き込んだ画像を背景にし、
   VOICE/タイトルは挿絵の下に空けた羊皮紙余白へ寄せる。背景画像は inline 指定、
   位置/サイズ(center/contain/no-repeat)は基底 .scroll-card から継承。 */
.scroll-card.is-baked {
  justify-content: flex-end;
  padding: 0 0 58px;
  gap: 7px;
}
/* VOICE ラベル（─ VOICE ─ 金の細線つき） */
.scroll-card.is-baked .card-voice {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Cormorant SC', serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.42em; padding-left: 0.42em; color: #6e4d12;
  /* 生成りのハロー(縁取り光)で羊皮紙+挿絵の上でもはっきり読ませる */
  text-shadow: 0 1px 0 rgba(248,239,212,.95), 0 0 3px rgba(248,239,212,.85),
               0 0 1px rgba(248,239,212,.95);
}
.scroll-card.is-baked .card-voice::before,
.scroll-card.is-baked .card-voice::after {
  content: ""; width: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, #7a5a20, transparent);
}
/* 金の銘板(カルトゥーシュ B2): 最長タイトルでも巻物内に収まるよう max-width 制限 */
.scroll-card.is-baked .title-plate {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; max-width: 68%;
  padding: 10px 26px; border-radius: 8px; border: 2px solid #6b4f1d;
  background:
    linear-gradient(180deg, rgba(255,250,228,.6) 0%, rgba(255,250,228,0) 20%),
    linear-gradient(180deg, #e7d199 0%, #cdab66 42%, #b48d41 58%, #c6a356 78%, #dcc07d 100%);
  box-shadow: 0 4px 11px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,250,225,.9),
              inset 0 -3px 6px rgba(80,55,18,.5), 0 0 0 5px rgba(107,79,29,.55);
}
.scroll-card.is-baked .title-plate::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(107,79,29,.7); border-radius: 4px; pointer-events: none;
}
.scroll-card.is-baked .plate-fl {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: #6b4f1d; font-size: 9px; line-height: 1; text-shadow: 0 1px 0 rgba(255,247,214,.5);
}
.scroll-card.is-baked .plate-fl-t { top: -2px; }
.scroll-card.is-baked .plate-fl-b { bottom: -2px; }
.scroll-card.is-baked .plate-title {
  font-family: 'Yuji Syuku', serif; line-height: 1; color: #2c1c09;
  white-space: nowrap; font-size: 22px; letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,246,212,.6);
}
/* カード内 アイコン枠 (同人音声サムネ風) */
.scroll-card .thumb-frame {
  width: 196px; height: 196px;
  margin: 0 auto;
  border: none;
  background: none;
  /* キャラを羊皮紙の挿絵として溶け込ませる(写真貼り付け感を消す):
     四角い縁を放射状マスクで羊皮紙へフェード → ハードな長方形境界を消す
     + セピア寄り/低彩度/暗部リフトで「古い紙に描かれた挿絵」のトーンに寄せる */
  mix-blend-mode: multiply;
  filter: sepia(0.5) saturate(0.8) contrast(0.9) brightness(1.14);
  -webkit-mask-image: radial-gradient(ellipse 68% 76% at 50% 44%, #000 42%, rgba(0,0,0,.5) 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 68% 76% at 50% 44%, #000 42%, rgba(0,0,0,.5) 70%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  display: grid;
  place-items: center;
  font-size: 88px;
  position: relative;
}
.scroll-card .thumb-frame::before,
.scroll-card .thumb-frame::after { display: none; }
.scroll-card .thumb-frame::before,
.scroll-card .thumb-frame::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid var(--gold);
}
.scroll-card .thumb-frame::before { top: -2px; left: -2px;  border-right: none; border-bottom: none; }
.scroll-card .thumb-frame::after  { bottom: -2px; right: -2px; border-left: none;  border-top: none; }

/* カードタイトル (商品名風) */
.scroll-card .card-title {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2e2418;
  line-height: 1.3;
  white-space: nowrap;
}
.scroll-card .card-sub {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.36em;
  padding-left: 0.36em;
  color: #8a6a2a;
}
.scroll-card .card-jp-sub {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #6e5a3a;
}

/* シナリオカード (同人音声商品ラベル風) */
.script-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,250,230,.05) 0%, transparent 30%),
    linear-gradient(180deg, rgba(14,16,32,.92) 0%, rgba(7,8,15,.98) 100%);
  border: 1px solid rgba(124,58,237,.35);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s;
  text-align: left;
  border-radius: 0;
}
.script-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent3), var(--gold), var(--accent2));
  opacity: 0.5;
  transition: opacity 0.2s;
}
.script-card:hover {
  border-color: rgba(244,114,182,.55);
  background:
    linear-gradient(180deg, rgba(255,250,230,.08) 0%, transparent 30%),
    linear-gradient(180deg, rgba(20,18,40,.95) 0%, rgba(10,8,20,.98) 100%);
  box-shadow: 0 4px 16px rgba(244,114,182,.25);
  transform: translateY(-1px);
}
.script-card:hover::before { opacity: 1; }
.script-card.is-selected {
  border-color: var(--accent3);
  background:
    linear-gradient(180deg, rgba(244,114,182,.12) 0%, rgba(7,8,15,.98) 60%);
  box-shadow: 0 0 20px rgba(244,114,182,.45), inset 0 0 12px rgba(244,114,182,.08);
}
.script-card.is-selected::before { opacity: 1; box-shadow: 0 0 8px var(--accent3); }
/* 商品メタ行 */
.script-card .meta-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.script-card .meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.script-card .meta-chip.rel  { color: var(--accent2); }
.script-card .meta-chip.scene{ color: var(--gold); }
.script-card .id-stamp {
  font-family: 'Space Mono', 'Cinzel', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.2em;
}
.script-card .title-line {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin-top: 2px;
}
.script-card .desc-line {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.55;
  opacity: 0.9;
}

/* シナリオガチャの並び (ガチャ 3 枚モード) */
.gacha-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gacha-row .script-card { min-height: 170px; }

/* 同人風 ステップインジケータ */
.scroll-step-dots {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.scroll-step-dots .dot {
  width: 10px; height: 10px;
  border: 1px solid rgba(245,208,97,.5);
  background: transparent;
  transform: rotate(45deg);
  transition: all 0.3s;
}
.scroll-step-dots .dot.done {
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.scroll-step-dots .dot.active {
  background: var(--accent3);
  border-color: var(--accent3);
  box-shadow: 0 0 14px var(--accent3);
  transform: rotate(45deg) scale(1.3);
}

/* ===================================================================
   召喚ボタン強化 (gold corners + pink/purple gradient)
=================================================================== */
.btn.summon-grand {
  position: relative;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 22px;
  background: linear-gradient(180deg, rgba(244,114,182,0.95), rgba(124,58,237,0.95));
  color: #fff;
  border: 2px solid var(--gold);
  padding: 22px 70px;
  letter-spacing: 0.32em;
  padding-left: calc(70px + 0.32em);
  cursor: pointer;
  border-radius: 4px;
  box-shadow:
    0 0 48px rgba(244,114,182,0.85),
    0 16px 32px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.3);
  backdrop-filter: blur(8px);
  text-shadow: 0 0 12px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.8);
}
.btn.summon-grand .corner {
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #F5D061);
}
.btn.summon-grand .corner.tl { top: -1px;    left: -1px;  border-top: 2px solid var(--gold); border-left:  2px solid var(--gold); }
.btn.summon-grand .corner.tr { top: -1px;    right: -1px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.btn.summon-grand .corner.bl { bottom: -1px; left: -1px;  border-bottom: 2px solid var(--gold); border-left:  2px solid var(--gold); }
.btn.summon-grand .corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.btn.summon-grand .sublabel {
  display: block;
  margin-top: 10px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  text-shadow: 0 0 8px rgba(245,208,97,0.5);
}

/* 共鳴度 bar (S7) */
.resonance-bar-wrap {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(7,8,15,0.85), rgba(20,8,40,0.85));
  border: 1px solid var(--accent2);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(6,182,212,.25);
}
.resonance-bar-track {
  height: 8px;
  background: rgba(124,58,237,0.18);
  border: 1px solid var(--border-2);
  position: relative;
  overflow: hidden;
}
.resonance-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  box-shadow: 0 0 12px var(--accent3);
  transition: width 1.4s cubic-bezier(.2,.7,.3,1);
}

/* ===== S9 結果画面アクションバー (2026-06-12 リデザイン) =====
   階層: 記録チップ(静) < テキストリンク(静) < シェア(準主役) < エンディング(主役・金)
   絵文字アイコンは使わない。書体と色とサイズだけで階層を作る。 */
.result-actionbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.act-chip {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.act-chip:hover {
  color: var(--gold);
  border-color: rgba(245, 208, 97, 0.55);
  background: rgba(245, 208, 97, 0.06);
}
.act-link {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: none;
  border: none;
  padding: 8px 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline dotted rgba(148, 163, 184, 0.45);
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.act-link:hover { color: var(--text); }
.act-share {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent3);
  background: rgba(244, 114, 182, 0.1);
  border: 1px solid rgba(244, 114, 182, 0.55);
  border-radius: 3px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
}
.act-share:hover {
  background: rgba(244, 114, 182, 0.18);
  box-shadow: 0 0 18px rgba(244, 114, 182, 0.35);
  transform: translateY(-1px);
}
.act-primary {
  position: relative;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #3a1e02;
  background: linear-gradient(180deg, #F5D061, #B07C2E);
  border: 1px solid #C8A24A;
  border-radius: 3px;
  padding: 11px 22px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(245, 208, 97, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.act-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(245, 208, 97, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.act-divider {
  width: 1px;
  height: 22px;
  background: var(--border-2);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ===== 結果画面 詳細タブ (2026-06-12 UI一新) =====
   下線インジケータ式。箱を増やさず、選択中だけ金の下線+本文色。 */
.rtab-row {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}
.rtab {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: -1px;
  padding: 8px 14px 7px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s;
}
.rtab:hover {
  color: var(--text-2);
  background: rgba(245, 208, 97, 0.06) !important;
}
.rtab.active {
  color: var(--gold) !important;
  border-bottom: 2px solid var(--gold) !important;
  background: transparent !important;
  font-weight: 700;
}

/* ===================================================================
   封蝋シール — A案・結果画面の主属性表示  (2026-06-13)
=================================================================== */
.wax-seal {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 38% 32%, #d97a72 0%, var(--seal) 44%, #8c3a3a 100%);
  border: 1px solid rgba(120,30,30,.6);
  box-shadow:
    var(--shadow-soft),
    inset 0 2px 4px rgba(255,255,255,.35),
    inset 0 -6px 12px rgba(0,0,0,.4);
  transform: rotate(-6deg);
}
/* 内側の刻印リング */
.wax-seal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255,230,225,.45);
  pointer-events: none;
}
.wax-seal .seal-label {
  font-family: var(--font-label);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(255,232,228,.82);
  text-transform: uppercase;
}
.wax-seal .seal-name {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 17px;
  color: #fff5f2;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(80,10,10,.7);
}

/* ============================================================
 * mic-callout — マイクテスト画面の状態メッセージ
 *   旧: 真っ赤な裸テキストで「魔力がまだ弱い」 → 警告に見えてしまう
 *   新: 状態 (advice / ready / error) で枠と色をかえる grimoire-styled callout
 * ============================================================ */
.mic-callout {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  margin: 0 auto 18px;
  background: linear-gradient(180deg, rgba(245,208,97,0.06), rgba(245,208,97,0.02));
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  position: relative;
  transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.mic-callout__mark {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(245,208,97,0.5);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.mic-callout__text { line-height: 1.5; }

/* 状態別 */
.mic-callout[data-state="advice"] {
  border-color: rgba(245,208,97,0.4);
  color: #F5D061;
  background: linear-gradient(180deg, rgba(245,208,97,0.10), rgba(245,208,97,0.03));
}
.mic-callout[data-state="advice"] .mic-callout__mark { color: #F5D061; }

.mic-callout[data-state="ready"] {
  border-color: var(--accent2);
  color: var(--accent2);
  background: linear-gradient(180deg, rgba(6,182,212,0.14), rgba(6,182,212,0.04));
  box-shadow: 0 0 24px rgba(6,182,212,0.25), inset 0 0 18px rgba(6,182,212,0.08);
}
.mic-callout[data-state="ready"] .mic-callout__mark {
  color: var(--accent2);
  text-shadow: 0 0 14px rgba(6,182,212,0.6);
}

.mic-callout[data-state="error"] {
  border-color: #d04848;
  color: #ffb0b0;
  background: linear-gradient(180deg, rgba(208,72,72,0.18), rgba(208,72,72,0.05));
}
.mic-callout[data-state="error"] .mic-callout__mark { color: #ff6464; text-shadow: 0 0 12px rgba(255,100,100,0.55); }


/* ============================================================
 * device-picker — マイクテスト画面の入力デバイス選択
 *   ネイティブ <select> をカスタム装飾。ラベルと枠は写本タグ風。
 * ============================================================ */
.device-picker {
  position: relative;
  margin-top: 28px;
  padding: 16px 22px 14px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(245,208,97,0.05) 0%, transparent 60%),
    rgba(14,16,32,0.55);
  border: 1px solid rgba(200,162,74,0.32);
  border-radius: 2px;
}
.device-picker__corner {
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--gold);
  pointer-events: none;
}
.device-picker__corner.tl { top: -1px; left:  -1px; border-top: 1px solid; border-left:  1px solid; }
.device-picker__corner.tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }
.device-picker__corner.bl { bottom: -1px; left:  -1px; border-bottom: 1px solid; border-left:  1px solid; }
.device-picker__corner.br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

.device-picker__label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  color: var(--gold);
  text-align: center;
  margin-bottom: 10px;
}
.device-picker__label-jp {
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(245,208,97,0.6);
}

.device-picker__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 11px 38px 11px 16px;
  background-color: rgba(7,8,15,0.7);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%23F5D061' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>"),
    linear-gradient(180deg, rgba(245,208,97,0.06), rgba(245,208,97,0));
  background-repeat: no-repeat, no-repeat;
  background-position: right 14px center, left top;
  background-size: 11px 8px, 100% 100%;
  color: var(--text);
  border: 1px solid rgba(200,162,74,0.4);
  border-radius: 2px;
  font-family: 'Shippori Mincho B1', 'Shippori Mincho', serif;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.device-picker__select:hover {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(245,208,97,0.22), inset 0 0 12px rgba(245,208,97,0.06);
}
.device-picker__select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(245,208,97,0.3);
}
.device-picker__select option {
  background: #0E1020;
  color: var(--text);
}

.device-picker__hint {
  margin-top: 8px;
  font-family: 'Klee One', 'Shippori Mincho B1', serif;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-align: center;
}
.device-picker__hint em {
  font-style: normal;
  color: rgba(245,208,97,0.55);
  margin-right: 4px;
}


/* ============================================================
 * .btn-skip — ナラティブ画面の右上 SKIP ボタン (共通)
 *   S1 魔王登場 / S2 女神降臨 / S6-S8 (battle) / S10 epilogue
 *   旧: 各画面でインライン style が乱立、フォントも Orbitron で堅い
 *   新: 金の細枠 + Cinzel スモールキャップ、押すと金が灯る
 * ============================================================ */
.btn-skip {
  position: fixed;
  top: 18px; right: 22px;
  z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  letter-spacing: 0.36em;
  padding-left: calc(16px + 0.36em);
  color: rgba(245,239,222,0.55);
  background: rgba(7,5,15,0.55);
  border: 1px solid rgba(200,162,74,0.25);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
}
.btn-skip::after {
  content: "›";
  font-family: 'Cinzel', serif;
  font-size: 13px;
  margin-left: -4px;
  letter-spacing: 0;
  opacity: 0.7;
}
.btn-skip:hover {
  color: var(--gold);
  border-color: rgba(245,208,97,0.55);
  background: rgba(245,208,97,0.06);
  box-shadow: 0 0 14px rgba(245,208,97,0.22);
}

/* ============================================================
 * .hint-advance — 「クリックで進める」のフッターヒント
 *   旧 CLICK TO ADVANCE (Orbitron) → 金の italic で控えめに
 * ============================================================ */
.hint-advance {
  position: absolute;
  bottom: 16px; right: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  color: rgba(245,208,97,0.45);
  letter-spacing: 0.24em;
  pointer-events: none;
}
.hint-advance::before {
  content: "▸ ";
  font-style: normal;
  margin-right: 4px;
  color: rgba(245,208,97,0.6);
}

/* 必殺技 Cut 3 解放: 金リングが急拡大する補強アニメ */
@keyframes ringExpand {
  0%   { opacity: 0; transform: scale(0.2); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.6); }
}