/* new-demo/arena.css — combat "arena" layout (loaded last).
   One shared battlefield row: ally on the left third, 1–3 enemies across the
   centre/right, figures standing on a common floor with HUD text floating
   around them (no framed boxes around characters). Bottom HUD: draw pile left,
   hand fan centre, actions + discard/exhaust right. Older battle layers set
   grid positions on .battle children; everything here is scoped to .arena. */

#game-root .battle.arena {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0 !important;
  height: calc(100dvh - 62px) !important;
  min-height: 560px;
  padding: 0 18px !important;
  overflow: hidden !important;
  position: relative;
  box-sizing: border-box;
}
@media (min-width: 721px) {
  #game-root:has(> .guide-strip) .battle.arena { height: calc(100dvh - 116px) !important; }
}
#game-root .battle.arena::before { display: none; }
.battle.arena > * { grid-column: 1 !important; min-width: 0; }

/* ---------- Top strip: turn, battlefield, card hint ---------- */
.arena-top {
  grid-row: 1 !important;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 16px; padding: 8px 0 2px; min-height: 30px; z-index: 6;
}
.arena-turn { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--ops-muted); }
.arena-turn b { font-family: var(--ops-num); font-size: 15px; letter-spacing: 3px; color: var(--ops-amber); }
.arena-top .battlefield-tag { border-radius: 0; font-size: 12px; }
.arena-hint {
  flex: 0 0 100%; box-sizing: border-box; padding-inline: max(0px, calc((100% - 860px) / 2)); text-align: center;
  font-size: 12px; line-height: 1.45; color: #c3cfd8; white-space: pre-line;
  max-height: 4.4em; overflow: hidden;
}
#game-root .arena .arena-hint.preview-panel { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; max-width: 860px !important; }
.arena-hint.aiming-hint { color: var(--ops-amber); font-weight: 800; letter-spacing: 1px; animation: aim-blink 1.2s ease-in-out infinite; }
@keyframes aim-blink { 50% { opacity: .55; } }

/* ---------- Battlefield floor ---------- */
.arena-floor {
  grid-row: 2 !important;
  align-self: stretch !important; height: auto !important; max-height: none !important;
  position: relative; min-height: 0;
  display: grid; grid-template-columns: minmax(250px, 30%) minmax(0, 1fr);
  align-items: end; gap: 2vw; padding: 0 1.5vw 8px;
}
/* One ground plane under everyone: a horizon band and a faint floor line. */
.arena-floor::before {
  content: ''; position: absolute; left: -18px; right: -18px; bottom: 0; height: 58%; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, transparent 0, rgba(125, 220, 106, .035) 18%, rgba(8, 12, 16, .0) 100%),
    repeating-linear-gradient(90deg, rgba(160, 190, 210, .045) 0 1px, transparent 1px 64px);
  border-top: 1px solid rgba(160, 190, 210, .12);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ally-zone, .enemy-zone { position: relative; z-index: 1; min-width: 0; }

/* Figures: no frame; a soft shadow on the floor under each. */
#game-root .arena .fighter-figure {
  position: relative; margin: 0 auto;
  width: clamp(180px, 19vw, 300px); height: clamp(170px, 32vh, 320px);
  border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible;
}
.arena .fighter-figure > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.arena .fighter-figure:has(.character-stage-host canvas) > svg { opacity: 0; }
.arena .fighter-figure::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 4%; height: 9%; z-index: 1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%);
}
.arena .ally-figure::after { box-shadow: 0 0 0 1px rgba(95, 211, 198, .18); }
.arena .enemy-figure::after { box-shadow: 0 0 0 1px rgba(255, 93, 74, .16); }

/* ---------- Ally side ---------- */
.ally-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; }
.ally-unit { display: flex; flex-direction: column; align-items: center; width: 100%; }
.status-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 22px; }
.status-row .deploy-row { display: inline-flex; gap: 4px; }
#game-root .arena .ally-hud {
  display: flex; align-items: center; gap: 10px; width: min(100%, 420px);
  padding: 6px 10px; box-sizing: border-box; font-size: 12px;
  background: rgba(10, 16, 22, .72) !important; border: 1px solid var(--ops-line) !important; border-radius: 0 !important;
}
.energy-orb {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #f2b233 45%, #9b6a10 100%);
  box-shadow: 0 0 0 2px rgba(242, 178, 51, .35), 0 0 18px rgba(242, 178, 51, .35);
  color: #1a1204; font-family: var(--ops-num);
}
.energy-orb b { font-size: 24px; line-height: 1; }
.energy-orb small { font-size: 11px; font-weight: 700; opacity: .75; align-self: flex-end; margin-bottom: 12px; }
.ally-vitals { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ally-vitals .hp-line { display: flex; flex-direction: column; gap: 3px; }
.ally-vitals .value { font-family: var(--ops-num); font-size: 14px; letter-spacing: 1px; color: #eaf2f6; }
.arena .hp-bar { height: 6px !important; width: 100%; background: rgba(255, 255, 255, .08); overflow: hidden; }
.arena .hp-bar i { display: block; height: 100%; }
.arena .ally-hud .hp-bar i { background: linear-gradient(90deg, #4fd07a, #7ddc6a); }
.arena .ally-hud .block-value { display: flex; align-items: center; gap: 5px; color: #9fd6ff; font-size: 12px; }
.stance-chip { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.stance-name { font-weight: 800; letter-spacing: 2px; color: #eaf2f6; display: flex; flex-direction: column; font-size: 13px; cursor: help; }
.stance-name small { font-weight: 400; letter-spacing: 0; color: var(--ops-muted); font-size: 11px; }
#game-root .arena #btn-stance { padding: 3px 8px !important; font-size: 11px !important; margin: 0; }

/* ---------- Enemies ---------- */
.enemy-zone { display: flex; justify-content: space-evenly; align-items: flex-end; gap: 1.2vw; }
.enemy-unit {
  position: relative; flex: 0 1 auto; min-width: 0; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; outline: none; transition: filter .15s, opacity .2s;
}
.enemy-zone[data-count="1"] .enemy-unit { flex-basis: min(100%, 360px); }
.enemy-zone[data-count="2"] .enemy-unit { flex: 1 1 0; }
.enemy-zone[data-count="3"] .enemy-unit { flex: 1 1 0; }
.enemy-zone[data-count="3"] .enemy-figure { width: clamp(130px, 14vw, 230px) !important; height: clamp(150px, 28vh, 280px) !important; }
.enemy-zone[data-count="2"] .enemy-figure { width: clamp(150px, 17vw, 270px) !important; height: clamp(160px, 30vh, 300px) !important; }
#game-root .arena .enemy-unit .intent {
  max-width: 100%; box-sizing: border-box; text-align: center;
  padding: 3px 8px !important; margin: 0 !important; font-size: 12px; line-height: 1.35;
}
.enemy-zone:not([data-count="1"]) .enemy-unit .intent::before { content: none !important; }
.unit-hud { display: flex; flex-direction: column; align-items: center; gap: 3px; width: min(100%, 250px); text-align: center; }
#game-root .arena .enemy-name { font-size: 13px !important; line-height: 1.25; margin: 0 !important; letter-spacing: 1px; }
.arena .enemy-hp { display: flex !important; align-items: center; gap: 6px; width: 100%; font-family: var(--ops-num); font-size: 12px; }
.arena .enemy-hp .hp-bar { flex: 1; }
.arena .enemy-hp .hp-bar i { background: linear-gradient(90deg, #d8452f, #ff7a4a); }
.arena .enemy-hud .trait-tag { border-radius: 0; font-size: 11px; padding: 2px 7px; }

/* Aiming: targetable enemies glow on the floor; hovered/dragged-over one locks on. */
.arena.aiming .enemy-unit.targetable .fighter-figure::after {
  background: radial-gradient(ellipse, rgba(242, 178, 51, .45), transparent 70%);
  box-shadow: 0 0 0 2px rgba(242, 178, 51, .7), 0 0 22px rgba(242, 178, 51, .45);
  animation: aim-ring 1.1s ease-in-out infinite;
}
.arena.aiming .enemy-unit.targetable .enemy-name { color: var(--ops-amber) !important; }
.arena .enemy-unit.targetable:hover, .arena .enemy-unit.targetable:focus-visible, .arena .enemy-unit.drop-ready { filter: drop-shadow(0 0 14px rgba(242, 178, 51, .55)); }
.arena .enemy-unit.targetable:hover .unit-hud::before, .arena .enemy-unit.targetable:focus-visible .unit-hud::before, .arena .enemy-unit.drop-ready .unit-hud::before {
  content: '▲ 目标'; color: var(--ops-amber); font-weight: 800; font-size: 11px; letter-spacing: 2px;
}
@keyframes aim-ring { 50% { box-shadow: 0 0 0 3px rgba(242, 178, 51, .9), 0 0 30px rgba(242, 178, 51, .6); } }
.arena .enemy-zone.drop-ready .enemy-unit:not(.is-dead), .arena .ally-zone.drop-ready .ally-figure { filter: drop-shadow(0 0 12px rgba(242, 178, 51, .5)); }
.enemy-unit.is-dead { opacity: .38; filter: grayscale(1); cursor: default; }
.enemy-unit.is-dead .fighter-figure { height: 60px !important; }
.enemy-unit.is-dead .intent { color: var(--ops-muted) !important; border-color: var(--ops-line) !important; background: none !important; }

/* ---------- Bottom HUD ---------- */
.arena-hud {
  grid-row: 3 !important;
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 228px; align-items: end; gap: 12px;
  height: 282px; padding-bottom: 10px; position: relative; z-index: 5;
}
.arena-hud .hud-left { grid-column: 1; align-self: end; }
#game-root .arena .hand-area {
  grid-column: 2 !important; grid-row: 1 !important;
  align-self: stretch; height: 100%; min-height: 0 !important; margin: 0 !important; background: none !important;
  --step: clamp(34px, calc((100vw - 780px) / var(--slots)), 122px);
}
.arena-hud .hud-right { grid-column: 3; display: flex; flex-direction: column; gap: 10px; align-self: end; }
.ops-actions { display: flex; flex-direction: column; gap: 8px; }
#game-root .arena .ops-actions .btn { width: 100%; margin: 0; padding: 10px 12px !important; font-size: 15px !important; letter-spacing: 2px; }
.ops-actions .btn small { font-family: var(--ops-num); opacity: .6; font-size: 11px; margin-left: 4px; }
.hud-piles { display: flex; gap: 8px; }
#game-root .arena .pile-btn {
  flex: 1; min-width: 0; height: 92px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; color: #c7d3dc; cursor: pointer;
  background: linear-gradient(170deg, #17212b, #0c1217) !important;
  border: 1px solid rgba(160, 190, 210, .28) !important; border-radius: 0 !important;
  box-shadow: 3px 3px 0 -1px #0c1217, 3px 3px 0 0 rgba(160, 190, 210, .2), 6px 6px 0 -1px #0c1217, 6px 6px 0 0 rgba(160, 190, 210, .12);
}
.arena .pile-btn b { font-family: var(--ops-num); font-size: 26px; line-height: 1; color: #fff; }
.arena .hud-left .pile-btn { width: 84px; }
.arena #pile-draw b { color: #7fd6ff; }
.arena #pile-exhaust b { color: #c9a0ff; }
.arena .pile-btn:hover { border-color: var(--ops-amber) !important; }

@media (min-width: 721px) and (max-height: 820px) {
  .arena-hud { height: 238px; }
  #game-root .arena .hand-area .hand-card.shared-card { width: 136px; height: 206px; bottom: 10px; }
  #game-root .arena .fighter-figure { height: clamp(140px, 27vh, 260px); }
  .enemy-zone[data-count="3"] .enemy-figure { height: clamp(130px, 24vh, 230px) !important; }
  .energy-orb { width: 44px; height: 44px; }
  .energy-orb b { font-size: 20px; }
  #game-root .arena .pile-btn { height: 74px; }
  #game-root .arena .ops-actions .btn { padding: 7px 10px !important; }
}

/* ---------- Phone (≤720px) ---------- */
@media (max-width: 720px) {
  #game-root .battle.arena {
    display: flex !important; flex-direction: column; height: auto !important; min-height: 0;
    padding: 0 6px 8px !important; overflow: visible !important;
  }
  .arena-top { gap: 4px 8px; padding: 4px 0 2px; }
  .arena-turn b { font-size: 13px; }
  .arena-top .battlefield-tag { font-size: 10px; padding: 2px 6px; }
  .arena-hint { font-size: 11px; max-height: 3em; }
  .arena-floor { grid-template-columns: 34% minmax(0, 1fr); gap: 4px; padding: 0 0 6px; }
  .arena-floor::before { left: -6px; right: -6px; }
  #game-root .arena .fighter-figure { width: 100%; height: 118px; }
  .enemy-zone { gap: 2px; justify-content: space-around; }
  .enemy-zone .enemy-unit { flex: 1 1 0 !important; }
  .enemy-zone[data-count="2"] .enemy-figure, .enemy-zone[data-count="3"] .enemy-figure { width: 100% !important; height: 104px !important; }
  #game-root .arena .enemy-unit .intent { font-size: 10px; padding: 2px 3px !important; }
  #game-root .arena .enemy-unit .intent::before { content: none !important; }
  #game-root .arena .enemy-name { font-size: 10.5px !important; letter-spacing: 0; }
  .arena .enemy-hud .trait-tag { font-size: 9.5px; padding: 1px 4px; }
  .arena .enemy-hp { font-size: 10px; gap: 3px; }
  .status-row { gap: 2px; min-height: 0; }
  .arena .status-badge { transform: scale(.85); margin: -2px; }
  #game-root .arena .ally-hud { flex-wrap: wrap; gap: 4px 6px; padding: 4px; font-size: 11px; justify-content: center; }
  .energy-orb { width: 38px; height: 38px; }
  .energy-orb b { font-size: 18px; }
  .energy-orb small { margin-bottom: 8px; font-size: 9px; }
  .ally-vitals .value { font-size: 12px; }
  .stance-chip { flex-direction: row; align-items: center; gap: 4px; }
  .stance-name { font-size: 11px; letter-spacing: 0; }
  .stance-name small { display: none; }
  .arena-hud {
    display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto;
    height: auto; gap: 6px; padding-bottom: 0;
  }
  .arena-hud .hud-left { grid-column: 1; grid-row: 1; }
  .arena-hud .hud-right { grid-column: 2; grid-row: 1; flex-direction: row; align-items: stretch; gap: 6px; }
  .ops-actions { flex: 1; flex-direction: row; gap: 6px; }
  #game-root .arena .ops-actions .btn { font-size: 13px !important; padding: 6px 4px !important; letter-spacing: 0; }
  .hud-piles { gap: 4px; }
  #game-root .arena .pile-btn { height: 46px; width: 54px; flex: none; gap: 0; font-size: 10px; box-shadow: none; }
  .arena .pile-btn b { font-size: 17px; }
  .arena .hud-left .pile-btn { width: 62px; }
  #game-root .arena .hand-area { grid-column: 1 / -1 !important; grid-row: 2 !important; height: auto; min-height: 231px !important; }
}