/* ============ Brawl Auto Stars - 原版SAP风格UI ============ */
* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
:root {
  --pet-w: clamp(52px, 7.8vw, 94px);
  --battle-pet-w: clamp(76px, 10vw, 124px);
  --bar-h: clamp(54px, 8.5vh, 78px);
  --ink:#26232e;
}
html,body { width:100%; height:100%; overflow:hidden; background:#87ceeb; touch-action:none;
  font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif; color:var(--ink); }
.screen { position:absolute; inset:0; display:none; }
.screen.active { display:block; }
.hidden { display:none !important; }
img { -webkit-user-drag:none; }

/* ============ 主菜单(全屏背景+紧凑UI) ============ */
#screen-login { display:none; }
#screen-login.active { display:block; }
.menu-bg { position:fixed; inset:0; background:url('../assets/img/bg/castlewallbuild.png') center/cover no-repeat;
  filter:blur(5px) brightness(1.04); }
.menu-bg::after { content:''; position:fixed; inset:0; background:rgba(255,255,255,.06); }
.logo-wrap { position:absolute; top:2.5%; left:2.5%; transform:rotate(-4deg); z-index:2; }
.game-logo { font-size:clamp(30px,4.6vw,50px); font-weight:900; line-height:.95; letter-spacing:2px; color:#ffcf3e;
  text-shadow:-3px -3px 0 #4e342e,3px -3px 0 #4e342e,-3px 3px 0 #4e342e,3px 3px 0 #4e342e,0 7px 0 #4e342e,0 10px 18px rgba(0,0,0,.45);
  animation:logoBob 3.5s ease-in-out infinite; }
@keyframes logoBob { 0%,100%{ transform:rotate(-3deg) translateY(0); } 50%{ transform:rotate(-1deg) translateY(-6px); } }
.game-logo span { display:inline-block; }
.game-logo span+span { margin-left:.35em; }
.logo-sub { margin-top:8px; font-weight:900; font-size:clamp(11px,1.3vw,14px); color:#fff; letter-spacing:5px;
  text-shadow:0 2px 0 rgba(0,0,0,.5); }
.menu-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-47%); width:min(330px,84vw);
  display:flex; flex-direction:column; gap:11px; z-index:2;
  background:rgba(255,252,240,.9); border:3px solid rgba(78,52,46,.25); border-radius:22px; padding:22px 26px;
  box-shadow:0 16px 46px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.8); backdrop-filter:blur(4px); }
#auth-form, #welcome-panel { display:flex; flex-direction:column; gap:11px; }
#welcome-panel { min-height:216px; justify-content:center; }
#welcome-panel .btn-grey { font-size:15px; padding:11px 0 11px 3px; }
#input-name { padding:12px 16px; font-size:16px; text-align:center; font-weight:bold; border:3px solid #4e342e;
  border-radius:12px; outline:none; background:#fffdf3; color:#4e342e; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.plank-btn { position:relative; border:3px solid #4e342e; border-radius:14px; cursor:pointer;
  display:block; width:100%; text-align:center;
  background:linear-gradient(180deg,#ffd98a 0%,#ffc065 55%,#f5a942 100%);
  box-shadow:0 5px 0 #8d5a2b, inset 0 2px 0 rgba(255,255,255,.5);
  color:#5d3a1a; font-size:17px; font-weight:900; letter-spacing:3px; padding:11px 0 11px 3px;   /* 左padding抵消letter-spacing偏移 */
  text-shadow:0 1px 0 rgba(255,255,255,.45); transition:transform .07s, box-shadow .07s, filter .15s; }
.plank-btn:hover { filter:brightness(1.06); }
.plank-btn:active { transform:translateY(4px); box-shadow:0 1px 0 #8d5a2b, inset 0 2px 0 rgba(255,255,255,.35); }
.plank-big { font-size:20px; padding:13px 0 13px 6px; letter-spacing:6px; }
.menu-tip { position:absolute; right:2.5%; bottom:3%; background:#fff; border:3px solid var(--ink); border-radius:12px;
  padding:9px 16px; font-weight:bold; font-size:14px; z-index:2; box-shadow:0 4px 10px rgba(0,0,0,.25); }
/* 登录子界面 */
.auth-title { text-align:center; font-size:16px; font-weight:900; color:#e65100; margin-bottom:2px; }
#input-pass { padding:12px 16px; font-size:16px; text-align:center; font-weight:bold; border:3px solid #4e342e;
  border-radius:12px; outline:none; background:#fffdf3; color:#4e342e; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.auth-msg { min-height:20px; font-size:13px; font-weight:bold; color:#e53935; text-align:center; }
.auth-hint { font-size:11.5px; color:#a1887f; text-align:center; }
.menu-links { display:flex; justify-content:center; gap:14px; }
.menu-links span { font-size:13px; font-weight:bold; color:#6d4c41; cursor:pointer; padding:4px 8px; border-radius:8px; }
.menu-links span:hover { background:#ffe0b2; color:#e65100; }

/* ============ 场景 ============ */
.scene-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(1.08) saturate(1.05); }

/* HUD 药丸 */
.hud-pills { position:absolute; top:12px; left:12px; z-index:30; display:flex; gap:9px; }
.pill { display:flex; align-items:center; gap:7px; background:#fffdf6; border:3px solid var(--ink); border-radius:999px;
  padding:5px 15px 5px 8px; font-size:clamp(16px,2vw,21px); font-weight:900; color:var(--ink); box-shadow:0 3px 0 rgba(0,0,0,.28); }
#pill-gold { border-color:#e6a817; }
.pill:nth-child(2) { border-color:#ef6c6c; }
.pill:nth-child(3) { border-color:#5aa9e6; }
.pill img { width:clamp(20px,2.4vw,26px); height:clamp(20px,2.4vw,26px); object-fit:contain; }
.pill i { font-style:normal; font-size:.72em; color:#8d8098; }
.pill.shakeX { animation:shakeX .35s; }

/* 右上按钮 */
.top-right-btns { position:absolute; top:12px; right:12px; z-index:30; display:flex; gap:9px; }
.player-name { position:absolute; top:16px; right:118px; z-index:30; max-width:34vw; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; background:rgba(255,253,246,.88); border:2.5px solid var(--ink);
  border-radius:999px; padding:6px 16px; font-size:clamp(12px,1.5vw,16px); font-weight:900; color:#e65100;
  box-shadow:0 3px 0 rgba(0,0,0,.25); }
.sq-btn { width:clamp(40px,4.6vw,50px); height:clamp(40px,4.6vw,50px); background:linear-gradient(180deg,#ffb765,#f08c00);
  border:3px solid var(--ink); border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 0 rgba(0,0,0,.3); transition:transform .07s; }
.sq-btn:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.3); }
.sq-btn img { width:62%; height:62%; object-fit:contain; filter:drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.sq-btn span { color:#fff; font-size:22px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.3); }

/* ============ 宠物单元(无卡框) ============ */
.pet-unit { position:relative; width:100%; height:100%; cursor:pointer; will-change:transform; }
.pet-unit img.art { position:absolute; left:50%; bottom:2%; width:96%; height:96%; object-fit:contain; object-position:bottom center;
  transform:translateX(-50%); filter:drop-shadow(0 4px 5px rgba(0,0,0,.35)); pointer-events:none;
  animation:petFloat 3.2s ease-in-out infinite; }
@keyframes petFloat { 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4%); } }
.flip-x img.art { transform:translateX(-50%) scaleX(-1); }
.flip-x img.art { animation:petFloatFlip 3.2s ease-in-out infinite; }
@keyframes petFloatFlip { 0%,100%{ transform:translateX(-50%) translateY(0) scaleX(-1); } 50%{ transform:translateX(-50%) translateY(-4%) scaleX(-1); } }
.bubble { position:absolute; bottom:-4px; width:42%; aspect-ratio:1; background-size:contain; background-repeat:no-repeat;
  background-position:center; display:flex; align-items:center; justify-content:center;
  font-size:clamp(13px,1.7vw,20px); font-weight:900; color:#fff; z-index:3;
  text-shadow:0 1.5px 0 rgba(0,0,0,.45); pointer-events:none;
  transition:transform .15s; }
.bubble.atk { left:-6%; background-image:url('../assets/img/ui/fist.png'); padding-bottom:4%; }
.bubble.hp  { right:-6%; background-image:url('../assets/img/ui/heart.png'); padding-bottom:4%; }
.pet-unit.buy-pop .bubble { animation:popIn .4s cubic-bezier(.2,1.6,.4,1); }
.lv-badge { position:absolute; top:-13%; left:50%; transform:translateX(-50%) rotate(-3deg); z-index:3;
  background:linear-gradient(180deg,#8a5a33,#6d4223); color:#ffe2b8; border:2.5px solid #4e342e; border-radius:8px;
  font-size:clamp(10px,1.2vw,13px); font-weight:900; padding:1px 7px; box-shadow:0 2px 0 rgba(0,0,0,.3); pointer-events:none; }
.perk-mini { position:absolute; top:-12%; right:-8%; width:34%; aspect-ratio:1; background:#fff; border:2px solid #4e342e;
  border-radius:8px; z-index:3; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.perk-mini img { width:80%; height:80%; object-fit:contain; }
/* 冰冻:冰块化(整体变蓝+冰晶质感) */
.pet-unit.frozen img.art { animation:none;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.35)) saturate(.25) brightness(1.45) hue-rotate(195deg) contrast(1.15); }
.pet-unit.frozen .stone { filter:hue-rotate(185deg) saturate(1.6) brightness(1.3); }
.pet-unit.frozen .bubble { filter:hue-rotate(180deg) saturate(1.6) brightness(1.25); }
.pet-unit.frozen .bubble.hp { display:block !important; }
.pet-unit.frozen::after { content:''; position:absolute; inset:4% 0 10% 0; z-index:2;
  background:
    linear-gradient(165deg, rgba(190,235,255,.72), rgba(90,175,255,.5)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(65deg, rgba(255,255,255,.22) 0 2px, transparent 2px 6px);
  border-radius:24%; animation:frozenPulse 1.4s ease-in-out infinite;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.75), inset 0 0 26px rgba(130,210,255,.95), 0 0 12px rgba(120,200,255,.6); }
.pet-unit.frozen::before { content:'❄'; position:absolute; top:-20%; left:50%; transform:translateX(-50%); z-index:7;
  font-size:clamp(15px,1.9vw,22px); color:#eaf7ff; text-shadow:0 0 9px #7cc4ff, 0 2px 0 #1a5276;
  animation:snowSpin 2.2s linear infinite; pointer-events:none; }
@keyframes snowSpin { 0%{ transform:translateX(-50%) rotate(0); } 100%{ transform:translateX(-50%) rotate(360deg); } }
@keyframes frozenPulse { 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
.freeze-dot { position:absolute; top:-46%; left:50%; transform:translateX(-50%); width:34%; aspect-ratio:1; z-index:6;
  background:#fff; border:3px solid var(--ink); border-radius:26%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 0 rgba(0,0,0,.28); transition:transform .07s; }
.freeze-dot:active { transform:translateX(-50%) scale(.9); }
.freeze-dot::before { content:''; width:22%; height:22%; border-radius:50%; background:#4e342e; }
.pet-unit.frozen .freeze-dot { background:#cfe9ff; border-color:#1976d2; box-shadow:0 0 8px rgba(25,118,210,.5); }
.pet-unit.frozen .freeze-dot::before { content:'❄'; width:auto; height:auto; background:none; font-size:.85em; color:#1976d2; }

/* 购买/雪花/星光粒子 */
.snow-particle { position:absolute; top:-8%; z-index:8; font-size:16px; color:#9bd4ff; pointer-events:none;
  animation:snowFall .9s ease-in forwards; text-shadow:0 0 6px rgba(120,190,255,.8); }
@keyframes snowFall { from{ transform:translateY(0) rotate(0); opacity:1; } to{ transform:translateY(70px) rotate(220deg); opacity:0; } }
.spark-particle { position:absolute; z-index:8; width:7px; height:7px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#ffe082,#ffb300); box-shadow:0 0 8px #ffca28;
  animation:sparkFly 1s ease-out forwards; }
@keyframes sparkFly { from{ transform:translate(0,0) scale(1); opacity:1; } to{ transform:translate(var(--dx,14px),-26px) scale(.2); opacity:0; } }
.buy-pop { animation:buyBounce .55s cubic-bezier(.3,1.6,.4,1); }
@keyframes buyBounce { 0%{ transform:scale(.2) translateY(40px); opacity:0; } 55%{ transform:scale(1.12) translateY(-6px); opacity:1; } 100%{ transform:scale(1); } }

/* 金币跳动 */
#hud-gold.gold-pulse { display:inline-block; animation:goldPop .3s ease-out; }
@keyframes goldPop { 0%{ transform:scale(1); } 40%{ transform:scale(1.4) rotate(-6deg); color:#ffd54f; } 100%{ transform:scale(1); } }

/* 出售飞行 */
.sell-fly { position:fixed; z-index:320; pointer-events:none; opacity:1;
  animation:sellFly .65s ease-in forwards; }
@keyframes sellFly { to { transform:translate(-50%, 58vh) scale(.25) rotate(24deg); opacity:.35; } }

/* 商店入场 */
.shop-slot .pet-unit { animation:slotIn .38s cubic-bezier(.2,1.5,.4,1) backwards; }
@keyframes slotIn { from{ transform:translateY(46px) scale(.4); opacity:0; } to{ transform:none; opacity:1; } }

/* 横屏提示 */
.rotate-hint { display:none; position:fixed; inset:0; z-index:999; background:#2b2542; color:#fff;
  flex-direction:column; align-items:center; justify-content:center; font-size:26px; font-weight:900; letter-spacing:4px; gap:14px; }

/* ============ 石头位(平滑) ============ */
.stone { position:absolute; left:50%; bottom:-12%; transform:translateX(-50%); width:112%; height:44%; z-index:0;
  background:radial-gradient(ellipse at 42% 26%, #e3d8c9 0%, #c8b7a0 45%, #a08a70 78%, #83705a 100%);
  border:3.5px solid #f0e8da; border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  box-shadow:0 5px 0 rgba(0,0,0,.22), inset 0 -6px 8px rgba(70,55,40,.3); }
.team-slot, .shop-slot { position:relative; width:var(--pet-w); height:calc(var(--pet-w)*1.22); }
.shop-slot .pet-unit, .team-slot .pet-unit { z-index:2; }
.shop-slot.empty-slot .stone { opacity:.55; border-style:dashed; }

/* 队伍行 */
.team-row { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); display:flex; gap:clamp(10px,1.6vw,26px); z-index:5; }
.team-slot.drag-over .stone { filter:brightness(1.15); box-shadow:0 0 0 4px #ffd54f, 0 5px 0 rgba(0,0,0,.22); }
.team-slot.sell-hint .stone { filter:hue-rotate(-30deg) brightness(1.05); }
.team-row.targeting .team-slot .stone { box-shadow:0 0 0 4px #ffd54f, 0 5px 0 rgba(0,0,0,.22); animation:pillGlow 1.2s infinite; }
/* 购买模式:空位高亮 */
.team-row.buy-mode .team-slot { cursor:pointer; }
.team-row.buy-mode .team-slot .stone { animation:buyGlow 1.1s ease-in-out infinite; box-shadow:0 0 0 4px #ffe082, 0 5px 0 rgba(0,0,0,.22); }
.team-row.buy-mode .team-slot:nth-child(odd) .stone { animation-delay:.2s; }
@keyframes buyGlow { 0%,100%{ filter:brightness(1.06); box-shadow:0 0 0 3px #ffe082, 0 5px 0 rgba(0,0,0,.22); } 50%{ filter:brightness(1.3); box-shadow:0 0 0 8px rgba(255,224,130,.85), 0 5px 0 rgba(0,0,0,.22); } }
@keyframes pillGlow { 50% { box-shadow:0 0 0 7px rgba(255,213,79,.55); } }

/* 木牌 */
.sign { position:absolute; z-index:6; width:clamp(74px,9vw,110px); pointer-events:none;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.3)); }
.sign img { width:100%; }
.sign b { position:absolute; left:56%; top:26%; transform:translate(-50%,-50%) rotate(-2deg); color:#5d3a1a;
  font-size:clamp(14px,1.7vw,19px); font-weight:900; letter-spacing:3px; }
.sign-battle { left:7%; top:30%; }
.sign-shop { right:26%; top:33%; }

/* 商店区(浅色清新底托) */
.shop-pets { position:absolute; left:clamp(90px,12vw,170px); bottom:calc(var(--bar-h) + 4vh); z-index:10;
  display:flex; gap:clamp(10px,1.6vw,24px);
  background:rgba(255,250,240,.35); padding:14px 18px 18px; border-radius:22px;
  box-shadow:inset 0 2px 8px rgba(120,90,50,.15), 0 4px 14px rgba(90,60,30,.18);
  border:2px solid rgba(255,255,255,.5); }
.shop-items { position:absolute; right:clamp(16px,4vw,60px); bottom:calc(var(--bar-h) + 4vh); z-index:10;
  display:flex; gap:clamp(10px,1.6vw,24px);
  background:rgba(255,250,240,.35); padding:14px 18px 18px; border-radius:22px;
  box-shadow:inset 0 2px 8px rgba(120,90,50,.15), 0 4px 14px rgba(90,60,30,.18);
  border:2px solid rgba(255,255,255,.5); }
.price-tag { position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); display:flex; align-items:center; gap:3px;
  font-size:14px; font-weight:900; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.6); z-index:4; }
.price-tag img { width:15px; height:15px; }

/* ============ 底部横条(清新浅色) ============ */
.bottom-bar { position:absolute; left:0; right:0; bottom:0; height:var(--bar-h); z-index:20;
  background:rgba(255,250,242,.96);
  border-top:4px solid #b07d4e; display:flex; align-items:center; justify-content:space-between; padding:0 14px;
  box-shadow:0 -6px 18px rgba(80,50,20,.22); }
.bottom-bar::before { content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:repeating-linear-gradient(90deg,#ffcf7d 0 26px,#ffe6b8 26px 52px); opacity:.75; }
.bar-btn { display:flex; align-items:center; gap:8px; border:3px solid var(--ink); border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg,#ffc46b,#f8961e); box-shadow:0 4px 0 rgba(0,0,0,.35);
  color:#fff; font-size:clamp(15px,1.9vw,19px); font-weight:900; letter-spacing:3px; padding:10px 20px;
  text-shadow:0 2px 0 rgba(0,0,0,.25); transition:transform .07s, box-shadow .07s; }
.bar-btn:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.bar-btn img { width:20px; height:20px; object-fit:contain; }
.bar-btn i { font-style:normal; }
.bar-right { display:flex; gap:10px; }
.freeze-btn { background:linear-gradient(180deg,#9ad9ff,#3ba9f5); }
.end-btn { background:linear-gradient(180deg,#ff8a65,#e64a19); }
.sell-zone { position:absolute; inset:0; background:rgba(229,57,53,.9); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:clamp(18px,2.4vw,24px); font-weight:900; letter-spacing:10px; z-index:5;
  border-top:4px solid #b71c1c; }

/* ============ 战斗分屏 ============ */
.battle-layer { position:absolute; inset:0; z-index:50; overflow:hidden; }
.battle-half { position:absolute; top:0; bottom:0; width:50.4%; overflow:hidden; }
.battle-half.left { left:0; } .battle-half.right { right:0; }
.battle-half img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.battle-divider { position:absolute; left:50%; top:0; bottom:0; width:5px; transform:translateX(-50%);
  background:#1c1830; z-index:3; box-shadow:0 0 12px rgba(0,0,0,.5); }
.team-name-plate { position:absolute; top:16%; left:50%; transform:translateX(-50%); z-index:5; background:#fff;
  border:3.5px solid var(--ink); border-radius:12px; padding:8px 22px; font-size:clamp(16px,2.2vw,24px); font-weight:900;
  white-space:nowrap; box-shadow:0 5px 0 rgba(0,0,0,.28); }
.team-name-plate.left { color:#42a5f5; } .team-name-plate.right { color:#ff7043; }
.vs-badge { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:6; background:#fff;
  border:4px solid var(--ink); border-radius:14px; padding:6px 16px; font-size:clamp(26px,3.4vw,42px); font-weight:900;
  color:var(--ink); box-shadow:0 6px 0 rgba(0,0,0,.3); }
.fight-row { position:absolute; top:47%; transform:translateY(-50%); display:flex; align-items:flex-end; z-index:4;
  gap:clamp(6px,1vw,16px); }
.ally-row { left:0; right:50%; justify-content:flex-end; }   /* 我方整队靠中线(front最右) */
.enemy-row { left:50%; right:0; justify-content:flex-start; } /* 敌方整队靠中线(front最左) */
.fight-row .pet-slot { width:var(--battle-pet-w); height:calc(var(--battle-pet-w)*1.18); position:relative; }
.fight-row .pet-slot .stone { opacity:.75; width:88%; height:36%; bottom:-9%; }

/* 前排标识: 贴中线单位头顶⚔标记(先攻者) */
.fight-row .pet-slot.front-pet::after { content:'⚔'; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  font-size:calc(var(--battle-pet-w)*.3); z-index:6; pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); animation:frontBob 1.1s ease-in-out infinite; }
.fight-row .pet-slot.front-pet .stone { filter:drop-shadow(0 0 10px rgba(255,213,79,.9)); opacity:.95; }
@keyframes frontBob { 50% { transform:translateX(-50%) translateY(-5px); } }
/* 商店队伍前排标签(最右侧槽位先攻) */
.front-tag { position:absolute; top:-16px; left:50%; transform:translateX(-50%); z-index:6; pointer-events:none;
  background:linear-gradient(180deg,#ff8a50,#e64a19); color:#fff; font-size:clamp(10px,1.1vw,13px); font-weight:900;
  padding:2px 8px; border-radius:9px; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
  animation:frontBob 1.4s ease-in-out infinite; }

/* 静态版标识(右下角小徽章) */
.static-badge { position:fixed; right:8px; bottom:6px; z-index:99; font-size:10px; color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.45); padding:3px 8px; border-radius:8px; pointer-events:none; letter-spacing:.5px; }

/* 战斗动画 */
@keyframes lungeR { 40%{transform:translateX(58%) translateY(-10%) rotate(-7deg);} 100%{transform:none;} }
@keyframes lungeL { 40%{transform:translateX(-58%) translateY(-10%) rotate(7deg);} 100%{transform:none;} }
@keyframes hurtShake { 0%,100%{filter:none;} 25%{filter:brightness(2.1) saturate(.35);} 50%{transform:translateX(6%);} 75%{transform:translateX(-6%); filter:brightness(1.7);} }
@keyframes faintFall { to { transform:translateY(40%) rotate(14deg) scale(.5); opacity:0; } }
@keyframes floatUp { from{opacity:1; transform:translate(-50%,0) scale(1.15);} to{opacity:0; transform:translate(-50%,-130%) scale(.85);} }
@keyframes popIn { from{transform:scale(.3); opacity:0;} to{transform:scale(1); opacity:1;} }
@keyframes glowPulse2 { 0%,100%{box-shadow:0 0 0 0 rgba(255,213,79,0);} 50%{box-shadow:0 0 22px 8px rgba(255,213,79,.75);} }
@keyframes bannerIn { from{transform:translate(-50%,-50%) scale(.4); opacity:0;} }
@keyframes shakeX { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 50%{transform:translateX(6px);} 75%{transform:translateX(-3px);} }

.pet-slot .pet-unit { transition:transform .25s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.lunge-r { animation:lungeR .4s cubic-bezier(.4,0,.6,1); z-index:10; }
.lunge-l { animation:lungeL .4s cubic-bezier(.4,0,.6,1); z-index:10; }
.ready { animation:readyBack .12s ease-in forwards; }
@keyframes readyBack { to { transform:translateX(var(--rx,-14px)) scale(.94) rotate(var(--rz,-4deg)); } }
.ally-row .pet-unit.ready { --rx:-16px; --rz:-5deg; }
.enemy-row .pet-unit.ready { --rx:16px; --rz:5deg; }
.hurt-anim { animation:hurtShake .35s; }
.casting { animation:glowPulse2 .9s ease-in-out; }
.pet-slot.dead .pet-unit { animation:faintFall .55s forwards ease-in; pointer-events:none; }

.fx-dmg { position:absolute; left:50%; top:6%; transform:translateX(-50%); z-index:20; font-size:clamp(18px,2.4vw,30px); font-weight:900;
  color:#ff5252; text-shadow:0 2px 0 #fff,0 0 8px rgba(0,0,0,.4); animation:floatUp .9s forwards; pointer-events:none; white-space:nowrap; }
.fx-big { font-size:clamp(30px,4vw,52px) !important; color:#ff1744 !important;
  text-shadow:0 3px 0 #fff,0 0 14px rgba(255,23,68,.6),0 0 26px rgba(255,23,68,.45) !important;
  animation:floatUpBig 1.05s forwards !important; }
@keyframes floatUpBig { 0%{opacity:1; transform:translate(-50%,6px) scale(.7) rotate(-6deg);} 20%{transform:translate(-50%,-4px) scale(1.25) rotate(3deg);} to{opacity:0; transform:translate(-50%,-140%) scale(1);} }
.fx-heal { color:#69f0ae !important; }
.fx-buff { color:#ffd740 !important; }
.fx-shieldtxt { color:#82b1ff !important; }
.fx-poison { color:#76ff03 !important; text-shadow:0 2px 0 #1b5e20, 0 0 10px rgba(118,255,3,.7) !important; }
.fx-burn { color:#ffab40 !important; text-shadow:0 2px 0 #bf360c, 0 0 10px rgba(255,171,64,.8) !important; }
.hit-ring { position:absolute; z-index:19; width:26px; height:26px; margin-left:-13px; margin-top:-13px; border-radius:50%;
  border:4px solid #fff; box-shadow:0 0 10px rgba(255,255,255,.9); pointer-events:none;
  animation:ringExpand .45s ease-out forwards; }
.hit-ring-big { width:44px; height:44px; margin-left:-22px; margin-top:-22px; border-width:6px; border-color:#ffd54f;
  box-shadow:0 0 18px rgba(255,213,79,1); animation:ringExpand .6s ease-out forwards; }
@keyframes ringExpand { from{ transform:scale(.3); opacity:1; } to{ transform:scale(3.4); opacity:0; } }
.star-particle { position:absolute; z-index:21; font-size:16px; color:#ffe082; pointer-events:none; text-shadow:0 0 6px #ffb300;
  animation:starFly .75s ease-out forwards; }
@keyframes starFly { from{ transform:translate(0,0) scale(1); opacity:1; } to{ transform:translate(var(--dx,20px), var(--dy,-30px)) scale(.3) rotate(180deg); opacity:0; } }
.summon-ring { position:absolute; left:50%; top:45%; width:46px; height:46px; margin-left:-23px; margin-top:-23px; z-index:22;
  border:5px solid #ffd54f; border-radius:50%; box-shadow:0 0 16px rgba(255,213,79,.9), inset 0 0 14px rgba(255,213,79,.7);
  pointer-events:none; animation:ringExpand .55s ease-out forwards; }

/* 战斗结算: 除"胜负平"结果字样外,整个战斗层全部模糊压暗并禁用交互 */
.battle-layer.blurred > *:not(.result-banner) { filter:blur(9px) brightness(.7); transition:filter .35s; pointer-events:none; }
.battle-layer.blurred .battle-divider { opacity:.35; }
.battle-layer.defeat-tint::after { content:''; position:absolute; inset:0; z-index:56; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, transparent 30%, rgba(150,20,20,.45) 100%);
  animation:defeatFade 1.6s ease-out forwards; }
@keyframes defeatFade { from{ opacity:0; } 20%{ opacity:1; } 100%{ opacity:.55; } }

.result-banner { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); z-index:60;
  font-size:clamp(46px,8vw,104px); font-weight:900; letter-spacing:8px; white-space:nowrap; color:#fff;
  text-shadow:0 4px 0 var(--ink), 0 8px 0 rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.5);
  animation:bannerIn .5s cubic-bezier(.2,1.6,.4,1); }
.result-win { color:#ffe082; } .result-lose { color:#ff8a80; } .result-draw { color:#cfd8dc; }

.battle-log { position:absolute; left:12px; bottom:18px; max-width:38vw; z-index:55; display:flex; flex-direction:column-reverse;
  gap:4px; pointer-events:none; }
.log-line { background:rgba(46,38,66,.85); color:#f5f2ea; font-size:12.5px; padding:4px 11px; border-radius:9px;
  border-left:3px solid #ff8a00; animation:popIn .25s backwards; }
.log-line b { color:#ffd54f; }

.opp-banner { position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:29; background:rgba(28,24,48,.88);
  color:#ffd54f; padding:6px 20px; border-radius:12px; font-weight:bold; font-size:14px; border:2px solid #f08c00; }

/* 战斗控制(暂停/加速) */
.battle-ctrl { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:58; display:flex; gap:8px; }
.bctrl-btn { background:rgba(255,253,246,.94); border:3px solid var(--ink); border-radius:12px; cursor:pointer;
  font-size:15px; font-weight:900; color:var(--ink); padding:6px 14px; box-shadow:0 3px 0 rgba(0,0,0,.28);
  transition:transform .07s; }
.bctrl-btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28); }

/* ============ 弹窗(木质) ============ */
.modal { position:absolute; inset:0; z-index:100; background:rgba(20,16,32,.72); display:flex; align-items:center;
  justify-content:center; backdrop-filter:blur(3px); }
.modal-box { background:linear-gradient(180deg,#fffdf5,#ffefd0); border:4px solid #4e342e; border-radius:20px; padding:26px 30px;
  min-width:min(420px,92vw); max-height:88vh; overflow:auto; text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.5), 0 8px 0 rgba(0,0,0,.25); animation:popIn .3s cubic-bezier(.2,1.5,.4,1); }
.modal-wide { width:min(760px,94vw); }
.result-title { font-size:38px; font-weight:900; margin-bottom:10px; color:#4e342e; }
.result-detail { font-size:16px; color:#6d4c41; margin-bottom:16px; line-height:1.8; white-space:pre-line; }
.lb-title { font-size:25px; font-weight:900; color:#e65100; margin-bottom:14px; }
.lb-list { text-align:left; margin-bottom:14px; max-height:48vh; overflow:auto; }
.lb-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1.5px dashed #e0cdb0; font-weight:bold; color:#4e342e; }
.lb-row .rank { width:32px; height:32px; border-radius:50%; background:#ffcc80; display:flex; align-items:center; justify-content:center;
  font-weight:900; border:2px solid #4e342e; }
.lb-row:nth-child(1) .rank { background:#ffd54f; } .lb-row:nth-child(2) .rank { background:#eee; } .lb-row:nth-child(3) .rank { background:#ffab91; }
.lb-row .t { margin-left:auto; display:flex; align-items:center; gap:5px; }
.lb-row .t img { width:19px; height:19px; }
.lb-empty { color:#a1887f; padding:20px; }

.codex-tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.codex-tabs span { padding:6px 14px; border-radius:999px; background:#ffe0b2; border:2px solid #4e342e; color:#5d3a1a;
  font-weight:bold; cursor:pointer; font-size:13.5px; }
.codex-tabs span.on { background:#f08c00; color:#fff; }
.codex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; max-height:52vh; overflow:auto;
  padding:4px; text-align:left; }
.codex-card { background:#fff; border-radius:12px; padding:8px; border:2.5px solid #ffe0b2; cursor:pointer; transition:transform .1s; }
.codex-card:hover { transform:translateY(-3px); border-color:#f08c00; }
.codex-card .ch { display:flex; align-items:center; gap:8px; }
.codex-card img { width:44px; height:44px; object-fit:contain; }
.codex-card .nm { font-weight:900; font-size:14.5px; color:#37474f; }
.codex-card .tier-tag { font-size:10.5px; padding:1px 7px; border-radius:8px; color:#fff; }
.codex-card .ab-desc { font-size:12px; color:#78584a; margin-top:6px; line-height:1.55; display:none; }
.codex-card.open .ab-desc { display:block; }

/* ============ 双人联机 ============ */
.tip-list { text-align:left; display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:#4e342e; line-height:1.6; }
.tip-list b { color:#e65100; }
.room-players { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.room-player { display:flex; align-items:center; gap:10px; background:#fff; border:2.5px solid #4e342e;
  border-radius:12px; padding:10px 14px; font-weight:bold; color:#4e342e; }
.room-player .st { margin-left:auto; font-size:13px; }
.room-player.ready .st { color:#2e7d32; }
.room-player.not-ready .st { color:#90a4ae; }
.room-status { color:#6d4c41; font-weight:bold; margin:6px 0 14px; text-align:center; }
.duo-hud { position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:29;
  background:rgba(255,253,246,.94); border:2.5px solid var(--ink); border-radius:999px;
  padding:7px 20px; display:flex; align-items:center; gap:10px; font-weight:900; box-shadow:0 3px 0 rgba(0,0,0,.25); }
.duo-opp { display:flex; align-items:center; gap:8px; font-size:14px; color:#e65100; }
.duo-status { font-size:12px; color:#2e7d32; }
.duo-status.waiting { color:#f57c00; }
.duo-wait-spin { width:52px; height:52px; margin:0 auto 16px; border:6px solid #ffe0b2; border-top-color:#f4511e;
  border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============ 提示框(点击弹出,带箭头) ============ */
.tooltip { position:absolute; z-index:200; background:#fffdf8; border:3.5px solid var(--ink); border-radius:13px;
  padding:9px 12px; max-width:235px; font-size:12.5px; line-height:1.5; pointer-events:none; color:var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 5px rgba(255,240,180,.55);
  animation:ttIn .28s cubic-bezier(.2,1.6,.4,1); }
.tooltip::before { content:''; position:absolute; left:24px; top:-11px; width:14px; height:14px;
  background:#fffdf8; border-left:3.5px solid var(--ink); border-top:3.5px solid var(--ink);
  transform:rotate(45deg); border-radius:3px 0 0 0; }
@keyframes ttIn { from{ transform:scale(.6) translateY(8px); opacity:0; } to{ transform:scale(1); opacity:1; } }
.tooltip .tt-head { display:flex; align-items:center; gap:10px; border-bottom:2px solid #e8e2d8; padding-bottom:8px; margin-bottom:8px; }
.tooltip .tt-head img { width:34px; height:34px; object-fit:contain; }
.tooltip .tt-name { flex:1; text-align:center; color:#f4511e; font-weight:900; font-size:16.5px; }
.tooltip .tt-price { display:flex; align-items:center; gap:3px; font-weight:900; }
.tooltip .tt-price img { width:18px; height:18px; }
.tooltip .tt-tier { font-size:11.5px; color:#9575cd; margin-bottom:4px; font-weight:bold; }
.tooltip .tt-stats { font-size:14px; font-weight:900; color:#4e342e; margin-bottom:5px;
  background:#fff3e0; border-radius:9px; padding:3px 10px; display:inline-block; }
.tooltip .tt-perk { margin-top:6px; color:#2e7d32; font-weight:bold; font-size:13px; }

/* 道具使用特效 */
.item-fx { position:absolute; left:50%; top:0; transform:translate(-50%,-10px); z-index:23; white-space:nowrap;
  display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.92); border:2.5px solid #4e342e;
  border-radius:999px; padding:3px 12px; font-size:13px; font-weight:900; color:#e65100;
  animation:itemFx 1.35s ease-out forwards; pointer-events:none; }
.item-fx img { width:18px; height:18px; object-fit:contain; }
.freeze-fx { color:#1976d2 !important; border-color:#1565c0 !important; }
@keyframes itemFx { 0%{ transform:translate(-50%,4px) scale(.4); opacity:0; } 20%{ transform:translate(-50%,-14px) scale(1.1); opacity:1; } 80%{ opacity:1; } 100%{ transform:translate(-50%,-34px) scale(.9); opacity:0; } }
.item-flash { animation:itemFlash .8s ease-out; }
@keyframes itemFlash { 0%,60%{ filter:brightness(1.9) drop-shadow(0 0 12px #ffe082); } 100%{ filter:none; } }

/* 召唤闪光提示 */
.summon-flash { animation:summonFlash 2.4s ease-out; border-radius:20%; }
@keyframes summonFlash {
  0%{ filter:brightness(2.4) drop-shadow(0 0 18px #fff); }
  25%{ filter:brightness(1.6) drop-shadow(0 0 14px #ffd54f); }
  50%{ filter:brightness(2) drop-shadow(0 0 18px #fff); }
  100%{ filter:none; }
}
.summon-tag { position:absolute; left:50%; top:-14%; transform:translateX(-50%); z-index:25; white-space:nowrap;
  color:#fff; font-size:clamp(12px,1.5vw,16px); font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.4);
  animation:tagFloat 2.1s ease-out forwards; pointer-events:none; }
@keyframes tagFloat { 0%{ opacity:0; transform:translate(-50%,8px) scale(.5); } 20%{ opacity:1; transform:translate(-50%,-4px) scale(1.15); } 100%{ opacity:0; transform:translate(-50%,-26px) scale(1); } }

/* 拖拽幽灵 */
.drag-ghost { position:fixed; z-index:300; width:var(--pet-w); height:calc(var(--pet-w)*1.22); pointer-events:none; opacity:.95;
  transform:translate(-50%,-60%) scale(1.08) rotate(-3deg); filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)); }

/* toast */
.toast { position:fixed; top:15%; left:50%; transform:translateX(-50%) translateY(-16px); background:rgba(28,24,48,.92);
  color:#fff; padding:11px 24px; border-radius:999px; font-weight:bold; font-size:15.5px; z-index:400; opacity:0;
  transition:.25s; pointer-events:none; border:3px solid var(--ink); }
.toast.show { opacity:1; transform:translateX(-50%); }
.shakeX { animation:shakeX .35s; }
.fly-coin { position:fixed; width:24px; height:24px; z-index:350; animation:coinFly .85s forwards ease-in; pointer-events:none; }
@keyframes coinFly { to { transform:translate(-50%,-320%) scale(.6); opacity:0; } }

.menu-open { position:absolute; right:12px; top:74px; z-index:40; background:#fffdf6; border:3px solid var(--ink);
  border-radius:14px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.menu-open div { padding:12px 28px; color:var(--ink); font-weight:bold; cursor:pointer; border-bottom:2px solid #f0e9dc; }
.menu-open div:last-child { border-bottom:none; }
.menu-open div:hover { background:#ffe0b2; }

/* ============ 移动端 ============ */
@media (max-width:820px){
  :root { --pet-w: 52px; --battle-pet-w: 64px; --bar-h: 54px; }
  .hud-pills { gap:5px; } .pill { padding:3px 9px 3px 5px; font-size:13px; gap:3px; }
  .pill img { width:18px; height:18px; }
  .sq-btn { width:38px; height:38px; border-radius:10px; }
  .team-row { top:42%; gap:4px; }
  .shop-pets { left:8px; gap:4px; bottom:calc(var(--bar-h) + 2vh); padding:10px 10px 14px; border-radius:16px; }
  .shop-items { right:6px; bottom:calc(var(--bar-h) + 16vh); flex-direction:column; gap:6px; padding:10px 12px; border-radius:16px; }
  .sign { width:52px; }
  .sign b { font-size:12px; letter-spacing:1px; white-space:nowrap; left:55%; top:27%; }
  .sign-shop { right:14%; top:37%; }
  .sign-battle { left:5px; top:24%; }
  .bar-btn { padding:8px 11px; letter-spacing:1px; font-size:12.5px; gap:4px; }
  .bar-btn img { width:15px; height:15px; }
  .battle-log { display:none; }
  .team-name-plate { font-size:12px; padding:4px 10px; top:12%; }
  .vs-badge { font-size:18px; padding:3px 9px; }
  .opp-banner { font-size:11px; top:54px; }
  .fight-row { gap:2px; }
  .ally-row { right:1%; } .enemy-row { left:1%; }
  .tooltip { max-width:200px; font-size:12px; }
  .lv-badge { font-size:11px; }
  .bctrl-btn { font-size:12px; padding:4px 10px; }
  .rotate-hint { display:flex; }
  /* 主菜单缩小 */
  .game-logo { font-size:clamp(22px,6.5vw,30px); }
  .logo-sub { font-size:10px; letter-spacing:3px; margin-top:5px; }
  .menu-panel { width:min(272px,86vw); padding:14px 16px; gap:8px; border-radius:16px; }
  .plank-btn { font-size:14px; padding:9px 0; letter-spacing:2px; border-width:2.5px; }
  .plank-big { font-size:17px; padding:11px 0; }
  #input-name { font-size:14px; padding:9px 12px; border-width:2.5px; }
  .menu-tip { display:none; }
}
@media (orientation:landscape) and (max-width:820px){
  .rotate-hint { display:none; }
  :root { --pet-w: 64px; --battle-pet-w: 80px; --bar-h: 50px; }
  .hud-pills { top:8px; left:8px; }
  .pill { font-size:14px; }
  .team-row { top:44%; gap:6px; }
  .shop-pets { left:64px; bottom:calc(var(--bar-h) + 3vh); gap:6px; }
  .shop-items { right:6px; bottom:calc(var(--bar-h) + 3vh); flex-direction:row; }
  .sign-shop { right:12%; top:42%; width:50px; }
  .sign-battle { left:4px; top:24%; width:50px; }
  .sq-btn { width:36px; height:36px; }
  .bar-btn { padding:7px 10px; font-size:12px; }
}
@media (max-width:380px){
  :root { --pet-w: 50px; }
  .shop-pets { left:64px; }
}

.welcome-name { text-align:center; font-size:clamp(18px,2.6vw,26px); font-weight:900; color:#4e342e; padding:6px 0 2px; }

/* ============ 补位动画 v48 ============ */
/* 阵亡补位: 位置变化的单位弹入到位(动画在 pet-unit 上,不与 slot 的攻击突进冲突) */
.pet-slot .pet-unit.settle { animation:settleIn .34s cubic-bezier(.3,1.4,.5,1); }
@keyframes settleIn { from { transform:translateY(14px) scale(.94); opacity:.55; } to { transform:none; opacity:1; } }

/* ============ 移动端商店缩小 v49 ============ */
@media (max-width:820px){
  .shop-pets, .shop-items { transform:scale(.8); }
  .shop-pets { transform-origin:left bottom; }    /* 靠左下角 */
  .shop-items { transform-origin:right bottom; }  /* 靠右下角 */
  .shop-pets .pet-unit, .shop-items .pet-unit { cursor:pointer; }
}

/* ============ v50 调整 ============ */
/* 主菜单移动端进一步缩小 */
@media (max-width:820px){
  .logo-wrap { top:2%; left:50%; transform:translateX(-50%) rotate(-3deg); }
  .game-logo { font-size:clamp(18px,5vw,24px); letter-spacing:1px; }
  .logo-sub { font-size:9px; letter-spacing:2px; margin-top:4px; }
  .menu-panel { width:min(236px,78vw); padding:12px 14px; gap:7px; border-radius:14px; }
  .plank-btn { font-size:13px; padding:8px 0; letter-spacing:1px; border-radius:11px; }
  .plank-big { font-size:15px; padding:9px 0; }
  #input-name, #input-pass { font-size:13px; padding:8px 10px; border-width:2px; border-radius:9px; }
  .auth-title { font-size:14px; }
  .welcome-name { font-size:16px; }
  .menu-links span { font-size:12px; padding:3px 6px; }
}

/* ============ v51 移动端微调 ============ */
@media (max-width:820px){
  /* 商店再缩小(覆盖 v49 的 .8) */
  .shop-pets, .shop-items { transform:scale(.72); }
  /* 信息框(点击属性提示)缩小 */
  .tooltip { max-width:168px; font-size:11px; padding:6px 9px; border-width:2.5px; border-radius:10px; }
  .tooltip .tt-head img { width:26px; height:26px; }
  .tooltip .tt-name { font-size:13.5px; }
  .tooltip .tt-stats { font-size:12.5px; padding:2px 8px; }
  /* 战斗英雄离中线稍远 */
  .ally-row { right:2.5%; } .enemy-row { left:2.5%; }
}
@media (orientation:landscape) and (max-width:820px){
  /* 横屏小屏战斗英雄更小 */
  :root { --battle-pet-w: 66px; }
}

/* ============ v52 联机大厅 ============ */
.room-list { display:flex; flex-direction:column; gap:6px; }
.room-item { display:flex; align-items:center; gap:8px; background:#fff; border:2px solid #e0cdb0;
  border-radius:10px; padding:7px 10px; font-size:13px; }
.room-item > span:first-child { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lobby-join { border:2.5px solid #4e342e; background:linear-gradient(180deg,#a5d6a7,#66bb6a); color:#fff; font-weight:900;
  border-radius:9px; padding:4px 12px; cursor:pointer; font-size:12.5px; box-shadow:0 2px 0 rgba(0,0,0,.25); }
.lobby-join:active { transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.25); }

/* ============ v57 移动端与双人HUD调整 ============ */
/* 手机标题回左上角(覆盖 v50 的居中) */
@media (max-width:820px){
  .logo-wrap { left:2.5%; top:2%; transform:rotate(-4deg); }
  .game-logo { font-size:clamp(16px,4.2vw,22px); letter-spacing:1px; }
  .logo-sub { font-size:8px; letter-spacing:2px; }
  /* 手机游戏菜单缩小,完整显示 */
  .menu-open { right:6px; top:56px; border-radius:10px; font-size:12px; }
  .menu-open div { padding:8px 14px; }
  /* 对手状况置顶,与顶部HUD对齐 */
  .duo-hud { top:8px; padding:4px 12px; font-size:12px; border-width:2px; }
}
.duo-hud { top:10px; left:50%; transform:translateX(-50%); }   /* 对手状况放到屏幕顶部 */

/* ============ v58 战斗位置/对手爱心/UI对齐/冻结按钮 ============ */
/* 双方队伍离中线远一点(PC+移动端统一) */
/* 双方队伍离中线远一点(PC+移动端统一) */
.ally-row { left:0; right: 40%; }   /* 我方行右缘离屏中线 30% 屏@PC */
.enemy-row { left: 40%; right:0; }  /* 敌方行左缘离屏中线 30% 屏@PC */
@media (max-width:820px){
  .ally-row { right: 42%; }
  .enemy-row { left: 42%; }
}
/* 中线:加宽+加色+光晕,与队伍区分明显 */
.battle-divider { width:7px; background:linear-gradient(180deg,#ffd54f 0%,#f4511e 50%,#ffd54f 100%); box-shadow:0 0 12px rgba(255,160,40,.65); z-index:3; }
.battle-divider::after { left:50%; top:50%; bottom:auto; width:100%; height:3px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent 0%, rgba(255,213,79,.6) 22%, rgba(255,213,79,.6) 78%, transparent 100%); animation:dividerGlow 2.2s ease-in-out infinite; }

/* 玩家名顶部对齐(与右上按钮同高) */
.player-name { top:10px; right:118px; padding:5px 14px; min-height:32px; box-sizing:border-box; display:flex; align-items:center; line-height:1.1; }