/* ============================================================
   game_addon_battle.css — screenBattle リデザイン（クリーン版）
   カムイバース式 JobTribes 試練祭
   ============================================================ */

/* 1. フィールド全体 */
#battleField {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
  position: relative;
}
#screenBattle { overflow: hidden !important; }

/* 2. 背景 */
.battle-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/meta/map/game/jobtribes/media/bg_battle_m.png') center 60% / cover no-repeat;
}
.battle-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 2, 0.52);
}
.battle-bg-grid, .battle-bg-glow { display: none; }

/* 3. タイマー */
.battle-timer-wrap { position: absolute; top: 10px; right: 14px; z-index: 20; }
#battleTimer {
  font-size: 12px; font-family: monospace; color: #c8a050;
  background: rgba(200,160,80,0.1); border: 1px solid rgba(200,160,80,0.25);
  padding: 2px 10px; border-radius: 99px; letter-spacing: 0.05em;
}

/* 4. バトルレイアウト */
.battle-layout {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: flex-end;
  justify-content: space-between !important;
  padding: 0 12px 6px;
  position: relative; z-index: 5;
  overflow: visible !important;
  transform: translateY(-60px);
}

/* 5. サイド配置 */
.battle-side.player-side {
  flex: 1 1 0% !important;
  align-items: flex-start !important;
  padding-left: 100px !important;
}
.battle-side.enemy-side {
  flex: 1 1 0% !important;
  align-items: flex-end !important;
  padding-right: 20px !important;
  margin-bottom: 54px;
  transform: translateX(-120px);
}

/* 6. キャラグループ */
.player-battle-group, .enemy-battle-group {
  display: flex; flex-direction: row; align-items: flex-end; gap: 10px;
}

/* 7. ユーザーアイコン */
.player-char {
  flex-shrink: 0; width: 54px; height: 80px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.player-icon-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(100,160,255,0.12);
  border: 1.5px dashed rgba(100,160,255,0.35);
  display: flex; align-items: center; justify-content: center;
}
.player-icon-circle svg { opacity: 0.6; }

/* 8. ニャンニャン独立配置 */
.enemy-battle-group { position: relative !important; }
.nyan-char {
  position: absolute !important;
  right: -120px !important;
  bottom: 20px !important;
  z-index: 0 !important;
  overflow: visible;
}
.nyan-battle-img {
  height: 270px; width: auto; object-fit: contain;
  animation: nyan-battle-float 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(220,120,255,0.35));
}
@keyframes nyan-battle-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* 9. カードサイズ・画像（完全確定版） */
#nyanFace { display: none !important; }

#playerBattleCard,
#enemyBattleCard {
  width: 140px !important;
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: block !important;
}

#playerCardImg,
#enemyCardImg {
  width: 140px !important;
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  overflow: hidden !important;
  display: block !important;
  flex: none !important;
}

#playerCardImg img,
#enemyCardImg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.battle-card-info, .battle-card-name, .battle-card-meta,
.battle-card-rarity, .battle-card-attr, .battle-card-placeholder,
#playerCardName, #playerCardRarity, #playerCardAttr,
#enemyCardNameDisplay, #enemyCardHP {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.player-card-wrap, .enemy-card-wrap { width: 140px !important; }
.hp-bar-wrap { width: 140px !important; }

.enemy-side .battle-card-wrap {
  position: relative !important;
  z-index: 2 !important;
  transform: translateX(-80px) translateY(50px) !important;
}

@keyframes card-battle-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(0.5deg); }
}
#playerBattleCard { animation: card-battle-float 4.2s ease-in-out infinite; }
#enemyBattleCard  { animation: card-battle-float 3.8s ease-in-out infinite 0.6s; }

#playerBattleCard { border: 2px solid rgba(100,200,255,0.5) !important; }
#enemyBattleCard  { border: 2px solid rgba(180,100,255,0.5) !important; }
.player-side .battle-card[data-attr="青"] { border-color: rgba(60,160,255,0.8) !important; }
.player-side .battle-card[data-attr="赤"] { border-color: rgba(255,80,80,0.8) !important; }
.player-side .battle-card[data-attr="黄"] { border-color: rgba(255,210,40,0.8) !important; }
.player-side .battle-card[data-attr="緑"] { border-color: rgba(60,210,120,0.8) !important; }
.player-side .battle-card[data-attr="紫"] { border-color: rgba(180,80,255,0.8) !important; }
.enemy-side  .battle-card[data-attr="青"] { border-color: rgba(60,160,255,0.8) !important; }
.enemy-side  .battle-card[data-attr="赤"] { border-color: rgba(255,80,80,0.8) !important; }
.enemy-side  .battle-card[data-attr="黄"] { border-color: rgba(255,210,40,0.8) !important; }
.enemy-side  .battle-card[data-attr="緑"] { border-color: rgba(60,210,120,0.8) !important; }
.enemy-side  .battle-card[data-attr="紫"] { border-color: rgba(180,80,255,0.8) !important; }

/* 10. side-label — 表示廃止（2026-04-22）
   initBattleOverlays が作成する #player-label-overlay / #enemy-label-overlay が
   カード付近に同等のラベルを配置するため、元の side-label は常に非表示。
   これで「あなた」ピルの重複表示を解消する。 */
.battle-side { position: relative !important; overflow: visible !important; }
.side-label.player-label,
.side-label.enemy-label {
  display: none !important;
}

/* 11. VS中央区切り非表示 */
.battle-center { display: none !important; }

/* 12. HPゲージ */
.hp-bar-wrap { position: relative; margin-top: 20px !important; }
.hp-bar-bg {
  position: relative; height: 10px;
  background: rgba(0,0,0,0.6); border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.12); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.5);
}
.hp-bar-bg::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 4px; height: 100%; background: rgba(255,255,255,0.18); z-index: 2;
}
.player-side .hp-bar {
  height: 100%; border-radius: 1px;
  background: linear-gradient(90deg, #1a8a5a 0%, #2ed87a 65%, #90ffcc 100%);
  box-shadow: 0 0 6px rgba(46,216,122,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: width 0.5s ease; position: relative; overflow: hidden;
}
.enemy-side .hp-bar {
  height: 100%; border-radius: 1px;
  background: linear-gradient(90deg, #6a10b8 0%, #b040f0 65%, #e0a0ff 100%);
  box-shadow: 0 0 6px rgba(176,64,240,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: width 0.5s ease; position: relative; overflow: hidden;
}
.player-side .hp-bar::after, .enemy-side .hp-bar::after {
  content: ''; position: absolute; top: 0; left: -60px;
  width: 40px; height: 100%; background: rgba(255,255,255,0.28);
  transform: skewX(-20deg); animation: hp-bar-shine 3s ease-in-out infinite;
}
.enemy-side .hp-bar::after { animation-delay: 1.2s; }
@keyframes hp-bar-shine {
  0%        { left: -60px; opacity: 0; }
  15%       { opacity: 1; }
  70%, 100% { left: 110%; opacity: 0; }
}
.player-side .hp-bar.hp-caution { background: linear-gradient(90deg, #a07800 0%, #d4af37 65%, #ffe980 100%); }
.player-side .hp-bar.hp-danger  { background: linear-gradient(90deg, #8a1a1a 0%, #e83c20 65%, #ff8060 100%); box-shadow: 0 0 8px rgba(232,60,32,0.7); }
.enemy-side  .hp-bar.hp-caution { background: linear-gradient(90deg, #6a4800 0%, #b07820 65%, #e8b040 100%); }
.enemy-side  .hp-bar.hp-danger  { background: linear-gradient(90deg, #5a0a0a 0%, #c03040 65%, #f08060 100%); box-shadow: 0 0 8px rgba(192,48,64,0.7); }
.hp-num { font-size: 10px; font-family: monospace; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* 13. 作戦バッジ */
.tactic-badge {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  font-size: 9px !important; font-family: monospace !important;
  letter-spacing: 0.06em !important; padding: 4px 12px 4px 10px !important;
  border-radius: 99px !important; background: rgba(0,200,180,0.1) !important;
  border: 1px solid rgba(0,220,200,0.45) !important; color: #00e8d0 !important;
  transform: translateY(16px) !important; white-space: nowrap !important;
}

/* 14. バトルログ */
.battle-log-wrap {
  flex: 0 0 auto; position: relative; z-index: 10;
  margin: 50px 14px 8px; padding-top: 20px;
}
.battle-log-wrap::before {
  content: '▸ BATTLE LOG'; position: absolute; top: 6px; left: 12px;
  font-size: 9px; font-family: monospace; letter-spacing: 0.18em;
  color: #e07830; z-index: 2;
}
.battle-log-wrap::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 14px; height: 14px;
  border-bottom: 1.5px solid rgba(200,120,30,0.4);
  border-right:  1.5px solid rgba(200,120,30,0.4);
  z-index: 2; pointer-events: none;
}
.battle-log, #battleLogInner {
  position: relative; z-index: 5;
  background: rgba(4,8,2,0.85);
  border: 1px solid rgba(200,120,30,0.22);
  border-left: 3px solid rgba(220,110,20,0.7);
  border-radius: 0 0 5px 5px;
  padding: 10px 14px; min-height: 68px; max-height: 90px;
  overflow-y: auto; font-family: monospace; font-size: 11.5px;
  line-height: 1.9; color: #a8d870;
  display: flex !important; flex-direction: column !important; gap: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.battle-log::-webkit-scrollbar, #battleLogInner::-webkit-scrollbar { display: none; }
.battle-log::before, #battleLogInner::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px);
  pointer-events: none; z-index: 0;
}
.log-line { position: relative; z-index: 1; }

/* 15. カードステータス独立表示 */
.card-status-panel { position: absolute; pointer-events: none; z-index: 15; }
.card-status-name {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.9);
  letter-spacing: 0.04em; margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  white-space: nowrap !important; overflow: visible !important;
  text-overflow: unset !important; text-align: right !important;
}
.card-status-genre {
  font-size: 9px; color: rgba(200,200,200,0.6);
  margin-bottom: 5px; letter-spacing: 0.03em; text-align: right !important;
}
.card-status-panel.player-status { text-align: right !important; }
.card-status-skills { display: flex; flex-direction: column; gap: 2px; }
.skill-tag {
  font-size: 8.5px; font-family: monospace; padding: 2px 7px;
  border-radius: 3px; border-left: 2px solid rgba(100,200,255,0.5);
  background: rgba(0,0,0,0.45); color: rgba(180,230,255,0.75);
  letter-spacing: 0.02em; transition: all 0.2s ease; white-space: nowrap;
}
.skill-tag.enemy-skill { border-left-color: rgba(200,100,255,0.5); color: rgba(220,180,255,0.75); }
.skill-tag.skill-glow { border-left-color: #ffdd44; background: rgba(255,200,0,0.18); color: #ffe066; text-shadow: 0 0 8px rgba(255,200,0,0.8); box-shadow: 0 0 8px rgba(255,200,0,0.4); }
.skill-tag.enemy-skill.skill-glow { border-left-color: #dd88ff; background: rgba(180,80,255,0.18); color: #f0aaff; }

/* 16. ニャンニャン固有スキル足元 */
#nyan-divine-skill {
  position: absolute; pointer-events: none; z-index: 15;
  display: flex; align-items: center; gap: 5px;
  background: rgba(40,10,60,0.75); border: 1px solid rgba(180,80,255,0.45);
  border-radius: 99px; padding: 3px 10px 3px 7px;
  font-size: 9px; font-family: monospace; color: rgba(220,160,255,0.85);
  letter-spacing: 0.05em; white-space: nowrap; transition: all 0.3s ease;
}
#nyan-divine-skill::before { content: '⛩'; font-size: 10px; }
#nyan-divine-skill.divine-glow {
  background: rgba(80,20,120,0.9); border-color: rgba(220,120,255,0.9);
  color: #f0aaff; text-shadow: 0 0 8px rgba(200,100,255,0.9);
  box-shadow: 0 0 12px rgba(180,80,255,0.5);
}

/* 17. ニャンニャンセリフ吹き出し
   ★ max-width削除 → テキスト長に合わせて横に伸びる */
#nyan-speech-bubble {
  position: absolute;
  right: calc(100% + 10px);
  top: 20px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(200,100,255,0.4);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 10px; color: #442255; line-height: 1.6;
  width: max-content;
  z-index: 25; pointer-events: none; opacity: 0; transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  filter: drop-shadow(0 2px 6px rgba(180,80,255,0.2));
}
#nyan-speech-bubble.show { opacity: 1; transform: translateX(0); }
#nyan-speech-bubble::after {
  content: ''; position: absolute; top: 12px; left: 100%;
  border: 6px solid transparent;
  border-left-color: rgba(255,255,255,0.92);
}

/* 18. 雷ライン定期パルス */
@keyframes vs-line-pulse {
  0%, 100% { opacity: 0.95; }
  50%       { opacity: 0.6; filter: brightness(0.7); }
}
#vs-line-overlay {
  animation: vs-line-pulse 2.2s ease-in-out infinite;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

@keyframes vs-line-shake {
  0%   { transform: translateX(-50%) rotate(0deg); }
  15%  { transform: translateX(calc(-50% - 6px)) rotate(-3deg); }
  30%  { transform: translateX(calc(-50% + 6px)) rotate(3deg); }
  45%  { transform: translateX(calc(-50% - 4px)) rotate(-2deg); }
  60%  { transform: translateX(calc(-50% + 4px)) rotate(2deg); }
  75%  { transform: translateX(calc(-50% - 2px)) rotate(-1deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
.vs-shaking { animation: vs-line-shake 0.7s ease-out forwards !important; }

@keyframes flash-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shrine-pulse {
  0%   { opacity: 0; transform: scale(0.8); }
  40%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes badge-pop {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}