/* ======================================================
   狂信者たちの深夜詠唱 (Midnight Cultists) - CSS
   ====================================================== */

:root {
  --bg-color: #05050a;
  --panel-bg: rgba(13, 11, 24, 0.52);
  --panel-bg-dark: rgba(8, 7, 16, 0.65);
  --border-color: rgba(168, 85, 247, 0.35);
  --border-gold: rgba(245, 158, 11, 0.4);
  --primary-green: #20e090;
  --glow-green: rgba(32, 224, 144, 0.4);
  --eldritch-purple: #c084fc;
  --deep-purple: #7e22ce;
  --glow-purple: rgba(168, 85, 247, 0.5);
  --san-red: #f43f5e;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --gold-accent: #fbbf24;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
}

body {
  font-family: 'Noto Sans JP', 'Outfit', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  min-height: 100vh;
  position: relative;
}

/* iOS Safari対応: position: fixedな全画面背景レイヤー */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('/images/bg/ritual_chamber_bg_0.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -3;
  transition: background-image 0.6s ease-in-out;
}

/* 輪廻周回ごとの背景アート画像 */
body.bg-theme-0::before { background-image: url('/images/bg/ritual_chamber_bg_0.jpg'); }
body.bg-theme-1::before { background-image: url('/images/bg/ritual_chamber_bg_1.jpg'); }
body.bg-theme-2::before { background-image: url('/images/bg/ritual_chamber_bg_2.jpg'); }
body.bg-theme-3::before { background-image: url('/images/bg/ritual_chamber_bg_3.jpg'); }
body.bg-theme-4::before { background-image: url('/images/bg/ritual_chamber_bg_4.jpg'); }
body.bg-theme-5::before { background-image: url('/images/bg/ritual_chamber_bg_5.jpg'); }

/* 背景オーバーレイ（ビネットと妖しい霧） - 背景アートが鮮明に見えるよう透明度UP */
.stars-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(10, 5, 20, 0.04) 0%, rgba(2, 2, 6, 0.25) 80%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: -2;
  transition: background 0.6s ease;
}

body.bg-theme-5 .stars-bg {
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0) 0%, rgba(10, 15, 30, 0.12) 80%, rgba(5, 5, 15, 0.3) 100%);
}

.fog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 15% 75%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
              radial-gradient(circle at 85% 25%, rgba(32, 224, 144, 0.05) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
  animation: fogShift 12s infinite alternate ease-in-out;
}

@keyframes fogShift {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.05); }
}

/* 共通ガラスパネル (ソシャゲ風グラスモーフィズム) */
.glass-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45), inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
}

.hidden {
  display: none !important;
}

/* --- モーダルオーバーレイ --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 6, 10, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

/* --- 未ログイン画面（タイトル＆ログイン） --- */
#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 13vh;
  overflow: hidden;
  background-color: #05050a;
}

.login-screen-bg,
.login-screen-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  pointer-events: none;
}

.login-screen-bg {
  background-image: url('/images/top.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 下部グラデーションオーバーレイ（テキストの視認性を高める） */
.login-screen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 10, 0.05) 0%,
    rgba(5, 5, 10, 0.2) 40%,
    rgba(5, 5, 10, 0.6) 70%,
    rgba(2, 2, 6, 0.92) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.login-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  max-width: 600px;
  animation: heroFadeIn 1s ease-out;
}

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

.login-game-title {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: 3px;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 0, 0, 0.8);
  margin-bottom: 6px;
}

.login-game-subtitle {
  font-family: 'Outfit', 'Cinzel', sans-serif;
  font-size: clamp(14px, 2.2vw, 17px);
  letter-spacing: 2px;
  color: #c084fc;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(168, 85, 247, 0.5);
  margin-bottom: 24px;
}

.btn-discord-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #5865F2;
  color: #fff;
  padding: 15px 36px;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(15px, 2.5vw, 18px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 25px rgba(88, 101, 242, 0.5), 0 0 15px rgba(88, 101, 242, 0.3);
}

.btn-discord-login:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 30px rgba(88, 101, 242, 0.7), 0 0 25px rgba(88, 101, 242, 0.5);
  background: #4752c4;
}

.btn-discord-login:active {
  transform: translateY(1px) scale(0.98);
}

/* スマホ縦型表示（幅768px以下または縦長比率）では、女の子の顔（左から約30%、上から約25%）を中心にする */
@media (max-width: 768px) and (orientation: portrait), (orientation: portrait) {
  .login-screen-bg {
    background-position: 30% 25%;
  }
  .login-screen-video {
    object-position: 30% 25%;
  }
  #login-screen {
    padding-bottom: 18vh;
  }
}

/* --- アプリレイアウト --- */
#app-screen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

/* --- アプリレイアウト --- */
#app-screen {
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 20px 24px;
  position: relative;
  z-index: 1;
}

/* --- 最上部 全幅固定ナビゲーションバー --- */
.app-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  z-index: 2000;
  background: rgba(10, 8, 20, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}

.app-top-nav-inner {
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-eye {
  font-size: 22px;
  color: var(--primary-green);
  text-shadow: 0 0 12px var(--glow-green);
  flex-shrink: 0;
  animation: pulse-eye 3s infinite ease-in-out;
}

.brand-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-title {
  font-family: 'Cinzel', 'Noto Sans JP', serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
  line-height: 1.2;
}

.brand-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: #c084fc;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* ヘッダー / ステータスバー (ソシャゲ風上部HUD) */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  margin-bottom: 20px;
  gap: 16px;
  border-radius: 18px;
  background: rgba(13, 11, 24, 0.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

#user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-green);
  box-shadow: 0 0 14px var(--glow-green), inset 0 0 6px rgba(0,0,0,0.8);
  background: #0d0b18;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.username {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}

.user-stage-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mutation-badge {
  background: linear-gradient(135deg, #9333ea, #db2777);
  color: #fff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
  display: inline-block;
  line-height: 1.4;
}

.mutation-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-green);
}

.resource-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.resource-card {
  background: rgba(18, 14, 32, 0.75);
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 105px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.interactive-card {
  cursor: pointer;
}

.interactive-card:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(28, 22, 50, 0.85);
  transform: translateY(-1px);
}

.resource-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.resource-value {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-green);
  text-shadow: 0 0 8px var(--glow-green);
  line-height: 1.2;
}

.resource-sub {
  font-size: 9px;
  color: #94a3b8;
  margin-top: 1px;
}

/* 中央SAN値セクション */
.hud-san-section {
  flex: 1;
  max-width: 280px;
  margin: 0 8px;
}

.san-bar-wrapper {
  position: relative;
  height: 16px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  overflow: hidden;
  margin: 3px 0 0;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.san-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  border-radius: 7px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.san-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 6px #000, 0 0 3px #000;
  pointer-events: none;
}

/* --- メインコンテンツ --- */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 20px;
}

.ritual-chamber-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.drop-rate-pill {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pill-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.pill-tag.trash { color: #94a3b8; }
.pill-tag.artifact { color: #38bdf8; }
.pill-tag.deity { color: #f472b6; font-weight: 800; text-shadow: 0 0 8px rgba(244, 114, 182, 0.6); }

/* 召喚陣の上のランダムフレーバーメッセージ */
.ritual-flavor-whisper {
  width: 100%;
  max-width: 460px;
  margin: 2px auto 8px;
  padding: 6px 14px;
  background: rgba(18, 14, 32, 0.45);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.whisper-icon {
  font-size: 9px;
  color: var(--eldritch-purple);
  opacity: 0.6;
  flex-shrink: 0;
}

.whisper-text {
  font-size: 11.5px;
  color: #c4b5fd;
  font-style: italic;
  letter-spacing: 0.4px;
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
  line-height: 1.3;
}

.whisper-text.fading {
  opacity: 0;
  transform: translateY(-3px);
}

/* 儀式の間 ＆ 祭壇台座 */
.ritual-chamber {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.altar-podium {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 16px;
}

.circle-container {
  position: relative;
  width: 340px;
  height: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 20px;
  overflow: visible;
}

.interactive-circle {
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  user-select: none;
}

.interactive-circle:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 0 30px var(--glow-green)) drop-shadow(0 0 45px var(--glow-purple));
}

.interactive-circle:active {
  transform: scale(0.96);
  filter: drop-shadow(0 0 50px var(--primary-green));
}

.magic-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.outer-circle {
  width: 330px;
  height: 330px;
  border: 2px dashed var(--primary-green);
  box-shadow: 0 0 20px var(--glow-green);
  animation: rotate-cw 35s linear infinite, pulse-glow 4s ease-in-out infinite alternate;
}

.rune-circle {
  width: 305px;
  height: 305px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotate-ccw 22s linear infinite;
}

.rune-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px var(--glow-green));
}

.star-circle {
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotate-cw 45s linear infinite;
}

.star-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px var(--glow-purple));
}

.inner-circle {
  width: 195px;
  height: 195px;
  border: 2px double var(--eldritch-purple);
  box-shadow: 0 0 15px var(--glow-purple);
  animation: rotate-ccw 14s linear infinite;
}

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

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

@keyframes pulse-glow {
  0% { filter: brightness(1) drop-shadow(0 0 10px var(--glow-green)); }
  50% { filter: brightness(1.3) drop-shadow(0 0 25px var(--glow-purple)); }
  100% { filter: brightness(1) drop-shadow(0 0 10px var(--glow-green)); }
}

/* クリック時の禍々しいルーン波紋エフェクト */
.eldritch-ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--primary-green);
  box-shadow: 0 0 20px var(--glow-green), 0 0 40px var(--glow-purple);
  pointer-events: none;
  animation: ripple-expand 0.6s ease-out forwards;
}

@keyframes ripple-expand {
  0% { width: 100px; height: 100px; opacity: 1; transform: scale(0.5); }
  100% { width: 380px; height: 380px; opacity: 0; transform: scale(1.3); }
}

.ritual-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 175px;
  height: 175px;
  pointer-events: none;
  z-index: 4;
  text-align: center;
}

/* 召喚陣の下の大型召喚ボタン */
.btn-summon-main {
  width: 90%;
  max-width: 320px;
  margin: 10px 0 8px;
  padding: 14px 20px;
  border-radius: 9999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}

/* 有効化状態 (コスト到達時) */
.btn-summon-main:not(:disabled) {
  background: linear-gradient(135deg, #a855f7, #6b21a8);
  border: 1.5px solid #c084fc;
  color: #fff;
  box-shadow: 0 0 20px var(--glow-purple), 0 0 35px rgba(168, 85, 247, 0.3);
  animation: pulse-summon-btn 2.5s infinite ease-in-out;
}

.btn-summon-main:not(:disabled):hover {
  transform: translateY(-3px) scale(1.04);
  background: linear-gradient(135deg, #c084fc, #7e22ce);
  box-shadow: 0 0 30px var(--glow-purple), 0 0 50px var(--primary-green);
}

.btn-summon-main:not(:disabled):active {
  transform: translateY(1px) scale(0.97);
}

/* 非活性状態 (コスト不足時) */
.btn-summon-main:disabled {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  filter: grayscale(0.8);
}

@keyframes pulse-summon-btn {
  0%, 100% { box-shadow: 0 0 15px var(--glow-purple); }
  50% { box-shadow: 0 0 30px var(--glow-purple), 0 0 20px var(--glow-green); }
}

/* 召喚陣下のサブアクション (キメラ錬金 & イース交換所) */
.ritual-sub-actions {
  width: 90%;
  max-width: 320px;
  display: flex;
  gap: 12px;
  margin: 14px 0 18px;
  z-index: 5;
}

.btn-ritual-sub {
  flex: 1;
  padding: 10px 12px;
  border-radius: 9999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

/* キメラ錬金ボタン */
.btn-alchemy-sub:not(:disabled) {
  background: linear-gradient(135deg, #059669, #10b981);
  border: 1.5px solid #34d399;
  color: #fff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
  animation: pulse-alchemy-sub 2s infinite ease-in-out;
}

.btn-alchemy-sub:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(52, 211, 153, 0.6);
  background: linear-gradient(135deg, #10b981, #34d399);
}

.btn-alchemy-sub:disabled {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

@keyframes pulse-alchemy-sub {
  0%, 100% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.3); }
  50% { box-shadow: 0 0 22px rgba(52, 211, 153, 0.6); }
}

/* イース時空交換所ボタン */
.btn-yith-sub {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.8), rgba(3, 105, 161, 0.9));
  border: 1.5px solid #38bdf8;
  color: #fff;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.35);
}

.btn-yith-sub:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.6);
}

.btn-yith-sub:active {
  transform: translateY(1px);
}

/* クッキークリッカー風手動クリック浮遊数値エフェクト */
.click-float-text {
  position: absolute;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-green);
  text-shadow: 0 0 10px var(--glow-green), 0 0 20px var(--primary-green);
  pointer-events: none;
  z-index: 10;
  animation: float-up-fade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.click-float-text.shoggoth-click-text {
  font-family: 'Cinzel', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  color: #34d399;
  text-shadow: 0 0 12px #10b981, 0 0 24px #a855f7, 0 0 35px #06b6d4;
  letter-spacing: 1px;
}

@keyframes float-up-fade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -160%) scale(1);
  }
}

.ritual-center .ritual-icon {
  font-size: 36px;
  color: var(--primary-green);
  text-shadow: 0 0 15px var(--glow-green);
  margin-bottom: 2px;
  line-height: 1;
}

.ritual-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ritual-verse-val {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 12px var(--glow-green), 0 0 24px var(--primary-green);
  line-height: 1;
}

.ritual-rate-sub {
  font-size: 13px;
  color: var(--primary-green);
  font-weight: 700;
  margin-top: 2px;
}

.ritual-cost-badge {
  background: rgba(168, 85, 247, 0.25);
  border: 1px solid var(--eldritch-purple);
  color: #fff;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: bold;
  box-shadow: 0 0 10px var(--glow-purple);
  backdrop-filter: blur(4px);
}



/* 祭壇・インベントリ */
.altar-chamber {
  padding: 24px;
}

.altar-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 14px;
}

.tab-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:hover {
  background: rgba(30, 41, 59, 0.8);
  color: #fff;
  border-color: rgba(168, 85, 247, 0.3);
  transform: translateY(-1px);
}

.tab-btn.active {
  background: linear-gradient(135deg, rgba(32, 224, 144, 0.15), rgba(168, 85, 247, 0.15));
  color: var(--primary-green);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 16px rgba(32, 224, 144, 0.2);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeInPane 0.25s ease-out;
}

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

/* 結社ダッシュボード */
.cult-dashboard-section {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.section-header-mini {
  font-size: 13px;
  font-weight: 800;
  color: #c084fc;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 宝物庫サブフィルターバー */
.vault-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filter-pill {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  background: rgba(30, 41, 59, 0.9);
  color: #f1f5f9;
  border-color: rgba(168, 85, 247, 0.4);
}

.filter-pill.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(6, 182, 212, 0.3));
  color: #ffffff;
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.vault-banners-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* 錬金術バナー ＆ 合成ボタンのスタイル修正 */
.alchemy-banner {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.alchemy-info h3 {
  font-size: 16px;
  color: var(--eldritch-purple);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alchemy-info p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.btn-alchemy {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-alchemy:disabled {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-alchemy:not(:disabled) {
  background: linear-gradient(135deg, #a855f7, #7e22ce);
  border: 1px solid #c084fc;
  color: #fff;
  box-shadow: 0 0 15px var(--glow-purple);
  animation: pulse-alchemy-btn 2s infinite ease-in-out;
}

.btn-alchemy:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px var(--glow-purple);
  background: linear-gradient(135deg, #c084fc, #9333ea);
}

@keyframes pulse-alchemy-btn {
  0%, 100% { box-shadow: 0 0 12px var(--glow-purple); }
  50% { box-shadow: 0 0 24px var(--eldritch-purple); }
}

.sub-title {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.empty-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px 0;
}

/* アイテムグリッド (ソシャゲ風カードコレクション) */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.item-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 10px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.item-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}

/* レアリティ別装飾 (SSR / SR / R / N) */
/* ① 神格 (SSR/UR - 金枠＆紫炎オーラ) */
.item-card.deity {
  grid-column: span 2;
  background: radial-gradient(circle at top, rgba(88, 28, 135, 0.45) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1.5px solid #fbbf24;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), inset 0 0 15px rgba(245, 158, 11, 0.2);
  position: relative;
}

.item-card.deity::before {
  content: 'SSR 神格';
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.item-card.deity:hover {
  border-color: #fde047;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.7), inset 0 0 20px rgba(251, 191, 36, 0.4);
}

/* ② 魔導具 (SR - クリスタル蒼枠) */
.item-card.artifact {
  background: radial-gradient(circle at top, rgba(14, 116, 144, 0.3) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

.item-card.artifact:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

/* ③ キメラ遺物・イース秘宝 (SR/SSR - 妖異な紫翡翠枠) */
.item-card.chimera, .item-card.yith {
  background: radial-gradient(circle at top, rgba(147, 51, 234, 0.35) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid rgba(192, 132, 252, 0.5);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
}

.item-card.chimera:hover, .item-card.yith:hover {
  border-color: #c084fc;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.6);
}

/* ④ ゴミ素材 (N - 石枠) */
.item-card.trash {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.85;
}

.item-card.trash:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.25);
}

.item-img-wrapper {
  margin: 8px 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
}

.item-img-trash {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: grayscale(0.2);
}

.item-img-artifact, .item-img-chimera, .item-img-yith {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
  transition: transform 0.25s ease;
}

.item-card:hover .item-img-artifact,
.item-card:hover .item-img-chimera,
.item-card:hover .item-img-yith {
  transform: scale(1.08);
}

.item-img-deity {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 24px rgba(251, 191, 36, 0.4));
  transition: transform 0.3s ease;
}

.item-card:hover .item-img-deity {
  transform: scale(1.1) rotate(2deg);
}

.item-card.yith {
  border-color: rgba(168, 85, 247, 0.4);
}

.item-card.yith:hover {
  border-color: #c084fc;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.25);
}

.item-card.yith .item-img-yith {
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.7));
}

.item-img-deity {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px var(--glow-purple));
  animation: float-deity 4s ease-in-out infinite alternate;
}

@keyframes float-deity {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

.fallback-icon {
  font-size: 36px;
  color: var(--text-muted);
}

.item-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.item-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.item-count {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-use-item {
  margin-top: 10px;
  width: 100%;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 1px solid #f87171;
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.btn-use-item:hover {
  transform: scale(1.04);
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.6);
}

/* --- モーダル結果表示のスタイリング修正 --- */
.modal-card {
  max-width: 440px;
  width: 90%;
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
}

.result-icon-box {
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
  width: 100%;
}

.modal-item-img {
  object-fit: contain;
}

.modal-img-trash {
  width: 80px;
  height: 80px;
}

.modal-img-artifact, .modal-img-chimera, .modal-img-yith {
  width: 130px;
  height: 130px;
  filter: drop-shadow(0 0 18px var(--glow-green));
}

.modal-img-deity {
  width: 220px;
  height: 220px;
  filter: drop-shadow(0 0 30px var(--glow-purple)) drop-shadow(0 0 50px var(--eldritch-purple));
  animation: pop-deity-pulse 2s infinite ease-in-out;
}

@keyframes pop-deity-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.modal-icon-fallback {
  font-size: 56px;
  color: var(--gold-accent);
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.result-title {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.result-item-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.result-item-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 360px;
}

.san-check-box {
  width: 100%;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  text-align: center;
}

.log-entry.error {
  color: var(--san-red);
}

.log-entry.deity {
  color: #c084fc;
  font-weight: bold;
  text-shadow: 0 0 10px var(--glow-purple);
}

.san-check-header {
  font-size: 13px;
  font-weight: bold;
  color: var(--san-red);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.san-check-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.btn-roll-san {
  background: linear-gradient(135deg, #ef4444, #991b1b);
  border: 1px solid #f87171;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  transition: all 0.25s ease;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.btn-roll-san:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.7);
  background: linear-gradient(135deg, #f87171, #dc2626);
}

.btn-roll-san:disabled {
  opacity: 0.7;
  cursor: wait;
}

.dice-result-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
}

.san-success {
  color: #34d399;
}

.san-success .dice-result-badge {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #34d399;
  color: #34d399;
}

.san-failure {
  color: #f87171;
}

.san-failure .dice-result-badge {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #f87171;
  color: #f87171;
}

.btn-close {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 12px 36px;
  border-radius: 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* --- VC同調メンバーカードのスタイル --- */
.interactive-card {
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.interactive-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-green);
  box-shadow: 0 0 15px var(--glow-green);
}

.member-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.member-card {
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(16, 23, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.member-card.is-me {
  border-color: var(--primary-green);
  box-shadow: 0 0 15px rgba(32, 224, 144, 0.15);
}

.member-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
}

.member-names {
  flex: 1;
}

.member-name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.you-badge {
  font-size: 11px;
  color: var(--primary-green);
  font-weight: bold;
}

.member-stage {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.member-prod-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-green);
  background: rgba(32, 224, 144, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

.member-san-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.member-san-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.member-san-bar {
  flex: 1;
  height: 14px;
  margin: 0;
}

.member-buffs-title {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 詳細能力値 (ビルドステータス) パネルのスタイル */
.stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 6px 0;
}

.stat-card {
  background: rgba(16, 23, 32, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.25s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-green);
  box-shadow: 0 0 15px var(--glow-green);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(32, 224, 144, 0.1);
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: var(--primary-green);
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* 遊び方・ルールガイドセクション */
.game-rules-section {
  margin-top: 30px;
  padding: 28px 24px;
}

.rules-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: var(--primary-green);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 15px var(--glow-green);
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.rule-card {
  background: rgba(16, 23, 32, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 16px;
  transition: all 0.25s ease;
}

.rule-card:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.rule-num {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--purple-accent);
  opacity: 0.7;
  flex-shrink: 0;
  line-height: 1;
}

.rule-content h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}



/* 開発用デバッグパネルのスタイル */
.debug-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.debug-toggle-btn {
  background: linear-gradient(135deg, #ef4444, #a855f7);
  border: 1px solid #f43f5e;
  color: #fff;
  padding: 10px 18px;
  border-radius: 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.debug-toggle-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
}

.debug-menu-body {
  margin-bottom: 12px;
  background: rgba(10, 15, 24, 0.95);
  border: 1.5px solid #ef4444;
  border-radius: 16px;
  padding: 16px;
  width: 280px;
  backdrop-filter: blur(15px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.3);
  animation: slide-up-debug 0.3s ease;
}

@keyframes slide-up-debug {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.debug-header {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 800;
  color: #f87171;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.debug-btn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.btn-dbg {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-dbg:hover {
  background: rgba(168, 85, 247, 0.3);
  border-color: #c084fc;
  color: #fff;
  transform: translateX(-3px);
}

.btn-dbg.danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  margin-top: 4px;
}

.btn-dbg.danger:hover {
  background: rgba(239, 68, 68, 0.6);
  border-color: #f43f5e;
  color: #fff;
}

.buff-badge {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #e9d5ff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 600;
}

/* ======================================================
   レスポンシブ対応 (スマホ・タブレット画面)
   ====================================================== */

@media (max-width: 960px) {
  #app-screen {
    padding: 8px 6px;
    width: 100%;
    max-width: 100vw;
  }

  /* ステータスバーのソシャゲ風モバイルHUD化 */
  .status-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 8px;
    margin-bottom: 12px;
    border-radius: 14px;
  }

  .user-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  #user-avatar {
    width: 44px;
    height: 44px;
  }

  .avatar-wrapper {
    width: 44px;
    height: 44px;
  }

  .username {
    font-size: 15px;
  }

  .mutation-title {
    font-size: 11px;
  }

  .hud-san-section {
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .resource-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }

  .resource-card {
    min-width: 0;
    padding: 6px 10px;
    border-radius: 10px;
  }

  .resource-value {
    font-size: 16px;
  }

  .verse-rate-badge {
    font-size: 10px;
  }

  /* メインレイアウトを縦積み1カラム化 */
  .main-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  .ritual-chamber {
    padding: 14px 10px;
    width: 100%;
    border-radius: 14px;
  }

  .ritual-chamber-header {
    margin-bottom: 6px;
  }

  .circle-container {
    width: 240px;
    height: 240px;
    margin: 4px 0 10px;
  }

  .outer-circle {
    width: 230px;
    height: 230px;
  }

  .rune-circle {
    width: 215px;
    height: 215px;
  }

  .inner-circle {
    width: 135px;
    height: 135px;
  }

  .btn-summon-main {
    width: 100%;
    max-width: 300px;
    font-size: 14px;
    padding: 11px 16px;
    margin: 4px 0 8px;
  }

  .altar-chamber {
    padding: 12px 8px;
    width: 100%;
    border-radius: 14px;
  }

  .altar-tabs {
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .tab-btn {
    padding: 8px 6px;
    font-size: 12px;
    gap: 4px;
    border-radius: 10px;
  }

  /* アイテムグリッドをスマホで綺麗な2カラムに */
  .item-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }

  .item-card {
    padding: 12px 8px;
    min-height: auto;
  }

  .item-img-wrapper {
    width: 56px;
    height: 56px;
  }

  .item-img {
    max-width: 48px;
    max-height: 48px;
  }

  .item-name {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .item-desc {
    font-size: 10px;
    line-height: 1.3;
  }

  .alchemy-banner, .yith-banner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 12px;
  }

  .btn-alchemy, .btn-yith-banner {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .resource-group {
    grid-template-columns: 1fr;
  }

  .resource-card {
    grid-column: span 1 !important;
  }

  .circle-container {
    width: 220px;
    height: 220px;
  }

  .outer-circle {
    width: 215px;
    height: 215px;
  }

  .rune-circle {
    width: 200px;
    height: 200px;
  }

  .inner-circle {
    width: 120px;
    height: 120px;
  }

  .item-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

@media (max-width: 480px) {
  /* 召喚陣をスマホ画面にジャストフィットさせる調整 */
  .circle-container {
    width: 240px;
    height: 240px;
    margin: 5px 0 10px;
  }

  .outer-circle {
    width: 235px;
    height: 235px;
  }

  .rune-circle {
    width: 220px;
    height: 220px;
  }

  .inner-circle {
    width: 135px;
    height: 135px;
  }

  .ritual-verse-val {
    font-size: 26px;
  }

  .ritual-cost-badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* モーダル表示のスマホ対応 */
  .modal-card {
    padding: 20px 14px;
    width: 90%;
    max-width: 320px;
  }

  .modal-img-deity {
    width: 150px;
    height: 150px;
  }

  .modal-img-artifact, .modal-img-chimera {
    width: 90px;
    height: 90px;
  }
}

/* ==========================================================================
   イースの大いなる種族の時空交換所 スタイル
   ========================================================================== */
.yith-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.yith-banner-info h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #34d399;
}

.yith-banner-info p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.btn-yith-banner {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  transition: all 0.2s ease;
}

.btn-yith-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
}

.yith-modal-card {
  width: 94%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  background: radial-gradient(circle at top, rgba(14, 22, 38, 0.98) 0%, rgba(8, 10, 20, 0.98) 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.5);
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.95), 0 0 45px rgba(16, 185, 129, 0.3);
  border-radius: 20px;
}

/* イースの時空図書館 ヒーローバナーヘッダー */
.yith-header-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
  min-height: 155px;
}

.yith-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/yith_library_banner.jpg');
  background-size: cover;
  background-position: center 32%;
  z-index: 0;
  filter: saturate(1.2) brightness(0.95);
  transition: transform 12s ease;
}

.yith-header-hero:hover .yith-hero-bg {
  transform: scale(1.04);
}

.yith-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(6, 8, 18, 0.94) 0%, rgba(8, 16, 28, 0.78) 45%, rgba(5, 10, 24, 0.9) 100%);
  z-index: 1;
}

.yith-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}

.yith-avatar-container {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yith-avatar-portal {
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.4) 0%, rgba(6, 182, 212, 0.25) 55%, transparent 75%);
  border: 1px dashed rgba(52, 211, 153, 0.5);
  animation: yith-portal-spin 14s linear infinite;
}

@keyframes yith-portal-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.yith-avatar-img {
  width: 105px;
  height: 105px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(52, 211, 153, 0.8)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.9));
  animation: yith-float 4s infinite ease-in-out;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 2;
}

@keyframes yith-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

.yith-dialog-box {
  flex: 1;
  background: rgba(6, 10, 22, 0.82);
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.1), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.yith-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.yith-badge {
  background: linear-gradient(135deg, #059669, #0284c7);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  letter-spacing: 0.5px;
}

.yith-name {
  font-size: 15px;
  font-weight: 800;
  color: #6ee7b7;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
  letter-spacing: 0.5px;
}

.yith-bubble-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #f1f5f9;
  font-style: italic;
  min-height: 42px;
  transition: opacity 0.3s ease;
}

.yith-cooldown-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 10, 20, 0.75);
  border: 1px solid rgba(52, 211, 153, 0.25);
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* イース取引メニュー選択 */
.yith-menu-view {
  padding: 6px 0 16px;
}

.yith-menu-intro {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #a7f3d0;
  margin-bottom: 18px;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.yith-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.yith-mode-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: radial-gradient(circle at left, rgba(16, 185, 129, 0.08) 0%, rgba(10, 15, 28, 0.85) 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.35);
  border-radius: 16px;
  padding: 18px 22px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.yith-mode-card:hover {
  background: radial-gradient(circle at left, rgba(16, 185, 129, 0.2) 0%, rgba(16, 26, 46, 0.95) 100%);
  border-color: #34d399;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35), 0 0 20px rgba(52, 211, 153, 0.2);
}

.yith-mode-card.special {
  border-color: rgba(168, 85, 247, 0.6);
  background: radial-gradient(circle at left, rgba(168, 85, 247, 0.15) 0%, rgba(20, 16, 40, 0.9) 100%);
}

.yith-mode-card.special:hover {
  background: radial-gradient(circle at left, rgba(168, 85, 247, 0.28) 0%, rgba(32, 20, 58, 0.95) 100%);
  border-color: #c084fc;
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(168, 85, 247, 0.4), 0 0 25px rgba(168, 85, 247, 0.3);
}

.mode-icon {
  font-size: 34px;
  color: #34d399;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.3);
  flex-shrink: 0;
}

.mode-icon.special {
  color: #e879f9;
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(232, 121, 249, 0.5);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.mode-info {
  flex: 1;
}

.mode-title {
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.badge-special {
  font-size: 11px;
  background: linear-gradient(135deg, #a855f7, #38bdf8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.mode-cost {
  font-size: 13px;
  color: #38bdf8;
  margin-bottom: 4px;
}

.mode-cost strong {
  color: #facc15;
  font-size: 14px;
}

.mode-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.mode-arrow {
  color: #64748b;
  font-size: 18px;
  transition: transform 0.2s ease;
}

.yith-mode-card:hover .mode-arrow {
  transform: translateX(4px);
  color: #f1f5f9;
}

/* 交換画面トップバー */
.yith-exchange-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-yith-back {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-yith-back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: #fff;
}

.yith-mode-indicator {
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
}

.yith-special-preview-card {
  background: rgba(20, 15, 35, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
}

.special-preview-title {
  font-size: 12px;
  color: #c084fc;
  font-weight: 700;
  margin-bottom: 6px;
}

.special-preview-desc {
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.4;
}

/* 銀の鍵モーダル用 */
.silver-key-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.silver-key-card:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  transform: translateY(-2px);
}

.silver-key-card.selected {
  background: rgba(56, 189, 248, 0.25);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}

.silver-key-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 6px;
}

.silver-key-name {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
}

.yith-bottom-close {
  margin-top: 12px;
  text-align: center;
}

.cooldown-timer {
  font-family: monospace;
  font-weight: 700;
  font-size: 15px;
  color: #fbbf24;
}

.yith-section {
  margin-bottom: 16px;
}

.yith-section h4 {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 8px 0;
}

.count-badge {
  color: #34d399;
  font-weight: 700;
}

.yith-artifact-picker-grid, .yith-target-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.yith-picker-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.yith-picker-item:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.yith-picker-item.selected {
  background: rgba(16, 185, 129, 0.25);
  border: 1.5px solid #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.yith-picker-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 4px;
}

.yith-picker-name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.yith-picker-count {
  font-size: 10px;
  color: var(--text-muted);
}

.yith-sim-card {
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.sim-title {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.sim-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.sim-val {
  font-weight: 700;
}

.sim-diff.pos { color: #34d399; font-weight: 700; }
.sim-diff.neg { color: #f87171; font-weight: 700; }
.sim-diff.neutral { color: #94a3b8; }

.btn-yith-exchange {
  width: 100%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
  transition: all 0.2s ease;
}

.btn-yith-exchange:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.yith-confirm-card {
  border: 1.5px solid #f59e0b;
}

.yith-confirm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f59e0b;
  margin-bottom: 12px;
}

.yith-confirm-msg {
  font-size: 13px;
  line-height: 1.5;
  color: #e2e8f0;
  margin-bottom: 16px;
}

.yith-confirm-details {
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 20px;
}

.confirm-item-row {
  margin-bottom: 4px;
}

.btn-confirm-yes {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.yith-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 4px;
}

.btn-step {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}

.btn-step:hover:not(:disabled) {
  background: #10b981;
  color: #fff;
}

.btn-step:disabled {
  opacity: 0.3;
  border-color: #64748b;
  color: #64748b;
  cursor: not-allowed;
}

.step-val {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- トースト全体アナウンスメント --- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-banner {
  pointer-events: auto;
  min-width: 280px;
  max-width: 380px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast-banner.toast-fadeout {
  animation: toastFadeOut 0.4s ease forwards;
}

.toast-icon {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.toast-text {
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.4;
}

/* タイプ別カラー定義 */
.toast-banner.toast-deity {
  border-color: #f59e0b;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}
.toast-banner.toast-deity .toast-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
.toast-banner.toast-deity .toast-title {
  color: #fbbf24;
}

.toast-banner.toast-mutation {
  border-color: #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.toast-banner.toast-mutation .toast-icon {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}
.toast-banner.toast-mutation .toast-title {
  color: #c084fc;
}

.toast-banner.toast-san_loss {
  border-color: #ef4444;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.toast-banner.toast-san_loss .toast-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.toast-banner.toast-san_loss .toast-title {
  color: #f87171;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}
.toast-banner.toast-reincarnation {
  border-color: #ec4899;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4), 0 0 30px rgba(168, 85, 247, 0.3);
  background: linear-gradient(135deg, rgba(30, 10, 40, 0.95), rgba(15, 23, 42, 0.95));
}
.toast-banner.toast-reincarnation .toast-icon {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}
.toast-banner.toast-reincarnation .toast-title {
  background: linear-gradient(90deg, #f472b6, #c084fc, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ===================================================
   輪廻デュアルカラーテーマ (0〜5周目)
   0: 深海緑 (#20e090) × 妖異紫 (#a855f7)
   1: 妖紫   (#a855f7) × マゼンタ (#ec4899)
   2: シアン (#06b6d4) × 蒼藍     (#3b82f6)
   3: 深紅   (#f43f5e) × 橙炎     (#f97316)
   4: 黄金   (#fbbf24) × 濃紫     (#8b5cf6)
   5+: 銀白  (#ffffff) × 虹色極彩 (Rainbow)
=================================================== */

/* 輪廻バッジ共通 */
.reincarnation-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

/* --- テーマ1: 妖紫 × マゼンタ (1周目) --- */
.reincarnation-theme-1 .outer-circle {
  border-color: #a855f7 !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6) !important;
}
.reincarnation-theme-1 .rune-svg {
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8)) !important;
}
.reincarnation-theme-1 .rune-svg text {
  fill: #c084fc !important;
}
.reincarnation-theme-1 .star-svg {
  filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.8)) !important;
}
.reincarnation-theme-1 .inner-circle {
  border-color: #ec4899 !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.6) !important;
}
.reincarnation-theme-1 .ritual-icon {
  color: #f472b6 !important;
  text-shadow: 0 0 15px rgba(236, 72, 153, 0.8);
}
.reincarnation-theme-1 .ritual-verse-val {
  color: #f472b6 !important;
  text-shadow: 0 0 15px rgba(236, 72, 153, 0.6) !important;
}
.reincarnation-theme-1 .btn-summon-main {
  border-color: #a855f7 !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3) !important;
}
.member-card.reincarnation-theme-1 {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.15);
}
.member-card.reincarnation-theme-1 .member-avatar {
  border-color: #a855f7 !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}
.member-card.reincarnation-theme-1 .member-prod-tag {
  color: #f472b6 !important;
  background: rgba(236, 72, 153, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}
.reincarnation-badge.r-1 {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.6);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

/* --- テーマ2: シアン × 蒼藍 (2周目) --- */
.reincarnation-theme-2 .outer-circle {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.6) !important;
}
.reincarnation-theme-2 .rune-svg {
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.8)) !important;
}
.reincarnation-theme-2 .rune-svg text {
  fill: #22d3ee !important;
}
.reincarnation-theme-2 .star-svg {
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.8)) !important;
}
.reincarnation-theme-2 .inner-circle {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6) !important;
}
.reincarnation-theme-2 .ritual-icon {
  color: #60a5fa !important;
  text-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
}
.reincarnation-theme-2 .ritual-verse-val {
  color: #60a5fa !important;
  text-shadow: 0 0 15px rgba(59, 130, 246, 0.6) !important;
}
.reincarnation-theme-2 .btn-summon-main {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3) !important;
}
.member-card.reincarnation-theme-2 {
  border-color: rgba(6, 182, 212, 0.5) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}
.member-card.reincarnation-theme-2 .member-avatar {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
.member-card.reincarnation-theme-2 .member-prod-tag {
  color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
}
.reincarnation-badge.r-2 {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(59, 130, 246, 0.3));
  color: #38bdf8;
  border: 1px solid rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

/* --- テーマ3: 深紅 × 橙炎 (3周目) --- */
.reincarnation-theme-3 .outer-circle {
  border-color: #f43f5e !important;
  box-shadow: 0 0 25px rgba(244, 63, 94, 0.6) !important;
}
.reincarnation-theme-3 .rune-svg {
  filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.8)) !important;
}
.reincarnation-theme-3 .rune-svg text {
  fill: #fb7185 !important;
}
.reincarnation-theme-3 .star-svg {
  filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.8)) !important;
}
.reincarnation-theme-3 .inner-circle {
  border-color: #f97316 !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.6) !important;
}
.reincarnation-theme-3 .ritual-icon {
  color: #fb923c !important;
  text-shadow: 0 0 15px rgba(249, 115, 22, 0.8);
}
.reincarnation-theme-3 .ritual-verse-val {
  color: #fb923c !important;
  text-shadow: 0 0 15px rgba(249, 115, 22, 0.6) !important;
}
.reincarnation-theme-3 .btn-summon-main {
  border-color: #f43f5e !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.3) !important;
}
.member-card.reincarnation-theme-3 {
  border-color: rgba(244, 63, 94, 0.5) !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.15);
}
.member-card.reincarnation-theme-3 .member-avatar {
  border-color: #f43f5e !important;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}
.member-card.reincarnation-theme-3 .member-prod-tag {
  color: #fb923c !important;
  background: rgba(249, 115, 22, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
}
.reincarnation-badge.r-3 {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(249, 115, 22, 0.3));
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.6);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.4);
}

/* --- テーマ4: 黄金 × 濃紫 (4周目) --- */
.reincarnation-theme-4 .outer-circle {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.6) !important;
}
.reincarnation-theme-4 .rune-svg {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)) !important;
}
.reincarnation-theme-4 .rune-svg text {
  fill: #fde047 !important;
}
.reincarnation-theme-4 .star-svg {
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.8)) !important;
}
.reincarnation-theme-4 .inner-circle {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.6) !important;
}
.reincarnation-theme-4 .ritual-icon {
  color: #a78bfa !important;
  text-shadow: 0 0 15px rgba(139, 92, 246, 0.8);
}
.reincarnation-theme-4 .ritual-verse-val {
  color: #fde047 !important;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.6) !important;
}
.reincarnation-theme-4 .btn-summon-main {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3) !important;
}
.member-card.reincarnation-theme-4 {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}
.member-card.reincarnation-theme-4 .member-avatar {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}
.member-card.reincarnation-theme-4 .member-prod-tag {
  color: #fde047 !important;
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}
.reincarnation-badge.r-4 {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(139, 92, 246, 0.3));
  color: #fde047;
  border: 1px solid rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* --- テーマ5: 銀白 × 虹色極彩 (5周目〜) --- */
.reincarnation-theme-5 .outer-circle {
  border-color: #ffffff !important;
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.8), 0 0 50px rgba(168, 85, 247, 0.5) !important;
}
.reincarnation-theme-5 .rune-svg {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) !important;
}
.reincarnation-theme-5 .rune-svg text {
  fill: #ffffff !important;
}
.reincarnation-theme-5 .star-svg {
  filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.9)) drop-shadow(0 0 25px rgba(56, 189, 248, 0.8)) !important;
}
.reincarnation-theme-5 .inner-circle {
  border: 2px solid #ffffff !important;
  border-image: none !important;
  box-shadow: 0 0 15px #ffffff, 0 0 25px #f43f5e, 0 0 35px #38bdf8, 0 0 45px #a855f7 !important;
}
.reincarnation-theme-5 .ritual-icon {
  color: #ffffff !important;
  text-shadow: 0 0 15px #f472b6, 0 0 25px #a855f7;
}
.reincarnation-theme-5 .ritual-verse-val {
  background: linear-gradient(90deg, #f472b6, #fbbf24, #34d399, #38bdf8, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
}
.reincarnation-theme-5 .btn-summon-main {
  border-image: none !important;
  border: 2px solid transparent !important;
  background: linear-gradient(135deg, #7e22ce, #4c1d95) padding-box,
              linear-gradient(90deg, #f43f5e, #fbbf24, #20e090, #38bdf8, #a855f7) border-box !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(236, 72, 153, 0.5), 0 0 40px rgba(56, 189, 248, 0.4) !important;
}
.reincarnation-theme-5 .btn-summon-main:disabled {
  background: rgba(255, 255, 255, 0.04) padding-box,
              linear-gradient(90deg, rgba(244, 63, 94, 0.4), rgba(56, 189, 248, 0.4)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.member-card.reincarnation-theme-5 {
  border: 1px solid transparent !important;
  background: linear-gradient(rgba(10, 15, 28, 0.95), rgba(10, 15, 28, 0.95)) padding-box,
              linear-gradient(135deg, #f43f5e, #fbbf24, #20e090, #06b6d4, #a855f7) border-box !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.35);
}
.member-card.reincarnation-theme-5 .member-avatar {
  border-color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}
.member-card.reincarnation-theme-5 .member-prod-tag {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.25), rgba(56, 189, 248, 0.25)) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 15px rgba(56, 189, 248, 0.3);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.reincarnation-badge.r-5 {
  background: linear-gradient(135deg, #f43f5e, #fbbf24, #20e090, #38bdf8, #a855f7);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

/* ===================================================
   輪廻パーティクルエフェクト (周回数に応じたきらめき)
=================================================== */
.reincarnation-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}

.r-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat 3s ease-in-out infinite alternate, particleTwinkle 2s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes particleFloat {
  0% {
    transform: translate(var(--tx), var(--ty)) scale(0.7);
  }
  100% {
    transform: translate(calc(var(--tx) + var(--drift-x)), calc(var(--ty) + var(--drift-y))) scale(1.3);
  }
}

@keyframes particleTwinkle {
  0%, 100% {
    opacity: 0.25;
    filter: brightness(0.8) blur(0.5px);
  }
  50% {
    opacity: 1;
    filter: brightness(1.7) blur(0px);
  }
}

/* ===================================================
   ダゴンの眷属「深きものども」浮遊ポップアップ
=================================================== */
.floating-deep-one {
  position: fixed;
  width: 108px;
  height: 108px;
  cursor: pointer;
  z-index: 999;
  user-select: none;
  filter: drop-shadow(0 0 16px rgba(6, 182, 212, 0.9)) drop-shadow(0 0 28px rgba(34, 211, 238, 0.6));
  animation: deepOneFloat 13s ease-in-out forwards, deepOneWiggle 2s infinite ease-in-out;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.floating-deep-one:hover {
  transform: scale(1.18);
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, 1)) brightness(1.3);
}

.floating-deep-one:active {
  transform: scale(0.92);
}

.floating-deep-one img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.deep-one-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(6, 182, 212, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
  pointer-events: none;
  animation: bubbleRise 2s infinite ease-out;
}

@keyframes deepOneFloat {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  85% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.5);
  }
}

@keyframes deepOneWiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes bubbleRise {
  0% {
    opacity: 0.8;
    transform: translateY(0) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(1.4);
  }
}

/* 捕獲時のフロートテキスト */
.deep-one-float-text {
  position: fixed;
  font-family: 'Cinzel', 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
  z-index: 1000;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(6, 182, 212, 0.8);
  animation: floatTextUp 1.8s ease-out forwards;
}

.deep-one-float-text.treasure {
  color: #38bdf8;
  font-size: 22px;
}

.deep-one-float-text.fever {
  color: #f43f5e;
  font-size: 24px;
  text-shadow: 0 0 15px rgba(244, 63, 94, 0.9);
}

.deep-one-float-text.capture {
  color: #34d399;
}

.deep-one-float-text.whisper {
  color: #a855f7;
}

@keyframes floatTextUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1.15);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -60px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90px) scale(0.8);
  }
}

/* ===================================================
   狂気の津波 (7倍フィーバー) 画面エフェクト
=================================================== */
.fever-active-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.9), rgba(244, 63, 94, 0.9));
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 0 25px rgba(244, 63, 94, 0.8), 0 0 40px rgba(6, 182, 212, 0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: feverPulse 1s infinite alternate;
  pointer-events: none;
}

@keyframes feverPulse {
  0% { transform: translateX(-50%) scale(1); box-shadow: 0 0 20px rgba(244, 63, 94, 0.7); }
  100% { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 35px rgba(244, 63, 94, 1), 0 0 50px rgba(6, 182, 212, 0.9); }
}

body.fever-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  border: 4px solid rgba(6, 182, 212, 0.7);
  box-shadow: inset 0 0 50px rgba(6, 182, 212, 0.4), inset 0 0 100px rgba(244, 63, 94, 0.3);
  pointer-events: none;
  z-index: 450;
  animation: feverBorderPulse 1.5s infinite alternate;
}

@keyframes feverBorderPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ===================================================
   同調拒絶 (耳ミュート・スピーカーミュート) スタイル
=================================================== */
.member-card.member-deaf {
  opacity: 0.65;
  filter: grayscale(0.5);
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(30, 10, 15, 0.5) !important;
}

.member-card.member-deaf:hover {
  opacity: 0.9;
}

.deaf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.6);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.buff-badge.buff-badge-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  font-weight: 700;
}

/* ===================================================
   輪廻スキル（超越の刻印）スタイル
=================================================== */

/* モーダル内カードグリッド */
.skill-choice-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .skill-choice-cards-container {
    grid-template-columns: 1fr;
  }
}

.skill-choice-card {
  position: relative;
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid rgba(168, 85, 247, 0.35);
  border-radius: 16px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.skill-choice-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 35px rgba(168, 85, 247, 0.4);
  border-color: #c084fc;
}

/* カテゴリー別装飾 */
.skill-choice-card.category-flesh {
  border-color: rgba(244, 63, 94, 0.4);
}
.skill-choice-card.category-flesh:hover {
  border-color: #fb7185;
  box-shadow: 0 12px 35px rgba(244, 63, 94, 0.4);
}

.skill-choice-card.category-coven {
  border-color: rgba(168, 85, 247, 0.4);
}
.skill-choice-card.category-coven:hover {
  border-color: #c084fc;
  box-shadow: 0 12px 35px rgba(168, 85, 247, 0.4);
}

.skill-choice-card.category-astral {
  border-color: rgba(6, 182, 212, 0.4);
}
.skill-choice-card.category-astral:hover {
  border-color: #38bdf8;
  box-shadow: 0 12px 35px rgba(6, 182, 212, 0.4);
}

.skill-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-flesh .skill-card-badge { background: rgba(244, 63, 94, 0.2); color: #fda4af; border-color: rgba(244, 63, 94, 0.4); }
.category-coven .skill-card-badge { background: rgba(168, 85, 247, 0.2); color: #e9d5ff; border-color: rgba(168, 85, 247, 0.4); }
.category-astral .skill-card-badge { background: rgba(6, 182, 212, 0.2); color: #bae6fd; border-color: rgba(6, 182, 212, 0.4); }

.skill-level-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.9);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  z-index: 10;
  letter-spacing: 0.5px;
}

.skill-level-indicator.is-new {
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  color: #ffffff !important;
  border: 1px solid #fecdd3;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.8), 0 0 20px rgba(236, 72, 153, 0.5);
  animation: pulseNewBadge 1.5s infinite alternate ease-in-out;
}

@keyframes pulseNewBadge {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.08); filter: brightness(1.2); }
}

.skill-card-img-wrapper {
  width: 150px;
  height: 150px;
  margin: 22px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.35) 75%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.skill-card-img {
  width: 136px;
  height: 136px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.7));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.skill-choice-card:hover .skill-card-img {
  transform: scale(1.08) rotate(2deg);
  filter: drop-shadow(0 0 24px rgba(192, 132, 252, 0.9));
}

.skill-card-fallback-icon {
  font-size: 64px;
  color: #c084fc;
  filter: drop-shadow(0 0 16px #c084fc);
}

.skill-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.skill-card-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 16px;
  flex-grow: 1;
}

.btn-select-skill {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #a855f7, #7e22ce);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.skill-choice-card:hover .btn-select-skill {
  background: linear-gradient(135deg, #c084fc, #9333ea);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.7);
}

/* 魂の刻印タブの習得スキルカード一覧 */
.user-skill-card {
  position: relative;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.user-skill-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: #c084fc;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25);
  transform: translateY(-2px);
}

.user-skill-icon-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-skill-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.5));
}

.user-skill-info {
  flex-grow: 1;
}

.user-skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.user-skill-name {
  font-size: 14px;
  font-weight: 800;
  color: #f1f5f9;
}

.user-skill-lvl-badge {
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.user-skill-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

/* ==========================================
   神格降臨演出 (重厚な暗転・前兆演出)
   ========================================== */
.deity-manifest-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.deity-manifest-overlay.active {
  opacity: 1;
}

.deity-manifest-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(16, 4, 28, 0.95) 0%, rgba(2, 2, 6, 0.98) 70%, #000 100%);
  animation: deity-void-pulse 1.8s infinite ease-in-out;
}

@keyframes deity-void-pulse {
  0%, 100% {
    filter: brightness(0.9) contrast(1.1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.3) contrast(1.3);
    transform: scale(1.02);
  }
}

.deity-manifest-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: deity-manifest-rise 1.6s ease-out forwards;
}

@keyframes deity-manifest-rise {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(15px);
    filter: blur(6px);
  }
  40% {
    opacity: 1;
    filter: blur(0px);
  }
  85% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: scale(1.02) translateY(-4px);
  }
}

.deity-manifest-eye {
  font-size: 52px;
  color: #c084fc;
  text-shadow: 0 0 30px #a855f7, 0 0 60px #7e22ce, 0 0 90px #dc2626;
  margin-bottom: 20px;
  animation: deity-eye-stare 1.8s infinite ease-in-out;
}

@keyframes deity-eye-stare {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.6));
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 35px rgba(220, 38, 38, 0.9)) drop-shadow(0 0 60px rgba(168, 85, 247, 0.9));
  }
}

.deity-manifest-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(192, 132, 252, 0.8), 0 0 40px rgba(0, 0, 0, 0.9);
  margin-bottom: 8px;
}

.deity-manifest-sub {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  color: #a855f7;
  letter-spacing: 5px;
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}

/* --- ハンバーガーメニューボタン --- */
.btn-menu-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(26, 20, 48, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.5);
  border-radius: 12px;
  color: #c084fc;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.btn-menu-hamburger:hover {
  background: rgba(168, 85, 247, 0.25);
  color: #fff;
  border-color: #c084fc;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
}

.btn-menu-hamburger:active {
  transform: translateY(0);
}

/* --- 手引書（遊び方ガイド）モーダル --- */
.modal-guide-card {
  max-width: 760px;
  width: 92%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top, rgba(24, 18, 42, 0.96) 0%, rgba(10, 8, 18, 0.98) 100%);
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.25);
  padding: 24px;
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.guide-icon {
  font-size: 24px;
  color: #c084fc;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
}

.modal-close-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.modal-close-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.guide-tabs {
  display: flex;
  gap: 10px;
  margin: 16px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.guide-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-tab-btn:hover {
  color: #fff;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
}

.guide-tab-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.2));
  border-color: #c084fc;
  color: #fff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.guide-tab-btn.danger-tab {
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.guide-tab-btn.danger-tab:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fff;
}

.guide-tab-btn.danger-tab.active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(185, 28, 28, 0.3));
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.guide-tab-pane {
  display: block;
}

.guide-tab-pane.hidden {
  display: none !important;
}

.guide-body-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.modal-rules-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.system-guide-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.system-guide-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
}

.system-guide-box h4 {
  font-size: 15px;
  color: #38bdf8;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.system-guide-box p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* --- メニュー内 危険地帯（初期化セクション） --- */
.danger-zone-box {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 14px;
}

.danger-zone-header {
  font-size: 13px;
  font-weight: 800;
  color: #f87171;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.danger-zone-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 12px;
}

.btn-danger-reset {
  width: 100%;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.8), rgba(153, 27, 27, 0.9));
  border: 1px solid #ef4444;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.btn-danger-reset:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

/* --- 完全初期化 警告確認モーダル --- */
.hard-reset-confirm-card {
  max-width: 480px;
  text-align: center;
  border-color: rgba(239, 68, 68, 0.6);
  background: radial-gradient(circle at top, rgba(40, 10, 20, 0.98) 0%, rgba(14, 8, 16, 0.98) 100%);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(239, 68, 68, 0.35);
  padding: 28px 24px;
}

.hard-reset-icon-box {
  font-size: 48px;
  color: #ef4444;
  margin-bottom: 14px;
  animation: pulse-danger-icon 2s infinite ease-in-out;
}

@keyframes pulse-danger-icon {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(239, 68, 68, 0.9)); }
}

.hard-reset-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.hard-reset-warning-text {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.4);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  margin-bottom: 8px;
  text-align: left;
}

.hard-reset-warning-text p {
  margin-bottom: 6px;
}

.hard-reset-warning-text p:last-child {
  margin-bottom: 0;
}

.highlight-danger {
  color: #f87171;
  font-weight: 800;
}

.btn-danger-confirm {
  flex: 1;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 1px solid #ef4444;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.4);
}

.btn-danger-confirm:hover {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(239, 68, 68, 0.7);
}

/* --- 全画面ホワイトアウト演出オーバーレイ --- */
.whiteout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.whiteout-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* リロード直後のホワイトアウト維持 */
html.preload-whiteout .whiteout-overlay {
  opacity: 1 !important;
  pointer-events: all !important;
  transition: none !important;
}

/* --- VCメンバーカード内 バフアコーディオン --- */
.member-buffs-accordion {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: all 0.2s ease;
}

.member-buffs-accordion[open] {
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(0, 0, 0, 0.4);
}

.member-buffs-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #c084fc;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color 0.2s ease;
}

.member-buffs-summary::-webkit-details-marker {
  display: none;
}

.member-buffs-summary:hover {
  color: #e9d5ff;
}

.member-buffs-summary .accordion-arrow {
  font-size: 11px;
  transition: transform 0.25s ease;
  color: var(--text-muted);
}

.member-buffs-accordion[open] .accordion-arrow {
  transform: rotate(180deg);
  color: #c084fc;
}

.member-buffs-list {
  padding: 8px 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.empty-buff-text {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* --- レスポンシブ対応 (Mobile / Tablet / PC) --- */
@media screen and (max-width: 768px) {
  #app-screen {
    padding: 56px 8px 16px;
  }

  /* 最上部 固定ナビゲーションバー */
  .app-top-nav {
    height: 46px;
    border-radius: 0;
  }

  .app-top-nav-inner {
    padding: 0 10px;
  }

  .brand-eye {
    font-size: 16px;
  }

  .brand-title {
    font-size: 13px;
    letter-spacing: 0.5px;
  }

  .brand-subtitle {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .btn-menu-hamburger {
    width: 34px;
    height: 34px;
    font-size: 14px;
    border-radius: 8px;
  }

  /* スマホ版ヘッダーHUD: 2行極小スリム化 */
  .status-bar {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    gap: 6px;
    margin-bottom: 10px;
    border-radius: 12px;
  }

  .status-bar > .user-info {
    width: 100%;
    justify-content: flex-start;
    padding-right: 0;
    gap: 8px;
  }

  .avatar-wrapper, #user-avatar {
    width: 36px;
    height: 36px;
  }

  .username {
    font-size: 13px;
    gap: 4px;
  }

  .user-stage-row {
    gap: 4px;
  }

  .mutation-badge {
    font-size: 9px;
    padding: 1px 4px;
  }

  .mutation-title {
    font-size: 10px;
  }

  /* スマホ時はヘッダーの節カウンター・VCカードを非表示（召喚陣とメニューで確認） */
  .desktop-only-hud {
    display: none !important;
  }

  /* 下段: SAN値バー（スリム＆全幅） */
  .hud-san-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .hud-san-section .resource-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .san-bar-wrapper {
    height: 16px;
  }

  .san-text {
    font-size: 9px;
    line-height: 16px;
  }

  /* メインレイアウト */
  .main-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ritual-chamber {
    padding: 12px 8px;
  }

  .ritual-chamber-header {
    margin-bottom: 6px;
  }

  .circle-stage-container {
    width: 260px;
    height: 260px;
    margin: 8px auto 12px;
  }

  .summon-circle {
    width: 230px;
    height: 230px;
  }

  .btn-do-summon {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* --- 宝物庫・アイテムアイコン一覧グリッド --- */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 12px;
  padding: 8px 0;
}

.item-icon-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: rgba(18, 14, 32, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  user-select: none;
}

.item-icon-card:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.item-icon-card:active {
  transform: scale(0.96);
}

/* レアリティ別カード装飾枠 */
.item-icon-card.deity {
  border-color: rgba(251, 191, 36, 0.85);
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(18, 14, 32, 0.9) 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45), inset 0 0 12px rgba(251, 191, 36, 0.3);
}

.item-icon-card.deity:hover {
  box-shadow: 0 0 28px rgba(251, 191, 36, 0.8), 0 8px 25px rgba(0,0,0,0.8);
}

.item-icon-card.artifact {
  border-color: rgba(168, 85, 247, 0.8);
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(18, 14, 32, 0.9) 100%);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}

.item-icon-card.chimera {
  border-color: rgba(244, 63, 94, 0.85);
  background: radial-gradient(circle, rgba(244, 63, 94, 0.25) 0%, rgba(18, 14, 32, 0.9) 100%);
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.4);
}

.item-icon-card.yith {
  border-color: rgba(56, 189, 248, 0.85);
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(18, 14, 32, 0.9) 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.item-icon-card.trash {
  border-color: rgba(100, 116, 139, 0.5);
  background: rgba(30, 41, 59, 0.4);
}

/* 画像と所持数バッジ */
.item-icon-card .item-img-wrapper {
  width: 82%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  transition: transform 0.25s ease;
}

.item-icon-card:hover .item-icon-img {
  transform: scale(1.1);
}

.item-count-badge {
  position: absolute;
  bottom: 4px;
  right: 5px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
  z-index: 1;
}

/* --- アイテム詳細モーダル --- */
.modal-item-detail-card {
  max-width: 440px;
  width: 90%;
  text-align: center;
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.3);
  padding: 24px;
}

.modal-item-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.detail-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.detail-item-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.item-type-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.item-type-badge.deity { background: rgba(251, 191, 36, 0.25); color: #fde047; border-color: #fbbf24; }
.item-type-badge.artifact { background: rgba(168, 85, 247, 0.25); color: #e9d5ff; border-color: #c084fc; }
.item-type-badge.chimera { background: rgba(244, 63, 94, 0.25); color: #fecdd3; border-color: #fb7185; }
.item-type-badge.yith { background: rgba(56, 189, 248, 0.25); color: #bae6fd; border-color: #38bdf8; }
.item-type-badge.trash { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border-color: #64748b; }

.detail-img-box {
  width: 130px;
  height: 130px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(10, 8, 20, 0.9) 100%);
  border: 2px solid rgba(168, 85, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.2);
}

.detail-img-large {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.8));
}

.detail-count-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--text-muted);
}

.detail-count-val {
  font-weight: 800;
  color: #fff;
  font-size: 16px;
}

.detail-desc-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
  margin-bottom: 16px;
}

.detail-desc-title {
  font-size: 12px;
  font-weight: 700;
  color: #c084fc;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-desc-text {
  font-size: 13px;
  line-height: 1.6;
  color: #e2e8f0;
  white-space: pre-wrap;
}

.btn-detail-use {
  width: 100%;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.btn-detail-use:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

/* 神格詳細モーダル：大迫力3倍サイズ */
.modal-item-detail-card.is-deity {
  max-width: 560px;
  border-color: rgba(251, 191, 36, 0.75);
  background: radial-gradient(circle at top, rgba(38, 22, 10, 0.98) 0%, rgba(12, 8, 20, 0.98) 100%);
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.92), 0 0 45px rgba(245, 158, 11, 0.4);
}

.detail-img-box.is-deity {
  width: 330px;
  height: 330px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(18, 14, 32, 0.95) 100%);
  border: 3px solid rgba(251, 191, 36, 0.85);
  box-shadow: 0 0 35px rgba(251, 191, 36, 0.5), inset 0 0 25px rgba(251, 191, 36, 0.3);
}

.detail-img-box.is-deity .detail-img-large {
  max-width: 95%;
  max-height: 95%;
  filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6)) drop-shadow(0 10px 25px rgba(0, 0, 0, 0.9));
  animation: pulse-deity-art 3s infinite ease-in-out;
}

@keyframes pulse-deity-art {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.5)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.9));
  }
  50% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 32px rgba(251, 191, 36, 0.85)) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.95));
  }
}

/* スマホ時のアイテムグリッド ＆ 神格モーダル調整 */
@media screen and (max-width: 600px) {
  .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 8px;
  }
  .item-count-badge {
    font-size: 10px;
    padding: 1px 4px;
    bottom: 2px;
    right: 3px;
  }
  .modal-item-detail-card.is-deity {
    max-width: 94%;
    padding: 16px 12px;
  }
  .detail-img-box.is-deity {
    width: 250px;
    height: 250px;
  }
}

/* --- 魂の刻印 (スキル) 正方形アイコンカード --- */
.item-icon-card.skill-icon-card {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(18, 14, 32, 0.9) 100%);
  border-color: rgba(168, 85, 247, 0.6);
}

.item-icon-card.skill-icon-card.category-astral {
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
}

.item-icon-card.skill-icon-card.category-chaos {
  border-color: rgba(244, 63, 94, 0.85);
  background: radial-gradient(circle, rgba(244, 63, 94, 0.2) 0%, rgba(18, 14, 32, 0.9) 100%);
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.4);
}

.item-icon-card.skill-icon-card.category-time {
  border-color: rgba(56, 189, 248, 0.85);
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(18, 14, 32, 0.9) 100%);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}

.skill-lvl-badge {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.item-type-badge.category-astral { background: rgba(168, 85, 247, 0.25); color: #e9d5ff; border-color: #c084fc; }
.item-type-badge.category-chaos { background: rgba(244, 63, 94, 0.25); color: #fecdd3; border-color: #fb7185; }
.item-type-badge.category-time { background: rgba(56, 189, 248, 0.25); color: #bae6fd; border-color: #38bdf8; }

/* --- 詳細能力値 コンパクト縦並びリスト --- */
.stats-compact-list {
  background: rgba(13, 10, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row:hover {
  background: rgba(168, 85, 247, 0.08);
}

.stat-row-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-row-label i {
  color: #c084fc;
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.stat-row-value {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.3px;
}

@media screen and (max-width: 600px) {
  .stat-row {
    padding: 6px 10px;
  }
  .stat-row-label {
    font-size: 11px;
    gap: 6px;
  }
  .stat-row-value {
    font-size: 12px;
  }

  .yith-modal-card {
    padding: 16px 12px;
    max-width: 96%;
  }
  .yith-hero-content {
    flex-direction: column;
    text-align: center;
    padding: 14px 12px;
    gap: 12px;
  }
  .yith-title-row {
    justify-content: center;
  }
  .yith-avatar-container {
    width: 80px;
    height: 80px;
  }
  .yith-avatar-portal {
    width: 75px;
    height: 75px;
  }
  .yith-avatar-img {
    width: 75px;
    height: 75px;
  }
}

@media screen and (max-width: 380px) {
  .circle-container {
    transform: scale(0.88);
    margin: 0 0 10px;
  }
}