@charset "UTF-8";


/* --------------------------------------------------
   ゲーム画面 (盤面レイアウト)
-------------------------------------------------- */
/* 🃏 盤面の一番右側（フィールドゾーン右隣）に配置するデッキ（山札）カード */
.support-slot {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 6px;
  border: 1.5px dashed rgba(212, 175, 55, 0.4);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.support-slot .card {
  margin: 0 !important;
  transform: none !important;
}
.support-slot:empty::after {
  content: "SUPPORT";
  font-size: 0.55rem;
  color: rgba(212, 175, 55, 0.4);
  letter-spacing: 1px;
  font-weight: bold;
}
.deck-slot {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 6px;
  border: 1.5px solid var(--gold-primary);
  background: #111;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85);
  flex-shrink: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.deck-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🃏 相手のデッキスリーブを自分と向き合うように180度反転 */
#opp-deck-slot img {
  transform: rotate(180deg);
}
.vfx-draw-card {
  position: fixed;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 6px;
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), 0 0 10px var(--gold-glow);
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  animation: drawCardAnim 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
.vfx-draw-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes drawCardAnim {
  0% {
    left: var(--start-left);
    top: var(--start-top);
    transform: scale(0.85) rotate(var(--start-rot, 0deg));
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1) rotate(0deg) translateY(-10px);
    opacity: 1;
  }
  100% {
    left: var(--target-left);
    top: var(--target-top);
    transform: scale(0.85) rotate(0deg);
    opacity: 0;
  }
}

.deck-slot.empty {
  opacity: 0.25;
  border-dasharray: 2 2;
  filter: grayscale(100%);
}
#game-board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 600px;
  position: relative;
  z-index: 5;
  background: transparent;
  border: 1px solid var(--panel-border);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
@media (min-width: 768px), (orientation: landscape) {
  #game-board {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --card-width: 58px;
    --card-height: 84px;
  }
  .card-img-container { height: 32px; }
  .card-name { font-size: 0.48rem; margin-top: 1px; }
  .card-orb { width: 16px; height: 16px; bottom: -2px; }
  .orb-val { font-size: 0.58rem; }
  .hand-zone { min-height: 86px; padding-bottom: 4px !important; }
  .field-zone { min-height: 88px !important; padding: 2px 4px !important; }
  .player-info { padding: 2px 8px !important; font-size: 0.68rem; }
  .food-zone-wrapper { padding: 2px 6px; }
  .food-zone { min-height: 30px; }
  .emerald-jewel { width: 18px; height: 22px; }
}

/* 🎯 ターゲットアロー */
.target-arrow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 600;
}

.arrow-path {
  stroke: #ff3344;
  stroke-width: 3.5;
  fill: none;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 8px #ff0000);
  animation: arrowDashAnim 0.5s linear infinite;
}

@keyframes arrowDashAnim {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

.area {
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  flex: 1;
  justify-content: space-between;
  background: transparent !important;
}

.area.active-turn {
  box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.15);
}
.field-zone {
  transition: filter 0.4s ease, opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.field-zone:not(.active-turn) {
  filter: brightness(0.72) saturate(0.85);
  opacity: 0.8;
}
.field-zone.active-turn {
  filter: brightness(1) saturate(1);
  opacity: 1;
  border-color: rgba(255, 215, 0, 0.75) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4), inset 0 0 14px rgba(255, 215, 0, 0.15) !important;
  animation: activeFieldFaintPulse 2.8s infinite ease-in-out;
}
@keyframes activeFieldFaintPulse {
  0%, 100% {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.25), inset 0 0 8px rgba(212, 175, 55, 0.08);
  }
  50% {
    border-color: rgba(255, 215, 0, 0.85);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.55), inset 0 0 18px rgba(255, 215, 0, 0.22);
  }
}

.player-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.player-profile { display: flex; align-items: center; gap: 6px; }
.avatar-wrapper { position: relative; display: flex; align-items: center; }

.player-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
  object-fit: cover;
  background: #000;
}

/* 💬 エモート */
.emote-trigger-btn {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  font-size: 0.7rem !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  color: #fff !important;
  border-radius: 50% !important;
  opacity: 0.65;
  margin-left: 4px;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emote-bubble {
  position: absolute;
  left: 36px;
  top: -6px;
  background: rgba(13, 20, 14, 0.95);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
  z-index: 100;
  animation: popEmote 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.thinking-bubble {
  position: absolute;
  left: 36px;
  top: 18px;
  background: rgba(13, 20, 14, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: var(--gold-light);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.8);
  z-index: 95;
  animation: thinkingPulse 1.5s infinite ease-in-out;
}
@keyframes thinkingPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes popEmote {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.emote-picker {
  position: absolute;
  bottom: 32px;
  left: 0;
  background: rgba(16, 22, 17, 0.96);
  border: 1.5px solid var(--gold-primary);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 400;
  box-shadow: 0 8px 24px rgba(0,0,0,0.9);
  width: 120px;
}

.emote-picker button {
  font-size: 0.72rem;
  padding: 5px 8px;
  text-align: left;
}

/* テリトリー / フィールド / エサ場 / 手札 */
.territory-zone { display: flex; gap: 4px; align-items: center; }

/* 🛡️ シールド (一定間隔で光る盾の形) */
.territory-card {
  width: 16px !important;
  height: 22px !important;
  background: radial-gradient(circle at 50% 30%, #ffd700 0%, #d4af37 40%, #b8860b 70%, #4a3b00 100%) !important;
  clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 50% 100%, 0% 65%) !important;
  border: none !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
  transform: none !important;
  animation: shieldGlowPulse 2.4s infinite ease-in-out !important;
}

@keyframes shieldGlowPulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5)) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 200, 0.95)) brightness(1.35);
    transform: scale(1.08);
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5)) brightness(1);
    transform: scale(1);
  }
}

/* 🔍 盤面カードの簡略表示（カード名を非表示にし、画像とオーブを拡大） */
.field-zone .card .card-name,
.field-zone .card .card-desc {
  display: none !important;
}

.field-zone .card .card-img-container {
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 5px;
}

.field-zone .card .card-header {
  margin-bottom: 0 !important;
}

/* 💥 シールド破壊「パリン！」ヒビ割れVFX */
.shield-break-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shield-break-glass {
  position: relative;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(212, 175, 55, 0.2) 50%, transparent 70%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shieldShatterAnim 0.75s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

.shield-break-glass::before {
  content: '🛡️';
  font-size: 5rem;
  filter: drop-shadow(0 0 20px #ffd700);
  animation: shieldIconBreak 0.75s ease-out forwards;
}

@keyframes shieldShatterAnim {
  0% { transform: scale(0.3); opacity: 0; filter: brightness(2); }
  30% { transform: scale(1.2); opacity: 1; filter: brightness(3); }
  60% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; filter: blur(10px) brightness(0.2); }
}

@keyframes shieldIconBreak {
  0% { transform: scale(0.5) rotate(0deg); }
  40% { transform: scale(1.3) rotate(-10deg); filter: drop-shadow(0 0 30px #ffffff); }
  100% { transform: scale(2.2) rotate(20deg); opacity: 0; }
}

/* ⚠️ 手札オーバー常時警告ダイアログ（ターン終了ボタンの直上へコンパクト縮小） */
.hand-overflow-banner {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  z-index: 200;
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.95) 0%, rgba(127, 29, 29, 0.98) 100%);
  border: 1.5px solid #f87171;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 10px rgba(239, 68, 68, 0.6);
  border-radius: 10px;
  padding: 4px 10px;
  color: #ffffff;
  font-weight: 900;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
  animation: handOverflowPulse 1s infinite alternate ease-in-out;
}

@keyframes handOverflowPulse {
  0% { transform: scale(0.96); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5); }
  100% { transform: scale(1.04); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.9); }
}

.field-zone {
  min-height: 98px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 2px 4px;
  overflow-x: auto;
  position: relative;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.food-zone-wrapper {
  background: rgba(0, 0, 0, 0.75);
  border: 1.5px solid rgba(52, 211, 153, 0.6);
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.food-zone-title {
  font-size: 0.65rem;
  color: #6ee7b7;
  font-weight: 900;
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(16, 185, 129, 0.6);
  letter-spacing: 0.5px;
}
.food-zone {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  min-height: 38px;
  align-items: center;
  padding: 2px 0;
}
.emerald-jewel {
  width: 22px;
  height: 28px;
  background: radial-gradient(circle at 30% 25%, #d1fae5 0%, #10b981 35%, #047857 70%, #012217 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1.5px solid #ffffff;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease, filter 0.3s ease;
  animation: jewelSpinGlow 3.6s infinite ease-in-out;
  perspective: 600px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.95));
}
.emerald-jewel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.3) 35%,
    transparent 65%
  );
  pointer-events: none;
}
@keyframes jewelSpinGlow {
  0% {
    transform: rotateY(0deg) scale(1);
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.95)) brightness(1.1);
  }
  50% {
    transform: rotateY(180deg) scale(1.15);
    filter: drop-shadow(0 0 20px rgba(52, 211, 153, 1)) brightness(1.5);
  }
  100% {
    transform: rotateY(360deg) scale(1);
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.95)) brightness(1.1);
  }
}
.emerald-jewel.used {
  animation: none !important;
  transform: rotateY(0deg) scale(0.88) !important;
  background: radial-gradient(circle at 35% 35%, #1e293b 0%, #0f172a 60%, #020617 100%) !important;
  border: 1px solid #334155 !important;
  box-shadow: none !important;
  filter: grayscale(100%) brightness(0.35) !important;
  opacity: 0.35;
}
.emerald-jewel.used::after {
  display: none !important;
}

#center-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.92), rgba(20,28,22,0.98), rgba(0,0,0,0.92));
  border-top: 1.5px solid var(--gold-primary);
  border-bottom: 1.5px solid var(--gold-primary);
  gap: 6px;
  z-index: 10;
  box-shadow: 0 0 18px rgba(0,0,0,0.9);
}

#center-bar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: 3px;
}

#log {
  font-size: 0.72rem;
  color: var(--text-gold);
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


#btn-end-turn { width: auto; padding: 5px 10px; font-size: 0.75rem; }
.btn-surrender {
  width: auto;
  padding: 5px 8px;
  font-size: 0.7rem;
  background: linear-gradient(180deg, #601414 0%, #300808 100%);
  color: #f87171;
  border: 1px solid #991b1b;
  box-shadow: none;
}

.hand-zone {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 2px 10px 16px 10px;
  min-height: 108px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* 手札カードの重なりとスムーズな浮き上がりアニメーション */
.hand-zone .card {
  transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28), margin 0.2s ease, z-index 0.1s ease;
  flex-shrink: 0;
}

/* 選択された手札カードを飛び出させて最前面にする */
.hand-zone .card.selected {
  transform: translateY(-22px) scale(1.15) !important;
  z-index: 200 !important;
  margin-left: 2px !important;
  margin-right: 12px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.9), 0 0 15px var(--gold-primary) !important;
}
/* --------------------------------------------------
   カードデザイン
-------------------------------------------------- */
.card {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 6px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  background: linear-gradient(180deg, #1f2822 0%, #0d120e 100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: visible !important;
}

.card.targeted-lock-on {
  border-color: #ff3344 !important;
  box-shadow: 0 0 16px #ff0000, 0 0 4px #fff !important;
  animation: lockOnPulse 0.8s infinite alternate ease-in-out;
}

@keyframes lockOnPulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.card.holographic-epic {
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 4px 12px rgba(0,0,0,0.8) !important;
}

.card.holographic-epic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  clip-path: inset(0 round 5px);
  background: linear-gradient(
    135deg,
    transparent 15%,
    rgba(255, 255, 255, 0.25) 35%,
    rgba(255, 0, 128, 0.25) 50%,
    rgba(0, 255, 255, 0.25) 65%,
    rgba(255, 230, 0, 0.25) 80%,
    transparent 95%
  );
  background-size: 250% 250%;
  /* モーションを8秒までスロー化して高級感を付与 */
  animation: holoGleamAnim 8s infinite ease-in-out;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0.65;
  z-index: 2;
}

@keyframes holoGleamAnim {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* --------------------------------------------------
   🌀 属性別：4つのラインオーラ周回回転アニメーション
-------------------------------------------------- */
/* --------------------------------------------------
   🌀 4つの属性ラインオーラ：時計回り回転アニメーション
-------------------------------------------------- */
@property --aura-deg {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes auraClockwiseRotate {
  0% { --aura-deg: 0deg; }
  100% { --aura-deg: 360deg; }
}

.card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  padding: 2px;
  background: conic-gradient(
    from var(--aura-deg, 0deg),
    var(--aura-color, transparent) 0deg 14deg,
    transparent 24deg 76deg,
    var(--aura-color, transparent) 90deg 104deg,
    transparent 114deg 166deg,
    var(--aura-color, transparent) 180deg 194deg,
    transparent 204deg 256deg,
    var(--aura-color, transparent) 270deg 284deg,
    transparent 294deg 356deg,
    var(--aura-color, transparent) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  animation: auraClockwiseRotate 3.5s linear infinite;
}

.card.red {
  background: linear-gradient(145deg, #4a0e17, #781226);
  border-color: rgba(239, 68, 68, 0.5);
  --aura-color: #ff3344;
}
.card.blue {
  background: linear-gradient(145deg, #102a45, #1d4e75);
  border-color: rgba(56, 189, 248, 0.5);
  --aura-color: #38bdf8;
}
.card.green {
  background: linear-gradient(145deg, #0d382e, #1b6352);
  border-color: rgba(52, 211, 153, 0.5);
  --aura-color: #34d399;
}
.card.selected {
  transform: translateY(-14px) scale(1.08) !important;
  border-color: var(--gold-light) !important;
  box-shadow: 0 0 16px var(--gold-primary), 0 8px 16px rgba(0,0,0,0.8) !important;
  z-index: 90 !important;
}
.card.playable { animation: playable-pulse 1.8s infinite ease-in-out; }
@keyframes playable-pulse {
  0% { box-shadow: 0 0 4px #2a9d8f; border-color: #2a9d8f; }
  50% { box-shadow: 0 0 14px #2a9d8f, 0 0 18px rgba(212, 175, 55, 0.8); border-color: #fff; }
  100% { box-shadow: 0 0 4px #2a9d8f; border-color: #2a9d8f; }
}
.card.exhausted { opacity: 0.65; filter: grayscale(35%); }
/* 💥 攻撃可能（アクティブ）昆虫の息づくパルスオーラ */
.card.actionable-pulse {
  animation: actionablePulseAnim 1.6s infinite ease-in-out !important;
}

@keyframes actionablePulseAnim {
  0% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 0 12px rgba(42, 157, 143, 0.5); border-color: #ffd700; }
  50% { box-shadow: 0 0 18px rgba(255, 215, 0, 0.95), 0 0 24px rgba(52, 211, 153, 0.9); border-color: #ffffff; transform: translateY(-2px); }
  100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 0 12px rgba(42, 157, 143, 0.5); border-color: #ffd700; }
}

/* ⛓️ 行動不可（召喚酔い・麻痺・疲了）時の小刻みに動く浮遊鎖アイコン */
.chain-icon {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.15rem;
  z-index: 25;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  animation: chainWiggleAnim 1.8s infinite ease-in-out;
}

@keyframes chainWiggleAnim {
  0% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(5deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
}

/* 🎯 攻撃ロックオン時：ダメージ予測HPの強烈点滅発光 */
.orb-hp.preview-pulse {
  background: radial-gradient(circle at 35% 35%, #ff2200 0%, #990000 60%, #400000 100%) !important;
  border-color: #ffffff !important;
  animation: previewHpGlow 0.5s infinite alternate ease-in-out !important;
}

.orb-hp.preview-pulse .orb-val {
  color: #ffff00 !important;
  text-shadow: 0 0 8px #ff0000, 0 0 3px #ffffff !important;
}

@keyframes previewHpGlow {
  0% { transform: scale(1); box-shadow: 0 0 6px #ff0000, inset 0 0 4px #fff; }
  100% { transform: scale(1.35); box-shadow: 0 0 20px #ff0000, 0 0 25px #ffff00, inset 0 0 8px #fff; }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 0.62rem;
  z-index: 3;
  line-height: 1;
  height: 14px;
  margin-bottom: 2px;
}

.card-cost {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-ability {
  font-size: 0.48rem;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: bold;
  color: #fff;
  background: rgba(0,0,0,0.7);
  border: 1px solid #777;
}
.card-ability.taunt { background: #d97706; border-color: #fbbf24; }
.card-ability.charge { background: #dc2626; border-color: #f87171; }
.card-ability.revenge { background: #7c3aed; border-color: #c084fc; }
.card-ability.drain { background: #059669; border-color: #34d399; }
.card-ability.draw { background: #2563eb; border-color: #60a5fa; }
.card-ability.coin { background: #b45309; border-color: #f59e0b; }

.card-element { font-size: 0.58rem; z-index: 3; }

.card-img-container {
  width: 100%;
  height: 42px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: #0d120e;
  flex-shrink: 0;
  z-index: 1;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

/* 透過イラストの背後に置く上品で落ち着いた属性カラー背景 */
.card-img-container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 【赤属性】シックで柔らかな紅蓮オーラ */
.card.red .card-img-container::before {
  background: radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.45) 0%, rgba(120, 15, 20, 0.3) 60%, rgba(15, 5, 8, 0.8) 100%);
  animation: softElemGleam 5s ease-in-out infinite alternate;
}

/* 【青属性】シックで柔らかな蒼海オーラ */
.card.blue .card-img-container::before {
  background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.45) 0%, rgba(15, 60, 110, 0.3) 60%, rgba(5, 15, 30, 0.8) 100%);
  animation: softElemGleam 5s ease-in-out infinite alternate;
}

/* 【緑属性】シックで柔らかな木漏れ日オーラ */
.card.green .card-img-container::before {
  background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.45) 0%, rgba(15, 80, 45, 0.3) 60%, rgba(5, 20, 10, 0.8) 100%);
  animation: softElemGleam 5s ease-in-out infinite alternate;
}

/* 共通の落ち着いた明滅アニメーション */
@keyframes softElemGleam {
  0% { opacity: 0.6; filter: brightness(0.9); }
  100% { opacity: 0.95; filter: brightness(1.15); }
}

.card-name {
  font-size: 0.58rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  z-index: 3;
}

/* --------------------------------------------------
   高級ジュエルドーム & 重厚メタリックフレーム オーブ
-------------------------------------------------- */
.card-orb {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-sizing: border-box;
  user-select: none;
  pointer-events: none;
  transition: all 0.25s ease;
}

.orb-val {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.68rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,0.9);
  line-height: 1;
  z-index: 2;
}

.orb-atk {
  bottom: -2px;
  left: -2px;
  background: radial-gradient(circle at 35% 35%, #ff4d4d 0%, #b91c1c 55%, #450a0a 100%);
  border: 1.5px solid #fef08a;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(220, 38, 38, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 3px rgba(0, 0, 0, 0.8);
}

.orb-hp {
  bottom: -2px;
  right: -2px;
  background: radial-gradient(circle at 35% 35%, #34d399 0%, #047857 55%, #022c22 100%);
  border: 1.5px solid #fef08a;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(16, 185, 129, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 3px rgba(0, 0, 0, 0.8);
}

.orb-hp.damaged {
  background: radial-gradient(circle at 35% 35%, #fbbf24 0%, #b45309 55%, #451a03 100%);
  border-color: #fef08a;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(245, 158, 11, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 3px rgba(0, 0, 0, 0.8);
}

.targetable-hero {
  animation: pulse-target 0.9s infinite alternate ease-in-out;
  cursor: pointer;
}

@keyframes pulse-target {
  from { box-shadow: 0 0 6px var(--accent-red); border-color: var(--accent-red); }
  to { box-shadow: 0 0 18px var(--accent-red); border-color: #fff; }
}

.card-hit-shake { animation: hitShakeAnim 0.35s ease-in-out !important; }
@keyframes hitShakeAnim {
  0% { transform: scale(1) translate(0, 0); filter: brightness(2.5) drop-shadow(0 0 12px #ff0000); }
  20% { transform: scale(1.1) translate(-7px, 4px) rotate(-5deg); }
  40% { transform: scale(0.95) translate(7px, -4px) rotate(5deg); }
  60% { transform: scale(1.05) translate(-4px, -2px) rotate(-3deg); }
  80% { transform: scale(0.98) translate(2px, 2px) rotate(2deg); }
  100% { transform: scale(1) translate(0, 0); filter: none; }
}

.card-shattering {
  animation: cardShatterAnim 0.6s ease-out forwards !important;
  pointer-events: none !important;
}

@keyframes cardShatterAnim {
  0% { filter: brightness(3) drop-shadow(0 0 20px #ff1100); transform: scale(1.08); }
  30% { filter: brightness(5) contrast(200%); transform: scale(1.15) rotate(4deg); }
  100% { opacity: 0; filter: brightness(0.1) blur(6px); transform: scale(0.3) translateY(25px) rotate(-10deg); }
}

/* 🏆 フィニッシュカットイン */
.finish-cutin-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.92) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10500;
  animation: finishOverlayAnim 0.3s forwards;
}

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

.finish-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid var(--gold-primary);
  box-shadow: 0 0 30px var(--gold-primary), 0 0 60px #ff2a2a;
  object-fit: cover;
  margin-bottom: 1rem;
  animation: finishAvatarZoom 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes finishAvatarZoom {
  0% { transform: scale(0.1) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.finish-text-title {
  font-size: 3.2rem;
  font-weight: 900;
  font-family: 'Cinzel', Georgia, serif;
  background: linear-gradient(180deg, #fff 0%, #ffd700 50%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) drop-shadow(0 4px 10px #000);
  animation: finishTextPulse 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  letter-spacing: 4px;
}

@keyframes finishTextPulse {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 🪦 墓地確認ボタン ＆ 墓地モーダルスタイル */
.gy-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: auto;
  padding: 1px 6px;
  font-size: 0.68rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #e2e8f0;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  margin-left: 2px;
  vertical-align: middle;
}

.gy-trigger-btn:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: var(--gold-primary);
}

.graveyard-modal-content {
  background: linear-gradient(160deg, #18201a 0%, #0a0f0c 100%);
  border: 1.5px solid var(--gold-primary);
  border-radius: 16px;
  padding: 1rem;
  width: 92%;
  max-width: 440px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95);
}

.graveyard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.graveyard-tabs button {
  flex: 1;
  padding: 6px;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #94a3b8;
}

.graveyard-tabs button.active {
  background: linear-gradient(180deg, #d4af37 0%, #8a6d0b 100%);
  color: #0d120e;
  border-color: #ffe89c;
  font-weight: bold;
}

.graveyard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 6px;
  overflow-y: auto;
  max-height: 50vh;
  padding: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.graveyard-grid .card {
  transform: scale(0.9) !important;
  margin: -2px;
}

/* --------------------------------------------------
   🔄 初手マリガンガイダンスバナー
-------------------------------------------------- */
.mulligan-banner {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: 90%;
  max-width: 380px;
  background: linear-gradient(135deg, rgba(20, 28, 22, 0.95) 0%, rgba(10, 15, 11, 0.98) 100%);
  border: 1.5px solid var(--gold-primary);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: mulliganPulse 2s infinite ease-in-out;
}

@keyframes mulliganPulse {
  0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 215, 0, 0.6); }
  100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 175, 55, 0.3); }
}

.mulligan-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--gold-primary);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.mulligan-sub {
  font-size: 0.72rem;
  color: #d1d5db;
  margin-bottom: 10px;
  line-height: 1.3;
}

.mulligan-btn {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1px solid #fef08a !important;
  font-size: 0.85rem !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 8px rgba(245, 158, 11, 0.4) !important;
  letter-spacing: 0.5px;
}

/* スマホ等レスポンシブ */
@media (max-width: 480px) {
  :root {
    --card-width: 67px;
    --card-height: 96px;
  }
  .card-img-container { height: 38px; }
  .card-name { font-size: 0.52rem; margin-top: 2px; }
  .card-orb { width: 18px; height: 18px; bottom: -2px; }
  .orb-atk { left: -2px; }
  .orb-hp { right: -2px; }
  .orb-val { font-size: 0.62rem; }
  .hand-zone { min-height: 102px; padding-bottom: 14px; }
}

/* ===================================================
   🔥🌊🍃 高コスト召喚：カード発光 ＆ 属性爆発エフェクト (0.5秒)
===================================================== */

/* 1. カード本体を一瞬神々しく発光させる */
.card-summon-flash {
  animation: cardSummonFlashAnim 0.45s ease-out !important;
}
@keyframes cardSummonFlashAnim {
  0% { filter: brightness(3.5) drop-shadow(0 0 20px #fff); transform: scale(1.15); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: scale(1); }
}

/* 2. カード中心起点のVFXアンカー */
.vfx-card-anchor {
  position: fixed;
  pointer-events: none;
  z-index: 9000;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* --- 🔥 赤属性：爆炎スパイラル ＆ 火の粉 --- */
.vfx-flame-vortex {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, #ff1100 25%, #ffea00 50%, #ff4500 75%, transparent 100%);
  filter: drop-shadow(0 0 16px #ff2200);
  mask-image: radial-gradient(circle, transparent 25%, black 70%);
  -webkit-mask-image: radial-gradient(circle, transparent 25%, black 70%);
  animation: flameVortexAnim 0.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes flameVortexAnim {
  0% { transform: scale(0.1) rotate(0deg); opacity: 0; }
  40% { opacity: 1; transform: scale(1.5) rotate(180deg); }
  100% { transform: scale(2.4) rotate(360deg); opacity: 0; }
}

.vfx-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffea00;
  border-radius: 50%;
  box-shadow: 0 0 10px #ff3300;
  animation: sparkFly 0.45s ease-out forwards;
}
@keyframes sparkFly {
  0% { transform: translate(0, 0) scale(1.5); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.1); opacity: 0; }
}

/* --- 🌊 青属性：2重アクアバースト ＆ 大水滴 --- */
.vfx-water-splash {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid #38bdf8;
  box-shadow: 0 0 25px #0284c7, inset 0 0 20px #e0f2fe;
  animation: waterSplashAnim 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes waterSplashAnim {
  0% { transform: scale(0.1); opacity: 0; border-width: 12px; }
  35% { opacity: 1; border-width: 6px; }
  100% { transform: scale(2.2); opacity: 0; border-width: 1px; }
}

.vfx-droplet {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #bae6fd;
  border-radius: 50%;
  box-shadow: 0 0 10px #38bdf8;
  animation: dropletFly 0.48s ease-out forwards;
}
@keyframes dropletFly {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
}

/* --- 🍃 緑属性：木葉トルネード ＆ 黄金胞子 --- */
.vfx-leaf-particle {
  position: absolute;
  width: 14px;
  height: 8px;
  background: linear-gradient(135deg, #4ade80, #15803d);
  border-radius: 12px 2px 12px 2px;
  box-shadow: 0 0 8px #22c55e;
  animation: leafTornadoAnim 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes leafTornadoAnim {
  0% { transform: translate(0, 15px) rotate(0deg) scale(0.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1.4); opacity: 0; }
}

/* --------------------------------------------------
   🌟 コスト5：エピック（流れる虹色ホログラム）
-------------------------------------------------- */


.card.holographic-epic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  clip-path: inset(0 round 5px);
  background: linear-gradient(
    135deg,
    transparent 20%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(255, 0, 128, 0.2) 55%,
    rgba(0, 255, 255, 0.2) 70%,
    rgba(255, 230, 0, 0.2) 85%,
    transparent 100%
  );
  background-size: 400% 400%;
  /* 18秒かけて、じわ〜っと超静かに変化 */
  animation: holoGleamSlow 18s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
  z-index: 2;
}

@keyframes holoGleamSlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}


/* --------------------------------------------------
   👑 コスト6以上：レジェンド（超スロー極彩虹ホロ）
-------------------------------------------------- */
.card.holographic-legend {
  z-index: 5;
}
/* 1. 白飛びしない超低速オーロラホロ（18秒周期） */
.card.holographic-legend::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  clip-path: inset(0 round 4px);
  background: linear-gradient(
    125deg,
    rgba(255, 0, 100, 0.18) 0%,
    rgba(255, 200, 0, 0.18) 25%,
    rgba(0, 230, 255, 0.18) 50%,
    rgba(0, 255, 120, 0.18) 75%,
    rgba(255, 0, 100, 0.18) 100%
  );
  background-size: 350% 350%;
  /* 18秒の超静寂スローモーション */
  animation: legendAuroraSlow 18s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.85;
  z-index: 2;
}
@keyframes legendAuroraSlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --------------------------------------------------
   💥 コスト6専用：属性別着地オーラ ＆ 地面激震VFX
-------------------------------------------------- */

/* 1. 地面を激しく揺るがす地震振動 */
.legend-earthquake-shake {
  animation: earthquakeShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes earthquakeShake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-8px, 6px) rotate(-1deg); filter: brightness(1.5); }
  30% { transform: translate(8px, -6px) rotate(1deg); }
  45% { transform: translate(-6px, 4px); }
  60% { transform: translate(6px, -3px); }
  75% { transform: translate(-3px, 2px); }
  100% { transform: translate(0, 0); filter: none; }
}

/* 2. カードがズドン！と降臨する着地モーション */
.legend-card-landing {
  animation: legendCardDrop 0.5s cubic-bezier(0.11, 0.9, 0.2, 1) !important;
}

@keyframes legendCardDrop {
  0% { transform: translateY(-160px) scale(1.8); opacity: 0; filter: brightness(3); }
  65% { transform: translateY(0) scale(0.92); opacity: 1; filter: brightness(1.8); }
  85% { transform: translateY(-10px) scale(1.05); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

/* 3. 足元の亀裂衝撃波リング */
.legend-ground-shockwave {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: shockwaveExpand 0.65s ease-out forwards;
}

@keyframes shockwaveExpand {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 8px; }
  100% { transform: translate(-50%, -50%) scale(7.5); opacity: 0; border-width: 1px; }
}

/* 4. 【赤属性】紅蓮の爆炎オーラ */
.legend-aura-red {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 230, 0, 0.9) 0%, rgba(255, 50, 0, 0.8) 45%, transparent 75%);
  filter: drop-shadow(0 0 20px #ff2200);
  animation: redFlameAura 0.7s ease-out forwards;
}

@keyframes redFlameAura {
  0% { transform: translate(-50%, -50%) scale(0.1) rotate(0deg); opacity: 0; }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.6) rotate(90deg); }
  100% { transform: translate(-50%, -50%) scale(2.8) rotate(180deg); opacity: 0; }
}

/* 5. 【青属性】蒼天の激流瀑布オーラ */
.legend-aura-blue {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border: 6px solid #38bdf8;
  box-shadow: 0 0 30px #0284c7, inset 0 0 25px #e0f2fe;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.6) 0%, transparent 70%);
  animation: blueWaterAura 0.7s ease-out forwards;
}

@keyframes blueWaterAura {
  0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; border-width: 14px; }
  40% { opacity: 1; border-width: 8px; }
  100% { transform: translate(-50%, -50%) scale(3.0); opacity: 0; border-width: 1px; }
}

/* 6. 【緑属性】翠緑の嵐・聖光オーラ */
.legend-aura-green {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0%, #34d399 25%, #aaff00 50%, #10b981 75%, transparent 100%);
  filter: drop-shadow(0 0 20px #10b981);
  mask-image: radial-gradient(circle, transparent 30%, black 70%);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, black 70%);
  animation: greenStormAura 0.75s ease-out forwards;
}

@keyframes greenStormAura {
  0% { transform: translate(-50%, -50%) scale(0.1) rotate(0deg); opacity: 0; }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.8) rotate(270deg); }
  100% { transform: translate(-50%, -50%) scale(3.2) rotate(540deg); opacity: 0; }
}

/* 🔮 スペルカードの効果テキストスタイル */
.card-desc {
  font-size: 0.46rem;
  color: #f3e5ab;
  text-align: center;
  line-height: 1.15;
  padding: 2px 3px;
  background: rgba(13, 18, 14, 0.85);
  border-radius: 4px;
  border: 1px solid rgba(192, 132, 252, 0.5);
  margin-top: 2px;
  z-index: 3;
  word-break: break-all;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
} 

/* --- 追加：新アビリティバッジのカラー指定 --- */
.card-ability.stealth { background: #475569; border-color: #94a3b8; }       /* 潜伏 */
.card-ability.growth { background: #15803d; border-color: #86efac; }        /* 成長 */
.card-ability.rebirth { background: #b91c1c; border-color: #fca5a5; }       /* 復活 */
.card-ability.trap { background: #c026d3; border-color: #f5d0fe; }          /* 奇襲 */
.card-ability.double_strike { background: #ea580c; border-color: #ffedd5; } /* 双撃 */
.card-ability.intercept { background: #0284c7; border-color: #38bdf8; }     /* 迎撃 */
.card-ability.shell { background: #0d9488; border-color: #2dd4bf; }         /* 甲殻 */
.card-ability.paralyze { background: #7e22ce; border-color: #e9d5ff; }      /* 麻痺 */
.card-ability.predation { background: #9f1239; border-color: #fecdd3; }     /* 捕食 */
/* --- 追加：潜伏中のカードの見た目（うっすら透明化） --- */
.card.stealth-active {
  opacity: 0.65;
  filter: contrast(0.8) brightness(1.2);
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.6);
}

/* ===================================================
   💎 盤面UI 高級感リファイン (ラグジュアリーTCGスタイル)
===================================================== */

/* 1. プレイヤー情報パネル (すりガラス × メタリックゴールド枠) */
.player-info {
  background: linear-gradient(135deg, rgba(18, 26, 20, 0.75) 0%, rgba(8, 12, 9, 0.85) 100%) !important;
  border: 1px solid transparent !important;
  border-image: linear-gradient(135deg, #ffd700, #b8860b 40%, rgba(212,175,55,0.2) 100%) 1 !important;
  border-radius: 10px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  padding: 6px 12px !important;
}

/* 2. 勲章風アバターリング */
.player-avatar {
  width: 34px !important;
  height: 34px !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6), inset 0 0 6px #000 !important;
  outline: 2px solid rgba(0, 0, 0, 0.8);
}

/* 3. シールド / テリトリー (ルビー・クリスタル化) */
.territory-card {
  width: 14px !important;
  height: 22px !important;
  background: radial-gradient(circle at 30% 30%, #f43f5e 0%, #be123c 60%, #4c0519 100%) !important;
  border: 1px solid #fda4af !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 6px rgba(244, 63, 94, 0.5) !important;
  transform: skewX(-6deg); /* わずかに斜傾させてスタイリッシュに */
}

/* 4. フィールドゾーン (点線を廃止し、重厚な彫刻枠へ) */
.field-zone {
  min-height: 106px !important;
  background: radial-gradient(ellipse at center, rgba(15, 23, 17, 0.5) 0%, rgba(5, 8, 6, 0.75) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  padding: 6px 8px !important;
}

/* 5. 中央コントロールバー */
#center-bar {
  background: linear-gradient(90deg, 
    rgba(5, 8, 6, 0.95) 0%, 
    rgba(24, 36, 27, 0.98) 50%, 
    rgba(5, 8, 6, 0.95) 100%) !important;
  border-top: 1px solid #ffd700 !important;
  border-bottom: 1px solid #ffd700 !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 175, 55, 0.2) !important;
}

/* 6. ターン終了ボタン (魔法陣・金箔仕様) */
#btn-end-turn {
  background: linear-gradient(180deg, #ffe082 0%, #d4af37 45%, #8a6d0b 100%) !important;
  color: #1a0f00 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  border: 1px solid #fff5c0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 175, 55, 0.5) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  letter-spacing: 1px;
  transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}

#btn-end-turn:not(:disabled) {
  animation: turnBtnPulse 2s infinite ease-in-out;
}

@keyframes turnBtnPulse {
  0% { box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 8px rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 0 20px rgba(255, 215, 0, 0.9); transform: scale(1.03); }
  100% { box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 8px rgba(212, 175, 55, 0.4); }
}

#btn-end-turn:disabled {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important;
  color: #6b7280 !important;
  border-color: #4b5563 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* 7. 手札の美しい扇状（カーブ）重ね合わせ配置 */
/* 7. 手札の重ね合わせ配置 */
.hand-zone {
  perspective: 1000px;
  padding-bottom: 8px !important;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* ホバー/選択時にはカーブを解いてリフトアップ */
.hand-zone .card:hover,
.hand-zone .card.selected {
  transform: translateY(-28px) rotate(0deg) scale(1.18) !important;
  z-index: 300 !important;
}

/* ===================================================
   🏆 トドメ（フィニッシャー）劇的スロー＆激震VFX
===================================================== */

/* 画面全体のスローモーション＆ドラマチックズーム */
/* 🏆 トドメ（フィニッシャー）スロー＆激震VFX */
.finisher-slow-mo {
  animation: finisherSlowZoom 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards !important;
}

@keyframes finisherSlowZoom {
  0% { transform: scale(1); filter: brightness(1) contrast(1); }
  25% { transform: scale(1.08); filter: brightness(1.6) contrast(1.3); }
  80% { transform: scale(1.05); filter: brightness(1.2) contrast(1.1); }
  100% { transform: scale(1); filter: brightness(1) contrast(1); }
}

.finisher-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(0, 0, 0, 0.88) 85%);
  z-index: 9998;
  pointer-events: none;
  animation: vignetteFade 1.2s ease-out forwards;
}

@keyframes vignetteFade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.finisher-super-shockwave {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 12px solid #ffd700;
  box-shadow: 
    0 0 60px #ff2a2a,
    0 0 120px #ffd700,
    inset 0 0 50px #ffffff;
  z-index: 9999;
  pointer-events: none;
  animation: superShockwaveExpand 1.1s cubic-bezier(0.05, 0.85, 0.1, 1) forwards;
}

@keyframes superShockwaveExpand {
  0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; border-width: 24px; }
  40% { opacity: 1; border-width: 12px; }
  100% { transform: translate(-50%, -50%) scale(16); opacity: 0; border-width: 1px; }
}

/* --------------------------------------------------
   🖤 EXカード専用 プレミアムガンメタリックフレーム & 薄虹ホロ
-------------------------------------------------- */
.card.extra-card {
  background: linear-gradient(145deg, #18191d 0%, #0a0b0d 50%, #1a1b20 100%) !important;
  border: 2px solid #3a3d45 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* EXカード内側発光ライン（回転オーラと共存） */
.card.extra-card.red {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), inset 0 0 8px rgba(239, 68, 68, 0.5) !important;
}
.card.extra-card.blue {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), inset 0 0 8px rgba(56, 189, 248, 0.5) !important;
}
.card.extra-card.green {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), inset 0 0 8px rgba(52, 211, 153, 0.5) !important;
}
/* 四隅の立体金属装飾（リベット風ボルト） */
.card.extra-card .extra-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 35% 35%, #e2e8f0 0%, #64748b 60%, #1e293b 100%);
  border: 1px solid #0f172a;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  z-index: 6;
  pointer-events: none;
}
.card.extra-card .extra-corner.top-left { top: 2px; left: 2px; }
.card.extra-card .extra-corner.top-right { top: 2px; right: 2px; }
.card.extra-card .extra-corner.bottom-left { bottom: 2px; left: 2px; }
.card.extra-card .extra-corner.bottom-right { bottom: 2px; right: 2px; }

/* 高級TCG風 薄い虹色ホログラム光沢 */
.card.extra-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 182, 193, 0.12) 35%,
    rgba(186, 230, 253, 0.15) 50%,
    rgba(187, 247, 208, 0.12) 65%,
    transparent 80%
  );
  background-size: 200% 200%;
  animation: exHoloGleam 9s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0.75;
  z-index: 5;
}

@keyframes exHoloGleam {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* EXカード限定バッジ */
.card-extra-badge {
  font-size: 0.45rem;
  font-weight: 900;
  color: #fbbf24;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #f59e0b;
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

/* --------------------------------------------------
   ✨ EXカード 合成必要コスト達成時の白色発光アニメーション
-------------------------------------------------- */
.card.extra-card.synth-ready {
  border-color: #ffffff !important;
  box-shadow: 
    0 0 15px #ffffff,
    0 0 30px rgba(255, 255, 255, 0.9),
    0 0 45px rgba(245, 158, 11, 0.7),
    inset 0 0 15px rgba(255, 255, 255, 0.9) !important;
  animation: synthReadyGlow 1.2s infinite alternate ease-in-out !important;
  z-index: 100 !important;
}

@keyframes synthReadyGlow {
  0% {
    transform: translateY(-22px) scale(1.15);
    box-shadow: 
      0 0 12px #ffffff,
      0 0 25px rgba(255, 255, 255, 0.8),
      0 0 35px rgba(245, 158, 11, 0.6),
      inset 0 0 10px rgba(255, 255, 255, 0.8);
  }
  100% {
    transform: translateY(-26px) scale(1.22);
    box-shadow: 
      0 0 22px #ffffff,
      0 0 45px rgba(255, 255, 255, 1),
      0 0 65px rgba(255, 215, 0, 0.95),
      inset 0 0 20px rgba(255, 255, 255, 1);
  }
}

/* 💎 EX合成素材選択 プロ仕様プログレスバナー */
.synth-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 2px 8px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(255, 255, 255, 0.12), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 6px;
  color: #fef08a;
  font-size: 0.72rem;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.synth-banner .cost-badge {
  background: #0f172a;
  border: 1px solid #f59e0b;
  color: #fbbf24;
  padding: 1px 6px;
  border-radius: 10px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.75rem;
  font-weight: 900;
}

.synth-banner .cost-badge.ready {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #86efac;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
  animation: pulseReadyBadge 0.8s infinite alternate ease-in-out;
}

@keyframes pulseReadyBadge {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* --------------------------------------------------
   💎 マナジュエル消費 ＆ EX合成 演出VFX
-------------------------------------------------- */

/* ジュエル弾け粒子 */
.vfx-mana-particle {
  position: fixed;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #a7f3d0 0%, #10b981 60%, #047857 100%);
  border-radius: 50%;
  box-shadow: 0 0 10px #34d399, 0 0 20px #10b981;
  pointer-events: none;
  z-index: 10000;
  animation: manaFlyAnim 0.65s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}

@keyframes manaFlyAnim {
  0% {
    transform: translate(0, 0) scale(1.5);
    opacity: 1;
  }
  35% {
    transform: translate(var(--midX), var(--midY)) scale(1.8);
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--targetX), var(--targetY)) scale(0.2);
    opacity: 0;
  }
}

/* EX合成：素材収縮の光球 */
.vfx-synth-ball {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fbbf24 40%, #f59e0b 80%, transparent 100%);
  box-shadow: 0 0 40px #ffd700, 0 0 80px #f59e0b;
  animation: synthImplode 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@keyframes synthImplode {
  0% { transform: translate(-50%, -50%) scale(2.5); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.9; filter: brightness(2); }
  100% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; filter: brightness(4); }
}

/* EX合成：爆発バースト */
.vfx-synth-burst {
  position: fixed;
  pointer-events: none;
  z-index: 10002;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #f59e0b 45%, #ef4444 75%, transparent 100%);
  box-shadow: 0 0 50px #ffd700, 0 0 100px #ff2200;
  animation: synthBurst 0.55s ease-out forwards;
}

@keyframes synthBurst {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; filter: blur(6px); }
}

/* ターン切り替えフェーズ通知バナー */
.turn-banner-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10000;
}
.turn-banner-text {
  font-family: 'Cinzel', 'Georgia', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 4px;
  padding: 14px 48px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  animation: turnBannerAnim 1.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  white-space: nowrap;
}
.turn-banner-my {
  background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.88) 25%, rgba(16, 185, 129, 0.88) 75%, transparent 100%);
  color: #ffffff;
  border-top: 2px solid #6ee7b7;
  border-bottom: 2px solid #6ee7b7;
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.85);
}
.turn-banner-opp {
  background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.88) 25%, rgba(220, 38, 38, 0.88) 75%, transparent 100%);
  color: #ffffff;
  border-top: 2px solid #fca5a5;
  border-bottom: 2px solid #fca5a5;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.85);
}
@keyframes turnBannerAnim {
  0% { transform: scale(0.5) translateY(20px); opacity: 0; }
  20% { transform: scale(1.05) translateY(0); opacity: 1; }
  75% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(1.15) translateY(-12px); opacity: 0; }
}


/* 属性相性サークルインジケーター */
.element-cycle-indicator {
  width: 28px;
  height: 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8), inset 0 0 4px rgba(0, 0, 0, 0.9);
  flex-shrink: 0;
  user-select: none;
}
.elem-cycle-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.elem-cycle-group {
  transform-origin: 18px 18px;
  animation: elementCycleRotate 5s linear infinite;
}
@keyframes elementCycleRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}