/* ——— 3/4 俯视战场：地面层 + 物件层（按行排 z-index）+ 特效层 ——— */
.arena { position: relative; width: 100%; user-select: none; }
.board {
  position: relative; width: 100%; aspect-ratio: 1 / 0.82;
  --tw: calc(100% / 9);
}
.board .layer { position: absolute; inset: 0; }
.board .layer.fx { z-index: 1000; pointer-events: none; }
.board .layer.ui { z-index: 2000; pointer-events: none; }

/* 底座：战场悬浮在虚空中的石台 */
.board::before {
  content: ''; position: absolute; inset: -3.2% -2.4% -7% -2.4%; border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(180deg, #1a1c2b, #0d0e18);
  box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06), inset 0 -18px 0 #090a12, 0 0 120px rgba(124,92,255,.18);
}
.board::after {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -14%; height: 10%;
  background: radial-gradient(closest-side, rgba(124,92,255,.35), transparent); filter: blur(14px); z-index: -1;
}

.tile {
  position: absolute; width: calc(100% / 9); height: calc(100% / 9);
  left: calc(var(--x) * 100% / 9); top: calc(var(--y) * 100% / 9);
}
.floor .tile {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.045), transparent 55%),
    linear-gradient(160deg, #23263a, #1a1c2c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.floor .tile.alt { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.04), transparent 55%), linear-gradient(160deg, #202336, #181a29); }
.floor .tile.bush { background: radial-gradient(circle at 50% 60%, #1f4a35, #143022); }
.floor .tile.wall { background: #0c0d15; }
.floor .tile::after { content: ''; position: absolute; inset: 0; transition: background .6s, opacity .6s; }
.floor .tile.out::after {
  background: repeating-linear-gradient(135deg, rgba(255,40,80,.30) 0 6px, rgba(255,40,80,.12) 6px 12px);
  animation: zonePulse 1.6s ease-in-out infinite;
}
@keyframes zonePulse { 50% { opacity: .55; } }
.floor .tile.fog::after { background: rgba(4,5,10,.72); backdrop-filter: grayscale(1); }
.floor .tile.hl { box-shadow: inset 0 0 0 2px rgba(245,199,107,.7); }

.coords { position: absolute; font: 600 10px var(--num); color: rgba(255,255,255,.25); pointer-events: none; }

/* 物件层 */
.obj { position: absolute; width: calc(100% / 9); height: calc(100% / 9); left: calc(var(--x) * 100% / 9); top: calc(var(--y) * 100% / 9); pointer-events: none; }

.wall-blk { position: absolute; inset: 0; }
.wall-blk .top {
  position: absolute; left: 0; right: 0; top: -34%; height: 100%;
  background: linear-gradient(160deg, #5b5f7d, #3d405a 60%, #34374f);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(0,0,0,.35);
}
.wall-blk .top::after {
  content: ''; position: absolute; inset: 18% 22%; border-radius: 3px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), transparent); border: 1px solid rgba(0,0,0,.18);
}
.wall-blk .front {
  position: absolute; left: 0; right: 0; top: 66%; height: 34%;
  background: linear-gradient(180deg, #24263a, #15161f);
  border-radius: 0 0 4px 4px; box-shadow: 0 10px 14px rgba(0,0,0,.5);
}

.bush-tuft { position: absolute; left: -6%; right: -6%; bottom: 2%; height: 72%; }
.bush-tuft svg { width: 100%; height: 100%; overflow: visible; }
.bush-tuft .sway { transform-origin: 50% 100%; animation: sway 4s ease-in-out infinite; }
@keyframes sway { 50% { transform: skewX(-4deg); } }

.supply { position: absolute; inset: 18% 22% 30%; display: grid; place-items: center; }
.supply .gem {
  width: 54%; aspect-ratio: 1; transform: rotate(45deg);
  background: linear-gradient(135deg, #b5fff0, #2ee6a6 50%, #0e8f6b);
  box-shadow: 0 0 18px rgba(46,230,166,.9), 0 0 40px rgba(46,230,166,.5);
  animation: gem 2.4s ease-in-out infinite; border-radius: 3px;
}
.supply::after { content: ''; position: absolute; bottom: -18%; width: 60%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(46,230,166,.6), transparent); }
@keyframes gem { 50% { transform: rotate(45deg) translate(-8%, -8%) scale(1.06); } }

.trap { position: absolute; inset: 26%; border-radius: 50%; border: 2px dashed var(--c); opacity: .55; display: grid; place-items: center; }
.trap::before { content: '⨯'; color: var(--c); font-size: 12px; }

/* ——— 单位 ——— */
.unit {
  position: absolute; width: calc(100% / 9); height: calc(100% / 9);
  left: calc(var(--x) * 100% / 9); top: calc(var(--y) * 100% / 9);
  transition: left var(--mv, .26s) cubic-bezier(.4,.1,.3,1), top var(--mv, .26s) cubic-bezier(.4,.1,.3,1), opacity .4s;
  pointer-events: none;
}
.unit .shadow { position: absolute; left: 18%; right: 18%; bottom: 10%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); }
.unit .ring { position: absolute; left: 10%; right: 10%; bottom: 4%; height: 32%; border-radius: 50%; border: 2px solid var(--s); box-shadow: 0 0 14px var(--s), inset 0 0 10px var(--s); opacity: .85; }
.unit .body { position: absolute; left: 50%; bottom: 24%; width: 74%; transform: translateX(-50%); animation: bob 2.6s ease-in-out infinite; }
.unit .token {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: var(--c);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff 10%), #131522 70%);
  box-shadow: 0 0 0 2px var(--s), 0 0 0 4px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.6), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent);
}
.unit .token .cls-icon { width: 62%; height: 62%; filter: drop-shadow(0 0 6px var(--c)); }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-6%); } }

.unit .plate {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap;
}
.unit .plate .nm { font-size: clamp(9px, 1vw, 12px); font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.6); border: 1px solid color-mix(in srgb, var(--s) 60%, transparent); color: #fff; }
.unit .plate .hpb { position: relative; width: 110%; min-width: 40px; height: 5px; border-radius: 4px; background: rgba(0,0,0,.7); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.unit .plate .hpb b { position: absolute; inset: 0 auto 0 0; width: var(--hp, 100%); background: #fff; opacity: .75; transition: width .9s .32s ease; }
.unit .plate .hpb i { position: relative; display: block; height: 100%; width: var(--hp, 100%); background: linear-gradient(90deg, var(--s), color-mix(in srgb, var(--s) 50%, #fff)); transition: width .5s; }
.compact .unit .plate .nm { display: none; }

.unit .icons { position: absolute; right: -14%; top: -6%; display: flex; flex-direction: column; gap: 2px; }
.unit .icons span { font-size: clamp(9px, .9vw, 12px); width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.2); }

.unit.stealth .body { opacity: .38; filter: saturate(.3) blur(.3px); }
.unit.stealth .ring { border-style: dashed; opacity: .4; }
.unit.block .token::after { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 3px solid rgba(255,210,120,.9); box-shadow: 0 0 20px rgba(255,190,80,.8); animation: shieldPulse 1s ease-in-out infinite; }
@keyframes shieldPulse { 50% { transform: scale(1.06); opacity: .7; } }
.unit.stun .body { animation: wobble .5s ease-in-out infinite; }
@keyframes wobble { 25% { transform: translateX(-56%) rotate(-6deg); } 75% { transform: translateX(-44%) rotate(6deg); } }
.unit.dead { opacity: 0; }
.unit.hidden { opacity: 0; }
.unit.hurt .token { animation: hurt .45s; }
@keyframes hurt { 0%, 100% { filter: none; } 30% { filter: brightness(2.6) saturate(0); transform: translateX(-6%); } 60% { transform: translateX(6%); } }

/* 台词气泡 */
.bubble {
  position: absolute; transform: translate(-50%, -100%); max-width: min(240px, 32vw); width: max-content;
  padding: 8px 12px; border-radius: 12px; font-size: clamp(11px, 1.05vw, 14px); line-height: 1.45; font-weight: 600;
  background: rgba(250,250,255,.96); color: #121320; box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 2px var(--s);
  animation: bubbleIn .25s cubic-bezier(.2,1.6,.4,1) both;
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 0 0 var(--s); }
.bubble.out { animation: bubbleOut .3s forwards; }
@keyframes bubbleIn { from { transform: translate(-50%, -80%) scale(.6); opacity: 0; } }
@keyframes bubbleOut { to { transform: translate(-50%, -120%); opacity: 0; } }
.compact .bubble { font-size: 11px; padding: 5px 8px; max-width: 160px; }

/* ——— 特效 ——— */
.fx-el { position: absolute; pointer-events: none; }
.orb { width: 3.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff, var(--c) 45%, transparent 70%); box-shadow: 0 0 20px var(--c), 0 0 40px var(--c); }
.orb.big { width: 6%; }
.arrow { height: 3px; width: 6%; transform-origin: 0 50%; background: linear-gradient(90deg, transparent, var(--c), #fff); border-radius: 3px; box-shadow: 0 0 12px var(--c); }
.blast {
  transform: translate(-50%, -50%); border-radius: 18%;
  background: radial-gradient(circle, rgba(255,255,255,.95), var(--c) 30%, color-mix(in srgb, var(--c) 40%, transparent) 60%, transparent 72%);
  mix-blend-mode: screen;
}
.ringfx { transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); }
.slashfx { width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.slashfx svg { width: 100%; height: 100%; overflow: visible; }
.puff { width: 10%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 65%); }
.streak { height: 6px; transform-origin: 0 50%; border-radius: 6px; background: linear-gradient(90deg, transparent, var(--c)); box-shadow: 0 0 20px var(--c); }
.rain { width: 2px; height: 5%; background: linear-gradient(180deg, transparent, var(--c)); }

.dmg {
  position: absolute; transform: translate(-50%, -50%); font: 800 clamp(16px, 2vw, 26px) var(--num); color: #fff;
  -webkit-text-stroke: 1px rgba(0,0,0,.6); text-shadow: 0 0 10px var(--c), 0 2px 0 rgba(0,0,0,.6); white-space: nowrap;
  animation: dmgUp 1.1s cubic-bezier(.2,.8,.3,1) forwards;
}
.dmg.big { font-size: clamp(20px, 2.6vw, 32px); }
.dmg.crit { font-size: clamp(24px, 3.4vw, 44px); color: var(--gold2); -webkit-text-stroke: 1.5px rgba(80,30,0,.8); animation: dmgCrit 1.25s cubic-bezier(.2,.8,.3,1) forwards; }
.dmg.crit::before { content: '暴击'; display: block; text-align: center; font: 900 .38em var(--font); letter-spacing: 2px; color: #fff; -webkit-text-stroke: 0; }
@keyframes dmgCrit { 0% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0%)), -20%) scale(2.4) rotate(-8deg); } 12% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0%)), -60%) scale(.9) rotate(4deg); } 20% { transform: translate(calc(-50% + var(--dx, 0%)), -60%) scale(1.15) rotate(-2deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0%)), -240%) scale(1); } }
.dmg.small { font-size: clamp(12px, 1.4vw, 18px); }
.dmg.txt { font: 700 clamp(11px, 1.2vw, 15px) var(--font); }
@keyframes dmgUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.4); } 10% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0%) * .4), -70%) scale(1.45); } 22% { transform: translate(calc(-50% + var(--dx, 0%) * .6), -80%) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0%)), -230%) scale(.9); } }

.soul { width: 7%; aspect-ratio: .7; transform: translate(-50%, -50%); background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.95), var(--c) 40%, transparent 70%); border-radius: 50% 50% 40% 40%; filter: blur(1px); }

.banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 3000;
  font-family: var(--display); font-size: clamp(20px, 3.4vw, 42px); letter-spacing: 6px; white-space: nowrap;
  padding: 10px 40px; color: #fff; text-shadow: 0 0 20px var(--c);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 35%, transparent), transparent);
  animation: bannerIn 1.8s ease forwards; pointer-events: none;
}
@keyframes bannerIn { 0% { opacity: 0; letter-spacing: 30px; } 20% { opacity: 1; letter-spacing: 6px; } 80% { opacity: 1; } 100% { opacity: 0; } }

.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }

/* 直播中：Agent 思考时头顶冒“···” */
.unit .think { position: absolute; left: 50%; bottom: calc(100% + 34px); transform: translateX(-50%); display: none; gap: 3px; padding: 4px 7px; border-radius: 10px; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.15); }
.unit.thinking .think { display: flex; }
.unit .think i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: dots 1.2s infinite; }
.unit .think i:nth-child(2) { animation-delay: .15s; }
.unit .think i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }