/* =========================
   page.battle.css（ページ個別）
   ========================= */

/* =========================
   5) ページ個別（ヘッダー非表示＆余白）
   ========================= */
.head{ display: none !important; }
.battle-shell{ padding-top: 8px !important; }


/* =========================
   追加：残り山札（deck-left）心拍演出（色なし・動きのみ）
   ========================= */

/* 数字は transform が見えるようにする */
#deck-left .num{
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* 13以下〜：常時ドクンドクン（数字だけ） */
#deck-left.deck-critical .num{
  animation: deckPulseNum 1.15s ease-in-out infinite !important;
}

/* 3以下〜：さらに速いドクンドクン（数字だけ） */
#deck-left.deck-final .num{
  animation: deckPulseNumFinal .72s ease-in-out infinite !important;
}

/* 減った瞬間（beat）：
   “上書き”じゃなく「pulse + beat」を同時に回す */
#deck-left.deck-critical.deck-beat .num{
  animation: deckBeatNum .18s ease-in-out 1, deckPulseNum 1.15s ease-in-out infinite !important;
}
#deck-left.deck-final.deck-beat .num{
  animation: deckBeatNum .18s ease-in-out 1, deckPulseNumFinal .72s ease-in-out infinite !important;
}

/* まだcritical/finalじゃない状態でbeatだけ来た時（保険） */
#deck-left.deck-beat .num{
  animation: deckBeatNum .18s ease-in-out 1 !important;
}


/* =========================
   アニメ定義（数字だけ動かす）
   ========================= */

/* 減った瞬間の「キュッ」 */
@keyframes deckBeatNum{
  0%   { transform: translateZ(0) scale(1); }
  45%  { transform: translateZ(0) scale(.88); }
  100% { transform: translateZ(0) scale(1); }
}

/* 通常鼓動（13以下〜） */
@keyframes deckPulseNum{
  0%   { transform: translateZ(0) scale(1); }
  50%  { transform: translateZ(0) scale(.93); }
  100% { transform: translateZ(0) scale(1); }
}

/* 最終鼓動（3以下〜） */
@keyframes deckPulseNumFinal{
  0%   { transform: translateZ(0) scale(1); }
  45%  { transform: translateZ(0) scale(.90); }
  100% { transform: translateZ(0) scale(1); }
}


/* =========================
   6) 親1枚カード化
   ========================= */

.battle-shell{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.10);

  /* ✅ここが本命：外側の左右余白を作る（端末差ズレなし） */
  width: min(560px, calc(100% - 24px));
  margin: 8px auto;

  /* 既存の内側余白は維持 */
  padding: 12px;
}

/* セクション間の軽い区切り */
.panel,
.log-card{
  margin-top: 12px;
}