/* ═══════════════════════════════════════════════════════════
   ARCANE DUELS — Battle Screen Styles
   Full battlefield layout with hero portraits, hand, and board
   ═══════════════════════════════════════════════════════════ */

/* ─── Battle Screen Layout ───────────────────────────────── */
.battle-screen {
  background: var(--bg-darker);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.battle-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(212, 168, 67, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Opponent Area (Top) ────────────────────────────────── */
.battle-opponent-area {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1), transparent);
  position: relative;
  z-index: 1;
  gap: 12px;
  min-height: 70px;
}

.hero-portrait {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid var(--gold-dark);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
  box-shadow: var(--shadow-md);
}

.hero-portrait.taking-damage {
  animation: hero-damage 0.5s ease;
}

.hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
}

.hero-hp-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-hp-bar {
  flex: 1;
  max-width: 180px;
}

.hero-hp-number {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--emerald);
  min-width: 35px;
}

.opponent-hand-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.opponent-hand-info .hand-count {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 700;
}

.opponent-deck-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* ─── Battlefield ────────────────────────────────────────── */
.battlefield {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.board-half {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  min-height: 130px;
  position: relative;
}

.board-half.opponent-board {
  padding-top: 5px;
}

.board-half.player-board {
  padding-bottom: 5px;
}

/* Empty board slot */
.board-slot {
  width: 90px;
  height: 110px;
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.board-slot.active-slot {
  border-color: var(--gold);
  background: rgba(212, 168, 67, 0.08);
  animation: slot-pulse 1.5s ease-in-out infinite;
}

/* ─── Center Divider ─────────────────────────────────────── */
.battle-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(212, 168, 67, 0.2) 20%,
    rgba(212, 168, 67, 0.5) 50%,
    rgba(212, 168, 67, 0.2) 80%,
    transparent 95%
  );
  position: relative;
}

.battle-divider::after {
  content: '⚔';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-darker);
  padding: 4px 12px;
  color: var(--gold);
  font-size: 1.2rem;
}

/* ─── Player Area (Bottom) ───────────────────────────────── */
.battle-player-area {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(0deg, rgba(212, 168, 67, 0.06), transparent);
  position: relative;
  z-index: 1;
  gap: 12px;
  min-height: 70px;
}

/* ─── Player Hand ────────────────────────────────────────── */
.hand-container {
  position: relative;
  z-index: 5;
  padding: 0 20px 15px;
  display: flex;
  justify-content: center;
  min-height: 120px;
  align-items: flex-end;
  background: linear-gradient(0deg, rgba(0,0,0,0.4), transparent);
}

.hand-cards {
  display: flex;
  justify-content: center;
  position: relative;
  perspective: 800px;
}

/* Fan layout for cards in hand */
.hand-card {
  position: relative;
  margin: 0 -15px;
}

.hand-card:nth-child(1) { transform: rotate(-8deg); }
.hand-card:nth-child(2) { transform: rotate(-4deg); }
.hand-card:nth-child(3) { transform: rotate(0deg); }
.hand-card:nth-child(4) { transform: rotate(4deg); }
.hand-card:nth-child(5) { transform: rotate(8deg); }
.hand-card:nth-child(6) { transform: rotate(12deg); }
.hand-card:nth-child(7) { transform: rotate(16deg); }
.hand-card:nth-child(8) { transform: rotate(20deg); }

/* ─── Battle Controls ────────────────────────────────────── */
.battle-controls {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.end-turn-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-elevated));
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: var(--shadow-md), 0 0 20px var(--gold-glow);
}

.end-turn-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg), 0 0 30px var(--gold-glow);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a1a2e;
}

.end-turn-btn.active-turn {
  animation: end-turn-glow 2s ease-in-out infinite;
}

.end-turn-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  animation: none;
}

.end-turn-btn .btn-rune {
  font-size: 1.4rem;
}

/* ─── Turn Indicator ─────────────────────────────────────── */
.turn-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
}

.turn-banner {
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid var(--gold);
  border-radius: var(--radius-xl);
  padding: 16px 48px;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px var(--gold-glow);
  box-shadow: var(--shadow-xl), 0 0 40px var(--gold-glow);
  animation: turn-banner 2s ease forwards;
}

.turn-banner.enemy-turn {
  color: var(--crimson-light);
  border-color: var(--crimson);
  text-shadow: 0 0 20px var(--crimson-glow);
  box-shadow: var(--shadow-xl), 0 0 40px var(--crimson-glow);
}

/* ─── Mana Display (Battle) ──────────────────────────────── */
.battle-mana {
  display: flex;
  align-items: center;
  gap: 4px;
}

.battle-mana-crystal {
  width: 14px;
  height: 20px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #1e293b;
  border: none;
  transition: all 0.3s ease;
}

.battle-mana-crystal.filled {
  background: linear-gradient(135deg, #3b82f6, #818cf8);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.battle-mana-crystal.empty {
  background: #1e293b;
  opacity: 0.5;
}

/* ─── Emote Panel ────────────────────────────────────────── */
.emote-panel {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emote-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.emote-btn:hover {
  transform: scale(1.2);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

/* ─── Emote Bubble ───────────────────────────────────────── */
.emote-bubble {
  position: absolute;
  background: var(--bg-elevated);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 8px 16px;
  font-size: 1.5rem;
  z-index: 200;
  animation: emote-pop 2s ease forwards;
  box-shadow: var(--shadow-lg);
}

/* ─── Victory / Defeat Overlay ───────────────────────────── */
.game-over-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  animation: fade-in 0.5s ease;
}

.victory-text {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  animation: victory-entrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.victory-text.win {
  color: var(--gold);
  text-shadow: 0 0 40px var(--gold-glow), 0 0 80px var(--gold-glow);
}

.victory-text.lose {
  color: var(--crimson);
  text-shadow: 0 0 40px var(--crimson-glow), 0 0 80px var(--crimson-glow);
}

.game-over-details {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1rem;
}

.game-over-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--gold);
}

.game-over-buttons {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

/* ─── Target Selection ───────────────────────────────────── */
.targeting-mode .board-creature {
  cursor: crosshair;
}

.targeting-mode .valid-target {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5), 0 0 15px rgba(239, 68, 68, 0.3);
  animation: target-pulse 1s ease-in-out infinite;
}

.targeting-mode .hero-portrait.valid-target {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5), 0 0 15px rgba(239, 68, 68, 0.3);
  animation: target-pulse 1s ease-in-out infinite;
}

.targeting-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 50;
  cursor: crosshair;
}

.targeting-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--gold);
  z-index: 51;
  pointer-events: none;
}

/* ─── Attack Arrow ───────────────────────────────────────── */
.attack-arrow {
  position: absolute;
  z-index: 100;
  pointer-events: none;
}

.attack-arrow line {
  stroke: var(--crimson);
  stroke-width: 3;
  stroke-dasharray: 8 4;
  filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.5));
}

.attack-arrow .arrow-head {
  fill: var(--crimson);
  filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.5));
}

/* ─── Responsive Battle ──────────────────────────────────── */
@media (max-width: 768px) {
  .battle-controls {
    right: 8px;
  }

  .end-turn-btn {
    width: 60px;
    height: 60px;
    font-size: 0.55rem;
  }

  .end-turn-btn .btn-rune {
    font-size: 1.1rem;
  }

  .emote-panel {
    left: 8px;
  }

  .emote-btn {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .hand-card {
    margin: 0 -20px;
  }

  .card {
    width: 100px;
    height: 145px;
  }

  .card-symbol {
    font-size: 2.2rem;
  }

  .board-creature {
    width: 70px;
    height: 90px;
  }

  .board-creature .creature-symbol {
    font-size: 1.5rem;
  }

  .victory-text {
    font-size: 2.5rem;
  }

  .board-slot {
    width: 70px;
    height: 90px;
  }
}

/* ─── Cleaner battle reactions + device layouts ─────────── */
.emote-btn { font-family:var(--font-heading); font-weight:800; color:var(--text-primary); text-shadow:0 2px 8px rgba(0,0,0,.3); border-radius:12px; }
.emote-btn:hover { transform:translateY(-2px) scale(1.04); }
.emote-spark { color:#ffe89a; }.emote-like { color:var(--gold-light); font-size:.72rem; }.emote-fire { font-family:var(--font-body); }.emote-sad { color:var(--text-secondary); }.emote-sword { color:var(--cyan-light); }
@media (min-width: 769px) and (max-width: 1100px) {
  .battle-controls { right:14px; }
  .emote-panel { left:14px; }
  .board-slot { width:82px; height:102px; }
  .board-creature { width:82px; height:102px; }
}
@media (max-width: 768px) {
  .battle-screen { min-height:100dvh; }
  .battle-opponent-area, .battle-player-area { padding-left:12px; padding-right:12px; }
  .hero-portrait { width:44px; height:44px; }
  .hero-hp-bar { max-width:140px; }
  .battlefield { padding:0 4px; }
  .board-half { gap:6px; padding-left:8px; padding-right:8px; min-height:112px; }
  .board-slot, .board-creature { width:64px; height:84px; }
  .board-creature .creature-name { font-size:.58rem; }
  .hand-container { padding:0 8px 8px; min-height:105px; }
  .hand-card { margin:0 -19px; }
  .card { width:88px; height:128px; }
  .card-header { font-size:.58rem; }
  .card-symbol { font-size:1.8rem; }
  .battle-controls { right:6px; }
  .end-turn-btn { width:54px; height:54px; }
  .emote-panel { left:6px; }
  .emote-btn { width:32px; height:32px; padding:0; font-size:.9rem; }
}
@media (max-width: 480px) {
  .battle-opponent-area, .battle-player-area { min-height:60px; padding-top:7px; padding-bottom:7px; gap:8px; }
  .hero-portrait { width:38px; height:38px; font-size:1.05rem; }
  .hero-name { font-size:.72rem; }
  .hero-hp-number { font-size:.76rem; min-width:28px; }
  .hero-hp-bar { max-width:110px; height:16px; }
  .opponent-hand-info { font-size:.68rem; }
  .battle-mana-crystal { width:10px; height:16px; }
  .board-half { min-height:96px; gap:3px; }
  .board-slot, .board-creature { width:53px; height:72px; }
  .board-creature .creature-symbol { font-size:1.1rem; }
  .board-creature .creature-stats { font-size:.62rem; }
  .hand-container { min-height:92px; }
  .card { width:76px; height:110px; }
  .card-symbol { font-size:1.5rem; }
  .emote-panel { gap:4px; }
  .emote-btn { width:28px; height:28px; font-size:.78rem; }
  .end-turn-btn { width:48px; height:48px; font-size:.46rem; }
  .turn-banner { padding:10px 22px; font-size:1rem; }
}


.emote-panel { left:18px; gap:9px; }
.emote-btn { width:46px;height:46px;border-radius:14px;border:1px solid rgba(212,168,67,.32);background:linear-gradient(145deg,rgba(28,30,54,.96),rgba(13,16,31,.96));box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);color:#f5d98b;position:relative;overflow:hidden; }
.emote-btn::before{content:'';position:absolute;inset:2px;border-radius:11px;border:1px solid rgba(255,255,255,.05);pointer-events:none;}
.emote-btn span{position:relative;z-index:1;font-family:var(--font-heading);font-weight:800;text-shadow:0 2px 12px rgba(212,168,67,.35);}
.emote-btn:hover{transform:translateX(3px) scale(1.05);border-color:var(--gold);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 18px rgba(212,168,67,.18);}
.rune-gg{color:#e7d1ff}.rune-bolt{color:#9fddff}.rune-oops{color:#d5d8e5}.rune-clash{color:#ffb1b1}.rune-gg span{font-size:.75rem}.rune-bolt span{font-size:1.45rem}.rune-oops span{font-size:1.35rem}
.battle-chat{position:fixed;right:18px;bottom:18px;z-index:700;font-family:var(--font-body)}
.battle-chat-fab{width:54px;height:54px;border-radius:18px;cursor:pointer;border:1px solid rgba(212,168,67,.45);background:linear-gradient(145deg,#232642,#101324);color:var(--gold-light);box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 22px rgba(212,168,67,.1);display:flex;align-items:center;justify-content:center;position:relative}
.chat-fab-glyph{font-size:1.25rem;text-shadow:0 0 18px rgba(212,168,67,.55)}
.chat-unread{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--crimson);color:#fff;font:700 .7rem/20px var(--font-heading);border:2px solid var(--bg-dark)}
.battle-chat-panel{width:310px;height:370px;border:1px solid rgba(212,168,67,.28);border-radius:18px;background:linear-gradient(155deg,rgba(18,21,39,.98),rgba(9,11,22,.98));box-shadow:0 22px 65px rgba(0,0,0,.5),0 0 35px rgba(212,168,67,.08);overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(16px);animation:battle-chat-in .18s ease-out;transform-origin:bottom right}
.battle-chat-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--gold);font-family:var(--font-heading);font-size:.82rem}.battle-chat-head button{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text-secondary);cursor:pointer;font-size:1rem}.battle-chat-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#73e5a1;box-shadow:0 0 10px #73e5a1;margin-right:6px}.battle-chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.battle-chat-row{display:flex;flex-direction:column;align-items:flex-start;max-width:88%}.battle-chat-row.self{margin-left:auto;align-items:flex-end}.battle-chat-meta{font-size:.64rem;color:var(--text-muted);margin:0 4px 3px}.battle-chat-meta span{margin-left:5px;opacity:.7}.battle-chat-bubble{padding:8px 10px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.055);color:var(--text-primary);font-size:.78rem;line-height:1.35;word-break:break-word;border:1px solid rgba(255,255,255,.06)}.battle-chat-row.self .battle-chat-bubble{border-radius:12px 12px 4px 12px;background:rgba(212,168,67,.16);border-color:rgba(212,168,67,.22)}.battle-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.06)}.battle-chat-form input{min-width:0;flex:1;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);color:var(--text-primary);padding:0 10px;outline:none}.battle-chat-form button{width:38px;height:36px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#171728;font-weight:800;cursor:pointer}@keyframes battle-chat-in{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:768px){.battle-chat{right:12px;bottom:12px}.battle-chat-panel{width:min(300px,calc(100vw - 24px));height:min(390px,55vh)}.emote-panel{left:8px;gap:6px}.emote-btn{width:39px;height:39px;border-radius:12px}}
@media(max-width:430px){.battle-chat{right:10px;bottom:10px}.battle-chat-fab{width:48px;height:48px;border-radius:15px}.emote-panel{left:5px;gap:5px}.emote-btn{width:34px;height:34px;border-radius:10px}.rune-gg span{font-size:.62rem}.rune-bolt span{font-size:1.05rem}.rune-spark span,.rune-clash span{font-size:.95rem}}