/* ========================================================
   ⚔️ BOOK BATTLE TCCG - CYBER/FANTASY ARENA STYLES
======================================================== */
/* ========================================================
   ⚔️ BOOK BATTLE TCCG - 「五行の書物絵巻」デザイントークン
   墨と朱、そして金箔。書物の力を五行に見立てた
   トレーディングカードバトルの世界観。
======================================================== */
:root {
  --bb-bg: #14121A;
  --bb-bg-deep: #0A0910;
  --bb-panel: #1C1821;
  --bb-vermillion: #E63946;
  --bb-vermillion-deep: #A62633;
  --bb-gold: #D4AF37;
  --bb-gold-light: #F0D77B;
  --bb-p1: #E63946;
  --bb-p1-deep: #A62633;
  --bb-p2: #3A6EA5;
  --bb-p2-deep: #274E77;
  --bb-elem-wood: #5B8C5A;
  --bb-elem-fire: #E63946;
  --bb-elem-earth: #C08552;
  --bb-elem-metal: #C9C9C9;
  --bb-elem-water: #3A6EA5;
  --bb-text: #F3EFE6;
  --bb-text-sub: #ABA192;
  --bb-font-display: 'Shippori Mincho B1', 'Noto Serif JP', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'BIZ UDPGothic', 'Noto Sans JP', sans-serif; }

body {
  background: #090d16;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Header */
.battle-header {
  height: 60px;
  background: #0f172a;
  border-bottom: 2px solid #334155;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  user-select: none;
  -webkit-user-select: none;
}

.header-logo small {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 800;
  margin-left: 6px;
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.btn-debug-badge {
  background: #7c3aed;
  color: #ffffff;
  border: 1px solid #a78bfa;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
  animation: debugPulse 1.5s infinite alternate;
}

@keyframes debugPulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.battle-mode-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
}

.battle-mode-selector select {
  background: #1e293b;
  color: #ffffff;
  border: 1px solid #0284c7;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-back-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}

.btn-back-link:hover { color: #ffffff; }

/* Main Arena Split */
.battle-arena {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  gap: 16px;
  padding: 20px;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

.player-side {
  background: #0f172a;
  border-radius: 20px;
  border: 2px solid #1e293b;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative !important;
  overflow: hidden;
}

.p1-side {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, #0f172a 100%);
}

.p2-side {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, #0f172a 100%);
}

.player-banner {
  padding: 12px 18px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p1-banner { background: linear-gradient(90deg, #991b1b, #ef4444); }
.p2-banner { background: linear-gradient(90deg, #1e40af, #3b82f6); }

.player-tag {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.8);
  letter-spacing: 1px;
  display: block;
}

.player-name {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
}

.deck-count-badge {
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 800;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}

/* QR Summon Box */
.qr-summon-box {
  background: #1e293b;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  justify-content: center;
  border: 1px dashed #475569;
}

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.qr-code-view {
  width: 140px;
  height: 140px;
  background: #ffffff;
  padding: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.qr-code-view canvas, .qr-code-view img {
  width: 124px !important;
  height: 124px !important;
}

.qr-guide {
  font-size: 11.5px;
  text-align: center;
  color: #cbd5e1;
  line-height: 1.35;
}

/* Deck Slots Container */
.deck-slots-container {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  align-content: start;
}

/* Slot Card Design */
/* リッチ・トレカデザイン用のサイズ・見た目（旧: app.js からJSでDOM注入していたものを移設。
   移設前は同名セレクタが app.js 側に !important 付きで重複定義されており、
   このファイル側の定義は完全に無視される「死んだCSS」になっていた） */
.deck-card-slot {
  width: 130px; height: 195px; flex: 0 0 130px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid #475569; border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.1);
  padding: 4px; box-sizing: border-box; position: relative;
  transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; overflow: hidden;
}
.deck-card-slot::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.4) 100%); pointer-events: none; border-radius: 6px; z-index: 5; }
.deck-card-slot:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(255,255,255,0.2); z-index: 10; }

.deck-card-slot.empty {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.deck-card-slot.filled {
  border: 2px solid #f59e0b;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  padding: 8px;
  justify-content: space-between;
  animation: slotPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slotPopIn {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.slot-cover-wrap {
  flex: 1; min-height: 0; width: 100%; border-radius: 4px;
  overflow: hidden; background: #000; position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #334155;
}

.slot-cover-wrap img,
.slot-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot-cover-img { opacity: 0.9; transition: opacity 0.2s; }
.deck-card-slot:hover .slot-cover-img { opacity: 1; }

.slot-inner-title {
  font-size: 11px; font-weight: 900; color: #fff; background: rgba(0,0,0,0.6);
  padding: 3px 4px; border-radius: 2px; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; z-index: 2;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.slot-stats-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,0.8); padding: 3px 6px; border-radius: 4px;
  margin-top: 4px; z-index: 2; border-top: 1px solid rgba(255,255,255,0.1);
}
.slot-hp { font-size: 12px; font-weight: 900; color: #4ade80; }
.slot-elem { font-size: 14px; }

/* Center Stage */
.center-versus-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
}

.vs-logo-wrap {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #ef4444, #3b82f6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
  border: 4px solid #f59e0b;
}

.vs-badge {
  font-size: 36px;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.battle-status-display {
  width: 100%;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-sub {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.4;
}

.btn-start-battle {
  width: 100%;
  height: 54px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-start-battle:not(:disabled):hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.7);
}

.btn-start-battle:disabled {
  background: #334155;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
}

.element-chart-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  width: 100%;
}

.chart-title { font-size: 12px; font-weight: 700; color: #f59e0b; margin-bottom: 6px; }
.chart-desc { font-size: 10.5px; color: #94a3b8; }

/* TRADING CARD LANDING OVERLAY (自陣のセンターに大きく表示) */
.tc-landing-overlay {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 100 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  pointer-events: none !important; border-radius: 20px !important;
}

@keyframes tcSummonIn {
  0% { opacity: 0; transform: perspective(800px) rotateY(-180deg) scale(0.3); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg) scale(1); }
}

@keyframes tcShine {
  0% { transform: translateY(-100%) rotate(25deg); }
  100% { transform: translateY(100%) rotate(25deg); }
}

@keyframes tcFlyOut {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.1) translateY(180deg) rotate(15deg); }
}

/* REAL-TIME BATTLE STAGE & CLASH STYLES */
.deck-card-slot.knocked-out {
  opacity: 0.45 !important;
  filter: grayscale(80%) !important;
  border-color: #ef4444 !important;
}

.deck-card-slot.knocked-out::after {
  content: 'K.O.';
  position: absolute;
  font-size: 28px;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 10px #000;
  transform: rotate(-15deg);
}

.anim-attack-right { animation: attackRight 0.35s ease-in-out; }
@keyframes attackRight {
  0% { transform: translateX(0); }
  50% { transform: translateX(35px) scale(1.08); }
  100% { transform: translateX(0); }
}

.anim-attack-left { animation: attackLeft 0.35s ease-in-out; }
@keyframes attackLeft {
  0% { transform: translateX(0); }
  50% { transform: translateX(-35px) scale(1.08); }
  100% { transform: translateX(0); }
}

.anim-hit-shake { animation: hitShake 0.35s ease-in-out; }
@keyframes hitShake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 6px); }
  40% { transform: translate(8px, -6px); }
  60% { transform: translate(-6px, -4px); }
  80% { transform: translate(4px, 4px); }
  100% { transform: translate(0, 0); }
}

/* ダメージ/回復ポップの文字色は、カードの属性色（赤系・青系等）と衝突すると
   背景に溶け込んで読めなくなるため、白地＋濃色の縁取りで塗り分けて
   どのカード背景の上でも視認できるようにしている。 */
.dmg-pop-num {
  position: absolute; top: 25%; left: 50%; transform: translateX(-50%);
  font-size: 40px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 3px #450a0a; paint-order: stroke fill;
  text-shadow: 0 4px 10px rgba(0,0,0,0.85), 0 0 22px rgba(239,68,68,0.9);
  animation: popFly 2.4s ease-out forwards;
  pointer-events: none; z-index: 100; white-space: nowrap;
}
.dmg-pop-num.miss-text {
  -webkit-text-stroke-color: #0c4a6e;
  text-shadow: 0 4px 10px rgba(0,0,0,0.85), 0 0 22px rgba(56, 189, 248, 0.9);
}

.dmg-pop-num.critical {
  font-size: 48px; color: #fff7d6;
  -webkit-text-stroke-color: #7c2d12;
  text-shadow: 0 4px 12px rgba(0,0,0,0.9), 0 0 28px rgba(245, 158, 11, 0.95);
}

/* クリティカル発生時、ダメージ数値とは別に表示する「CRITICAL!」ラベル。
   以前は数値の末尾に文字列として連結していただけで、単なる装飾なしの
   丸文字になってしまい「きちんとしたクリティカル表示」になっていなかった。 */
.dmg-crit-label {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%) rotate(-6deg);
  font-size: 20px; font-weight: 900; font-style: italic; letter-spacing: 1px;
  color: #fff7d6; -webkit-text-stroke: 2px #7c2d12; paint-order: stroke fill;
  text-shadow: 0 3px 8px rgba(0,0,0,0.9), 0 0 16px rgba(245, 158, 11, 0.9);
  pointer-events: none; z-index: 101; white-space: nowrap;
  animation: critPop 2.4s ease-out forwards;
}
@keyframes critPop {
  0%   { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(0.4); }
  12%  { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1.25); }
  22%  { transform: translateX(-50%) rotate(-6deg) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(0.9) translateY(-10px); }
}

/* 素早く出て一瞬で消えるのではなく、読める大きさで長く留まってから消えるように調整 */
@keyframes popFly {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4) translateY(0); }
  10%  { opacity: 1; transform: translateX(-50%) scale(1.35) translateY(-14px); }
  22%  { transform: translateX(-50%) scale(1.05) translateY(-22px); }
  80%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(-38px); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-58px); }
}

/* 回復数の表示：HP表記エリア付近（カード上部）に、ダメージ表示と同じ見せ方で
   青色で表示する（緑色・カード中央表示から変更） */
.heal-pop-num {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  font-size: 34px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 3px #075985; paint-order: stroke fill;
  text-shadow: 0 4px 10px rgba(0,0,0,0.85), 0 0 20px rgba(56, 189, 248, 0.9);
  animation: healFly 2.4s ease-out forwards;
  pointer-events: none; z-index: 100; white-space: nowrap;
}

@keyframes healFly {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4) translateY(0); }
  10%  { opacity: 1; transform: translateX(-50%) scale(1.3) translateY(-12px); }
  22%  { transform: translateX(-50%) scale(1.05) translateY(-18px); }
  80%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(-32px); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-52px); }
}

/* 絶対防御・装丁の鎧などの発動演出（以前はCSSが存在せず、実質見えない状態だった） */
.shield-effect {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 90; overflow: visible;
}
.shield-effect::before {
  content: '🛡️';
  font-size: 68px;
  filter: drop-shadow(0 0 22px #facc15);
  animation: shieldPop 1.1s ease-out forwards;
}
.shield-effect::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  border: 4px solid #facc15; border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: shieldRing 1.1s ease-out forwards;
}
@keyframes shieldPop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-18deg); }
  30%  { opacity: 1; transform: scale(1.35) rotate(6deg); }
  50%  { transform: scale(1) rotate(0deg); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1); }
}
@keyframes shieldRing {
  0%   { opacity: 0; width: 16px; height: 16px; }
  30%  { opacity: 0.9; }
  100% { opacity: 0; width: 320px; height: 320px; }
}

.winner-result-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px);
  z-index: 200000; display: flex; align-items: center; justify-content: center;
  animation: resultFadeIn 0.5s ease-out;
}

@keyframes resultFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.winner-box {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 4px solid #f59e0b; border-radius: 24px; padding: 36px 40px;
  text-align: center; box-shadow: 0 0 60px rgba(245, 158, 11, 0.7);
  max-width: 480px; width: 90%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

.winner-crown { font-size: 28px; font-weight: 900; color: #fbbf24; letter-spacing: 1px; }
.winner-title { font-size: 24px; font-weight: 900; }
.winner-sub { font-size: 14px; color: #cbd5e1; }

.btn-reset-game {
  width: 100%; height: 52px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #ffffff; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}


/* ========================================================
   📱 MOBILE GUIDE OVERLAY (PC RECOMMENDED PROMPT)
======================================================== */
.mobile-guide-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #090d16;
  z-index: 999999;
  overflow-y: auto;
  padding: 40px 20px;
}

/* Activate overlay and hide arena when screen is narrow */
/* 注: #fs-battle-arena(.battle-fullscreen-arena)と.chuuni-cutinはJSで
   document.bodyに直接appendされるため.battle-arenaの外側にあり、
   ここに含めないと900px未満でもバトル演出（特にchuuni-cutinは
   z-index 9999999でこのガイド自体より前面）が表示されてしまっていた。 */
@media (max-width: 900px) {
  .battle-header, .battle-arena, .battle-fullscreen-arena, .chuuni-cutin {
    display: none !important;
  }
  .mobile-guide-overlay {
    display: block;
  }
}

.mobile-guide-content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guide-box {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  width: 100%;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.guide-box h3 {
  font-size: 17px;
  font-weight: 900;
  color: #f59e0b;
  margin-bottom: 14px;
  border-bottom: 2px dashed #334155;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-box ol {
  padding-left: 24px;
  font-size: 14px;
  color: #e2e8f0;
  line-height: 1.7;
}

.guide-box ol li {
  margin-bottom: 8px;
}
.guide-box ol li::marker {
  font-weight: 800;
  color: #38bdf8;
}

.guide-box ul li {
  margin-bottom: 6px;
  background: rgba(15, 23, 42, 0.5);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #334155;
}

.btn-back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #334155;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 40px;
  transition: background 0.2s;
}

.btn-back-home:active {
  background: #475569;
}


/* Landing Shine Effect
   旧 .tc-card-wrapper 用に付いていた登場/退場アニメーションを、実際に
   カード表示に使われている .tc-landing-anim-box 側へ付け替え。
   マークアップがリッチカードデザインに移行した際、アニメーション先の
   セレクタが .tc-card-wrapper のまま更新されておらず、tcSummonIn/tcFlyOut
   が一度も再生されていなかった（.tc-card-wrapper 自体は不要になったため削除済み）。 */
.tc-landing-anim-box {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  animation: tcSummonIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.tc-fly-out .tc-landing-anim-box {
  animation: tcFlyOut 0.45s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards !important;
}

.tc-shine-sweep {
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform: rotate(25deg);
  animation: tcShine 1.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 20;
}


/* ========================================================
   📜 RICH SYNERGY LOG DESIGNS
======================================================== */
.syn-log-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  text-align: left;
}

.syn-p1 .syn-log-card { border-left-color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }
.syn-p2 .syn-log-card { border-left-color: #3b82f6; border-color: rgba(59, 130, 246, 0.5); }

.syn-log-card h4 {
  font-size: 15px;
  font-weight: 900;
  color: #f8fafc;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.syn-buff-tag {
  background: #22c55e;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.syn-desc-text {
  font-size: 13px !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
  background: transparent !important;
  padding: 0 !important;
  font-weight: 500 !important;
}

.synergy-cutin-content {
  width: 90%;
  max-width: 800px;
}


.face-down-slot {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  border: 2px solid #3b82f6 !important;
  transform: scale(0.95);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-back-pattern {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, rgba(30,41,59,0.5), rgba(30,41,59,0.5) 10px, rgba(15,23,42,0.5) 10px, rgba(15,23,42,0.5) 20px);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.card-back-pattern::after {
  content: '🎴';
  font-size: 28px;
  opacity: 0.8;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.order-badge {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  background: #ef4444; color: #fff;
  border-radius: 50%; font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  z-index: 10; border: 2px solid #fff;
}


.shiori-wrap { background: #1e293b; border: 2px dashed #f59e0b; border-radius: 12px; padding: 10px; margin-bottom: 16px; text-align: center; animation: synPop 0.5s; }
.shiori-title { font-size: 13px; font-weight: 900; color: #facc15; margin-bottom: 8px; }
.shiori-btns { display: flex; gap: 6px; justify-content: center; }
.s-btn { flex: 1; border: none; border-radius: 8px; padding: 10px 6px; min-height: 44px; font-size: 12px; font-weight: 900; color: #fff; cursor: pointer; transition: transform 0.1s; }
.s-btn:active { transform: scale(0.95); }
.s-btn small { font-size: 9px; font-weight: 700; opacity: 0.9; display:block; margin-top:2px; }
.s-heal { background: linear-gradient(135deg, #16a34a, #4ade80); }
.s-guard { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.s-buff { background: linear-gradient(135deg, #dc2626, #f87171); }
.shiori-buff-aura { box-shadow: 0 0 20px #ef4444 !important; border-color: #ef4444 !important; animation: buffPulse 1s infinite alternate; }
@keyframes buffPulse { from { filter: drop-shadow(0 0 5px #ef4444); } to { filter: drop-shadow(0 0 15px #dc2626); } }


/* ========================================================
   ℹ️ RULE MODAL & BUTTON
======================================================== */
.btn-rule {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-rule:hover { background: #38bdf8; color: #0f172a; }

.rule-modal-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px);
  z-index: 999999; align-items: center; justify-content: center;
  padding: 20px;
}
.rule-modal-overlay.show { display: flex; animation: synFadeIn 0.2s ease-out; }

.rule-modal-content {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 2px solid #38bdf8; border-radius: 20px;
  width: 100%; max-width: 650px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  position: relative;
}

.rule-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: transparent; border: none; color: #94a3b8;
  font-size: 24px; cursor: pointer; transition: color 0.2s;
}
.rule-modal-close:hover { color: #ef4444; }

.rule-modal-title {
  font-size: 20px; font-weight: 900; color: #f8fafc;
  padding: 24px 24px 16px 24px; border-bottom: 1px solid #334155;
  display: flex; align-items: center; gap: 8px; margin: 0;
}

.rule-modal-body { padding: 20px 24px; overflow-y: auto; }
.rule-modal-body .guide-box { margin-bottom: 20px; box-shadow: none; border-color: #475569; }

/* ========================================================
   🎨 GRAPHICAL EFFECTS (3D, Particles, Flash)
======================================================== */
/* 3. Screen Impact Flash */
.screen-flash {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9999999;
  pointer-events: none;
  animation: flashAnim 0.3s ease-out forwards;
  mix-blend-mode: overlay;
}

@keyframes flashAnim {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Make clashes look cooler */
.anim-hit-shake {
  animation: hitShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  filter: brightness(1.5) contrast(1.2);
}


/* ========================================================
   🗡️ CHUUNI CUT-IN EFFECTS （第6版・clip-path方式）
   
   これまでの「回転させた巨大な矩形を画面外まで伸ばす」方式は、
   幅を増やしても特定の環境で角が画面端まで届かないことがあった。
   今回は clip-path のパーセンテージ指定で帯の形そのものを
   「必ず 0% 〜 100%（＝画面の左端から右端まで）」を通る多角形として
   定義する方式に変更。回転や要素の大きさの計算に依存しないため、
   画面サイズ・比率にかかわらず必ず両端に届くことを構造的に保証する。
   
   帯の背景（.chuuni-band）と、カード・文字を載せる回転コンテナ
   （.chuuni-stripe）を分離し、帯の見た目だけをclip-pathで担保している。
======================================================== */
.chuuni-cutin {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.chuuni-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 4, 8, 0.65);
  animation: fadeInOut 3.0s ease forwards;
}

/* 帯の縁取り（外側・プレイヤーカラー）と塗り（内側・墨色）を
   clip-path の多角形2枚を重ねて表現する。頂点のx座標は必ず 0% と 100% を
   使うため、画面の左右どちらの端にも確実に到達する。
   厚みはカード＋文字が余裕をもって収まるよう十分に確保している。
   ※動くグラデーション演出（シャインスイープ・スピードライン）は
     処理が重くカクつく原因になっていたため撤去し、単色の塗りのみにした。 */
.chuuni-band {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  animation: bandFadeSlideFromLeft 3.0s cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
}
.chuuni-band::before,
.chuuni-band::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/* 外側（縁取り色） */
.chuuni-band::before {
  background: var(--stripe-line, #D4AF37);
  clip-path: polygon(0% 42%, 100% 12%, 100% 58%, 0% 88%);
}
/* 内側（墨色の塗り。以前は外側から2%しか内側に控えていなかったため
   縁取りが細く、プレイヤーカラーでの判別が難しかった。4%に広げて
   縁取りをはっきり見せる） */
.chuuni-band::after {
  background: rgba(8, 7, 13, 0.98);
  clip-path: polygon(0% 46%, 100% 16%, 100% 54%, 0% 84%);
}

/* どちらの陣営の技かを、入場方向（左/右）と縁取り色の両方で判別できるようにする */
.player-1 .chuuni-band::before { --stripe-line: #E63946; }
.player-2 .chuuni-band::before { --stripe-line: #3A6EA5; }
.player-1 .chuuni-band { animation-name: bandFadeSlideFromLeft; }
.player-2 .chuuni-band { animation-name: bandFadeSlideFromRight; }

/* カード・文字を載せる、見た目上の回転コンテナ（背景・枠線は持たない） */
.chuuni-stripe {
  position: relative;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  animation: stripeContentFadeFromLeft 3.0s cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
}
.player-1 .chuuni-stripe { animation-name: stripeContentFadeFromLeft; }
.player-2 .chuuni-stripe { animation-name: stripeContentFadeFromRight; }

/* ========================================================
   技カテゴリ別の演出差別化（効果音の分類と対応させている）
   帯そのものには発光を付けず、技名（ルビ）の色のみで
   カテゴリを伝える（帯の縁がにじむ問題を避けるため）
======================================================== */
.chuuni-cat-icon { font-size: 0.7em; margin-right: 6px; filter: drop-shadow(0 0 6px currentColor); }

.cat-slash .chuuni-ruby { color: #e2e8f0; }
.cat-heavy .chuuni-ruby { color: #fb923c; }
.cat-magic .chuuni-ruby { color: #c4b5fd; }
.cat-drain .chuuni-ruby { color: #d8b4fe; }
.cat-shield .chuuni-ruby { color: #fde047; }
.cat-dodge .chuuni-ruby { color: #7dd3fc; }
.cat-heal .chuuni-ruby { color: #86efac; }

/* 重撃系スキル発動時の軽い画面シェイク */
@keyframes screenShakeHeavy {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, 4px); }
  80% { transform: translate(3px, -2px); }
}
body.screen-shake-heavy { animation: screenShakeHeavy 0.4s ease-in-out; }

.chuuni-card-img {
  width: 150px;
  height: 210px;
  transform: rotate(8deg) scale(0.4);
  opacity: 0;
  animation: cardPop 3.0s ease-out forwards;
  flex-shrink: 0; /* 画像が潰れないように設定 */
}

.chuuni-card-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.85));
  border-radius: 8px;
}

/* ★ テキストエリアにmax-widthを設けて文字をはみ出させない */
.chuuni-text-box {
  transform: rotate(8deg);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  max-width: 60vw; /* 画面幅の60%までに制限 */
}

/* カットインがどちらのプレイヤーの技か分かりにくいというご指摘を受けて追加。
   技種別バッジと横に並べ、入場方向・帯の縁取り色とあわせて三重に判別できるようにする。 */
.chuuni-badge-row { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin-bottom: 2px; }

.chuuni-player-badge {
  display: inline-block;
  font-size: 13px; font-weight: 900; letter-spacing: 1px;
  padding: 3px 13px; border-radius: 999px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.player-1 .chuuni-player-badge { color: #fca5a5; background: rgba(239, 68, 68, 0.2); }
.player-2 .chuuni-player-badge { color: #93c5fd; background: rgba(59, 130, 246, 0.2); }

/* 技の種別バッジ（攻撃/防御/回復/回避）。必殺技名だけでは種類が
   分かりにくいとのご指摘を受けて追加。技名の直前に一目で分かるよう表示する。 */
.chuuni-type-badge {
  display: inline-block;
  font-size: 13px; font-weight: 900; letter-spacing: 1px;
  padding: 3px 13px; border-radius: 999px;
  border: 1.5px solid currentColor;
}
.chuuni-type-badge.cat-attack  { color: #fca5a5; background: rgba(239, 68, 68, 0.16); }
.chuuni-type-badge.cat-defense { color: #fde047; background: rgba(250, 204, 21, 0.16); }
.chuuni-type-badge.cat-evade   { color: #7dd3fc; background: rgba(56, 189, 248, 0.16); }
.chuuni-type-badge.cat-heal    { color: #86efac; background: rgba(74, 222, 128, 0.16); }

.chuuni-phrase {
  font-size: clamp(14px, 3vw, 18px); /* 画面に合わせて自動縮小 */
  color: var(--bb-text-sub, #cbd5e1);
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0;
  animation: textFadeIn 0.3s 0.4s forwards;
  font-style: italic;
  text-shadow: 0 2px 4px #000;
  white-space: normal;
  word-break: keep-all; /* 単語の途中で改行させない */
}

.chuuni-name {
  font-family: var(--bb-font-display, serif);
  font-size: clamp(32px, 6vw, 68px); /* 迫力アップのため拡大 */
  font-weight: 800;
  color: var(--bb-text, #fff);
  text-shadow: 0 0 18px currentColor;
  position: relative;
  opacity: 0;
  animation: textGlitch 2.55s 0.45s forwards;
  line-height: 1.1;
  white-space: normal;
  word-break: keep-all; /* 単語の途中で改行させない */
}

.player-1 .chuuni-name { color: #fca5a5; }
.player-2 .chuuni-name { color: #bae6fd; }

.chuuni-ruby {
  display: block;
  font-size: clamp(13px, 2.2vw, 18px); /* 迫力アップのため拡大 */
  color: #facc15;
  letter-spacing: 4px;
  margin-bottom: 4px;
  text-align: left;
  padding-left: 10px;
  text-shadow: 0 0 8px #f59e0b;
}

@media (max-width: 600px) {
  .chuuni-stripe { height: auto; min-height: 220px; gap: 18px; }
  .chuuni-card-img { width: 100px; height: 145px; }
  .chuuni-text-box { max-width: 75vw; }
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; }
}

/* 保持時間を大幅に延長（0.18〜0.82 → 短時間で消えていた反省を踏まえ、
   全体尺3.0秒のうち中盤の広い範囲をしっかり読める時間として確保） */
/* どちらのプレイヤーの技か一瞬で分かるよう、入場方向をアリーナ上の陣営位置
   （P1=左/赤コーナー、P2=右/青コーナー）に合わせた横方向スライドに変更。
   帯の斜め形状（clip-path）・カード文字の傾き（rotate）には影響しない。 */
@keyframes bandFadeSlideFromLeft {
  0%   { transform: translateX(-100vw); opacity: 0; }
  12%  { transform: translateX(0); opacity: 1; }
  88%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}
@keyframes bandFadeSlideFromRight {
  0%   { transform: translateX(100vw); opacity: 0; }
  12%  { transform: translateX(0); opacity: 1; }
  88%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100vw); opacity: 0; }
}

@keyframes stripeContentFadeFromLeft {
  0%   { transform: translateX(-100vw) rotate(-8deg); opacity: 0; }
  12%  { transform: translateX(0) rotate(-8deg); opacity: 1; }
  88%  { transform: translateX(0) rotate(-8deg); opacity: 1; }
  100% { transform: translateX(100vw) rotate(-8deg); opacity: 0; }
}
@keyframes stripeContentFadeFromRight {
  0%   { transform: translateX(100vw) rotate(-8deg); opacity: 0; }
  12%  { transform: translateX(0) rotate(-8deg); opacity: 1; }
  88%  { transform: translateX(0) rotate(-8deg); opacity: 1; }
  100% { transform: translateX(-100vw) rotate(-8deg); opacity: 0; }
}

/* カード画像：横移動はテキストと重なるため使わず、
   その場で弾むようなスケールバウンドでインパクトを出す */
@keyframes cardPop {
  0%   { transform: rotate(8deg) scale(0.4); opacity: 0; }
  12%  { transform: rotate(10deg) scale(1.55); opacity: 1; }
  18%  { transform: rotate(6deg) scale(1.25); opacity: 1; }
  24%  { transform: rotate(9deg) scale(1.4); opacity: 1; }
  30%  { transform: rotate(8deg) scale(1.32); opacity: 1; }
  88%  { transform: rotate(8deg) scale(1.32); opacity: 1; }
  100% { transform: rotate(8deg) scale(0.9); opacity: 0; }
}

@keyframes textFadeIn {
  to { opacity: 1; }
}

@keyframes textGlitch {
  0% { opacity: 0; transform: scale(1.4) skewX(25deg); filter: blur(8px); }
  10% { opacity: 1; transform: scale(1) skewX(0); filter: blur(0); }
  88% { opacity: 1; transform: scale(1.03); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.3) skewX(-15deg); filter: blur(8px); }
}


/* ========================================================
   👑 RARE SYNERGY STYLES (UR / SR)
======================================================== */
.ur-overlay {
  background: rgba(10, 0, 20, 0.9) !important;
}

.ur-overlay .synergy-cutin-content {
  border-color: transparent;
  background: linear-gradient(145deg, #1e1b4b, #2e1065);
  box-shadow: 0 0 50px rgba(236, 72, 153, 0.6), inset 0 0 30px rgba(124, 58, 237, 0.4);
  animation: synPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), urGlitch 3s infinite;
}

.ur-overlay .synergy-cutin-title {
  color: #fff;
  text-shadow: 0 0 10px #ec4899, 0 0 20px #8b5cf6, 0 0 30px #ec4899;
  animation: rainbowText 3s linear infinite;
}

.syn-log-card.ur-card {
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid transparent;
  border-image: linear-gradient(45deg, #ec4899, #8b5cf6, #3b82f6, #ec4899) 1;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
  border-left: none;
}
.syn-log-card.ur-card h4 { color: #fdf2f8; text-shadow: 0 0 8px #fbcfe8; }
.syn-buff-tag.ur-badge {
  background: linear-gradient(90deg, #ec4899, #8b5cf6);
  box-shadow: 0 0 10px #ec4899;
  color: white; font-weight: 900;
}

.syn-log-card.sr-card {
  border-left: 4px solid #fbbf24;
  background: rgba(30, 41, 59, 0.9);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}
.syn-buff-tag.sr-badge {
  background: #fbbf24; color: #000;
}

@keyframes rainbowText {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes urGlitch {
  0% { transform: scale(1); filter: contrast(1); }
  2% { transform: scale(1.02) translateX(2px); filter: contrast(1.5); }
  4% { transform: scale(1) translateX(-2px); filter: contrast(1); }
  100% { transform: scale(1); filter: contrast(1); }
}

@keyframes popBadge { 0% { transform: translate(-50%, 20px) scale(0.5); opacity: 0; } 70% { transform: translate(-50%, -5px) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes msgFadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

/* 🎨 RICH VFX (Slash & Wave) */
.vfx-slash { position: absolute; top: 50%; left: 50%; width: 150%; height: 20px; border-radius: 50%; z-index: 150; pointer-events: none; opacity: 0; mix-blend-mode: screen; filter: blur(2px); animation: slashAnim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes slashAnim { 0% { width: 0%; opacity: 1; filter: brightness(3); } 50% { width: 250%; opacity: 1; filter: brightness(2); } 100% { width: 300%; opacity: 0; filter: brightness(1); } }
.vfx-wave { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; border-style: solid; border-width: 10px; transform: translate(-50%, -50%); z-index: 140; pointer-events: none; animation: waveAnim 0.4s ease-out forwards; }
@keyframes waveAnim { 0% { width: 0; height: 0; opacity: 1; border-width: 20px; } 100% { width: 300px; height: 300px; opacity: 0; border-width: 0px; } }

/* Extended Chuuni Cut-in Timings */
.chuuni-bg, .chuuni-stripe, .chuuni-card-img, .chuuni-name { animation-duration: 3s !important; }


/* ☠️ Knockout Animation */
.anim-knockout {
  animation: knockoutDrop 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
  pointer-events: none;
}
@keyframes knockoutDrop {
  0% { transform: translateY(0) scale(1.8) rotate(0deg); filter: grayscale(0%); }
  20% { transform: translateY(-20px) scale(1.8) rotate(-5deg); filter: grayscale(30%); }
  100% { transform: translateY(300px) scale(1.5) rotate(25deg); filter: grayscale(100%) opacity(0); }
}

/* Floating Buffs Badges */
.floating-buffs {
  position: absolute; top: -14px; right: -12px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 1000; pointer-events: none; overflow: visible;
}
.f-buff {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-size: 11px; font-weight: 900;
  padding: 3px 8px; border-radius: 12px;
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.7);
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  animation: synPop 0.3s ease-out;
}
/* 「ATK x1.8」等のバフバッジ用ポップイン。以前は @keyframes synPop 自体が
   どこにも定義されておらず、しおり演出（.shiori-wrap）やURシナジー演出でも
   同名アニメーションが指定されていたのに実際は一切再生されていなかった。
   既存の synChipPop と同じ内容で定義し、まとめて有効化する。 */
@keyframes synPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
  .floating-buffs { right: -5px; }
}
/* =========================================
   五行相関図（円形配置）用CSS
========================================= */
.chart-circle-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 10px auto;
}

.chart-arrows {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

.chart-node {
  position: absolute;
  width: 44px; 
  height: 44px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid;
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  font-size: 12px; 
  font-weight: 900;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 8px rgba(0,0,0,0.6);
  line-height: 1.1;
  z-index: 2;
}

/* 各属性の配置と色分け（綺麗な円形になるように調整） */
.node-wood  { top: 15%; left: 50%; border-color: #22c55e; color: #22c55e; }
.node-earth { top: 40%; left: 90%; border-color: #f59e0b; color: #f59e0b; }
.node-water { top: 85%; left: 75%; border-color: #3b82f6; color: #3b82f6; }
.node-fire  { top: 85%; left: 25%; border-color: #ef4444; color: #ef4444; }
.node-metal { top: 40%; left: 10%; border-color: #94a3b8; color: #94a3b8; }

/* ========================================================
   💡 リッチ・トレカデザイン ＆ フルスクリーン対戦アリーナ用CSS
   （app.js が document.createElement('style') でDOM注入していたものを移設）

   以前はこのCSSが app.js 側にインラインで存在し、このファイルとの間で
   同名セレクタの二重定義事故（.deck-card-slot 等）を繰り返していた。
   Cloudflare Pages は静的ファイル配信のため、JSで動的にCSSを生成する
   必要は元々なく、単一のスタイルシートに一本化した。
======================================================== */

  body { font-size: 16px !important; }
  .syn-split-side { font-size: 14px !important; }
  .battle-fullscreen-arena {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(rgba(10, 15, 30, 0.75), rgba(2, 6, 23, 0.95)), url('https://images.unsplash.com/photo-1519074069444-1ba4fff66d16?auto=format&fit=crop&q=80&w=1920') center/cover no-repeat fixed;
    z-index: 99999; flex-direction: column; justify-content: space-between;
    padding: 15px 25px; box-sizing: border-box; overflow: hidden;
  }
  .battle-fullscreen-arena.active { display: flex; animation: msgFadeIn 0.3s forwards; }

  .battle-fullscreen-arena::before,
  .battle-fullscreen-arena::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0;
    background-image: 
      radial-gradient(3px 3px at 20px 30px, #facc15, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0,0,0,0)),
      radial-gradient(3px 3px at 50px 160px, #f59e0b, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0,0,0,0)),
      radial-gradient(4px 4px at 130px 80px, #ef4444, rgba(0,0,0,0)),
      radial-gradient(2px 2px at 160px 120px, #facc15, rgba(0,0,0,0));
    background-repeat: repeat; background-size: 200px 200px;
    animation: arenaParticles 4s linear infinite; opacity: 0.5;
  }
  .battle-fullscreen-arena::after {
    background-size: 350px 350px; animation: arenaParticles 7s linear infinite; opacity: 0.3;
  }
  @keyframes arenaParticles {
    0% { transform: translateY(0); }
    100% { transform: translateY(-350px); }
  }

  .fs-arena-inner-container {
    width: 100%; max-width: 1600px; height: 100%; margin: 0 auto;
    display: flex; flex-direction: column; justify-content: space-between; position: relative;
    z-index: 2;
  }

  .fs-arena-header { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; height: auto; min-height: 52px; flex-shrink: 0; position: relative; gap: 12px; }

  /* ============================================
     シナジー表示（バッジ方式・リデザイン版）
     以前は1行の文字列に無理やり詰め込んでいたため、
     シナジー拡張後（4種→13種）に同時発動数が増えて
     レイアウトが崩壊していた。折り返し可能なバッジ列に
     変更し、件数に依存せず常に崩れない構造にする。
  ============================================ */
  .persistent-syn-banner-fs {
    flex: 1; min-width: 0; background: rgba(10, 9, 16, 0.9); border: 1.5px solid var(--bb-gold, #D4AF37);
    border-radius: 12px; padding: 14px 16px 8px; margin: 8px 12px 0; position: relative;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.25);
    box-sizing: border-box;
    cursor: pointer; transition: border-color 0.15s ease;
  }
  .persistent-syn-banner-fs:hover { border-color: var(--bb-gold-light, #F0D77B); }
  /* 見出しを行として確保せず、上部の枠線に重なるラベル（fieldset の legend のような見た目）にして
     チップ表示エリアの高さを圧迫しないようにする */
  .syn-banner-title {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    background: var(--bb-bg-deep, #0A0910); padding: 0 10px;
    color: var(--bb-gold-light, #F0D77B); font-size: 11px; font-weight: 900; letter-spacing: 1.2px;
    white-space: nowrap; display: flex; align-items: center; gap: 6px;
  }
  .syn-banner-title .syn-tap-hint { font-size: 9px; color: var(--bb-text-sub, #94a3b8); font-weight: 700; letter-spacing: 0; }
  .syn-banner-split-row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; gap: 14px; }
  .syn-split-side { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
  .syn-split-side.p1 { justify-content: flex-start; border-right: 1px dashed rgba(212, 175, 55, 0.3); padding-right: 12px; }
  .syn-split-side.p2 { justify-content: flex-end; }

  .syn-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 800; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px; line-height: 1.4;
    animation: synChipPop 0.3s ease-out;
  }
  .syn-chip.p1-chip { background: rgba(230, 57, 70, 0.16); color: #f3a3a9; border: 1px solid rgba(243, 163, 169, 0.45); }
  .syn-chip.p2-chip { background: rgba(58, 110, 165, 0.16); color: #a3c2e0; border: 1px solid rgba(163, 194, 224, 0.45); }
  .syn-chip.ur-chip { background: rgba(212, 175, 55, 0.2); color: var(--bb-gold-light, #F0D77B); border: 1px solid rgba(212, 175, 55, 0.55); }
  .syn-chip-none { font-size: 12px; color: var(--bb-text-sub, #64748b); font-weight: 700; }
  @keyframes synChipPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

  .btn-pause-fs {
    background: #334155; border: 2px solid #94a3b8; color: #fff;
    border-radius: 50%; width: 42px; height: 42px; font-size: 18px;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    transition: all 0.2s; box-shadow: 0 4px 8px rgba(0,0,0,0.5); flex-shrink: 0;
  }
  .btn-pause-fs:hover { background: #475569; transform: scale(1.1); }

  .fs-arena-body {
    display: flex; flex-direction: row; width: 100%; flex: 1;
    justify-content: space-between; align-items: center; gap: 24px; min-height: 0; margin: 10px 0;
  }

  .fs-deck-column {
    display: flex; flex-direction: column; gap: 10px; width: 108px;
    flex-shrink: 0; justify-content: center; height: 100%;
  }
  .fs-deck-column.p1-side { border-right: 1px solid rgba(212, 175, 55, 0.3); padding-right: 16px; }
  .fs-deck-column.p2-side { border-left: 1px solid rgba(212, 175, 55, 0.3); padding-left: 16px; }
  .fs-panel-label {
    color: var(--bb-gold-light, #F0D77B); font-size: 13px; font-weight: 900; text-align: center;
    margin-bottom: 6px; letter-spacing: 2px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  }
  
  .fs-card-mini {
    width: 100%; aspect-ratio: 2 / 3; border: 2px solid rgba(255,255,255,0.15); border-radius: 8px;
    overflow: hidden; opacity: 0.4; transition: all 0.3s; position: relative; background: var(--bb-bg-deep, #0A0910);
  }
  .fs-card-mini.active { opacity: 1; border-color: var(--bb-gold, #D4AF37); box-shadow: 0 0 18px rgba(212, 175, 55, 0.75); transform: scale(1.12); z-index: 10; }
  .fs-card-mini img { width: 100%; height: 100%; object-fit: cover; }
  .fs-card-mini .ko-overlay {
    position: absolute; top:0; left:0; right:0; bottom:0; background:rgba(166,38,51,0.75);
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:14px; opacity:0;
  }
  .fs-card-mini.knocked-out { opacity: 0.3; filter: grayscale(100%); }
  .fs-card-mini.knocked-out .ko-overlay { opacity: 1; }

  .fs-clash-stage {
    flex: 1; display: flex; flex-direction: row; justify-content: center;
    align-items: center; gap: 40px; height: 100%; position: relative; overflow: visible !important;
  }
  
  /* バトルカードの外枠サイズ指定 */
  .fs-clash-card-wrap {
    width: 260px; height: 380px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: visible !important;
  }
  /* カード本体だけを差し替えるための内側スロット。レイアウトに影響を与えないよう
     display:contents にし、直接の子要素であるかのように振る舞わせる。
     （ここに切り離すことで、ダメージ/回復ポップアップが再描画で消えなくなる） */
  .fs-card-slot { display: contents; }

  .fs-vs-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; flex-shrink: 0; }
  .fs-vs-text { font-size: 52px; font-weight: 900; color: #ef4444; font-style: italic; text-shadow: 0 0 20px #f59e0b; line-height: 1; }
  .fs-round-text { color: #f59e0b; font-size: 16px; font-weight: 900; letter-spacing: 2px; margin-bottom: 6px; }

  .fs-arena-footer { width: 100%; max-width: 900px; flex-shrink: 0; margin: 0 auto; }
  
  .fs-msg-window {
    background: rgba(10, 9, 16, 0.92); border: 2px solid var(--bb-gold, #D4AF37); border-radius: 12px;
    padding: 18px 28px; text-align: left; box-shadow: 0 0 20px rgba(212, 175, 55, 0.15), 0 4px 20px rgba(0,0,0,0.6);
    height: 170px; 
    overflow-y: auto; 
    display: flex; flex-direction: column; gap: 10px;
    scroll-behavior: smooth;
  }
  .fs-msg-text { 
    font-size: 17px !important; color: var(--bb-text-sub, #ABA192); font-weight: 600; line-height: 1.55 !important; 
    margin: 0; animation: msgFadeIn 0.3s forwards; flex-shrink: 0; opacity: 0.7; transition: color 0.2s ease, opacity 0.2s ease;
  }
  .fs-msg-text.latest {
    font-size: 21px !important; color: var(--bb-gold-light, #F0D77B); font-weight: 900; opacity: 1;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
  }

  .pause-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 999999; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
  .pause-overlay.show { display: flex; animation: msgFadeIn 0.2s; }
  .pause-content { background: #0f172a; border: 2px solid #facc15; border-radius: 12px; padding: 24px; width: 90%; max-width: 600px; box-shadow: 0 0 30px rgba(250, 204, 21, 0.3); max-height: 80vh; overflow-y: auto; box-sizing: border-box; }
  .pause-title { font-size: 24px; font-weight: 900; color: #fff; text-align: center; margin-bottom: 20px; letter-spacing: 2px; }
  .syn-detail-box { background: rgba(0,0,0,0.5); padding: 12px; margin-bottom: 12px; border-radius: 6px; border-left: 6px solid; }
  .syn-detail-box.p1-box { border-color: #ef4444; } .syn-detail-box.p2-box { border-color: #3b82f6; }
  .syn-detail-name { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 4px; }
  .syn-detail-buff { color: #facc15; font-size: 14px; font-weight: 900; margin-bottom: 6px; }
  .syn-detail-flavor { font-size: 13px; color: #cbd5e1; line-height: 1.5; opacity: 0.9; }
  .btn-resume { background: #3b82f6; color: #fff; border: none; padding: 14px 20px; font-size: 16px; font-weight: 900; border-radius: 8px; cursor: pointer; margin-top: 20px; width: 100%; transition: background 0.2s; }
  .btn-resume:hover { background: #2563eb; }

  /* 一時停止ボタン専用の軽量インジケーター（盤面・ログを隠さない） */
  .light-pause-badge {
    display: none; align-items: center; gap: 10px;
    position: fixed; top: 90px; left: 50%; transform: translateX(-50%);
    background: rgba(10, 9, 16, 0.95); border: 1.5px solid var(--bb-gold, #D4AF37);
    border-radius: 999px; padding: 8px 10px 8px 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 999998; color: var(--bb-gold-light, #F0D77B);
    font-size: 13px; font-weight: 900; letter-spacing: 1px;
  }
  .light-pause-badge button {
    border: none; border-radius: 999px;
    padding: 5px 14px; font-size: 12px; font-weight: 900; cursor: pointer;
  }
  .light-pause-badge .lpb-resume { background: #3b82f6; color: #fff; }
  .light-pause-badge .lpb-resume:hover { background: #2563eb; }
  /* 終了ボタンは再開ボタンより控えめな色にし、押し間違いを視覚的にも減らす
     （実際の誤操作防止は confirmQuitBattle() の確認ダイアログで担保） */
  .light-pause-badge .lpb-quit { background: #475569; color: #e2e8f0; }
  .light-pause-badge .lpb-quit:hover { background: #dc2626; }

  /* 一時停止中、カードがタップで拡大できることを示すヒント */
  .fs-clash-card-wrap.pausable-hint { cursor: pointer; }
  .fs-clash-card-wrap.pausable-hint:hover .rich-card-outer {
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.7), inset 0 0 24px rgba(0,0,0,0.85);
    transform: scale(1.02);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }

  /* カード拡大表示 */
  .card-zoom-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88);
    z-index: 9999990; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
  }
  .card-zoom-overlay.show { display: flex; animation: msgFadeIn 0.2s; }
  .card-zoom-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .card-zoom-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(212, 175, 55, 0.15); color: var(--bb-gold-light, #F0D77B);
    border: 1.5px solid var(--bb-gold, #D4AF37); border-radius: 999px;
    padding: 9px 22px; font-size: 14px; font-weight: 900; cursor: pointer;
    transition: background 0.15s ease;
  }
  .card-zoom-back-btn:hover { background: rgba(212, 175, 55, 0.32); }
  .card-zoom-scale { transform: scale(1.65); }
  @media (max-width: 700px) {
    .card-zoom-scale { transform: scale(1.1); }
  }

  /* カットイン演出は public/book-battle/css/style.css に一本化（重複定義を撤去済み） */

  /* 注: 旧・カットインCSS（.chuuni-cutin, .chuuni-stripe, .chuuni-card-img 等）は
     public/book-battle/css/style.css 側に一本化した。
     ここに重複定義が残っていると、後から読み込まれるこちらの宣言が
     style.css の修正を意図せず上書きしてしまうため完全に削除している。 */

  /* =========================================
     ★ 新・リッチカードデザイン（黒背景・金縁）
  ========================================= */
  .rich-card-outer {
    width: 260px; 
    height: 380px;
    border-radius: 14px;
    background: var(--bb-bg-deep, #0A0910);
    border: 6px solid var(--bb-gold, #D4AF37);
    outline: 1.5px solid rgba(212, 175, 55, 0.55);
    outline-offset: -10px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 24px rgba(0,0,0,0.85);
    position: relative;
    overflow: hidden;
    color: var(--bb-text, #fff);
    flex-shrink: 0;
  }

  /* 属性ごとのアクセントカラー（カードの縁・HPバー・落款で使用） */
  .rich-card-outer.tcg-theme-wood  { --card-elem-color: #5B8C5A; }
  .rich-card-outer.tcg-theme-fire  { --card-elem-color: #E63946; }
  .rich-card-outer.tcg-theme-earth { --card-elem-color: #C08552; }
  .rich-card-outer.tcg-theme-metal { --card-elem-color: #C9C9C9; }
  .rich-card-outer.tcg-theme-water { --card-elem-color: #3A6EA5; }

  /* 落款（朱印）：右上に押された印章のような意匠。属性の一字を刻む。
     以前は rich-elem-area（HP横の属性バッジ）と同じ右上コーナーに
     重複配置されており、微妙に重なって見えていたため、属性表示は
     この落款一つに一本化した。斜め回転もかっこ悪いとのご指摘で解除。 */
  .rich-hanko {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 36px; height: 36px; border-radius: 6px;
    background: var(--card-elem-color, #E63946);
    border: 1.5px solid rgba(255,255,255,0.75);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--bb-font-display, serif);
    font-size: 19px; font-weight: 800; color: rgba(255,255,255,0.95);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }

  .rich-card-bg {
    position: absolute; top:0; left:0; right:0; bottom:0;
    background-size: cover; background-position: center;
    filter: blur(4px) opacity(0.25) grayscale(0.3); z-index: 1;
  }

  .rich-card-overlay {
    position: absolute; top:0; left:0; right:0; bottom:0;
    background: linear-gradient(160deg, rgba(20,18,26,0.92) 0%, rgba(10,9,16,0.97) 100%);
    z-index: 2;
  }

  .rich-card-content {
    position: relative; z-index: 3;
    padding: 14px;
    display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
  }

  /* HPエリア（属性表示は右上の落款に一本化したため、ここには置かない） */
  .rich-header {
    display: flex; justify-content: flex-start; align-items: flex-end;
    padding-right: 44px; /* 右上の落款と重ならないよう余白を確保 */
  }
  .rich-hp-area { display: flex; align-items: baseline; gap: 4px; }
  .rich-hp-label { font-size: 13px; font-weight: 900; color: var(--bb-vermillion, #E63946); letter-spacing: 1px; }
  .rich-hp-current { font-family: var(--bb-font-display, serif); font-size: 23px; font-weight: 800; color: var(--bb-text, #F3EFE6); letter-spacing: 1px; }
  .rich-hp-max { font-size: 11px; color: var(--bb-text-sub, #ABA192); }

  /* HPバー：属性色のグラデーションに変更（以前は全属性共通で赤固定だった） */
  .rich-hp-bar-wrap { width: 50%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; margin-top: 6px; border: 1px solid rgba(0,0,0,0.6); }
  .rich-hp-bar-inner { height: 100%; border-radius: 3px; transition: width 0.3s; background: linear-gradient(90deg, var(--card-elem-color, #E63946), var(--bb-gold, #D4AF37)); }

  /* タイトルと画像 */
  .rich-body { display: flex; flex: 1; margin-top: 12px; gap: 10px; }
  .rich-info { flex: 1; display: flex; flex-direction: column; }
  .rich-title { font-family: var(--bb-font-display, serif); font-size: 17px; font-weight: 800; line-height: 1.35; margin-bottom: 8px; color: var(--bb-text, #F3EFE6); text-shadow: 1px 1px 3px rgba(0,0,0,0.7); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
  .rich-author { font-size: 12px; color: var(--bb-text-sub, #ABA192); margin-bottom: 12px; font-weight:bold; }
  .rich-year { font-size: 10px; color: var(--bb-text-sub, #ABA192); opacity: 0.8; }
  
  .rich-image-wrap { width: 90px; height: 130px; border-radius: 4px; overflow: hidden; border: 2px solid var(--bb-gold, #D4AF37); box-shadow: 0 4px 12px rgba(0,0,0,0.6); flex-shrink: 0; }
  .rich-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

  /* フレーバーテキスト（引用） */
  .rich-flavor-box { background: rgba(0,0,0,0.45); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 8px; padding: 10px; display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; position: relative; }
  .rich-flavor-icon { font-size: 18px; color: var(--bb-gold, #D4AF37); }
  .rich-flavor-text { font-size: 11px; line-height: 1.4; color: var(--bb-text, #F3EFE6); flex: 1; }
  .rich-quote-icon { position: absolute; bottom: 8px; right: 8px; font-size: 20px; color: rgba(255,255,255,0.08); }

  /* ATK / DEF ステータス */
  .rich-stats-box { display: flex; background: rgba(0,0,0,0.55); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 8px; margin-top: 8px; padding: 8px; justify-content: space-around; align-items: center; }
  .rich-stat { display: flex; flex-direction: column; align-items: center; }
  .rich-stat-label { font-size: 11px; font-weight: bold; color: var(--bb-text-sub, #ABA192); display:flex; align-items:center; gap:4px; margin-bottom:2px; }
  .rich-stat-val { font-family: var(--bb-font-display, serif); font-size: 20px; font-weight: 800; }
  .rich-stat-val.atk { color: var(--bb-vermillion, #E63946); }
  .rich-stat-val.def { color: var(--bb-p2, #3A6EA5); }
  .rich-stat-divider { width: 1px; height: 30px; background: #334155; }

  /* 有利/不利バッジはカードの外側にはみ出すリボンとして表示する
     （カード内部に置くと単なる帯のように見え、HP表示とも干渉していたため） */
  .rich-adv-badge-outer {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 13px; font-weight: 900; padding: 5px 14px;
    border-radius: 999px; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    z-index: 15; animation: popBadge 0.5s forwards; white-space: nowrap;
  }
  .rich-adv-badge-outer.effective { background: #dc2626; }
  .rich-adv-badge-outer.resist { background: #64748b; }