/**
 * 金铲铲之战 - 卡包副模式 | 样式表
 * VER111 | 2026-04-10
 * 作者：Issactang唐家祥
 * 联系：2084482061@qq.com
 * 版权所有 © 2026 Issactang唐家祥 All Rights Reserved
 * 未经授权禁止复制、修改、分发
 */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;color:#e0d6c2;font-family:'Microsoft YaHei','PingFang SC',sans-serif;overflow:hidden;user-select:none;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;padding:0}

/* ===== 首页介绍页 ===== */
#landing-page{position:fixed;inset:0;background:radial-gradient(ellipse at top,#0d1120 0%,#060810 100%);z-index:6000;overflow-y:auto;overflow-x:hidden}
#landing-page.hidden{display:none}
.landing-container{max-width:820px;margin:0 auto;padding:32px 24px 40px;animation:fadeInUp .6s ease-out}

/* 顶部标题 */
.landing-header{text-align:center;margin-bottom:28px}
.landing-logo-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.landing-logo{font-size:52px;animation:logoFloat 3s ease-in-out infinite}
.landing-title{font-size:32px;font-weight:bold;color:#f0c866;text-shadow:0 0 30px rgba(240,200,100,.3);margin:0;text-align:left}
.landing-subtitle{font-size:14px;color:#8899bb;font-weight:normal;margin:2px 0 0;text-align:left}
.landing-tagline{font-size:13px;color:#667;letter-spacing:1px;margin-top:6px}

/* 作者信息栏 */
.landing-author-info{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.author-badge{font-size:11px;color:#f0c866;background:rgba(40,35,15,.6);padding:3px 10px;border-radius:6px;border:1px solid rgba(240,200,100,.25)}
.author-contact{font-size:10px;color:#88aacc;background:rgba(15,20,40,.6);padding:3px 10px;border-radius:6px;border:1px solid rgba(60,100,160,.25)}
.author-ver{font-size:10px;color:#aab;background:rgba(20,20,30,.6);padding:3px 10px;border-radius:6px;border:1px solid rgba(80,80,100,.25);position:relative;overflow:hidden}
.author-ver.ver-link{cursor:pointer;color:#8cf;border-color:rgba(80,160,240,.35);transition:all .2s}
.author-ver.ver-link:hover{background:rgba(40,60,100,.6);color:#adf;border-color:rgba(100,180,255,.5);transform:scale(1.05)}
.author-ver.ver-link:active{transform:scale(.97)}
.author-ver::after{content:'';position:absolute;top:0;left:-100%;width:80px;height:100%;background:linear-gradient(90deg,transparent,rgba(240,200,100,.15),transparent);animation:verShine 3s ease-in-out infinite}
@keyframes verShine{0%{left:-100%}50%{left:120%}100%{left:120%}}

/* 区块 */
.landing-section{margin-bottom:22px}
.landing-section-title{font-size:15px;font-weight:bold;color:#f0c866;margin-bottom:10px;padding-left:4px;border-left:3px solid #f0c866;padding-left:8px}

/* 核心玩法3卡片 */
.landing-cards-3{display:flex;gap:12px}
.landing-card{flex:1;border-radius:12px;padding:16px 14px;text-align:center;transition:all .25s;cursor:default}
.landing-card:hover{transform:translateY(-3px)}
.lc-blue{background:rgba(20,40,80,.6);border:1.5px solid rgba(60,120,200,.35)}
.lc-blue:hover{border-color:rgba(60,120,200,.6);box-shadow:0 4px 16px rgba(60,120,200,.15)}
.lc-red{background:rgba(80,20,20,.5);border:1.5px solid rgba(200,60,60,.3)}
.lc-red:hover{border-color:rgba(200,60,60,.5);box-shadow:0 4px 16px rgba(200,60,60,.15)}
.lc-gold{background:rgba(60,50,20,.5);border:1.5px solid rgba(240,200,100,.3)}
.lc-gold:hover{border-color:rgba(240,200,100,.5);box-shadow:0 4px 16px rgba(240,200,100,.15)}
.lc-icon{font-size:32px;margin-bottom:6px}
.lc-title{font-size:14px;font-weight:bold;color:#f0c866;margin-bottom:4px}
.lc-desc{font-size:11px;color:#99aabb;line-height:1.6}

/* 游戏系统4列 */
.landing-cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.landing-sys-card{background:rgba(15,18,35,.85);border:1px solid rgba(40,55,90,.5);border-radius:8px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .2s;cursor:default}
.landing-sys-card:hover{border-color:rgba(240,200,100,.4);transform:translateY(-2px)}
.lsc-icon{font-size:22px}
.lsc-title{font-size:11px;font-weight:bold;color:#dde}
.lsc-desc{font-size:9px;color:#778;line-height:1.3}

/* 英雄阵容 */
.landing-heroes{display:flex;flex-direction:column;gap:6px}
.landing-hero-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lh-tag{font-size:10px;font-weight:bold;color:#f0c866;background:rgba(40,35,15,.7);padding:2px 8px;border-radius:4px;min-width:36px;text-align:center}
.lh-item{font-size:10px;padding:3px 8px;border-radius:5px;border:1px solid rgba(80,80,100,.3);background:rgba(20,22,40,.7);color:#ccd}
.cost-1-tag{border-color:rgba(136,136,136,.4)}
.cost-2-tag{border-color:rgba(76,175,80,.4);color:#8fc}
.cost-3-tag{border-color:rgba(33,150,243,.4);color:#8bf}
.cost-4-tag{border-color:rgba(156,39,176,.4);color:#c8f}
.cost-5-tag{border-color:rgba(255,152,0,.4);color:#fc8}

/* 回合流程 */
.landing-flow{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.flow-step{display:flex;align-items:center;gap:6px;background:rgba(15,18,35,.85);border:1px solid rgba(40,55,90,.5);border-radius:8px;padding:8px 10px;position:relative;min-width:0;flex:1}
.fs-num{position:absolute;top:-6px;left:-4px;width:16px;height:16px;border-radius:50%;background:#f0c866;color:#1a1a2a;font-size:9px;font-weight:bold;display:flex;align-items:center;justify-content:center}
.fs-icon{font-size:18px;flex-shrink:0}
.fs-text{font-size:10px;color:#ccd;line-height:1.4}
.fs-text small{color:#778;font-size:8px}
.flow-arrow{color:#445;font-size:14px;flex-shrink:0}

/* ====== 20秒速览区 ====== */
.landing-hero-banner{margin-bottom:24px}
.landing-one-liner{text-align:center;font-size:15px;color:#ccd8e8;background:linear-gradient(135deg,rgba(20,30,60,.7),rgba(15,20,40,.7));border:1px solid rgba(60,100,180,.25);border-radius:10px;padding:12px 18px;margin-bottom:18px;letter-spacing:1px;line-height:1.6;position:relative;overflow:hidden}
.landing-one-liner::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(90deg,transparent,rgba(240,200,100,.08),transparent);animation:shimmer 4s infinite;pointer-events:none}
@keyframes shimmer{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.landing-one-liner strong{color:#f0c866;font-size:16px}

/* 对比示意图 */
.compare-diagram{margin-bottom:20px}
.compare-board{background:linear-gradient(135deg,rgba(12,18,35,.9),rgba(8,12,25,.9));border:1.5px solid rgba(50,70,120,.4);border-radius:14px;padding:16px;overflow:hidden}
.compare-board-title{text-align:center;font-size:16px;font-weight:bold;color:#f0c866;margin-bottom:14px;text-shadow:0 0 12px rgba(240,200,100,.2)}

/* 左右横排布局 */
.compare-side-layout{display:flex;gap:18px;align-items:stretch}
.compare-left-img{flex:0 0 52%;display:flex;flex-direction:column;gap:10px}
.compare-right-info{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center}

/* 截图展示 */
.screenshot-showcase{position:relative;width:100%;border-radius:12px;overflow:hidden;border:1.5px solid rgba(50,70,120,.35);box-shadow:0 4px 20px rgba(0,0,0,.35);aspect-ratio:16/9}
.showcase-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s ease}
.showcase-label{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));display:flex;align-items:center;gap:8px}
.showcase-text{font-size:11px;color:#ccd}
.caption-tag{font-size:10px;font-weight:bold;padding:2px 8px;border-radius:6px;white-space:nowrap;letter-spacing:.5px}
.tag-classic{background:rgba(60,120,220,.7);color:#fff}
.tag-new{background:rgba(240,180,40,.8);color:#1a1a2e}
.tag-battle{background:rgba(220,60,60,.7);color:#fff}
.tag-real{background:rgba(80,200,120,.7);color:#fff}

/* 缩略图导航条 */
.screenshot-gallery-mini{display:flex;gap:6px;justify-content:center}
.mini-thumb{width:52px;height:32px;border-radius:6px;overflow:hidden;border:2px solid rgba(50,65,100,.35);cursor:pointer;transition:all .25s;opacity:.6}
.mini-thumb.active{border-color:#f0c866;opacity:1;box-shadow:0 0 8px rgba(240,200,100,.3)}
.mini-thumb:hover{opacity:.9;border-color:rgba(240,200,100,.4)}
.mini-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* VS 徽标 */
.compare-vs-badge{text-align:center;font-size:10px;color:#667;margin-top:4px;padding:4px 0;border-top:1px solid rgba(50,65,100,.2);letter-spacing:1px}
.compare-callout{display:flex;align-items:center;gap:10px;background:rgba(15,18,35,.7);border-radius:10px;padding:12px 16px;border:1px solid rgba(50,65,100,.35);transition:all .2s}
.compare-callout:hover{border-color:rgba(240,200,100,.35);transform:translateX(3px)}
.callout-before{font-size:13px;color:#778;min-width:130px;white-space:nowrap}
.callout-arrow-icon{font-size:22px;color:#f0c866;flex-shrink:0;animation:arrowBounce 1.5s ease-in-out infinite}
@keyframes arrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.callout-after{font-size:13px;color:#ccd}
.callout-after strong{color:#f0c866}
.callout-after small{color:#889;font-size:11px}
.callout-shop{border-left:3px solid rgba(60,120,220,.5)}
.callout-death{border-left:3px solid rgba(220,60,60,.5)}
.callout-time{border-left:3px solid rgba(240,200,100,.5)}

/* 四大亮点卡片 */
.landing-highlights-4{display:flex;gap:10px;margin-bottom:6px}
.landing-highlights-3{display:flex;gap:12px;margin-bottom:6px}
.highlight-card{flex:1;border-radius:14px;padding:16px 12px;text-align:center;transition:all .3s;cursor:default;position:relative;overflow:hidden}
.highlight-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none;border-radius:inherit}
.highlight-card:hover{transform:translateY(-4px)}
.hl-blue{background:rgba(20,40,80,.65);border:1.5px solid rgba(60,120,200,.4)}
.hl-blue:hover{border-color:rgba(60,120,200,.7);box-shadow:0 6px 20px rgba(60,120,200,.2)}
.hl-red{background:rgba(80,20,20,.55);border:1.5px solid rgba(200,60,60,.35)}
.hl-red:hover{border-color:rgba(200,60,60,.6);box-shadow:0 6px 20px rgba(200,60,60,.2)}
.hl-gold{background:rgba(60,50,20,.55);border:1.5px solid rgba(240,200,100,.35)}
.hl-gold:hover{border-color:rgba(240,200,100,.6);box-shadow:0 6px 20px rgba(240,200,100,.2)}
.hl-green{background:rgba(20,60,30,.55);border:1.5px solid rgba(60,200,80,.35)}
.hl-green:hover{border-color:rgba(60,200,80,.6);box-shadow:0 6px 20px rgba(60,200,80,.2)}
.hl-purple{background:rgba(40,20,70,.55);border:1.5px solid rgba(150,80,220,.35)}
.hl-purple:hover{border-color:rgba(150,80,220,.6);box-shadow:0 6px 20px rgba(150,80,220,.2)}
.hl-badge{position:absolute;top:8px;right:8px;font-size:9px;padding:2px 8px;border-radius:10px;font-weight:bold}
.hl-blue .hl-badge{background:rgba(60,120,200,.2);color:#88bbff;border:1px solid rgba(60,120,200,.3)}
.hl-red .hl-badge{background:rgba(220,100,120,.15);color:#ff99aa;border:1px solid rgba(220,100,120,.3)}
.hl-gold .hl-badge{background:rgba(240,200,100,.15);color:#f0c866;border:1px solid rgba(240,200,100,.3)}
.hl-green .hl-badge{background:rgba(60,200,80,.15);color:#88dd88;border:1px solid rgba(60,200,80,.3)}
.hl-purple .hl-badge{background:rgba(150,80,220,.15);color:#cc88ff;border:1px solid rgba(150,80,220,.3)}
.hl-icon{font-size:42px;margin-bottom:8px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.hl-title{font-size:16px;font-weight:bold;margin-bottom:6px;letter-spacing:1px}
.hl-blue .hl-title{color:#88ccff}
.hl-green .hl-title{color:#88ee99}
.hl-gold .hl-title{color:#f0c866}
.hl-desc{font-size:11px;color:#99aabb;line-height:1.8}

/* 开始按钮区 */
.landing-cta{text-align:center;margin-top:24px;padding-bottom:20px}
/* 核心玩法后的快速开始按钮 */
.landing-quick-start{text-align:center;margin:20px 0 10px;animation:fadeInUp .5s ease-out .3s both}
.landing-quick-start .quick-start-btn{font-size:24px;padding:20px 72px;animation:quickStartGlow 2s ease-in-out infinite alternate;letter-spacing:2px}
@keyframes quickStartGlow{0%{box-shadow:0 4px 20px rgba(240,200,100,.3)}100%{box-shadow:0 8px 40px rgba(240,200,100,.7),0 0 60px rgba(240,200,100,.2)}}
.landing-start-btn{background:linear-gradient(135deg,#f0c866,#d4a020);color:#1a1a2a;border:none;padding:18px 64px;border-radius:14px;font-size:22px;font-weight:900;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:10px;box-shadow:0 4px 20px rgba(240,200,100,.3);letter-spacing:2px}
.landing-start-btn:hover{transform:scale(1.08);box-shadow:0 8px 36px rgba(240,200,100,.6)}
.landing-start-btn:active{transform:scale(.97)}
.landing-version{font-size:10px;color:#445;margin-top:12px}

/* ====== 详细了解区：统一容器 ====== */
.landing-explore-container{background:rgba(8,10,22,.7);border:1.5px solid rgba(50,60,100,.35);border-radius:16px;padding:20px 18px 16px;margin-bottom:22px;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.landing-explore-header{text-align:center;margin-bottom:14px}
.landing-explore-title{font-size:18px;font-weight:bold;color:#f0c866;margin-bottom:6px;text-shadow:0 0 12px rgba(240,200,100,.2)}
.landing-explore-tip{font-size:11px;color:#667;margin:0}
.detail-tab-bar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.tab-group-label{font-size:10px;color:#556;font-weight:bold;width:100%;text-align:left;margin:6px 0 2px 4px;letter-spacing:1px;border-bottom:1px solid rgba(50,65,100,.2);padding-bottom:3px}
.tab-group-label:first-child{margin-top:0}
.detail-tab-btn{background:rgba(15,20,40,.7);border:1.5px solid rgba(50,65,100,.4);color:#8899bb;font-size:12px;font-weight:bold;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .25s;white-space:nowrap}
.detail-tab-btn:hover{border-color:rgba(100,130,200,.5);color:#bbc;background:rgba(20,28,55,.8);transform:translateY(-2px)}
.detail-tab-btn.active{color:#f0c866;border-color:rgba(240,200,100,.5);background:rgba(40,35,15,.5);box-shadow:0 2px 10px rgba(240,200,100,.15)}

/* 详情面板 */
.detail-panel{display:none;animation:fadeInUp .3s ease-out}
.detail-panel.active{display:block}

/* 英雄详情卡片网格 */
.landing-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lhg-card{background:rgba(15,18,35,.85);border:1px solid rgba(60,70,100,.4);border-radius:10px;padding:10px;text-align:center;transition:all .2s;cursor:default}
.lhg-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.lhg-icon{font-size:28px;margin-bottom:3px;display:flex;justify-content:center;align-items:center}
.lhg-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(240,200,100,.3);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.lhg-name{font-size:13px;font-weight:bold;color:#fff;margin-bottom:2px}
.lhg-role{font-size:9px;color:#aab;margin-bottom:2px}
.lhg-traits{font-size:9px;color:#8899bb;margin-bottom:3px}
.lhg-stats{font-size:9px;color:#ccd;background:rgba(0,0,0,.25);padding:3px 6px;border-radius:4px;margin-bottom:3px}
.lhg-skill{font-size:8px;color:#88bbdd;line-height:1.3}
.cost-1-border{border-color:rgba(136,136,136,.4)}
.cost-1-border .lhg-avatar{border-color:rgba(136,136,136,.5)}
.cost-2-border{border-color:rgba(76,175,80,.4)}
.cost-2-border .lhg-avatar{border-color:rgba(76,175,80,.6)}
.cost-3-border{border-color:rgba(33,150,243,.4)}
.cost-3-border .lhg-avatar{border-color:rgba(33,150,243,.6)}
.cost-4-border{border-color:rgba(156,39,176,.4)}
.cost-4-border .lhg-avatar{border-color:rgba(156,39,176,.6)}
.cost-5-border{border-color:rgba(255,152,0,.5)}
.cost-5-border .lhg-avatar{border-color:rgba(255,152,0,.7)}
.cost-1-title{color:#aab !important}
.cost-2-title{color:#8fc !important}
.cost-3-title{color:#8bf !important}
.cost-4-title{color:#c8f !important}
.cost-5-title{color:#fc8 !important}

/* 详情框 */
.landing-detail-box{background:rgba(12,15,30,.7);border:1px solid rgba(40,55,90,.35);border-radius:10px;padding:14px 16px;font-size:11px;color:#99aabb;line-height:1.7}
.landing-detail-box p{margin:0 0 6px}
.landing-detail-box strong{color:#f0c866}

/* 列表 */
.landing-list{list-style:none;padding:0;margin:4px 0 0}
.landing-list li{padding:4px 0;border-bottom:1px solid rgba(40,55,90,.2);font-size:11px;color:#99aabb}
.landing-list li:last-child{border-bottom:none}
.landing-list li strong{color:#dde}

/* 表格 */
.landing-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:10px}
.landing-table th{background:rgba(40,35,15,.5);color:#f0c866;padding:5px 8px;text-align:left;border:1px solid rgba(40,55,90,.3);font-weight:bold}
.landing-table td{padding:4px 8px;border:1px solid rgba(40,55,90,.2);color:#bbc}
.landing-table tr:hover td{background:rgba(30,35,55,.4)}

/* 提示文字 */
.landing-tip{font-size:10px;color:#667;margin-top:6px;font-style:italic}

/* 海克斯展示 */
.landing-hex-grid{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lhex-group{background:rgba(15,12,30,.5);border-radius:6px;padding:8px 10px}
.lhex-tier{font-size:11px;font-weight:bold;margin-bottom:3px}
.lhex-tier.tier-s{color:#aab}
.lhex-tier.tier-g{color:#f0c866}
.lhex-tier.tier-p{color:#cc88ff}
.lhex-items{font-size:10px;color:#99aabb;line-height:1.6}

/* ===== 开始页面 ===== */
#start-screen{position:fixed;inset:0;background:radial-gradient(ellipse at center,#0d1120 0%,#060810 100%);z-index:5000;display:flex;align-items:center;justify-content:center}
#start-screen.hidden{display:none}
.start-container{text-align:center;max-width:780px;padding:30px;animation:fadeInUp .6s ease-out}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
.start-logo{font-size:64px;margin-bottom:8px;animation:logoFloat 3s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.start-title{font-size:36px;font-weight:bold;color:#f0c866;text-shadow:0 0 30px rgba(240,200,100,.3);margin-bottom:2px}
.start-subtitle{font-size:16px;color:#8899bb;font-weight:normal;margin-bottom:24px}

/* 三大特色横排 */
.start-features-row{display:flex;gap:14px;margin-bottom:24px;justify-content:center}
.feature-box{flex:1;max-width:240px;background:rgba(15,18,35,.9);border:1.5px solid rgba(40,55,90,.6);border-radius:14px;padding:20px 16px;transition:all .25s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.feature-box:hover{border-color:rgba(240,200,100,.4);background:rgba(20,25,45,.95);transform:translateY(-4px);box-shadow:0 6px 24px rgba(0,0,0,.4)}
.feature-box:nth-child(1){border-color:rgba(60,120,200,.35)}
.feature-box:nth-child(1):hover{border-color:rgba(60,120,200,.6)}
.feature-box:nth-child(2){border-color:rgba(200,60,60,.3)}
.feature-box:nth-child(2):hover{border-color:rgba(200,60,60,.5)}
.feature-box:nth-child(3){border-color:rgba(240,200,100,.3)}
.feature-box:nth-child(3):hover{border-color:rgba(240,200,100,.5)}
.fb-icon{font-size:36px;margin-bottom:4px}
.fb-title{font-size:16px;font-weight:bold;color:#f0c866;margin-bottom:4px}
.fb-desc{font-size:12px;color:#99aabb;line-height:1.8;text-align:center}
.fb-desc p{margin:0}
.fb-desc strong{color:#e74c3c}
.start-btn{background:linear-gradient(135deg,#f0c866,#d4a020);color:#1a1a2a;border:none;padding:14px 48px;border-radius:12px;font-size:18px;font-weight:bold;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(240,200,100,.3)}
.start-btn:hover{transform:scale(1.06);box-shadow:0 6px 30px rgba(240,200,100,.5)}
.start-btn:active{transform:scale(.97)}
.start-btn-icon{font-size:22px}
.start-version{font-size:11px;color:#445;margin-top:14px}

/* ===== 游戏主布局 ===== */
/* v47: 移除固定scale(1.2)，改为JS动态计算缩放比例以适配不同分辨率 */
#game-wrapper{display:flex;gap:6px;align-items:stretch;height:82vh;max-height:800px;justify-content:center;overflow:visible;position:relative;transform-origin:center center}
#game-container{flex:1;max-width:1500px;display:flex;flex-direction:column;position:relative;background:#0d1120;border-radius:12px;border:1px solid #1f2540;box-shadow:0 0 40px rgba(10,14,26,.8);overflow:visible}

/* ===== 游戏内容区：玩家列表+战场 ===== */
#game-content{flex:1;display:flex;overflow:visible;min-height:0}

/* ===== 右侧玩家列表（游戏界面内棋盘右边 - 铲铲风格） ===== */
#players-panel-inner{width:64px;min-width:64px;background:rgba(10,13,25,.85);border-left:1px solid #1f2540;display:flex;flex-direction:column;overflow:hidden}

/* ===== v38: 实时DPS面板 ===== */
#dps-meter-panel{width:80px;min-width:80px;background:rgba(8,10,22,.9);border-left:1px solid rgba(30,40,70,.6);display:none;flex-direction:column;overflow:hidden}
.dps-header{height:22px;background:linear-gradient(180deg,#1a1f35,#0f1225);border-bottom:1px solid #2a2f4a;display:flex;align-items:center;justify-content:center;font-size:8px;gap:2px;padding:0 4px}
.dps-tab{color:#667;font-weight:bold;cursor:pointer;padding:1px 4px;border-radius:3px;transition:all .2s;font-size:8px}
.dps-tab.active{color:#f0c866;background:rgba(240,200,100,.1)}
.dps-tab:hover{color:#bbc}
.dps-tab-sep{color:#334;font-size:7px}
#dps-list{flex:1;overflow-y:auto;padding:3px 2px;display:flex;flex-direction:column;gap:2px}
.dps-row{display:flex;align-items:center;gap:2px;padding:1px 2px;border-radius:3px;transition:background .2s}
.dps-row:hover{background:rgba(255,255,255,.04)}
.dps-row.dps-dead{opacity:.4}
.dps-avatar{flex-shrink:0;width:14px;height:14px;display:flex;align-items:center;justify-content:center}
.dps-bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
.dps-bar-fill{height:100%;border-radius:3px;transition:width .15s ease}
.dps-val{font-size:7px;color:#889;min-width:20px;text-align:right;font-weight:bold}
.players-inner-title{height:22px;background:linear-gradient(180deg,#1a1f35,#0f1225);border-bottom:1px solid #2a2f4a;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:bold;color:#f0c866}
#players-list{flex:1;overflow-y:auto;padding:3px 2px;display:flex;flex-direction:column;align-items:center;gap:3px}
.player-card{width:56px;display:flex;flex-direction:column;align-items:center;position:relative;transition:all .2s;padding:2px 0;border-radius:6px;cursor:default}
.player-card.is-self{background:rgba(240,200,100,.08)}
.player-card.is-next-opponent{background:rgba(231,76,60,.08)}
.player-card.eliminated{opacity:.35}

/* 圆形头像 */
.pc-avatar-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;border:2.5px solid #2a3f6a;background:radial-gradient(circle,#1a2a4a,#0d1120);position:relative;transition:all .2s}
.player-card.is-self .pc-avatar-circle{border-color:#f0c866;box-shadow:0 0 8px rgba(240,200,100,.3)}
.player-card.is-next-opponent .pc-avatar-circle{border-color:#e74c3c;box-shadow:0 0 8px rgba(231,76,60,.3)}
.player-card.eliminated .pc-avatar-circle{border-color:#444;filter:grayscale(1)}
.pc-avatar-circle .pc-rank-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:#1a1f35;border:1.5px solid #3a4f7a;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:bold;color:#f0c866}
.player-card.eliminated .pc-avatar-circle::after{content:'💀';position:absolute;font-size:16px;z-index:2}

/* 血量条（头像下方横条） */
.pc-hp-bar-tft{width:38px;height:4px;background:#1a0a0a;border-radius:3px;border:1px solid rgba(60,20,20,.6);overflow:hidden;margin-top:2px}
.pc-hp-inner-tft{height:100%;border-radius:3px;transition:width .5s}

/* 名字 */
.pc-name-tft{font-size:7px;color:#889;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56px;text-align:center;margin-top:1px;line-height:1.2}
.player-card.is-self .pc-name-tft{color:#f0c866}

/* 对战标记 */
.player-card.is-next-opponent .pc-fight-badge{display:block}
.pc-fight-badge{display:none;position:absolute;top:0;left:-2px;font-size:8px}

/* ===== 中间区域 ===== */
#center-area{flex:1;display:flex;flex-direction:column;position:relative;overflow:visible;min-width:0;padding-left:115px}

/* ===== 右侧对战信息面板 ===== */
#battle-info-panel{position:relative;background:#0d1120;border-radius:12px;border:1px solid #1f2540;box-shadow:0 0 40px rgba(10,14,26,.8);display:flex;flex-direction:column;overflow:hidden;transition:width .3s ease;flex-shrink:0}
#battle-info-panel .battle-info-inner{width:160px;display:flex;flex-direction:column;overflow:hidden;height:100%}
#battle-info-panel.collapsed{width:28px;min-width:28px}
#battle-info-panel.collapsed .battle-info-inner{display:none}
#battle-info-panel:not(.collapsed){width:160px;min-width:160px}
.battle-info-toggle{position:absolute;top:4px;left:2px;z-index:10;background:rgba(26,31,53,.95);border:1px solid #2a3f5a;color:#f0c866;font-size:12px;width:24px;height:24px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s}
.battle-info-toggle:hover{background:rgba(40,50,80,.95);border-color:#f0c866}
.battle-info-title{height:30px;background:linear-gradient(180deg,#1a1f35,#0f1225);border-bottom:1px solid #2a2f4a;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:bold;color:#f0c866;border-radius:12px 12px 0 0;padding-left:24px}
#battle-opponent-info{padding:4px 6px;border-bottom:1px solid rgba(40,50,80,.3);font-size:9px;color:#99a}
.opponent-card{background:rgba(20,25,45,.8);border:1px solid rgba(231,76,60,.3);border-radius:6px;padding:6px 8px}
.opponent-card .opp-header{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.opponent-card .opp-avatar{font-size:16px}
.opponent-card .opp-name{font-size:12px;font-weight:bold;color:#e74c3c}
.opponent-card .opp-hp{font-size:10px;color:#f5a0a0}
.opponent-card .opp-units{font-size:9px;color:#889;margin-top:3px}
.opponent-card .opp-units-preview{display:flex;gap:2px;flex-wrap:wrap;margin-top:3px}
.opp-mini{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;border:1px solid rgba(231,76,60,.3);background:rgba(40,20,20,.6);overflow:hidden}

/* ===== 日志（在右侧面板内） ===== */
#info-log{flex:1;overflow-y:auto;padding:4px 6px;display:flex;flex-direction:column;gap:2px}
.log-entry{font-size:9px;color:#556;padding:2px 4px;background:rgba(15,18,37,.75);border-radius:3px}
.log-entry.important{color:#f0c866}

/* ===== 顶部栏 ===== */
#top-bar{height:40px;background:linear-gradient(180deg,#1a1f35,#0f1225);border-bottom:1px solid #2a2f4a;display:flex;align-items:center;padding:0 12px;gap:8px;z-index:100;flex-shrink:0;border-radius:12px 12px 0 0;position:relative}
.topbar-hp-section{display:flex;align-items:center;gap:5px;flex:1;max-width:320px}
.topbar-hp-label{font-size:14px;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(231,76,60,.5))}
.topbar-hp-bar-outer{flex:1;height:20px;background:linear-gradient(180deg,#1a0808,#0d0404);border-radius:10px;border:1.5px solid #5a2020;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 8px rgba(231,76,60,.15)}
.topbar-hp-bar-inner{height:100%;background:linear-gradient(90deg,#e74c3c,#f39c12);border-radius:10px;transition:width .5s ease,background .3s}
.topbar-hp-bar-outer:has(.topbar-hp-bar-inner[style*="width:100%"]) .topbar-hp-bar-inner,
.topbar-hp-bar-inner.hp-full{background:linear-gradient(90deg,#27ae60,#2ecc71)}
.topbar-hp-bar-inner.hp-danger{background:linear-gradient(90deg,#c0392b,#e74c3c);animation:hpDangerPulse 1s ease-in-out infinite}
@keyframes hpDangerPulse{0%,100%{box-shadow:inset 0 0 8px rgba(255,0,0,.3)}50%{box-shadow:inset 0 0 16px rgba(255,0,0,.6)}}
.topbar-hp-number{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:bold;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap;letter-spacing:.5px}
.topbar-divider{width:1px;height:18px;background:linear-gradient(180deg,transparent,rgba(136,153,187,.3),transparent);flex-shrink:0}
.topbar-author{font-size:10px;color:#667;white-space:nowrap;margin-left:auto;flex-shrink:0;letter-spacing:.3px}
/* 墓穴按钮 — 融入顶部栏 */
.topbar-graveyard{display:flex;align-items:center;gap:3px;font-size:13px;cursor:pointer;padding:3px 8px;border-radius:6px;transition:all .2s;color:#99889a;white-space:nowrap;flex-shrink:0}
.topbar-graveyard:hover{background:rgba(255,68,85,.12);color:#ff8899;text-shadow:0 0 6px rgba(255,0,0,.2)}
.topbar-graveyard .topbar-gy-count{font-size:11px;font-weight:bold;color:#ff6677;background:rgba(255,68,85,.15);padding:0 5px;border-radius:8px;min-width:16px;text-align:center}
.topbar-graveyard .topbar-gy-count:empty,.topbar-graveyard .topbar-gy-count[data-count="0"]{color:#667;background:rgba(100,100,120,.15)}
/* 升级按钮包装容器 */
.exp-btn-wrapper{position:relative;display:inline-flex;align-items:center}
/* 升级提醒气泡 — 在按钮上方 */
.upgrade-hint-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:10px;font-size:11px;font-weight:bold;color:#88ddff;background:linear-gradient(135deg,rgba(20,35,60,.97),rgba(15,25,50,.97));border:1.5px solid rgba(80,160,255,.5);box-shadow:0 0 16px rgba(80,160,255,.25),0 4px 12px rgba(0,0,0,.5);z-index:200;white-space:nowrap;text-align:center;cursor:pointer;animation:upgradeHintAnim 5s ease-out forwards;pointer-events:auto}
.upgrade-hint-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(80,160,255,.5)}
.upgrade-hint-bubble.hidden{display:none}
@keyframes upgradeHintAnim{0%{opacity:0;transform:translateX(-50%) translateY(6px)}8%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-4px)}}

/* v21: 回合/阶段信息横幅 — 棋盘上方居中 */
#round-stage-banner{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 8px;background:linear-gradient(180deg,rgba(15,18,37,.9),rgba(10,14,26,.7));z-index:90;flex-shrink:0}
.round-stage-left{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(240,200,100,.12),rgba(240,200,100,.04));border:1px solid rgba(240,200,100,.25);border-radius:8px;padding:2px 10px}
.stage-round-num{font-size:18px;font-weight:bold;color:#f0c866;letter-spacing:2px;text-shadow:0 0 8px rgba(240,200,100,.4)}
.stage-round-name{font-size:10px;color:#8899bb;background:rgba(136,153,187,.12);border-radius:4px;padding:1px 6px;font-weight:500}
.round-stage-center{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.2}
.round-info{font-size:13px;font-weight:bold;color:#f0c866}
.stage-info{font-size:11px;color:#8899bb}
.timer-display{font-size:24px;color:#f0c866;min-width:36px;text-align:center;font-weight:bold;background:rgba(240,200,100,.08);border:1px solid rgba(240,200,100,.2);border-radius:8px;padding:1px 8px;text-shadow:0 0 10px rgba(240,200,100,.4);animation:timerPulse 1s ease-in-out infinite}
@keyframes timerPulse{0%,100%{text-shadow:0 0 10px rgba(240,200,100,.4)}50%{text-shadow:0 0 18px rgba(240,200,100,.7)}}
.timer-display.timer-urgent{color:#e74c3c;border-color:rgba(231,76,60,.4);background:rgba(231,76,60,.1);text-shadow:0 0 12px rgba(231,76,60,.5);animation:timerUrgent .5s ease-in-out infinite}
/* v34: 教程暂停时计时器样式 */
.timer-display.timer-paused{color:#aa88ff;border-color:rgba(170,136,255,.4);background:rgba(170,136,255,.1);text-shadow:0 0 10px rgba(170,136,255,.4);animation:none;font-size:18px}
@keyframes timerUrgent{0%,100%{transform:scale(1);text-shadow:0 0 12px rgba(231,76,60,.5)}50%{transform:scale(1.08);text-shadow:0 0 20px rgba(231,76,60,.8)}}
/* v32: 开卡包时的浮动计时器 */
#reveal-timer{position:fixed;top:16px;right:24px;z-index:1100;font-size:28px;font-weight:bold;color:#f0c866;background:rgba(10,12,25,.92);border:2px solid rgba(240,200,100,.35);border-radius:12px;padding:6px 16px;text-shadow:0 0 12px rgba(240,200,100,.5);display:none;align-items:center;gap:6px;box-shadow:0 4px 20px rgba(0,0,0,.6)}
#reveal-timer .rt-label{font-size:11px;color:#8899bb;font-weight:normal}
#reveal-timer.show{display:flex}
#reveal-timer.timer-urgent{color:#e74c3c;border-color:rgba(231,76,60,.5);text-shadow:0 0 12px rgba(231,76,60,.5);animation:timerUrgent .5s ease-in-out infinite}
.speed-btn{background:linear-gradient(135deg,#2a3f6a,#1a2a4a);color:#88bbff;border:1px solid #3a5f8a;padding:3px 10px;border-radius:8px;cursor:pointer;font-size:12px;transition:all .2s}
.speed-btn:hover{background:linear-gradient(135deg,#3a5f8a,#2a4a6a)}
.speed-btn.active{background:linear-gradient(135deg,#5a3f1a,#4a2a0a);color:#f0c866;border-color:#8a6f2a}

/* ===== 主战场 ===== */
#main-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;min-height:0}
#battlefield{display:flex;flex-direction:column;align-items:center;gap:2px;transform-origin:center center;position:relative}
#enemy-board,#player-board{display:flex;justify-content:center;align-items:center;position:relative}
#board-divider{width:100%;max-width:530px;height:2px;background:linear-gradient(90deg,transparent,rgba(240,200,100,.4),rgba(240,200,100,.6),rgba(240,200,100,.4),transparent);flex-shrink:0;margin:2px 0}
/* v28: 棋盘旁棋子数量指示器 — 我方棋盘下方居中 */
#board-unit-counter{margin-top:2px;z-index:90;display:flex;align-items:center;justify-content:center}
#board-unit-count-num{font-size:13px;font-weight:900;font-family:'Segoe UI',Tahoma,sans-serif;padding:3px 10px;border-radius:6px;background:rgba(10,14,26,.9);border:1.5px solid rgba(60,180,80,.5);text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:1px;text-align:center;transition:all .3s ease;white-space:nowrap}
#board-unit-count-num.counter-ok{color:#4de64d;border-color:rgba(60,180,80,.5);box-shadow:0 0 8px rgba(60,180,80,.2)}
#board-unit-count-num.counter-full{color:#ff4455;border-color:rgba(255,68,85,.5);box-shadow:0 0 8px rgba(255,68,85,.3);animation:counterPulse 1.5s ease-in-out infinite alternate}
@keyframes counterPulse{0%{box-shadow:0 0 8px rgba(255,68,85,.3)}100%{box-shadow:0 0 14px rgba(255,68,85,.5)}}
/* v28: 上回合死亡棋子弹窗 */
.dead-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2000;background:linear-gradient(135deg,rgba(20,10,30,.97),rgba(40,15,25,.97));border:2px solid rgba(255,68,85,.6);border-radius:14px;padding:16px 20px;min-width:240px;max-width:380px;box-shadow:0 0 30px rgba(255,0,0,.25),0 8px 32px rgba(0,0,0,.6);animation:deadPopIn .35s ease-out}
.dead-popup.hidden{display:none}
@keyframes deadPopIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.dead-popup-title{font-size:15px;font-weight:bold;color:#ff6677;text-align:center;margin-bottom:10px;text-shadow:0 1px 4px rgba(255,0,0,.3)}
.dead-popup-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:200px;overflow-y:auto}
.dead-unit-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(255,40,60,.08);border:1px solid rgba(255,68,85,.25);font-size:12px;color:#ffaaaa;transition:all .15s}
.dead-unit-item:hover{background:rgba(255,40,60,.15)}
.dead-unit-item.dead-unit-epic{border-color:rgba(255,68,85,.5);background:rgba(255,40,60,.12);box-shadow:0 0 10px rgba(255,0,0,.15)}
.dead-unit-item img{border-radius:4px;border:1px solid rgba(255,68,85,.3)}
.dead-unit-item .dead-unit-avatar{flex-shrink:0}
.dead-unit-item .dead-unit-avatar img{width:24px;height:24px;border-radius:5px}
.dead-unit-item .dead-unit-info{flex:1;min-width:0}
.dead-unit-item .dead-unit-name-row{color:#ff8899;font-weight:bold;font-size:12px}
.dead-unit-item .dead-unit-stats-row{font-size:9px;color:#99889a;display:flex;gap:8px;margin-top:2px}
.dead-unit-item .dead-unit-killer-row{font-size:9px;color:#886677;margin-top:1px}
.dead-popup-btn{display:block;margin:0 auto;padding:6px 28px;border:none;border-radius:8px;background:linear-gradient(135deg,#c0392b,#a93226);color:#fff;font-size:13px;font-weight:bold;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(200,0,0,.3)}
.dead-popup-btn:hover{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 2px 12px rgba(255,0,0,.4)}
.dead-popup-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1999}
.dead-popup-backdrop.hidden{display:none}
/* ===== 蜂巢六边形棋盘 — SVG绝对定位 ===== */
.hex-board{position:relative;margin:0 auto}
.hex-cell{position:absolute;cursor:pointer;transition:all .15s}
.hex-cell svg{pointer-events:none;z-index:0}
.hex-cell polygon{transition:fill .15s,stroke .15s}
/* 我方棋盘格 hover */
#player-board .hex-cell:hover polygon{fill:rgba(30,70,130,0.7);stroke:rgba(60,120,200,0.9)}
/* 敌方棋盘格 hover */
#enemy-board .hex-cell:hover polygon{fill:rgba(130,30,30,0.6);stroke:rgba(200,60,60,0.8)}
/* 高亮（可放置） */
.hex-cell.highlight polygon{fill:rgba(60,160,60,0.5) !important;stroke:rgba(100,220,100,0.9) !important;animation:hexPulse .8s infinite alternate}
/* 有棋子的格 */
#player-board .hex-cell.occupied polygon{fill:rgba(30,60,110,0.65);stroke:rgba(50,100,180,0.8)}
#enemy-board .hex-cell.occupied polygon{fill:rgba(110,25,25,0.55);stroke:rgba(170,50,50,0.7)}
@keyframes hexPulse{0%{filter:brightness(1)}100%{filter:brightness(1.3)}}

/* ===== 棋子 ===== */
.chessman{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;z-index:15;transition:all .15s;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.chessman:active{cursor:grabbing}
.chessman .chess-icon{font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
/* v26: 英雄头像图片样式 */
.champ-avatar{border-radius:50%;object-fit:cover;display:block;image-rendering:auto;border:1.5px solid rgba(255,255,255,.3)}
.champ-avatar-inline{border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:2px;border:1px solid rgba(255,255,255,.2)}
.chess-avatar{border-color:rgba(255,255,255,.4);box-shadow:0 0 4px rgba(0,0,0,.5)}
.card-avatar{border-radius:50%;border:1.5px solid rgba(200,220,255,.3);box-shadow:0 0 6px rgba(0,0,0,.4)}
.rc-avatar{border-radius:50%;border:2px solid rgba(255,255,255,.4);box-shadow:0 0 8px rgba(0,0,0,.5)}
.detail-avatar{border-radius:50%;border:2px solid rgba(200,220,255,.4);box-shadow:0 0 10px rgba(100,150,255,.3)}
.opp-mini-avatar{border-radius:50%;border:1px solid rgba(231,76,60,.3)}
.chessman .chess-name{font-size:7.5px;color:#fff;white-space:nowrap;margin-top:0px}
.chessman .star-level{position:absolute;top:-8px;font-size:8px;color:#f0c866;letter-spacing:-1px}
/* v44: 二星棋子视觉增强 — 金色呼吸光效（不改变transform避免覆盖居中定位） */
.chessman.star-2{z-index:16;filter:drop-shadow(0 0 5px rgba(240,200,100,.7)) brightness(1.1)}
.chessman.star-2 .star-level{font-size:10px;color:#ffdd44;text-shadow:0 0 6px rgba(255,200,50,.8);animation:starGlow 2s ease-in-out infinite alternate}
.chessman.star-2::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(240,200,100,.5);pointer-events:none;animation:starBorder 2s ease-in-out infinite alternate}
@keyframes starGlow{0%{text-shadow:0 0 4px rgba(255,200,50,.6)}100%{text-shadow:0 0 10px rgba(255,200,50,1)}}
@keyframes starBorder{0%{border-color:rgba(240,200,100,.3);box-shadow:0 0 4px rgba(240,200,100,.15)}100%{border-color:rgba(240,200,100,.7);box-shadow:0 0 10px rgba(240,200,100,.3)}}
/* v43: 二星棋子卡池高亮 */
.card-slot.card-star-2{border:1.5px solid rgba(240,200,100,.6) !important;background:rgba(50,45,20,.7) !important;box-shadow:0 0 8px rgba(240,200,100,.25)}
.card-slot.card-star-2 .card-chess-name{color:#ffdd44;font-weight:bold}
/* v46: 三星棋子视觉效果 */
.chessman.star-3{z-index:11;filter:drop-shadow(0 0 8px rgba(255,100,50,.8)) drop-shadow(0 0 16px rgba(255,60,0,.4)) brightness(1.2)}
.chessman.star-3 .star-level{font-size:11px;color:#ff7700;text-shadow:0 0 8px rgba(255,100,50,1);animation:star3Glow 1.5s ease-in-out infinite alternate}
.chessman.star-3::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2.5px solid rgba(255,100,50,.6);pointer-events:none;animation:star3Border 1.5s ease-in-out infinite alternate}
@keyframes star3Glow{0%{text-shadow:0 0 6px rgba(255,100,50,.7)}100%{text-shadow:0 0 14px rgba(255,100,50,1),0 0 20px rgba(255,60,0,.5)}}
@keyframes star3Border{0%{border-color:rgba(255,100,50,.3);box-shadow:0 0 6px rgba(255,100,50,.2)}100%{border-color:rgba(255,100,50,.8);box-shadow:0 0 16px rgba(255,100,50,.5)}}
.card-slot.card-star-3{border:2px solid rgba(255,100,50,.7) !important;background:rgba(60,25,10,.8) !important;box-shadow:0 0 12px rgba(255,100,50,.35)}
.card-slot.card-star-3 .card-chess-name{color:#ff7700;font-weight:bold;text-shadow:0 0 4px rgba(255,100,50,.5)}
/* v46: 3星升星弹窗 */
.star-up-toast.star-3-toast{background:linear-gradient(135deg,rgba(180,50,0,.95),rgba(255,100,30,.9));border:2px solid #ff6600;box-shadow:0 0 30px rgba(255,80,0,.6);font-size:14px}
/* v63: 4星棋子视觉效果——传说紫色光效 */
.chessman.star-4{z-index:12;filter:drop-shadow(0 0 10px rgba(200,0,255,.8)) drop-shadow(0 0 20px rgba(160,0,255,.5)) brightness(1.3)}
.chessman.star-4 .star-level{font-size:12px;color:#cc00ff;text-shadow:0 0 10px rgba(200,0,255,1);animation:star4Glow 1.2s ease-in-out infinite alternate}
.chessman.star-4::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(200,0,255,.7);pointer-events:none;animation:star4Border 1.2s ease-in-out infinite alternate}
.chessman.star-4::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid transparent;background:conic-gradient(from 0deg,rgba(255,0,128,.3),rgba(200,0,255,.5),rgba(100,0,255,.3),rgba(255,0,128,.3)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:star4Spin 3s linear infinite}
@keyframes star4Glow{0%{text-shadow:0 0 8px rgba(200,0,255,.7)}100%{text-shadow:0 0 18px rgba(200,0,255,1),0 0 28px rgba(160,0,255,.6)}}
@keyframes star4Border{0%{border-color:rgba(200,0,255,.3);box-shadow:0 0 8px rgba(200,0,255,.2)}100%{border-color:rgba(200,0,255,.9);box-shadow:0 0 20px rgba(200,0,255,.6),0 0 40px rgba(160,0,255,.3)}}
@keyframes star4Spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.card-slot.card-star-4{border:2px solid rgba(200,0,255,.7) !important;background:rgba(40,10,60,.85) !important;box-shadow:0 0 15px rgba(200,0,255,.4)}
.card-slot.card-star-4 .card-chess-name{color:#cc00ff;font-weight:bold;text-shadow:0 0 6px rgba(200,0,255,.6)}
.star-up-toast.star-4-toast{background:linear-gradient(135deg,rgba(120,0,180,.95),rgba(200,0,255,.9));border:2px solid #cc00ff;box-shadow:0 0 40px rgba(200,0,255,.7),0 0 80px rgba(160,0,255,.3);font-size:16px}
/* v46: 装备详情弹窗 */
.equip-detail-popup{position:fixed;z-index:9999;min-width:180px;max-width:260px;background:rgba(20,22,30,.96);border:1.5px solid rgba(255,200,100,.5);border-radius:10px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 15px rgba(255,200,100,.15);transform:translateY(-100%);animation:edpSlideIn .25s ease-out forwards;pointer-events:auto}
@keyframes edpSlideIn{from{opacity:0;transform:translateY(-100%) translateY(10px)}to{opacity:1;transform:translateY(-100%)}}
.edp-header{display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:8px}
.edp-icon{font-size:24px}
.edp-name{font-size:15px;font-weight:bold}
.edp-stat{font-size:13px;color:#adf;margin-bottom:4px}
.edp-desc{font-size:12px;color:#ccc;line-height:1.5;margin-bottom:6px}
.edp-hint{font-size:11px;color:#888;text-align:center;border-top:1px solid rgba(255,255,255,.1);padding-top:6px}
.chessman .chess-level{position:absolute;top:-8px;right:-2px;font-size:7px;color:#8cf;background:rgba(0,0,0,.6);padding:0 2px;border-radius:2px}
.chessman .hp-mini{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:80%;max-width:40px;height:3px;background:#222;border-radius:2px;overflow:hidden}
.chessman .hp-mini-inner{height:100%;background:#4CAF50;border-radius:2px;transition:width .3s}
.chessman .mana-mini{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:80%;max-width:40px;height:2px;background:#111;border-radius:2px;overflow:hidden}
.chessman .mana-mini-inner{height:100%;background:#2196F3;border-radius:2px;transition:width .3s}
.cost-1{box-shadow:0 0 0 2px #888,0 0 6px rgba(136,136,136,.4);background:radial-gradient(circle,#3a3a4a,#2a2a3a)}
.cost-2{box-shadow:0 0 0 2px #4CAF50,0 0 6px rgba(76,175,80,.4);background:radial-gradient(circle,#2a4a2a,#1a3a1a)}
.cost-3{box-shadow:0 0 0 2px #2196F3,0 0 6px rgba(33,150,243,.4);background:radial-gradient(circle,#1a2a4a,#0a1a3a)}
.cost-4{box-shadow:0 0 0 2px #9C27B0,0 0 6px rgba(156,39,176,.4);background:radial-gradient(circle,#3a1a4a,#2a0a3a)}
.cost-5{box-shadow:0 0 0 2px #FF9800,0 0 8px rgba(255,152,0,.5);background:radial-gradient(circle,#4a3a1a,#3a2a0a)}

/* ===== 棋子定位标签 ===== */
.chessman .chess-role{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:5.5px;color:#ccd;background:rgba(0,0,0,.85);padding:0 3px;border-radius:2px;white-space:nowrap;z-index:12;line-height:1.2;letter-spacing:0}

/* ===== 卡池定位标签 ===== */
.card-chess-role{font-size:8px;color:#aabbdd;margin-top:1px;background:rgba(30,40,70,.6);padding:0 4px;border-radius:3px;display:inline-block}

/* ===== 下方卡池 + 装备栏 + 控制 ===== */
#bottom-panel{background:linear-gradient(180deg,#111528,#0a0e1a);border-top:1px solid #1f2540;display:flex;flex-direction:column;flex-shrink:0;z-index:50;border-radius:0 0 12px 12px}

/* 下方主行 */
#bottom-panel-row2{display:flex;flex-direction:row;align-items:stretch;flex:1}
#card-pool-area{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 10px;flex:1;position:relative}
.card-pool-label{font-size:11px;color:#667;writing-mode:vertical-rl;text-orientation:mixed;margin-right:4px}

/* ===== 装备栏 ===== */
#equip-slots-area{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px;border-left:1px solid rgba(40,50,80,.3);min-width:72px;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,152,0,.3) transparent}
#equip-slots-area.equip-drop-highlight{border-color:rgba(255,152,0,.8) !important;background:rgba(255,152,0,.05)}
.slot-area-label{font-size:9px;color:#889;white-space:nowrap;margin-bottom:2px}
.equip-slot{width:58px;height:26px;border-radius:6px;background:rgba(35,25,10,.5);border:1px dashed rgba(255,152,0,.25);display:flex;align-items:center;gap:3px;padding:0 4px;position:relative;cursor:pointer;transition:all .2s}
.equip-slot:hover{background:rgba(45,35,15,.7);border-color:rgba(255,152,0,.5)}
.equip-slot.has-equip{border-style:solid}
.equip-slot .es-icon{font-size:14px}
.equip-slot .es-name{font-size:8px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.equip-slot .es-empty{font-size:14px;opacity:.3;margin:0 auto}
.equip-slot.empty-equip-slot{opacity:.4}
.es-discard{position:absolute;top:1px;right:1px;font-size:7px;background:rgba(200,60,60,.6);color:#fff;border:none;border-radius:2px;padding:0 3px;cursor:pointer;opacity:0;transition:opacity .2s;line-height:1.3}
.equip-slot:hover .es-discard{opacity:1}

/* ===== 效果牌弹窗卡片 ===== */
.reveal-card.spell-card{border:2px solid #6644ff;background:radial-gradient(circle,#1a1a3a,#0a0a2a) !important}
.reveal-card.spell-card .rc-icon{color:#aa88ff}
.reveal-card-wrapper.flipped .reveal-card.spell-card{box-shadow:0 0 10px rgba(100,68,255,.5),0 0 20px rgba(100,68,255,.2)}
.card-slot{width:72px;height:88px;border-radius:8px;background:rgba(25,30,50,.6);border:1px dashed rgba(80,120,200,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .2s;cursor:pointer}
.card-slot:hover{background:rgba(35,45,70,.7);border-color:rgba(80,120,200,.4)}
.card-slot.has-card{border-style:solid}
.card-slot .card-chess-icon{font-size:24px;display:flex;align-items:center;justify-content:center}
.card-slot .card-chess-name{font-size:9px;color:#ccc;margin-top:2px;white-space:nowrap}
.card-slot .card-chess-cost{font-size:9px;color:#f0c866;margin-top:1px}
.card-slot .card-chess-traits{font-size:7px;color:#889;margin-top:1px;text-align:center;max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-slot.empty-slot{opacity:.4}
.card-slot.empty-slot::after{content:'空';font-size:12px;color:#445}
.card-slot.card-slot-drag-over{border-color:rgba(240,200,100,.6) !important;background:rgba(50,45,20,.5) !important;box-shadow:0 0 8px rgba(240,200,100,.2)}
.card-slot-sell{position:absolute;top:2px;right:2px;font-size:8px;background:linear-gradient(135deg,rgba(60,45,15,.9),rgba(40,30,10,.9));color:#f0c866;border:1px solid rgba(240,200,100,.45);border-radius:4px;padding:1px 5px;cursor:pointer;opacity:0;transition:all .2s;white-space:nowrap;font-weight:bold;letter-spacing:.3px;line-height:1.3}
.card-slot:hover .card-slot-sell{opacity:1}
.card-slot-sell:hover{background:linear-gradient(135deg,rgba(80,60,20,.95),rgba(60,45,15,.95));border-color:rgba(240,200,100,.8);box-shadow:0 0 8px rgba(240,200,100,.3);transform:scale(1.08)}

/* ===== 底部控制区：卡包+金币+准备 ===== */
#bottom-controls{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:5px 8px;gap:5px;border-left:1px solid rgba(40,50,80,.3);flex-shrink:0;width:320px;overflow:visible}
.controls-row{display:flex;align-items:center;gap:5px;justify-content:space-between}
.controls-row-packs{display:flex;align-items:center;gap:4px;justify-content:center}

/* 金币显示 — 纯信息文本，非按钮 */
.gold-display{display:flex;align-items:center;gap:5px;font-size:18px;color:#f0c866;font-weight:bold;background:none;border:none;padding:2px 4px;border-radius:0;min-width:auto;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.gold-display .gold-amount{font-size:20px;color:#ffd966;letter-spacing:.5px}
.gold-display .gold-interest{font-size:10px;color:#88cc88;margin-left:1px;font-weight:normal;opacity:.85}
.gold-display .gold-interest.interest-max{color:#ffaa44}

/* 卡包按钮 — v21: 加宽防止金币数超框 | v22: 卡包视觉升级 */
.card-pack{width:90px;min-width:90px;height:72px;border-radius:10px;cursor:pointer;position:relative;transition:all .3s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px 4px 6px;overflow:visible}
.card-pack::before{content:'';position:absolute;top:0;left:12%;right:12%;height:10px;border-radius:6px 6px 0 0;background:inherit;filter:brightness(1.3);border:inherit;border-bottom:none;transform:translateY(-6px) scaleX(.85);transition:transform .3s;z-index:0}
.card-pack::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 40%,transparent 80%,rgba(0,0,0,.15) 100%);pointer-events:none;z-index:1}
.card-pack:hover{transform:translateY(-6px) scale(1.08)}
.card-pack:hover::before{transform:translateY(-10px) scaleX(.9) rotate(-2deg)}
.card-pack:active{transform:scale(.95)}
.pack-basic{background:linear-gradient(160deg,#2e4a7a 0%,#1a2e56 40%,#16254a 100%);border:2px solid #5588cc;box-shadow:0 4px 14px rgba(40,80,180,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.pack-basic:hover{box-shadow:0 6px 22px rgba(60,120,220,.5),inset 0 1px 0 rgba(255,255,255,.15),0 0 12px rgba(80,140,240,.3)}
.pack-rare{background:linear-gradient(160deg,#4a2e7a 0%,#2e1a56 40%,#24154a 100%);border:2px solid #9966cc;box-shadow:0 4px 14px rgba(100,50,180,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.pack-rare:hover{box-shadow:0 6px 22px rgba(130,80,220,.5),inset 0 1px 0 rgba(255,255,255,.15),0 0 12px rgba(150,100,255,.3)}
.pack-epic{background:linear-gradient(160deg,#6a4a1a 0%,#4a3010 40%,#3a2508 100%);border:2px solid #e8b830;box-shadow:0 4px 14px rgba(220,170,40,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.pack-epic:hover{box-shadow:0 6px 22px rgba(240,200,60,.5),inset 0 1px 0 rgba(255,255,255,.18),0 0 14px rgba(255,210,80,.4)}
.pack-icon{font-size:22px;margin-bottom:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:2;transition:transform .3s}
.card-pack:hover .pack-icon{transform:scale(1.15) rotate(-5deg);animation:packIconWobble .6s ease-in-out}
@keyframes packIconWobble{0%{transform:scale(1.15) rotate(0)}25%{transform:scale(1.2) rotate(-8deg)}50%{transform:scale(1.15) rotate(5deg)}75%{transform:scale(1.18) rotate(-3deg)}100%{transform:scale(1.15) rotate(-5deg)}}
.pack-name{font-size:9px;color:#dde;font-weight:bold;white-space:nowrap;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pack-price{font-size:10px;color:#f0c866;margin-top:1px;font-weight:bold;white-space:nowrap;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pack-disabled{opacity:.3;cursor:not-allowed;pointer-events:none;filter:grayscale(.6)}
/* 卡包悬停概率预览tooltip */
.pack-tooltip{position:fixed;z-index:9999;background:rgba(10,14,26,.96);border:1.5px solid rgba(240,200,100,.4);border-radius:10px;padding:8px 12px;min-width:150px;pointer-events:none;opacity:0;transition:opacity .25s cubic-bezier(.23,1,.32,1);box-shadow:0 6px 20px rgba(0,0,0,.6)}
.pack-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(240,200,100,.4)}
.pack-tooltip.pt-visible{opacity:1}
.pack-tooltip .pt-title{font-size:10px;color:#f0c866;font-weight:bold;margin-bottom:5px;text-align:center}
.pack-tooltip .pt-row{display:flex;align-items:center;gap:4px;margin:2px 0;font-size:9px}
.pack-tooltip .pt-label{color:#99aabb;min-width:36px}
.pack-tooltip .pt-bar{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;min-width:50px}
.pack-tooltip .pt-fill{height:100%;border-radius:3px;transition:width .3s}
.pack-tooltip .pt-pct{color:#ccd;min-width:30px;text-align:right}
.pt-fill.cost-1-fill{background:linear-gradient(90deg,#888,#aaa)}
.pt-fill.cost-2-fill{background:linear-gradient(90deg,#4CAF50,#66BB6A)}
.pt-fill.cost-3-fill{background:linear-gradient(90deg,#2196F3,#42A5F5)}
.pt-fill.cost-4-fill{background:linear-gradient(90deg,#9C27B0,#AB47BC)}
.pt-fill.cost-5-fill{background:linear-gradient(90deg,#FF9800,#FFB74D)}
.pack-tooltip .pt-extra{font-size:8px;color:#667;margin-top:4px;text-align:center;border-top:1px solid rgba(255,255,255,.06);padding-top:3px}
/* 卡包呼吸光效 */
.pack-basic .pack-glow{position:absolute;inset:-2px;border-radius:inherit;background:transparent;pointer-events:none;z-index:0}
.pack-basic:hover .pack-glow{animation:packGlowBlue 1.5s ease-in-out infinite alternate}
.pack-rare:hover .pack-glow{animation:packGlowPurple 1.5s ease-in-out infinite alternate}
.pack-epic:hover .pack-glow{animation:packGlowGold 1.5s ease-in-out infinite alternate}
@keyframes packGlowBlue{0%{box-shadow:0 0 6px rgba(80,140,240,.2)}100%{box-shadow:0 0 16px rgba(80,140,240,.45)}}
@keyframes packGlowPurple{0%{box-shadow:0 0 6px rgba(150,100,255,.2)}100%{box-shadow:0 0 16px rgba(150,100,255,.45)}}
@keyframes packGlowGold{0%{box-shadow:0 0 8px rgba(240,200,60,.25)}100%{box-shadow:0 0 20px rgba(240,200,60,.55)}}

/* 准备完毕按钮 */
.ready-btn{background:linear-gradient(135deg,#2a6a2a,#1a4a1a);color:#88ff88;border:1.5px solid #4a9a4a;padding:5px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:bold;transition:all .2s;white-space:nowrap;width:100%;text-align:center;box-sizing:border-box}
.ready-btn:hover{background:linear-gradient(135deg,#3a8a3a,#2a6a2a);transform:scale(1.05);box-shadow:0 0 12px rgba(80,200,80,.4)}
.ready-btn:active{transform:scale(.95)}
.ready-btn.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

/* v17: 购买经验按钮 — v42: 扁平横向 */
.buy-exp-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a3f6a,#1a2a50);border:1.5px solid #5a7aaa;border-radius:8px;padding:4px 10px;cursor:pointer;transition:all .2s;gap:6px;box-shadow:0 1px 4px rgba(30,60,120,.2);white-space:nowrap}
.buy-exp-btn:hover{background:linear-gradient(135deg,#3a5f8a,#2a4a6a);transform:translateY(-1px);box-shadow:0 3px 10px rgba(40,80,150,.4);border-color:#6a9acc}
.buy-exp-btn:active{transform:scale(.97)}
.buy-exp-btn.btn-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.beb-lv{font-size:14px;font-weight:bold;color:#8cf;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.beb-info{font-size:11px;color:#99aabb;font-weight:500}
.beb-cost{font-size:11px;color:#f0c866;font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* 上场数量指示 */
.unit-count-info{font-size:11px;color:#aabbdd;background:#1a1f35;padding:2px 8px;border-radius:8px;border:1px solid #2a3f5a;margin-left:auto}
/* v80: 战力显示 */
.combat-power{font-size:11px;color:#889;padding:2px 8px;border-radius:8px;background:#1a1f35;border:1px solid #2a3f5a;font-weight:bold;transition:all .3s}
.power-green{text-shadow:0 0 6px rgba(68,204,68,.4)}
.power-blue{text-shadow:0 0 8px rgba(68,136,255,.4);animation:powerGlow 2s ease-in-out infinite alternate}
.power-purple{text-shadow:0 0 10px rgba(187,119,255,.5);animation:powerGlow 1.5s ease-in-out infinite alternate}
.power-gold{text-shadow:0 0 12px rgba(240,200,100,.5);animation:powerPulse 1.2s ease-in-out infinite}
.power-red{text-shadow:0 0 14px rgba(255,68,68,.6);animation:powerPulse 1s ease-in-out infinite}
@keyframes powerGlow{0%{opacity:.85}100%{opacity:1}}
@keyframes powerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ===== 羁绊面板 v104: 固定框+滚动条 ===== */
#synergy-panel{position:absolute;left:4px;top:4px;width:108px;display:flex;flex-direction:column;gap:0;z-index:80;max-height:50vh;background:rgba(10,12,28,.92);border:1px solid rgba(60,50,120,.4);border-radius:8px;padding:0;overflow:hidden}
#synergy-panel::before{content:'🔗 羁绊';display:block;font-size:9px;color:#99a;font-weight:bold;padding:4px 6px 2px;border-bottom:1px solid rgba(60,50,120,.3);flex-shrink:0}
#synergy-panel .synergy-scroll{flex:1;overflow-y:auto;padding:2px 3px;scrollbar-width:thin;scrollbar-color:rgba(100,80,200,.4) transparent}
#synergy-panel .synergy-scroll::-webkit-scrollbar{width:4px}
#synergy-panel .synergy-scroll::-webkit-scrollbar-track{background:transparent}
#synergy-panel .synergy-scroll::-webkit-scrollbar-thumb{background:rgba(100,80,200,.4);border-radius:2px}
.synergy-item{display:flex;align-items:center;gap:3px;padding:3px 4px;border-radius:4px;font-size:9px;background:rgba(15,18,37,.9);border:1px solid rgba(40,50,80,.4);transition:all .2s;margin-bottom:1px}
.synergy-item.active{border-color:rgba(240,200,102,.5);background:rgba(30,28,15,.9);box-shadow:0 0 6px rgba(240,200,100,.15)}
.synergy-icon{font-size:12px}
.synergy-name{color:#99a;font-size:9px}
.synergy-count{color:#f0c866;margin-left:auto;font-weight:bold;font-size:9px}
.synergy-desc{display:none;font-size:8px;color:#778;margin-top:1px;width:100%}
.synergy-item:hover .synergy-desc{display:block}

/* ===== v37: 羁绊详情弹窗 ===== */
.synergy-detail-popup{position:absolute;left:120px;top:20px;width:240px;max-height:400px;overflow-y:auto;z-index:500;background:linear-gradient(135deg,rgba(15,18,37,.98),rgba(20,22,42,.98));border:1.5px solid rgba(240,200,102,.4);border-radius:10px;box-shadow:0 0 24px rgba(240,200,100,.15),0 8px 24px rgba(0,0,0,.6);padding:12px;animation:sdPopIn .25s ease-out}
@keyframes sdPopIn{0%{opacity:0;transform:translateX(-10px) scale(.95)}100%{opacity:1;transform:translateX(0) scale(1)}}
.sd-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sd-icon{font-size:20px}
.sd-name{font-size:14px;font-weight:900;color:#f0c866;text-shadow:0 0 8px rgba(240,200,100,.3)}
.sd-count-badge{margin-left:auto;background:rgba(240,200,100,.15);color:#f0c866;font-size:11px;font-weight:bold;padding:2px 8px;border-radius:10px;border:1px solid rgba(240,200,100,.3)}
.sd-close{background:none;border:none;color:#666;font-size:14px;cursor:pointer;padding:2px 4px;margin-left:4px;border-radius:4px}
.sd-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.sd-desc{font-size:11px;color:#99aabb;line-height:1.5;margin-bottom:10px;padding:6px 8px;background:rgba(255,255,255,.03);border-radius:6px;border-left:2px solid rgba(240,200,100,.3)}
.sd-section-title{font-size:10px;color:#778;font-weight:bold;margin:8px 0 4px;letter-spacing:1px}
.sd-tiers{display:flex;flex-direction:column;gap:3px}
.sd-tier{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px;font-size:10px;background:rgba(255,255,255,.03);border:1px solid rgba(60,70,100,.3);color:#778;transition:all .2s}
.sd-tier.sd-tier-active{background:rgba(240,200,100,.08);border-color:rgba(240,200,100,.35);color:#f0c866}
.sd-tier-count{font-weight:bold;min-width:30px;color:inherit}
.sd-tier-desc{flex:1;color:inherit}
.sd-tier-check{font-size:10px}
.sd-units{display:flex;flex-direction:column;gap:2px}
.sd-unit{display:flex;align-items:center;gap:5px;padding:3px 6px;border-radius:4px;font-size:10px;background:rgba(255,255,255,.02)}
.sd-unit:hover{background:rgba(255,255,255,.06)}
.sd-unit-avatar{flex-shrink:0}
.sd-unit-name{color:#ccd;font-weight:bold}
.sd-unit-star{font-size:8px}
.sd-unit-pos{margin-left:auto;font-size:9px;color:#778;background:rgba(255,255,255,.05);padding:1px 6px;border-radius:8px}
.sd-unit-avail{opacity:.6}
.sd-unit-cost{margin-left:auto;font-size:9px;color:#f0c866}
.sd-empty{font-size:10px;color:#556;font-style:italic;padding:4px}

/* ===== v67: 安全箱UI面板（棋盘右侧absolute定位） ===== */
.safebox-panel{position:absolute;right:-130px;top:50%;transform:translateY(-50%);width:120px;border-radius:8px;font-size:9px;background:rgba(10,20,40,.95);border:1px solid rgba(80,200,255,.3);padding:6px 8px;box-sizing:border-box;z-index:90;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.safebox-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.safebox-panel-title{font-size:9px;color:#66ccff;font-weight:bold}
.safebox-panel-empty{font-size:8px;color:#556;font-style:italic;text-align:center;padding:6px 4px}
.safebox-slots-row{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.safebox-panel-unit{display:flex;align-items:center;gap:4px;padding:4px 5px;border-radius:5px;background:rgba(80,200,255,.08);border:1px solid rgba(80,200,255,.2);cursor:pointer;transition:all .2s;min-width:0}
.safebox-panel-unit:hover{border-color:rgba(80,200,255,.5);background:rgba(80,200,255,.15)}
.safebox-panel-avatar{width:24px;height:24px;border-radius:4px;border:1.5px solid rgba(80,200,255,.5);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.safebox-panel-avatar img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.safebox-panel-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.safebox-panel-name{color:#88ddff;font-size:9px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.safebox-panel-star{font-size:7px;color:#f0c866}
.safebox-panel-lock{font-size:10px;flex-shrink:0;animation:safeboxGlow 2s ease-in-out infinite}
/* v65: 安全箱自动选择滑动开关 */
.safebox-toggle-wrap{display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.safebox-toggle-input{display:none}
.safebox-toggle-slider{position:relative;width:28px;height:14px;background:rgba(60,70,100,.8);border-radius:7px;border:1px solid rgba(80,200,255,.2);transition:all .3s;flex-shrink:0}
.safebox-toggle-slider::after{content:'';position:absolute;top:1px;left:1px;width:10px;height:10px;background:#667;border-radius:50%;transition:all .3s}
.safebox-toggle-input:checked+.safebox-toggle-slider{background:rgba(20,80,140,.9);border-color:rgba(80,200,255,.5)}
.safebox-toggle-input:checked+.safebox-toggle-slider::after{left:15px;background:#66ccff;box-shadow:0 0 4px rgba(80,200,255,.5)}
.safebox-toggle-label{font-size:8px;color:#889;white-space:nowrap}
/* v69: 安全箱战斗模式样式 */
.safebox-panel.safebox-battle-mode{opacity:.85;border-color:rgba(255,160,40,.4);background:rgba(10,20,40,.9)}
.safebox-panel.safebox-battle-mode .safebox-panel-title{color:#ffaa44}

/* v71: 安全箱拖拽放入高亮效果 */
.safebox-panel.safebox-drag-over{border-color:rgba(80,200,255,.8);background:rgba(20,40,80,.95);box-shadow:0 0 16px rgba(80,200,255,.4),0 2px 12px rgba(0,0,0,.4);transform:translateY(-50%) scale(1.03)}
.safebox-panel.safebox-drag-over .safebox-panel-empty{color:#66ccff;border:1px dashed rgba(80,200,255,.5);background:rgba(80,200,255,.1);border-radius:4px}
/* v71: 安全箱标题热区tooltip */
.safebox-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;width:180px;background:linear-gradient(145deg,#0e1b30,#162a4a);border:1px solid rgba(80,200,255,.5);border-radius:8px;padding:8px 10px;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 12px rgba(80,200,255,.15);animation:safeboxTipIn .2s ease}
.safebox-tooltip::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid rgba(80,200,255,.5)}
@keyframes safeboxTipIn{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.safebox-tip-title{font-size:10px;font-weight:bold;color:#66ccff;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(80,200,255,.2)}
.safebox-tip-item{font-size:8px;color:#b0c8d8;line-height:1.5;margin-bottom:3px}
.safebox-tip-item strong{color:#88ddff}
.safebox-tip-item:last-child{margin-bottom:0}
.safebox-battle-tag{font-size:8px;color:#ffcc66;background:rgba(255,160,40,.15);border:1px solid rgba(255,160,40,.3);border-radius:3px;padding:1px 5px;animation:battleTagPulse 2s ease-in-out infinite}
@keyframes battleTagPulse{0%,100%{opacity:.7}50%{opacity:1}}
.safebox-unit-battle{opacity:.9;cursor:default}
.safebox-unit-battle:hover{border-color:rgba(80,200,255,.2);background:rgba(80,200,255,.08)}
/* v69: 安全箱教程弹窗 */
.safebox-tutorial-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:flex;align-items:center;justify-content:center;animation:safeboxTutFadeIn .3s ease}
@keyframes safeboxTutFadeIn{from{opacity:0}to{opacity:1}}
.safebox-tutorial-popup{background:linear-gradient(145deg,#0e1b30,#162a4a);border:2px solid rgba(80,200,255,.4);border-radius:16px;padding:20px 24px;max-width:380px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 30px rgba(80,200,255,.15);animation:safeboxTutPopIn .4s cubic-bezier(.175,.885,.32,1.275)}
@keyframes safeboxTutPopIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.safebox-tut-header{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(80,200,255,.15)}
.safebox-tut-icon{font-size:28px}
.safebox-tut-title{font-size:16px;font-weight:bold;color:#66ccff;text-shadow:0 0 8px rgba(80,200,255,.3)}
.safebox-tut-body{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.safebox-tut-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#c0d8e8;line-height:1.5}
.safebox-tut-item strong{color:#88ddff}
.safebox-tut-emoji{font-size:16px;flex-shrink:0;margin-top:1px}
.safebox-tut-btn{display:block;width:100%;padding:10px;border:none;border-radius:10px;background:linear-gradient(135deg,#1a4a7a,#0d3060);color:#88ddff;font-size:14px;font-weight:bold;cursor:pointer;text-align:center;transition:all .2s;border:1px solid rgba(80,200,255,.3)}
.safebox-tut-btn:hover{background:linear-gradient(135deg,#2a5a8a,#1a4070);box-shadow:0 0 12px rgba(80,200,255,.3)}

/* ===== 海克斯效果小窗 ===== */
#hex-augments-display{position:absolute;left:4px;bottom:6px;display:flex;flex-direction:column;gap:3px;z-index:80;max-width:130px}
#hex-augments-display .hex-aug-title{font-size:9px;color:#aa88ff;font-weight:bold;padding:3px 6px;background:rgba(15,12,30,.9);border:1px solid rgba(120,80,200,.3);border-radius:4px;text-align:center;white-space:nowrap;align-self:center}
#hex-augments-display .hex-aug-item{display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:5px;font-size:9px;background:rgba(15,12,30,.85);border:1px solid rgba(120,80,200,.25);transition:all .2s;cursor:pointer}
#hex-augments-display .hex-aug-item:hover{border-color:rgba(170,100,255,.5);background:rgba(25,18,50,.9);transform:translateX(2px)}
#hex-augments-display .hex-aug-icon{font-size:14px;min-width:18px;text-align:center}
.hex-aug-icon-img{min-width:16px;border-radius:4px;object-fit:contain;display:block;flex-shrink:0}
#hex-augments-display .hex-aug-name{color:#cc99ff;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
#hex-augments-display .hex-aug-desc{display:block;font-size:8px;color:#99aabb;line-height:1.3;margin-top:2px;width:100%}
#hex-augments-display .hex-aug-item{flex-wrap:wrap}
#hex-augments-display .hex-aug-item.collapsed .hex-aug-desc{display:none}
#hex-augments-display .hex-aug-item.collapsed{flex-wrap:nowrap}
#hex-augments-display .hex-aug-item.tier-silver{border-color:rgba(150,150,180,.3)}
#hex-augments-display .hex-aug-item.tier-gold{border-color:rgba(240,200,100,.3)}
#hex-augments-display .hex-aug-item.tier-gold .hex-aug-name{color:#f0c866}
#hex-augments-display .hex-aug-item.tier-prismatic{border-color:rgba(170,100,255,.45);box-shadow:0 0 8px rgba(170,100,255,.12);animation:prismAugGlow 3s ease-in-out infinite alternate}
#hex-augments-display .hex-aug-item.tier-prismatic .hex-aug-name{color:#dd99ff;text-shadow:0 0 4px rgba(170,100,255,.3)}
@keyframes prismAugGlow{0%{border-color:rgba(170,100,255,.4);box-shadow:0 0 6px rgba(170,100,255,.1)}50%{border-color:rgba(100,140,255,.4);box-shadow:0 0 8px rgba(100,140,255,.15)}100%{border-color:rgba(255,100,180,.35);box-shadow:0 0 6px rgba(255,100,180,.1)}}
/* 海克斯图标通用样式 */
.hex-avatar{border-radius:6px;object-fit:contain;display:block}
.hex-avatar-inline{border-radius:3px;object-fit:contain;vertical-align:middle;margin-right:2px}

/* v65: 英雄强化海克斯选择卡片 */
.hex-card.hero-augment-card{background:linear-gradient(135deg,#2a1808,#3a2510,#2a1208);border:2px solid #e8a030;box-shadow:0 4px 20px rgba(232,160,48,.3),inset 0 0 20px rgba(232,160,48,.05);position:relative;overflow:hidden}
.hex-card.hero-augment-card::before{content:'';position:absolute;inset:-2px;border-radius:16px;background:conic-gradient(from 0deg,#e8a030,#ff6644,#e8a030,#ffcc44,#e8a030);opacity:.2;z-index:-1;animation:heroAugRotate 5s linear infinite;filter:blur(4px)}
.hex-card.hero-augment-card:hover{border-color:#ffcc44;box-shadow:0 8px 32px rgba(232,160,48,.5),0 0 40px rgba(255,120,60,.2);transform:translateY(-10px) scale(1.06)}
@keyframes heroAugRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.hex-hero-badge{font-size:10px;padding:2px 10px;border-radius:10px;background:linear-gradient(135deg,rgba(232,160,48,.25),rgba(255,100,60,.2));color:#ffcc66;font-weight:bold;letter-spacing:1px;border:1px solid rgba(232,160,48,.3)}
.hex-hero-avatar{display:block;margin:4px auto;border-radius:50%;border:2px solid gold;box-shadow:0 0 12px rgba(232,160,48,.4)}
.hex-card.hero-augment-card .hex-name{color:#ffdd88;text-shadow:0 0 8px rgba(232,160,48,.4)}
.hex-card.hero-augment-card .hex-desc{color:#ccaa77}

/* v65: 左侧面板英雄强化显示 */
#hex-augments-display .hex-aug-item.hero-augment-item{border-color:rgba(232,160,48,.4);background:rgba(40,25,10,.9)}
#hex-augments-display .hex-aug-item.hero-augment-item .hex-aug-name{color:#ffcc66}
#hex-augments-display .hex-aug-item.hero-augment-item:hover{border-color:rgba(255,180,60,.6);background:rgba(50,30,15,.95)}
.hex-aug-hero-badge{font-size:12px;min-width:16px;text-align:center}

/* ===== 卡包开启弹窗 ===== */
#card-reveal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.94);z-index:1000;display:none;align-items:center;justify-content:center;flex-direction:column;perspective:1200px;pointer-events:none}
#card-reveal-overlay.show{display:flex;pointer-events:auto}
#card-reveal-content{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:600px}
/* 翻牌容器 — 3D翻转 */
.reveal-card-wrapper{width:100px;height:140px;perspective:800px;cursor:pointer}
.reveal-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.23,1,.32,1)}
.reveal-card-wrapper.flipped .reveal-card-inner{transform:rotateY(180deg)}
/* 卡牌正面（翻转后可见） */
.reveal-card{width:100%;height:100%;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;left:0;backface-visibility:hidden;transform:rotateY(180deg);overflow:hidden}
.reveal-card:hover{filter:brightness(1.1)}
.reveal-card .rc-icon{font-size:32px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.reveal-card .rc-name{font-size:12px;color:#fff;font-weight:bold;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.reveal-card .rc-traits{font-size:8px;color:#99a;margin-top:2px;text-align:center;line-height:1.3}
.reveal-card .rc-cost{position:absolute;top:4px;left:6px;font-size:10px;color:#f0c866;font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.reveal-card .rc-type{position:absolute;bottom:4px;font-size:8px;color:#8cf;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.4)}
/* 卡牌背面（翻转前可见） */
.reveal-card-back{width:100%;height:100%;border-radius:12px;position:absolute;top:0;left:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reveal-card-back-basic{background:linear-gradient(160deg,#1a2a4a,#0d1830);border:2px solid #3a5a8a;box-shadow:0 2px 10px rgba(40,80,160,.3)}
.reveal-card-back-rare{background:linear-gradient(160deg,#2a1a4a,#150a30);border:2px solid #6a4a9a;box-shadow:0 2px 10px rgba(100,60,160,.3)}
.reveal-card-back-epic{background:linear-gradient(160deg,#3a2a0a,#2a1a00);border:2px solid #c89020;box-shadow:0 2px 10px rgba(200,150,30,.3)}
.reveal-card-back .card-back-pattern{width:60%;height:70%;border-radius:8px;border:2px solid rgba(255,255,255,.12);background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.03) 4px,rgba(255,255,255,.03) 8px);display:flex;align-items:center;justify-content:center;font-size:28px;opacity:.7;filter:drop-shadow(0 0 6px rgba(255,255,255,.15))}
/* 卡牌背面悬停发光 */
.reveal-card-wrapper:not(.flipped):hover .reveal-card-back{filter:brightness(1.25)}
.reveal-card-wrapper:not(.flipped){cursor:pointer}
.reveal-card-wrapper:not(.flipped):hover{transform:translateY(-4px)}
/* 翻转时的光效 — v79增强：更炸裂的视觉反馈 */
.reveal-card-wrapper.flipping-1 .reveal-card-inner{filter:brightness(1.3)}
.reveal-card-wrapper.flipping-2 .reveal-card-inner{filter:brightness(1.5) drop-shadow(0 0 8px rgba(76,175,80,.6))}
.reveal-card-wrapper.flipping-3{animation:flipGlow3 .4s ease-out}
.reveal-card-wrapper.flipping-3 .reveal-card-inner{filter:brightness(1.8) drop-shadow(0 0 14px rgba(33,150,243,.8))}
.reveal-card-wrapper.flipping-4{animation:flipGlow4 .5s ease-out}
.reveal-card-wrapper.flipping-4 .reveal-card-inner{filter:brightness(2) drop-shadow(0 0 20px rgba(156,39,176,.9))}
.reveal-card-wrapper.flipping-5{animation:flipGlow5 .7s ease-out}
.reveal-card-wrapper.flipping-5 .reveal-card-inner{filter:brightness(2.5) drop-shadow(0 0 30px rgba(255,180,40,1))}
@keyframes flipGlow3{0%{box-shadow:none}30%{box-shadow:0 0 15px rgba(33,150,243,.5)}60%{box-shadow:0 0 25px rgba(33,150,243,.3)}100%{box-shadow:none}}
@keyframes flipGlow4{0%{box-shadow:none}25%{box-shadow:0 0 25px rgba(156,39,176,.7),0 0 50px rgba(156,39,176,.3)}60%{box-shadow:0 0 35px rgba(156,39,176,.4)}100%{box-shadow:none}}
@keyframes flipGlow5{0%{box-shadow:none}15%{box-shadow:0 0 40px rgba(255,200,60,.8),0 0 80px rgba(255,150,0,.4),0 0 120px rgba(255,100,0,.15)}40%{box-shadow:0 0 50px rgba(255,200,60,.6),0 0 100px rgba(255,150,0,.3)}100%{box-shadow:none}}
/* 翻转完成后的卡牌边框光效 */
.reveal-card-wrapper.flipped .reveal-card.cost-1{box-shadow:0 0 6px rgba(136,136,136,.3)}
.reveal-card-wrapper.flipped .reveal-card.cost-2{box-shadow:0 0 8px rgba(76,175,80,.4),0 0 16px rgba(76,175,80,.15)}
.reveal-card-wrapper.flipped .reveal-card.cost-3{box-shadow:0 0 10px rgba(33,150,243,.5),0 0 20px rgba(33,150,243,.2)}
.reveal-card-wrapper.flipped .reveal-card.cost-4{box-shadow:0 0 14px rgba(156,39,176,.6),0 0 28px rgba(156,39,176,.2);animation:card4Glow 2s ease-in-out infinite alternate}
.reveal-card-wrapper.flipped .reveal-card.cost-5{box-shadow:0 0 22px rgba(255,180,40,.8),0 0 44px rgba(255,150,0,.3),0 0 66px rgba(255,100,0,.1);animation:card5Glow 1.5s ease-in-out infinite alternate}
@keyframes card4Glow{0%{box-shadow:0 0 14px rgba(156,39,176,.5),0 0 28px rgba(156,39,176,.15)}100%{box-shadow:0 0 20px rgba(156,39,176,.7),0 0 36px rgba(156,39,176,.25)}}
@keyframes card5Glow{0%{box-shadow:0 0 18px rgba(255,180,40,.6),0 0 36px rgba(255,150,0,.2)}100%{box-shadow:0 0 26px rgba(255,200,60,.8),0 0 50px rgba(255,150,0,.3)}}
/* 卡牌已被选取后的样式 */
.reveal-card-wrapper.card-taken{opacity:.25;pointer-events:none;transform:scale(.9);filter:grayscale(1)}
.reveal-card-wrapper.card-taken .reveal-card-inner{filter:none !important}
/* 5费全屏闪光 — v79增强 */
.legendary-flash{position:fixed;inset:0;z-index:1001;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,200,60,.5) 0%,rgba(255,150,0,.2) 35%,rgba(255,100,0,.05) 55%,transparent 70%);animation:legendFlash .55s ease-out forwards;will-change:opacity,transform}
@keyframes legendFlash{0%{opacity:0;transform:scale(.8)}15%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
/* v79: 5费金色扩散光环 */
.legendary-ring{position:fixed;inset:0;z-index:1001;pointer-events:none;background:radial-gradient(circle at center,transparent 20%,rgba(255,200,60,.15) 40%,rgba(255,150,0,.08) 60%,transparent 80%);animation:legendRing .7s ease-out forwards;will-change:opacity,transform}
@keyframes legendRing{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
/* v79: 3费蓝色闪光 */
.blue-flash{position:fixed;inset:0;z-index:1001;pointer-events:none;background:radial-gradient(ellipse at center,rgba(33,150,243,.2) 0%,rgba(33,150,243,.05) 40%,transparent 65%);animation:blueFlash .35s ease-out forwards;will-change:opacity}
@keyframes blueFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
/* v79: 4费紫色闪光 */
.purple-flash{position:fixed;inset:0;z-index:1001;pointer-events:none;background:radial-gradient(ellipse at center,rgba(156,39,176,.3) 0%,rgba(156,39,176,.08) 40%,transparent 65%);animation:purpleFlash .4s ease-out forwards;will-change:opacity}
@keyframes purpleFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
/* v79: 5费卡牌弹出放大 */
.reveal-card-wrapper.legendary-pop{animation:legendPop .55s cubic-bezier(.34,1.56,.64,1);z-index:10}
@keyframes legendPop{0%{transform:scale(1)}25%{transform:scale(1.25) translateY(-8px)}50%{transform:scale(1.15) translateY(-4px)}100%{transform:scale(1)}}
/* v79: 强震动（5费用） */
.screen-shake-strong{animation:screenShakeStrong .35s ease-out}
@keyframes screenShakeStrong{0%{transform:translate(0)}8%{transform:translate(-5px,4px)}16%{transform:translate(6px,-3px)}24%{transform:translate(-4px,5px)}32%{transform:translate(5px,-2px)}40%{transform:translate(-3px,4px)}50%{transform:translate(4px,-1px)}60%{transform:translate(-2px,3px)}75%{transform:translate(2px,-2px)}100%{transform:translate(0)}}
/* v79→v106: 超级价值包背景——金色辉光（加强可见度） */
#card-reveal-overlay.super-pack-bg{background:radial-gradient(ellipse at center,rgba(255,200,60,.12) 0%,rgba(60,40,0,.06) 30%,rgba(0,0,0,.94) 60%)}
/* v79→v106: 高价值包背景——紫色辉光（加强可见度） */
#card-reveal-overlay.high-pack-bg{background:radial-gradient(ellipse at center,rgba(156,39,176,.10) 0%,rgba(40,0,60,.06) 30%,rgba(0,0,0,.94) 60%)}
/* v79: 超级/高价值标题特效 */
.reveal-title-super{font-size:24px !important;color:#ffcc00 !important;text-shadow:0 0 30px rgba(255,200,60,.6),0 0 60px rgba(255,150,0,.3) !important;animation:superTitle 1.5s ease-in-out infinite alternate}
@keyframes superTitle{0%{text-shadow:0 0 20px rgba(255,200,60,.5),0 0 40px rgba(255,150,0,.2);transform:scale(1)}100%{text-shadow:0 0 40px rgba(255,200,60,.8),0 0 80px rgba(255,150,0,.4);transform:scale(1.05)}}
.reveal-title-high{font-size:22px !important;color:#cc88ff !important;text-shadow:0 0 20px rgba(156,39,176,.5),0 0 40px rgba(120,30,150,.2) !important}
/* 4费屏幕震动 */
@keyframes screenShake{0%{transform:translate(0)}10%{transform:translate(-3px,2px)}20%{transform:translate(4px,-2px)}30%{transform:translate(-2px,3px)}40%{transform:translate(3px,-1px)}50%{transform:translate(-1px,2px)}60%{transform:translate(2px,0)}70%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}100%{transform:translate(0)}}
.screen-shake{animation:screenShake .4s ease-out}
#reveal-title{font-size:20px;color:#f0c866;margin-bottom:14px;text-shadow:0 0 20px rgba(240,200,100,.3)}
#reveal-hint{font-size:11px;color:#556;margin-top:12px}
/* v32: 开包弹窗按钮行 */
.reveal-btn-row{display:flex;gap:10px;justify-content:center;margin-top:14px}
/* 一键拿走按钮 */
.reveal-takeall-btn{padding:8px 28px;background:linear-gradient(135deg,#1a3a1a,#0a2a0a);color:#4CAF50;border:1.5px solid rgba(76,175,80,.4);border-radius:10px;font-size:13px;font-weight:bold;cursor:pointer;transition:all .25s;letter-spacing:1px}
.reveal-takeall-btn:hover{background:linear-gradient(135deg,#2a4a2a,#1a3a1a);border-color:rgba(76,175,80,.7);box-shadow:0 0 16px rgba(76,175,80,.25);transform:translateY(-1px)}
.reveal-takeall-btn:active{transform:scale(.97)}
/* 售卖剩余卡牌按钮 */
.reveal-abandon-btn{padding:8px 28px;background:linear-gradient(135deg,#3a2a10,#2a1a08);color:#f0c866;border:1.5px solid rgba(240,200,100,.4);border-radius:10px;font-size:13px;font-weight:bold;cursor:pointer;transition:all .25s;letter-spacing:1px}
.reveal-abandon-btn:hover{background:linear-gradient(135deg,#5a3a18,#3a2a10);border-color:rgba(240,200,100,.7);box-shadow:0 0 16px rgba(240,200,100,.25);transform:translateY(-1px)}
.reveal-abandon-btn:active{transform:scale(.97)}

/* ===== 回血道具卡片 ===== */
.reveal-card.item-card{border:2px solid #4CAF50;background:radial-gradient(circle,#1a3a1a,#0a2a0a) !important}
.reveal-card.item-card .rc-icon{color:#4CAF50}
.reveal-card-wrapper.flipped .reveal-card.item-card{box-shadow:0 0 10px rgba(76,175,80,.5),0 0 20px rgba(76,175,80,.2)}

/* ===== 伤害飘字 ===== */
.dmg-float{position:absolute;font-weight:bold;color:#ff4444;text-shadow:0 0 4px #000;pointer-events:none;z-index:200;animation:dmgUp 1s ease-out forwards;font-size:13px}
.dmg-float.heal{color:#44ff44}
.dmg-float.skill{color:#44aaff;font-size:11px}
.dmg-float.crit{font-size:16px;color:#ff8800}
/* 升星提示 */
.star-up-toast{position:fixed;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:bold;color:#f0c866;background:linear-gradient(135deg,rgba(50,40,10,.95),rgba(30,25,5,.95));border:2px solid rgba(240,200,100,.6);box-shadow:0 0 16px rgba(240,200,100,.4),0 4px 12px rgba(0,0,0,.6);z-index:500;pointer-events:none;white-space:nowrap;animation:starUpPop 2s ease-out forwards}
@keyframes starUpPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-60%)}100%{opacity:0;transform:translate(-50%,-80%)}}
@keyframes dmgUp{0%{opacity:1;transform:translateY(0) scale(1)}60%{opacity:1;transform:translateY(-20px) scale(1)}100%{opacity:0;transform:translateY(-40px) scale(.8)}}

/* ===== 战斗动画 ===== */
.chessman.atk-anim{animation:atkBounce .3s ease}
@keyframes atkBounce{50%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}
.chessman.bench-atk{animation:benchBounce .3s ease}
@keyframes benchBounce{50%{transform:scale(1.15)}100%{transform:scale(1)}}
/* v20: 攻击前冲动画 — 棋子攻击时往目标方向怼一下（增强版：距离+缩放更大） */
.chessman.atk-lunge{animation:atkLunge .3s ease-out}
@keyframes atkLunge{
  0%{transform:translate(-50%,-50%) translate(0,0) scale(1)}
  30%{transform:translate(-50%,-50%) translate(var(--lunge-x,10px),var(--lunge-y,0px)) scale(1.18)}
  50%{transform:translate(-50%,-50%) translate(var(--lunge-x,10px),var(--lunge-y,0px)) scale(1.12)}
  100%{transform:translate(-50%,-50%) translate(0,0) scale(1)}
}
/* v20: 受击颤抖动画 — 被攻击时棋子大幅快速抖动（增强版：幅度翻倍） */
.chessman.hit-shake{animation:hitShake .35s ease-out}
@keyframes hitShake{
  0%{transform:translate(-50%,-50%)}
  12%{transform:translate(calc(-50% + 8px),calc(-50% - 3px))}
  24%{transform:translate(calc(-50% - 10px),calc(-50% + 4px))}
  36%{transform:translate(calc(-50% + 7px),calc(-50% + 3px))}
  48%{transform:translate(calc(-50% - 6px),calc(-50% - 5px))}
  60%{transform:translate(calc(-50% + 5px),calc(-50% + 2px))}
  75%{transform:translate(calc(-50% - 3px),calc(-50% - 1px))}
  100%{transform:translate(-50%,-50%)}
}
/* v20: 受击红色闪烁 — 被击中时短暂变红 */
.chessman.hit-flash{filter:brightness(1.5) saturate(2);box-shadow:0 0 12px rgba(255,60,30,.7),0 0 0 3px rgba(255,40,20,.5) !important}
.chessman.casting-anim{box-shadow:0 0 14px rgba(100,150,255,.7),0 0 0 3px rgba(100,150,255,.4) !important}
.chessman.stunned{filter:brightness(.5) saturate(.3)}
.chessman.dead-anim{opacity:0;transition:opacity .5s;pointer-events:none}

/* ===== v45: 死亡动画 — 骷髅浮起+渐隐 ===== */
.chessman.death-shatter{animation:deathFade 1.2s ease-out forwards;pointer-events:none;z-index:200}
@keyframes deathFade{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;filter:brightness(1.8) saturate(0)}
  20%{transform:translate(-50%,-50%) scale(1.05);opacity:1;filter:brightness(1.5) saturate(0);box-shadow:0 0 20px rgba(255,0,0,.6)}
  100%{transform:translate(-50%,-50%) scale(.85);opacity:0;filter:brightness(.4) saturate(0) blur(2px)}
}
/* 死亡骷髅浮起特效 */
.death-skull{position:absolute;z-index:300;pointer-events:none;font-size:22px;animation:skullFloat 1.4s ease-out forwards;text-shadow:0 0 8px rgba(255,60,60,.7),0 0 16px rgba(200,0,0,.4);filter:drop-shadow(0 0 4px rgba(255,0,0,.5))}
.death-skull.skull-epic{font-size:28px;text-shadow:0 0 12px rgba(255,40,40,.9),0 0 24px rgba(200,0,0,.6);filter:drop-shadow(0 0 8px rgba(255,0,0,.7))}
@keyframes skullFloat{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  15%{opacity:1;transform:translateY(-4px) scale(1.1)}
  30%{opacity:1;transform:translateY(-10px) scale(1)}
  100%{opacity:0;transform:translateY(-35px) scale(.7)}
}

/* ===== v35: 屏幕死亡闪红 ===== */
.death-flash-overlay{position:absolute;inset:0;pointer-events:none;z-index:299;opacity:0;transition:opacity .15s}
.death-flash-overlay.flash-active{animation:deathFlashAnim .8s ease-out forwards}
.death-flash-overlay.flash-intense{animation:deathFlashIntense .8s ease-out forwards}
@keyframes deathFlashAnim{
  0%{opacity:0;box-shadow:inset 0 0 60px rgba(255,0,0,.4)}
  20%{opacity:1;box-shadow:inset 0 0 80px rgba(255,0,0,.35)}
  100%{opacity:0;box-shadow:inset 0 0 0 rgba(255,0,0,0)}
}
@keyframes deathFlashIntense{
  0%{opacity:0;box-shadow:inset 0 0 100px rgba(255,0,0,.6);background:rgba(255,0,0,.08)}
  15%{opacity:1;box-shadow:inset 0 0 120px rgba(255,0,0,.5);background:rgba(255,0,0,.06)}
  100%{opacity:0;box-shadow:inset 0 0 0 rgba(255,0,0,0);background:transparent}
}

/* ===== v35: 屏幕震动 ===== */
#game-wrapper.screen-death-shake{animation:screenShake .5s ease-out}
@keyframes screenShake{
  0%{transform:translate(0,0)}
  10%{transform:translate(-4px,-2px)}
  20%{transform:translate(5px,3px)}
  30%{transform:translate(-3px,2px)}
  40%{transform:translate(4px,-3px)}
  50%{transform:translate(-2px,1px)}
  70%{transform:translate(2px,-1px)}
  100%{transform:translate(0,0)}
}

/* ===== v35: 遗言墓志铭浮字 ===== */
.death-epitaph{transform:translate(-50%,-100%);padding:5px 14px;border-radius:8px;font-size:11px;font-weight:bold;color:#ffaaaa;background:linear-gradient(135deg,rgba(40,10,15,.95),rgba(20,5,10,.95));border:1.5px solid rgba(255,68,85,.5);box-shadow:0 0 16px rgba(255,0,0,.3),0 4px 12px rgba(0,0,0,.6);z-index:500;white-space:nowrap;text-align:center;pointer-events:none;animation:epitaphFloat 2.5s ease-out forwards;line-height:1.5}
.death-epitaph-epic{font-size:13px;color:#ff6677;border-color:rgba(255,68,85,.8);box-shadow:0 0 24px rgba(255,0,0,.5),0 4px 16px rgba(0,0,0,.7)}
@keyframes epitaphFloat{
  0%{opacity:0;transform:translate(-50%,-80%)}
  15%{opacity:1;transform:translate(-50%,-100%)}
  75%{opacity:1;transform:translate(-50%,-120%)}
  100%{opacity:0;transform:translate(-50%,-160%)}
}

/* ===== v35: 濒死预警 ===== */
/* v77fix: 改用outline做预警，不再覆盖cost-N的box-shadow费用边框颜色 */
.chessman.hp-critical{animation:hpCriticalPulse 1.2s ease-in-out infinite;outline:2px solid rgba(255,40,40,.6);outline-offset:-1px}
.chessman.hp-warning{outline:1px solid rgba(240,200,100,.4);outline-offset:-1px}
@keyframes hpCriticalPulse{
  0%{outline-color:rgba(255,40,40,.4)}
  50%{outline-color:rgba(255,40,40,.8)}
  100%{outline-color:rgba(255,40,40,.4)}
}

/* v35: 危险骷髅标记 */
.chess-danger-mark{position:absolute;top:-12px;left:-6px;font-size:12px;z-index:20;animation:dangerBounce 1s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,0,0,.6))}
@keyframes dangerBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* v61: 安全箱保护标记 */
.chess-safebox-mark{position:absolute;top:-12px;right:-6px;font-size:11px;z-index:20;animation:safeboxGlow 2s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(80,200,255,.8))}
@keyframes safeboxGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(80,200,255,.6))}50%{filter:drop-shadow(0 0 10px rgba(80,200,255,1))}}
/* v61: 安全箱棋子边框 */
.chessman.safebox-protected{box-shadow:0 0 10px rgba(80,200,255,.5),0 0 0 2px rgba(80,200,255,.4) !important;animation:safeboxBorder 2s ease-in-out infinite}
@keyframes safeboxBorder{0%,100%{box-shadow:0 0 8px rgba(80,200,255,.4),0 0 0 2px rgba(80,200,255,.3)}50%{box-shadow:0 0 16px rgba(80,200,255,.7),0 0 0 2px rgba(80,200,255,.6)}}

/* ===== v35: 惨胜结算文字 ===== */
.result-text.pyrrhic{color:#ff9944;text-shadow:0 0 40px rgba(255,150,60,.5);font-size:34px}

/* ===== v36: 加时赛横幅 ===== */
.overtime-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:600;pointer-events:none;opacity:0;transition:opacity .3s}
.overtime-banner.ot-show{opacity:1;animation:otBannerIn .6s ease-out}
@keyframes otBannerIn{
  0%{transform:translate(-50%,-50%) scale(.5);opacity:0}
  50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.overtime-banner.ot-show{display:flex;align-items:center;gap:12px;padding:16px 32px;border-radius:14px;background:linear-gradient(135deg,rgba(255,140,0,.95),rgba(200,60,0,.95));border:2px solid rgba(255,200,100,.6);box-shadow:0 0 40px rgba(255,140,0,.5),0 0 80px rgba(255,100,0,.3),0 8px 32px rgba(0,0,0,.5);color:#fff}
.ot-icon{font-size:36px;animation:otIconPulse 1s ease-in-out infinite}
@keyframes otIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.ot-title{font-size:24px;font-weight:900;letter-spacing:8px;text-shadow:0 0 20px rgba(255,200,100,.6),0 2px 4px rgba(0,0,0,.4)}
.ot-desc{font-size:13px;margin-top:4px;color:rgba(255,255,255,.9)}
.ot-buff{color:#ffe066;font-weight:bold;font-size:15px;text-shadow:0 0 8px rgba(255,220,0,.5)}

/* 加时赛收起后的迷你标签 */
.overtime-banner.ot-mini{display:block;opacity:1;top:60px;left:50%;transform:translateX(-50%);padding:4px 14px;border-radius:20px;background:linear-gradient(135deg,rgba(255,140,0,.85),rgba(200,80,0,.85));border:1.5px solid rgba(255,200,100,.5);box-shadow:0 0 16px rgba(255,140,0,.3);animation:otMiniBlink 2s ease-in-out infinite}
.ot-mini-text{font-size:11px;font-weight:bold;color:#fff;text-shadow:0 0 6px rgba(255,200,100,.4)}
@keyframes otMiniBlink{0%,100%{box-shadow:0 0 12px rgba(255,140,0,.3)}50%{box-shadow:0 0 24px rgba(255,140,0,.6)}}

/* 加时赛棋子发光效果 */
.chessman.overtime-boost{box-shadow:0 0 14px rgba(255,140,0,.5),0 0 0 2px rgba(255,180,50,.4)!important;animation:overtimeGlow 1.5s ease-in-out infinite!important}
@keyframes overtimeGlow{
  0%{box-shadow:0 0 10px rgba(255,140,0,.4),0 0 0 2px rgba(255,180,50,.3)}
  50%{box-shadow:0 0 20px rgba(255,140,0,.7),0 0 0 3px rgba(255,180,50,.5)}
  100%{box-shadow:0 0 10px rgba(255,140,0,.4),0 0 0 2px rgba(255,180,50,.3)}
}
.chessman.shielded::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(100,200,255,.5);animation:shieldGlow 1s infinite alternate;pointer-events:none}
@keyframes shieldGlow{0%{box-shadow:0 0 5px rgba(100,200,255,.3)}100%{box-shadow:0 0 10px rgba(100,200,255,.5)}}

/* v84: 增强战斗动画 */
/* 攻击者冲锋拖影 */
.atk-trail{position:fixed;pointer-events:none;z-index:190;border-radius:50%;opacity:.5;animation:trailFade .3s ease-out forwards}
@keyframes trailFade{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
/* 远程弹道光线 */
.ranged-beam{position:fixed;pointer-events:none;z-index:185;height:2px;transform-origin:left center;opacity:.8;animation:beamFade .4s ease-out forwards}
@keyframes beamFade{0%{opacity:.8;transform:scaleX(1) scaleY(1)}50%{opacity:.6;transform:scaleX(1) scaleY(2)}100%{opacity:0;transform:scaleX(1) scaleY(0)}}
/* 近战冲击波纹 */
.melee-impact{position:fixed;pointer-events:none;z-index:195;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,200,100,.6);animation:impactRipple .5s ease-out forwards}
@keyframes impactRipple{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}60%{opacity:.4;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
/* 技能释放光柱 */
.skill-cast-pillar{position:fixed;pointer-events:none;z-index:188;width:4px;border-radius:2px;animation:castPillar .6s ease-out forwards}
@keyframes castPillar{0%{opacity:0;height:0;transform:translateX(-50%)}20%{opacity:.8;height:60px;transform:translateX(-50%) translateY(-60px)}100%{opacity:0;height:80px;transform:translateX(-50%) translateY(-80px)}}
/* 棋子移动时的脚步尘土 */
.move-dust{position:fixed;pointer-events:none;z-index:180;font-size:10px;opacity:.6;animation:dustPuff .5s ease-out forwards}
@keyframes dustPuff{0%{opacity:.6;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(1.5) translateY(5px)}}
/* 暴击特效：大号闪光 */
.crit-flash{position:fixed;pointer-events:none;z-index:200;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,0,.4),transparent 70%);animation:critBurst .5s ease-out forwards}
@keyframes critBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}40%{opacity:.8;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
/* 棋子闲置时的轻微浮动 */
.chessman.battle-idle{animation:battleIdle 2s ease-in-out infinite}
/* v93: 战斗方向尖角——从棋子圆圈边缘伸出 */
.battle-arrow{position:fixed;pointer-events:none;z-index:15;width:0;height:0;border-left:9px solid;border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:.75;filter:drop-shadow(0 0 2px rgba(0,0,0,.6));transform-origin:left center}
.battle-arrow.arrow-player{border-left-color:rgba(80,220,80,.8)}
.battle-arrow.arrow-enemy{border-left-color:rgba(220,80,80,.7)}
@keyframes battleIdle{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-2px)}}
/* 技能释放时棋子发光 */
.chessman.skill-casting{box-shadow:0 0 20px rgba(100,180,255,.6),0 0 0 4px rgba(100,180,255,.3) !important;animation:skillCastGlow .4s ease-out}
@keyframes skillCastGlow{0%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}

/* ===== 战斗特效Canvas ===== */
#fx-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:150}

/* ===== 阶段横幅 ===== */
#phase-banner{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:bold;color:#f0c866;text-shadow:0 0 30px rgba(240,200,100,.5),0 2px 4px rgba(0,0,0,.8);z-index:300;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .3s}
#phase-banner.show{opacity:1;animation:bannerPop .35s ease-out}
@keyframes bannerPop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}70%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* ===== 回合结果 ===== */
#round-result{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:900;display:none;align-items:center;justify-content:center;flex-direction:column}
#round-result.show{display:flex}
.result-text{font-size:38px;font-weight:bold;text-shadow:0 0 40px currentColor}
.result-text.win{color:#4CAF50}
.result-text.lose{color:#e74c3c}
.result-detail{font-size:14px;color:#99a;margin-top:8px}

/* ===== v38: 战斗结算统计面板 ===== */
.result-stats{margin-top:12px;max-width:360px;width:90%;max-height:280px;overflow-y:auto}
.rs-section{margin-bottom:8px}
.rs-title{font-size:10px;color:#f0c866;font-weight:bold;margin-bottom:4px;letter-spacing:1px}
.rs-enemy-dead{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.rs-dead-unit{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:#e74c3c;background:rgba(231,76,60,.1);padding:2px 6px;border-radius:4px;border:1px solid rgba(231,76,60,.2)}
.rs-stats-list{display:flex;flex-direction:column;gap:4px}
.rs-unit-row{display:flex;align-items:center;gap:6px;padding:4px 6px;background:rgba(15,20,40,.7);border-radius:5px;border:1px solid rgba(40,55,90,.2)}
.rs-unit-row.rs-unit-dead{opacity:.55}
.rs-unit-info{display:flex;align-items:center;gap:3px;min-width:70px;flex-shrink:0}
.rs-unit-name{font-size:9px;color:#ccd;font-weight:bold;max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dead-tag{font-size:8px;margin-left:1px}
.rs-bars{flex:1;display:flex;flex-direction:column;gap:2px}
.rs-bar-row{display:flex;align-items:center;gap:3px}
.rs-bar-label{font-size:8px;width:14px;text-align:center;flex-shrink:0}
.rs-bar-track{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.rs-bar-fill{height:100%;border-radius:3px;transition:width .3s ease}
.rs-bar-dmg{background:linear-gradient(90deg,#ff6644,#ff9944)}
.rs-bar-tank{background:linear-gradient(90deg,#4488ff,#66bbff)}
.rs-bar-val{font-size:8px;color:#889;min-width:28px;text-align:right;font-weight:bold}

/* ===== 游戏结束 ===== */
#game-over{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:2000;display:none;align-items:center;justify-content:center;flex-direction:column}
#game-over.show{display:flex}
.go-title{font-size:42px;font-weight:bold;margin-bottom:12px}
.go-title.victory{color:#f0c866;text-shadow:0 0 40px rgba(240,200,100,.5)}
.go-title.defeat{color:#e74c3c;text-shadow:0 0 40px rgba(231,76,60,.5)}
.go-round{font-size:14px;color:#99a;margin-bottom:6px}
.go-rank{font-size:16px;color:#f0c866;margin-bottom:18px}
.restart-btn{background:linear-gradient(135deg,#f0c866,#d4a020);color:#1a1a2a;border:none;padding:10px 28px;border-radius:8px;font-size:15px;font-weight:bold;cursor:pointer;transition:all .2s}
.restart-btn:hover{transform:scale(1.05);box-shadow:0 0 24px rgba(240,200,100,.4)}

/* v35: 墓地入口（已融入顶部栏 .topbar-graveyard） */

/* ===== v35: 墓地面板 ===== */
.graveyard-panel{position:absolute;top:40px;right:8px;width:280px;max-height:400px;overflow-y:auto;z-index:1500;background:linear-gradient(135deg,rgba(15,8,20,.97),rgba(30,12,18,.97));border:1.5px solid rgba(255,68,85,.4);border-radius:12px;box-shadow:0 0 30px rgba(255,0,0,.15),0 8px 32px rgba(0,0,0,.6);animation:gySlideIn .3s ease-out}
.graveyard-panel.hidden{display:none}
@keyframes gySlideIn{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}
.gy-header{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,68,85,.2);gap:6px}
.gy-title{font-size:14px;font-weight:bold;color:#ff6677}
.gy-count{font-size:10px;color:#99667a;flex:1}
.gy-close{margin-left:auto;background:none;border:none;color:#ff6677;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px}
.gy-close:hover{background:rgba(255,68,85,.2)}
.gy-empty{padding:20px;text-align:center;color:#667;font-size:12px}
.gy-list{padding:8px}
.gy-item{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;border-radius:8px;background:rgba(255,40,60,.06);border:1px solid rgba(255,68,85,.15);transition:all .15s}
.gy-item:hover{background:rgba(255,40,60,.12);border-color:rgba(255,68,85,.3)}
.gy-item-avatar{flex-shrink:0}
.gy-item-avatar img{border-radius:5px;border:1px solid rgba(255,68,85,.3)}
.gy-item-info{flex:1;min-width:0}
.gy-item-name{font-size:12px;font-weight:bold;color:#ff8899}
.gy-item-stats{font-size:9px;color:#99889a;display:flex;gap:6px;margin-top:2px}
.gy-item-killer{font-size:9px;color:#886677;margin-top:1px}

/* ===== v35: 英雄纪念堂（游戏结束） ===== */
.go-memorial{max-width:500px;width:90%;margin:10px auto 16px;max-height:240px;overflow-y:auto;text-align:left}
.memorial-title{font-size:16px;font-weight:bold;color:#f0c866;text-align:center;margin-bottom:10px;text-shadow:0 0 12px rgba(240,200,100,.3)}
.memorial-section{margin-bottom:8px}
.memorial-section-title{font-size:11px;color:#99aabb;margin-bottom:4px;padding-left:4px;border-left:2px solid currentColor}
.memorial-section-title:first-child{color:#4CAF50;border-color:#4CAF50}
.memorial-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.memorial-item{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:6px;font-size:11px;transition:all .15s}
.memorial-alive{background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.3);color:#88cc88}
.memorial-dead{background:rgba(255,40,60,.08);border:1px solid rgba(255,68,85,.25);color:#ffaaaa}
.memorial-item img{border-radius:4px;width:22px;height:22px}
.memorial-name{font-weight:bold}
.memorial-stats{font-size:9px;color:#889;margin-left:2px}
.memorial-empty{text-align:center;color:#556;padding:12px;font-size:12px}

/* ===== 棋子详情 ===== */
#chess-detail{position:fixed;background:#1a1f35;border:1px solid #3a4f7a;border-radius:10px;padding:10px;z-index:600;display:none;width:190px;box-shadow:0 6px 24px rgba(0,0,0,.6)}
.detail-icon{font-size:28px;text-align:center;display:flex;align-items:center;justify-content:center}
.detail-name{font-size:14px;font-weight:bold;color:#fff;text-align:center;margin:2px 0}
.detail-traits{font-size:9px;color:#8899bb;text-align:center}
.detail-level{font-size:10px;color:#8cf;text-align:center;margin:2px 0}
.detail-exp-bar{width:100%;height:5px;background:#1a0a0a;border-radius:3px;overflow:hidden;margin:2px 0}
.detail-exp-inner{height:100%;background:linear-gradient(90deg,#2196F3,#64B5F6);border-radius:3px;transition:width .3s}
.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:5px;font-size:9px}
.stat-item{display:flex;justify-content:space-between;padding:2px 3px;background:rgba(0,0,0,.2);border-radius:3px}
.stat-label{color:#778}
.stat-value{color:#dde}
.detail-skill{margin-top:5px;font-size:9px;color:#88bbdd;background:rgba(0,0,0,.2);padding:4px 6px;border-radius:4px;white-space:pre-line;line-height:1.5}
.detail-btns{display:flex;gap:4px;margin-top:5px}
.detail-btns .sell-btn{flex:1;margin-top:0}
.sell-btn{width:100%;margin-top:5px;background:linear-gradient(135deg,#5a2020,#3a1010);border:1px solid #8a3030;color:#ff8888;padding:4px;border-radius:5px;cursor:pointer;font-size:10px}
.sell-btn:hover{background:linear-gradient(135deg,#7a3030,#5a2020)}
/* v61: 安全箱按钮 */
.safebox-btn{flex:1;background:linear-gradient(135deg,#1a3a5a,#0a2040);border:1px solid #3080c0;color:#66ccff;padding:4px;border-radius:5px;cursor:pointer;font-size:10px;white-space:nowrap}
.safebox-btn:hover{background:linear-gradient(135deg,#2a4a6a,#1a3050)}
.safebox-btn.safebox-active{background:linear-gradient(135deg,#0a4060,#063050);border-color:#50c0ff;color:#88ddff;box-shadow:0 0 6px rgba(80,200,255,.3)}

/* ===== 死亡标记 ===== */
.card-slot.dead-card{opacity:.5;border-color:#8a3030 !important}
.card-slot.dead-card::before{content:'💀';position:absolute;top:2px;right:2px;font-size:10px;z-index:5}







/* ===== 装备道具卡槽 ===== */
.card-slot.equip-item-slot{border:1px solid rgba(255,152,0,.5) !important;background:rgba(35,25,10,.7) !important}
.card-slot.equip-item-slot:hover{border-color:rgba(255,152,0,.8) !important;background:rgba(45,35,15,.8) !important}

/* ===== 效果牌卡槽 ===== */
.card-slot.spell-item-slot{border:1px solid rgba(100,100,255,.5) !important;background:rgba(15,15,35,.7) !important}
.card-slot.spell-item-slot:hover{border-color:rgba(100,100,255,.8) !important;background:rgba(25,25,55,.8) !important}
.reveal-card.equip-card{border:2px solid #ff8800;background:radial-gradient(circle,#2a2010,#1a1508) !important}
.reveal-card.equip-card .rc-icon{color:#ff8800}
.reveal-card-wrapper.flipped .reveal-card.equip-card{box-shadow:0 0 10px rgba(255,136,0,.5),0 0 20px rgba(255,136,0,.2)}

/* ===== 装备图标（棋子右侧竖排） ===== */
.chessman .chess-equips{position:absolute;right:-14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;z-index:15}
.chessman .chess-equips .equip-icon-item{width:13px;height:13px;border-radius:3px;background:rgba(0,0,0,.75);border:1px solid rgba(255,152,0,.5);display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1}

/* ===== 装备信息（详情面板） ===== */
.detail-equips{margin-top:4px;font-size:9px;color:#ff8800;background:rgba(40,30,10,.4);padding:3px 5px;border-radius:4px;line-height:1.4}

/* ===== 滚动条 ===== */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a3a5a;border-radius:2px}

/* ===== 战斗移动动画 ===== */
.chessman.moving{transition:all .25s ease-out !important}

/* ===== 胜利存活棋子变大动画 ===== */
.chessman.victory-grow{animation:victoryGrow .6s ease-out;transform:translate(-50%,-50%) scale(1.15)}
@keyframes victoryGrow{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1.15)}}

/* ===== v110fix: 恩赐卡牌——panel子元素，定位在下方 ===== */
.boon-card-fx{position:absolute;top:calc(100% + 6px);right:0;z-index:150;width:150px;pointer-events:auto;transition:all .5s ease-out;opacity:0;transform:translateY(-8px)}
.boon-card-fx.bcf-fly{opacity:1;transform:translateY(0)}
.boon-card-fx.bcf-fade{opacity:0;transform:translateY(8px);transition:all .8s}
.bcf-inner{position:relative;padding:10px 12px;background:linear-gradient(145deg,rgba(12,15,30,.97),rgba(8,10,22,.97));border:1.5px solid rgba(100,80,200,.4);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 8px rgba(100,80,200,.1)}
.bcf-close{position:absolute;top:4px;right:6px;font-size:12px;color:#667;cursor:pointer;pointer-events:auto;z-index:10;padding:2px 4px;line-height:1}
.bcf-close:hover{color:#eef}
.boon-gold .bcf-inner{border-color:rgba(240,200,100,.6);box-shadow:0 6px 24px rgba(0,0,0,.6),0 0 20px rgba(240,200,100,.2)}
.boon-special .bcf-inner{border-color:rgba(100,150,255,.5);box-shadow:0 6px 24px rgba(0,0,0,.6),0 0 16px rgba(100,150,255,.15)}
.bcf-tier{font-size:9px;color:#99a;margin-bottom:3px}
.bcf-name{font-size:15px;font-weight:bold;color:#eef;margin-bottom:5px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.bcf-desc{font-size:10.5px;color:#aab;line-height:1.5}




/* ===== 连胜玩家头像冒火 ===== */
.player-card.on-streak .pc-avatar-circle{animation:streakFire 0.5s ease-in-out infinite alternate}
.player-card.on-streak .pc-avatar-circle::before{content:'🔥';position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:12px;animation:fireFlicker 0.35s ease-in-out infinite alternate;pointer-events:none;z-index:5}
@keyframes fireFlicker{0%{transform:translateX(-50%) translateY(0) scale(1);opacity:.9}100%{transform:translateX(-50%) translateY(-3px) scale(1.15);opacity:1}}
@keyframes streakFire{0%{box-shadow:0 0 8px rgba(255,100,0,.4)}100%{box-shadow:0 0 16px rgba(255,100,0,.6)}}

/* ===== v42: 查看玩家阵容弹窗 ===== */
.player-board-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1200;display:none;align-items:center;justify-content:center}
.player-board-overlay.show{display:flex}
.pb-dialog{position:relative;background:linear-gradient(135deg,#1a1f35,#0f1225);border:1.5px solid #3a4f7a;border-radius:14px;padding:16px 18px;width:340px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.6);animation:fadeInUp .3s ease-out}
.pb-header{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(58,79,122,.4)}
.pb-avatar{font-size:28px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #3a5f8a;background:radial-gradient(circle,#1a2a4a,#0d1120)}
.pb-header-info{flex:1}
.pb-name{font-size:15px;font-weight:bold;color:#fff}
.pb-hp{font-size:11px;color:#f5a0a0;margin-top:3px}
.pb-hp-bar{width:100%;height:5px;background:#1a0a0a;border-radius:3px;border:1px solid rgba(60,20,20,.6);overflow:hidden;margin-top:3px}
.pb-hp-inner{height:100%;border-radius:3px;transition:width .5s}
.pb-close{position:absolute;top:10px;right:14px;background:none;border:none;color:#889;font-size:18px;cursor:pointer;padding:4px;transition:color .2s}
.pb-close:hover{color:#fff}
.pb-traits{display:flex;flex-wrap:wrap;gap:5px;padding:8px 0;border-bottom:1px solid rgba(58,79,122,.3)}
.pb-trait{font-size:10px;color:#88bbff;background:rgba(80,120,200,.12);border:1px solid rgba(80,120,200,.25);border-radius:6px;padding:2px 8px;white-space:nowrap}
.pb-unit-count{font-size:11px;color:#889;padding:6px 0 4px;font-weight:bold}
.pb-units{display:flex;flex-direction:column;gap:6px}
.pb-unit{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(20,25,45,.8);border:1px solid rgba(58,79,122,.25);transition:all .2s}
.pb-unit:hover{border-color:rgba(80,120,200,.4);background:rgba(25,32,55,.9)}
.pb-unit.cost-1{border-left:3px solid #889}
.pb-unit.cost-2{border-left:3px solid #4CAF50}
.pb-unit.cost-3{border-left:3px solid #2196F3}
.pb-unit.cost-4{border-left:3px solid #aa66ff}
.pb-unit.cost-5{border-left:3px solid #f0c866}
.pb-unit-avatar{width:32px;height:32px;border-radius:6px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(10,14,26,.6)}
.pb-champ-avatar{border-radius:6px;object-fit:cover}
.pb-unit-info{flex:1;min-width:0}
.pb-unit-name{font-size:12px;font-weight:bold;color:#fff}
.pb-unit-stats{font-size:9px;color:#99aabb;margin-top:1px}
.pb-unit-traits{font-size:9px;color:#88bbff;margin-top:1px}
.pb-unit-cost{font-size:11px;color:#f0c866;font-weight:bold;flex-shrink:0}
.pb-empty{font-size:11px;color:#556;font-style:italic;padding:12px;text-align:center}

/* ===== 人口满提示 ===== */
.full-toast{position:fixed;top:35%;left:50%;transform:translate(-50%,-50%);padding:12px 24px;border-radius:12px;font-size:15px;font-weight:bold;color:#ff6644;background:linear-gradient(135deg,rgba(60,20,10,.95),rgba(40,15,5,.95));border:2px solid rgba(255,100,60,.6);box-shadow:0 0 20px rgba(255,100,60,.4),0 6px 16px rgba(0,0,0,.6);z-index:600;pointer-events:none;white-space:nowrap;text-align:center;animation:fullToastPop 2.5s ease-out forwards;line-height:1.6}
@keyframes fullToastPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}8%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}15%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-55%)}100%{opacity:0;transform:translate(-50%,-70%)}}

/* ===== 备战阶段金币提醒（右下角底部控制区弹出） ===== */
.pack-reminder-toast{transform:translate(-50%,-100%);padding:8px 18px;border-radius:10px;font-size:12px;font-weight:bold;color:#f0c866;background:linear-gradient(135deg,rgba(40,30,10,.96),rgba(30,20,5,.96));border:1.5px solid rgba(240,200,100,.5);box-shadow:0 0 18px rgba(240,200,100,.2),0 4px 12px rgba(0,0,0,.5);z-index:9999;white-space:nowrap;text-align:center;cursor:pointer;animation:packReminderAnim 4s ease-out forwards;line-height:1.5}
@keyframes packReminderAnim{0%{opacity:0;transform:translate(-50%,-100%) translateY(10px)}8%{opacity:1;transform:translate(-50%,-100%) translateY(0)}85%{opacity:1;transform:translate(-50%,-100%) translateY(0)}100%{opacity:0;transform:translate(-50%,-100%) translateY(-8px)}}

/* ===== v37: 回血卡提示 ===== */
.heal-remind-toast{padding:10px 20px;border-radius:10px;font-size:12px;font-weight:bold;color:#ff7766;background:linear-gradient(135deg,rgba(50,15,15,.96),rgba(30,10,10,.96));border:1.5px solid rgba(255,100,80,.5);box-shadow:0 0 18px rgba(255,80,60,.2),0 4px 12px rgba(0,0,0,.5);z-index:9999;white-space:nowrap;text-align:center;cursor:pointer;animation:healRemindAnim 5s ease-out forwards;line-height:1.5}
@keyframes healRemindAnim{0%{opacity:0;transform:translateX(-50%) translateY(10px)}8%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}

/* ===== v38: 新手教程样式 ===== */
.tut-step-grid{display:flex;flex-direction:column;gap:8px}
.tut-step{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:8px;background:rgba(15,20,40,.5);border:1px solid rgba(40,55,90,.3);transition:all .2s}
.tut-step:hover{background:rgba(20,28,55,.7);border-color:rgba(100,130,200,.3)}
.tut-num{min-width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f0c866,#d4a542);color:#0d1120;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(240,200,100,.3)}
.tut-body{flex:1}
.tut-title{font-size:12px;font-weight:bold;color:#f0c866;margin-bottom:4px}
.tut-desc{font-size:10px;color:#99aabb;line-height:1.6}
.tut-desc .tut-tip{color:#80CBC4;font-style:italic}
.tut-tips-box{display:flex;flex-direction:column;gap:4px;padding:8px;background:rgba(15,20,40,.4);border-radius:6px;border:1px solid rgba(40,55,90,.25)}
.tut-tips-box .tut-tip-item{font-size:10px;color:#bbc;line-height:1.5;padding:2px 0}
.tut-warn-box{border-color:rgba(231,76,60,.2);background:rgba(40,15,15,.3)}
.tut-warn-box .tut-tip-item{color:#e79a9a}

/* ===== v38: 更新日志样式 ===== */
.changelog-box{max-height:500px;overflow-y:auto}
.cl-entry{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(40,55,90,.2)}
.cl-entry:last-child{border-bottom:none}
.cl-ver{min-width:44px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:900;color:#f0c866;background:linear-gradient(135deg,rgba(240,200,100,.12),rgba(240,200,100,.06));border:1px solid rgba(240,200,100,.25);text-align:center;flex-shrink:0}
.cl-body{flex:1}
.cl-title{font-size:11px;font-weight:bold;color:#dde;margin-bottom:4px}
.cl-list{display:flex;flex-direction:column;gap:2px}
.cl-list span{font-size:10px;color:#889;line-height:1.4}

/* ===== 售卖区域 ===== */
#sell-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;padding:6px 8px;border:2px dashed rgba(200,60,60,.3);border-radius:10px;background:rgba(40,15,15,.4);transition:all .3s;cursor:default;gap:2px}
.sell-zone-icon{font-size:20px;transition:all .3s}
.sell-zone-text{font-size:8px;color:#667;white-space:nowrap;transition:all .3s}
#sell-zone.sell-zone-hint{border-color:rgba(255,100,60,.6);background:rgba(60,20,10,.6);animation:sellZonePulse 1s ease-in-out infinite alternate}
#sell-zone.sell-zone-hint .sell-zone-text{color:#ff8866;font-size:9px;font-weight:bold}
#sell-zone.sell-zone-hint .sell-zone-icon{font-size:24px;animation:sellIconBounce .5s ease infinite alternate}
#sell-zone.sell-zone-active{border-color:#ff4444 !important;background:rgba(100,20,10,.8) !important;box-shadow:0 0 16px rgba(255,60,30,.5);transform:scale(1.05)}
#sell-zone.sell-zone-active .sell-zone-text{color:#ff4444;font-size:10px}
@keyframes sellZonePulse{0%{border-color:rgba(255,100,60,.4);box-shadow:none}100%{border-color:rgba(255,100,60,.8);box-shadow:0 0 12px rgba(255,80,40,.3)}}
@keyframes sellIconBounce{0%{transform:translateY(0)}100%{transform:translateY(-3px)}}

/* ===== 海克斯选择弹窗 ===== */
#hex-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1500;display:none;align-items:center;justify-content:center}
#hex-overlay.show{display:flex}
.hex-container{text-align:center;max-width:680px;animation:fadeInUp .4s ease-out}
.hex-title{font-size:24px;color:#f0c866;margin-bottom:4px;text-shadow:0 0 20px rgba(240,200,100,.3)}
.hex-subtitle{font-size:12px;color:#889;margin-bottom:20px}
.hex-timer{position:absolute;top:12px;right:16px;font-size:22px;font-weight:bold;color:#f0c866;text-shadow:0 0 8px rgba(240,200,100,.5)}
#hex-choices{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:stretch}
.hex-card{width:180px;padding:18px 14px;border-radius:14px;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;overflow:hidden}
.hex-card:hover{transform:translateY(-8px) scale(1.04)}
.hex-card:active{transform:scale(.97)}
.hex-card.silver{background:linear-gradient(135deg,#2a2a3a,#1a1a2a);border:2px solid #8888aa;box-shadow:0 4px 16px rgba(100,100,150,.2)}
.hex-card.silver:hover{border-color:#aaaacc;box-shadow:0 6px 24px rgba(100,100,150,.4)}
.hex-card.gold{background:linear-gradient(135deg,#3a3018,#2a2008);border:2px solid #d4a020;box-shadow:0 4px 16px rgba(212,160,32,.25)}
.hex-card.gold:hover{border-color:#f0c866;box-shadow:0 6px 24px rgba(240,200,100,.4)}
.hex-card.prismatic{background:linear-gradient(135deg,#1a1848,#0c0a30,#281050,#0a1848);border:2px solid #bb77ff;box-shadow:0 4px 24px rgba(170,100,255,.4),0 0 40px rgba(120,60,255,.15),inset 0 0 30px rgba(170,100,255,.05);animation:prismGlow 3s ease-in-out infinite alternate;position:relative}
.hex-card.prismatic::before{content:'';position:absolute;inset:-2px;border-radius:16px;background:conic-gradient(from 0deg,#ff66aa,#aa66ff,#6688ff,#66ffaa,#ffaa66,#ff66aa);opacity:.25;z-index:-1;animation:prismRotate 4s linear infinite;filter:blur(6px)}
.hex-card.prismatic::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);animation:prismShine 2.5s ease-in-out infinite;pointer-events:none}
.hex-card.prismatic:hover{border-color:#dd99ff;box-shadow:0 8px 36px rgba(170,100,255,.6),0 0 60px rgba(140,80,255,.25),inset 0 0 40px rgba(170,100,255,.08);transform:translateY(-10px) scale(1.06)}
@keyframes prismGlow{0%{box-shadow:0 4px 24px rgba(170,100,255,.4),0 0 40px rgba(120,60,255,.15),inset 0 0 30px rgba(170,100,255,.05)}50%{box-shadow:0 4px 28px rgba(100,140,255,.4),0 0 50px rgba(80,120,255,.2),inset 0 0 35px rgba(100,140,255,.06)}100%{box-shadow:0 4px 24px rgba(255,100,180,.35),0 0 40px rgba(255,80,160,.15),inset 0 0 30px rgba(255,100,180,.05)}}
@keyframes prismRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes prismShine{0%,100%{opacity:0;background-position:200% 0}50%{opacity:1;background-position:-200% 0}}
.hex-card .hex-icon{font-size:36px}
.hex-icon-img{border-radius:8px;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.hex-card.silver .hex-icon-img{border:2px solid rgba(150,150,180,.4)}
.hex-card.gold .hex-icon-img{border:2px solid rgba(240,200,100,.4)}
.hex-card.prismatic .hex-icon-img{border:2px solid rgba(170,100,255,.5);box-shadow:0 0 12px rgba(170,100,255,.3),0 0 24px rgba(100,140,255,.15)}
.hex-card .hex-name{font-size:15px;font-weight:bold;color:#fff}
.hex-card .hex-tier{font-size:9px;padding:2px 8px;border-radius:10px;font-weight:bold}
.hex-card.silver .hex-tier{background:rgba(150,150,180,.2);color:#aab}
.hex-card.gold .hex-tier{background:rgba(240,200,100,.15);color:#f0c866}
.hex-card.prismatic .hex-tier{background:linear-gradient(135deg,rgba(170,100,255,.2),rgba(100,140,255,.2));color:#dd99ff;text-shadow:0 0 6px rgba(170,100,255,.5)}
.hex-card.prismatic .hex-name{color:#eeddff;text-shadow:0 0 8px rgba(170,100,255,.4)}
.hex-card .hex-desc{font-size:11px;color:#99a;line-height:1.4}

/* v80: 海克斯商店样式 */
.hex-shop-container{max-width:520px;max-height:80vh;overflow-y:auto;position:relative;padding:16px 12px;scrollbar-width:thin;scrollbar-color:#444 transparent}
.hex-shop-container::-webkit-scrollbar{width:5px}
.hex-shop-container::-webkit-scrollbar-thumb{background:#555;border-radius:4px}
.hex-shop-close{position:absolute;top:8px;right:12px;background:none;border:none;color:#888;font-size:20px;cursor:pointer;z-index:10}
.hex-shop-close:hover{color:#fff}
.hex-shop-section{margin-bottom:12px}
.hex-shop-tier-title{font-size:13px;font-weight:bold;color:#aab;margin-bottom:6px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.08)}
.hex-shop-grid{display:flex;flex-direction:column;gap:5px}
/* v87: 海克斯选择3选1强制横排 */
.hex-shop-grid.hex-select-grid{flex-direction:row !important;gap:14px !important;justify-content:center !important;flex-wrap:nowrap !important}
.hex-shop-card{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;transition:all .2s}
.hex-shop-card.silver{background:rgba(100,100,130,.12);border:1px solid rgba(150,150,180,.2)}
.hex-shop-card.gold{background:rgba(120,100,40,.12);border:1px solid rgba(240,200,100,.2)}
.hex-shop-card.prismatic{background:rgba(100,60,180,.12);border:1px solid rgba(170,100,255,.25)}
.hex-shop-card:hover{transform:translateX(3px);border-color:rgba(255,255,255,.3)}
.hex-shop-card.cant-afford{opacity:.5}
.hex-shop-icon-img{width:28px;height:28px;border-radius:6px;flex-shrink:0}
.hex-shop-info{flex:1;min-width:0}
.hex-shop-name{font-size:12px;font-weight:bold;color:#eee;display:block}
.hex-shop-desc{font-size:9px;color:#889;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.hex-owned{color:#8cf;font-size:10px;font-weight:normal}
.hex-buy-btn{padding:3px 10px;border:1px solid rgba(240,200,100,.4);border-radius:6px;background:linear-gradient(135deg,rgba(60,50,15,.8),rgba(40,35,10,.8));color:#f0c866;font-size:11px;font-weight:bold;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}
.hex-buy-btn:hover:not(.disabled){background:linear-gradient(135deg,rgba(80,65,20,.9),rgba(60,50,15,.9));border-color:#f0c866}
.hex-buy-btn.disabled{opacity:.4;cursor:not-allowed;color:#888;border-color:rgba(100,100,100,.3)}
.hex-shop-btn{padding:4px 12px;border-radius:6px;background:linear-gradient(135deg,rgba(40,30,80,.8),rgba(30,20,60,.8));border:1px solid rgba(170,100,255,.35);color:#cc99ff;font-size:11px;font-weight:bold;cursor:pointer;white-space:nowrap;transition:all .2s}
.hex-shop-btn:hover{border-color:#bb77ff;background:linear-gradient(135deg,rgba(60,40,120,.8),rgba(40,30,80,.8));color:#ddaaff}
.hex-refresh-inline-btn{padding:3px 8px;border-radius:5px;background:rgba(30,35,60,.6);border:1px solid rgba(100,120,200,.3);color:#8899cc;font-size:10px;cursor:pointer;white-space:nowrap;transition:all .2s}
.hex-refresh-inline-btn:hover:not(.disabled){border-color:#88aaff;color:#aabbff}
.hex-refresh-inline-btn.disabled{opacity:.4;cursor:not-allowed}
.hex-shop-refresh-row{text-align:center;margin-bottom:8px}
.hex-refresh-btn{padding:5px 16px;border-radius:8px;background:linear-gradient(135deg,rgba(30,40,70,.8),rgba(20,25,50,.8));border:1px solid rgba(100,140,255,.3);color:#88aaff;font-size:12px;font-weight:bold;cursor:pointer;transition:all .2s}
.hex-refresh-btn:hover:not(.disabled){border-color:#88ccff;color:#aaddff;background:linear-gradient(135deg,rgba(40,50,90,.8),rgba(30,35,70,.8))}
.hex-refresh-btn.disabled{opacity:.4;cursor:not-allowed}
.hex-shop-tier-tag{font-size:8px;padding:1px 4px;border-radius:3px;font-weight:normal}
.hex-shop-card.silver .hex-shop-tier-tag{background:rgba(150,150,180,.2);color:#aab}
.hex-shop-card.gold .hex-shop-tier-tag{background:rgba(240,200,100,.15);color:#f0c866}
.hex-shop-card.prismatic .hex-shop-tier-tag{background:rgba(170,100,255,.15);color:#cc88ff}
.hex-shop-owned{margin-top:12px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.hex-shop-owned-title{font-size:10px;color:#667;margin-bottom:4px}
.hex-shop-owned-list{display:flex;flex-wrap:wrap;gap:4px}
.hex-owned-tag{font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(40,40,60,.5);color:#aab}
.hex-owned-tag.silver{border:1px solid rgba(150,150,180,.2)}
.hex-owned-tag.gold{border:1px solid rgba(240,200,100,.2);color:#f0c866}
.hex-owned-tag.prismatic{border:1px solid rgba(170,100,255,.2);color:#cc88ff}

/* v57: 战斗中低血量警告提示 */
.low-hp-warning-tip{position:absolute;z-index:300;background:linear-gradient(135deg,rgba(180,30,30,.92),rgba(120,20,20,.92));border:1px solid rgba(255,100,100,.5);border-radius:8px;padding:6px 10px;font-size:10px;color:#ffcccc;text-align:center;line-height:1.3;pointer-events:none;white-space:nowrap;animation:lowHpWarnIn .3s ease-out;transition:opacity .5s,transform .5s;box-shadow:0 4px 16px rgba(200,30,30,.4),0 0 20px rgba(255,50,50,.15)}
.low-hp-warning-tip b{color:#ff9999;font-size:11px}
.low-hp-warning-tip small{color:#ff8888;font-size:8px}
@keyframes lowHpWarnIn{0%{opacity:0;transform:translateY(10px) scale(.8)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ===== 新手引导系统 ===== */
.tutorial-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2500;pointer-events:auto;animation:tutFadeIn .3s ease-out}
@keyframes tutFadeIn{0%{opacity:0}100%{opacity:1}}
.tutorial-highlight{position:fixed;z-index:2510;border-radius:12px;box-shadow:0 0 0 3000px rgba(0,0,0,.55),0 0 16px rgba(240,200,100,.6);pointer-events:none;transition:all .4s ease;animation:tutPulse 1.5s ease-in-out infinite alternate}
@keyframes tutPulse{0%{box-shadow:0 0 0 3000px rgba(0,0,0,.55),0 0 16px rgba(240,200,100,.5)}100%{box-shadow:0 0 0 3000px rgba(0,0,0,.55),0 0 28px rgba(240,200,100,.8)}}
/* 轻量遮罩模式：用于不需要全屏遮罩的步骤（如开包弹窗内） */
.tutorial-highlight.tut-light{box-shadow:0 0 16px rgba(240,200,100,.6),0 0 0 4px rgba(240,200,100,.25);animation:tutPulseLight 1.5s ease-in-out infinite alternate}
@keyframes tutPulseLight{0%{box-shadow:0 0 16px rgba(240,200,100,.5),0 0 0 4px rgba(240,200,100,.2)}100%{box-shadow:0 0 28px rgba(240,200,100,.8),0 0 0 6px rgba(240,200,100,.35)}}
.tutorial-tooltip{position:fixed;z-index:2520;background:linear-gradient(135deg,rgba(30,25,10,.97),rgba(20,18,8,.97));border:2px solid rgba(240,200,100,.6);border-radius:14px;padding:16px 20px;max-width:320px;box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 16px rgba(240,200,100,.15);animation:tutTooltipIn .4s ease-out}
/* 紧凑模式：减小padding和字号，减少遮挡面积 */
.tutorial-tooltip.tut-compact{padding:10px 14px;max-width:260px}
.tutorial-tooltip.tut-compact .tutorial-title{font-size:13px;margin-bottom:4px}
.tutorial-tooltip.tut-compact .tutorial-desc{font-size:11px;margin-bottom:6px;line-height:1.5}
/* noBlock模式：提示框整体穿透，但按钮仍可点击 */
.tutorial-tooltip.tut-noblock{pointer-events:none;opacity:.88}
.tutorial-tooltip.tut-noblock .tutorial-actions{pointer-events:auto}
.tutorial-tooltip.tut-noblock .tutorial-skip,.tutorial-tooltip.tut-noblock .tutorial-skip-all{pointer-events:auto}
@keyframes tutTooltipIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.tutorial-tooltip::before{content:'';position:absolute;width:16px;height:16px;background:rgba(30,25,10,.97)}
.tutorial-tooltip.arrow-top::before{bottom:-10px;left:50%;margin-left:-8px;border-bottom:2px solid rgba(240,200,100,.6);border-right:2px solid rgba(240,200,100,.6);transform:rotate(45deg)}
.tutorial-tooltip.arrow-bottom::before{top:-10px;left:50%;margin-left:-8px;border-top:2px solid rgba(240,200,100,.6);border-left:2px solid rgba(240,200,100,.6);transform:rotate(45deg)}
.tutorial-tooltip.arrow-left::before{right:-10px;top:50%;margin-top:-8px;border-top:2px solid rgba(240,200,100,.6);border-right:2px solid rgba(240,200,100,.6);transform:rotate(45deg)}
.tutorial-tooltip.arrow-right::before{left:-10px;top:50%;margin-top:-8px;border-bottom:2px solid rgba(240,200,100,.6);border-left:2px solid rgba(240,200,100,.6);transform:rotate(45deg)}
.tutorial-title{font-size:15px;font-weight:bold;color:#f0c866;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.tutorial-title .tut-step{font-size:11px;background:rgba(240,200,100,.2);border:1px solid rgba(240,200,100,.4);padding:1px 8px;border-radius:10px;color:#f0c866}
.tutorial-desc{font-size:12px;color:#ccd;line-height:1.7;margin-bottom:10px}
.tutorial-desc strong{color:#f0c866}
.tutorial-btn{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f0c866,#d4a020);color:#1a1a2a;border:none;padding:8px 20px;border-radius:8px;font-size:13px;font-weight:bold;cursor:pointer;transition:all .2s}
.tutorial-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(240,200,100,.4)}
.tutorial-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tutorial-skip{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid rgba(150,150,180,.3);color:#889;padding:6px 14px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .2s}
.tutorial-skip:hover{border-color:rgba(150,150,180,.6);color:#bbc}
.tutorial-skip-all{display:inline-flex;align-items:center;gap:4px;background:rgba(220,60,60,.15);border:1px solid rgba(220,60,60,.3);color:#d66;padding:6px 14px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .2s}
.tutorial-skip-all:hover{background:rgba(220,60,60,.25);border-color:rgba(220,60,60,.5);color:#f88}
.tutorial-hand{position:fixed;z-index:2515;font-size:32px;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));animation:tutHandBob 1s ease-in-out infinite alternate}
@keyframes tutHandBob{0%{transform:translate(0,0)}100%{transform:translate(0,8px)}}

/* ===== v30: 投降按钮 ===== */
.surrender-btn{background:linear-gradient(135deg,#5a3020,#3a1a10);color:#ff8866;border:1.5px solid rgba(255,100,60,.4);padding:3px 10px;border-radius:7px;cursor:pointer;font-size:11px;font-weight:bold;transition:all .2s;white-space:nowrap;margin-right:auto;flex-shrink:0}
.surrender-btn:hover{background:linear-gradient(135deg,#7a4030,#5a2a18);border-color:rgba(255,100,60,.7);box-shadow:0 0 10px rgba(255,80,40,.3);transform:scale(1.05)}
.surrender-btn:active{transform:scale(.95)}

/* 投降确认弹窗 */
.surrender-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:2500;display:flex;align-items:center;justify-content:center}
.surrender-overlay.hidden{display:none}
.surrender-dialog{background:linear-gradient(135deg,rgba(30,20,10,.97),rgba(20,15,8,.97));border:2px solid rgba(255,100,60,.5);border-radius:16px;padding:24px 32px;text-align:center;max-width:340px;box-shadow:0 0 30px rgba(255,80,40,.2),0 8px 32px rgba(0,0,0,.6);animation:fadeInUp .3s ease-out}
.surrender-title{font-size:22px;font-weight:bold;color:#ff8866;margin-bottom:8px}
.surrender-desc{font-size:13px;color:#99aabb;margin-bottom:18px;line-height:1.5}
.surrender-btns{display:flex;gap:12px;justify-content:center}
.surrender-confirm{background:linear-gradient(135deg,#a03020,#7a2018);color:#fff;border:1.5px solid rgba(255,80,60,.5);padding:8px 24px;border-radius:8px;font-size:14px;font-weight:bold;cursor:pointer;transition:all .2s}
.surrender-confirm:hover{background:linear-gradient(135deg,#c04030,#a03020);box-shadow:0 0 12px rgba(255,60,30,.4)}
.surrender-cancel{background:linear-gradient(135deg,#2a6a2a,#1a4a1a);color:#88ff88;border:1.5px solid rgba(80,200,80,.4);padding:8px 24px;border-radius:8px;font-size:14px;font-weight:bold;cursor:pointer;transition:all .2s}
.surrender-cancel:hover{background:linear-gradient(135deg,#3a8a3a,#2a6a2a);box-shadow:0 0 12px rgba(80,200,80,.4)}

/* ===== v31: 左侧核心玩法信息面板 ===== */
#left-info-panel{width:190px;min-width:190px;display:flex;flex-direction:column;gap:8px;justify-content:flex-start;padding:12px 10px;flex-shrink:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(60,70,100,.4) transparent}
#left-info-panel::-webkit-scrollbar{width:3px}
#left-info-panel::-webkit-scrollbar-thumb{background:rgba(60,70,100,.4);border-radius:2px}
.lip-header{font-size:14px;font-weight:bold;color:#f0c866;text-align:center;padding:6px 0 8px;border-bottom:2px solid rgba(240,200,100,.25);margin-bottom:2px;text-shadow:0 0 8px rgba(240,200,100,.3);letter-spacing:2px}
.lip-card{background:rgba(8,10,22,.92);border:1.5px solid rgba(40,55,90,.4);border-radius:10px;padding:10px 10px 8px;transition:all .25s;cursor:default}
.lip-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.lip-card-icon{font-size:22px;text-align:center;margin-bottom:2px;filter:drop-shadow(0 0 4px rgba(255,255,255,.15))}
.lip-card-title{font-size:13px;font-weight:bold;text-align:center;margin-bottom:6px;padding-bottom:4px}
.lip-card-pack{border-color:rgba(100,160,255,.3)}
.lip-card-pack:hover{border-color:rgba(100,160,255,.55);box-shadow:0 4px 14px rgba(100,160,255,.12)}
.lip-card-pack .lip-card-title{color:#64a0ff;border-bottom:1px solid rgba(100,160,255,.2)}
.lip-card-death{border-color:rgba(231,76,60,.3)}
.lip-card-death:hover{border-color:rgba(231,76,60,.55);box-shadow:0 4px 14px rgba(231,76,60,.12)}
.lip-card-death .lip-card-title{color:#e74c3c;border-bottom:1px solid rgba(231,76,60,.2)}
.lip-card-classic{border-color:rgba(240,200,100,.3)}
.lip-card-classic:hover{border-color:rgba(240,200,100,.55);box-shadow:0 4px 14px rgba(240,200,100,.12)}
.lip-card-classic .lip-card-title{color:#f0c866;border-bottom:1px solid rgba(240,200,100,.2)}
.lip-card-body{display:flex;flex-direction:column;gap:3px}
.lip-item{font-size:10px;color:#aabbcc;line-height:1.45;padding:1.5px 0}
.lip-item b{color:#dde8f0}
.lip-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(100,160,255,.2),transparent);margin:3px 0}
/* 分隔线：将信息面板与游戏区视觉隔开 */
.lip-separator{width:2px;min-width:2px;background:linear-gradient(180deg,transparent 5%,rgba(40,55,90,.5) 20%,rgba(60,80,130,.35) 50%,rgba(40,55,90,.5) 80%,transparent 95%);margin:16px 6px;flex-shrink:0;border-radius:1px}

/* ===== v30: 开包弹窗内卡池显示区 ===== */
.reveal-pool-section{margin-top:14px;padding:10px 16px;background:rgba(40,15,15,.7);border:1.5px solid rgba(255,68,85,.4);border-radius:10px;max-width:580px;width:100%;animation:fadeInUp .3s ease-out}
.reveal-pool-section.hidden{display:none}
.reveal-pool-title{font-size:12px;color:#ff8866;font-weight:bold;text-align:center;margin-bottom:8px}
.reveal-pool-cards{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.rp-card{width:80px;min-height:65px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 4px;position:relative;cursor:default;transition:all .2s;background:rgba(20,25,45,.85);border:1px solid rgba(60,70,100,.4)}
.rp-card:hover{border-color:rgba(255,68,85,.5);background:rgba(30,20,25,.9)}
.rp-card .rp-icon{font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.rp-card .rp-name{font-size:9px;color:#dde;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px}
.rp-card .rp-cost{font-size:8px;color:#f0c866;margin-top:1px}
.rp-card .rp-hp{font-size:7px;color:#88bb88;margin-top:1px}
.rp-card .rp-sell-x{position:absolute;top:2px;right:2px;border-radius:4px;background:linear-gradient(135deg,rgba(60,45,15,.9),rgba(40,30,10,.9));color:#f0c866;border:1px solid rgba(240,200,100,.45);font-size:8px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1.2;padding:1px 4px;white-space:nowrap;letter-spacing:.3px}
.rp-card .rp-sell-x:hover{background:linear-gradient(135deg,rgba(80,60,20,.95),rgba(60,45,15,.95));border-color:rgba(240,200,100,.8);transform:scale(1.1);box-shadow:0 0 8px rgba(240,200,100,.3)}
.rp-card.rp-empty{opacity:.3;border-style:dashed}
.rp-card.rp-item{border-color:rgba(76,175,80,.4)}
.rp-card.rp-spell{border-color:rgba(100,100,255,.4)}
.rp-card.rp-equip{border-color:rgba(255,152,0,.4)}

/* ===== v36: 移动端响应式适配 ===== */
/* 平板端 (<=1024px) */
@media(max-width:1024px){
  body{overflow:auto;height:auto}
  #game-wrapper{flex-direction:column;height:auto;max-height:none;overflow:visible;gap:0;transform:none}
  #left-info-panel{display:none}
  .lip-separator{display:none}
  #battle-info-panel{display:none}
  #game-container{border-radius:0;max-width:100vw;width:100vw;height:auto;min-height:100vh}
  #center-area{padding-left:0!important;padding-right:0!important}
  #players-panel-inner{width:48px;min-width:48px}
  .player-card{width:42px}
  .pc-avatar-circle{width:28px;height:28px;font-size:14px}
  .pc-name-tft{font-size:6px;max-width:42px}
  .landing-container{padding:16px 12px 24px}
  .landing-highlights-3{flex-direction:column}
  .landing-highlights-4{flex-direction:column}
  .landing-cards-4{grid-template-columns:repeat(2,1fr)}
  .compare-side-layout{flex-direction:column}
  .compare-left-img{flex:none}
  .compare-board-inner{flex-direction:column}
  .compare-callouts{min-width:auto}
  .detail-tab-bar{gap:4px}
  .detail-tab-btn{padding:6px 10px;font-size:11px}
  /* v68: 平板端安全箱和战报按钮适配 */
  .left-review-stats-btn{right:-125px;font-size:11px;height:30px;padding:0 8px}
  .safebox-panel{right:-115px;width:108px;font-size:8px}
}
/* 手机端 (<=768px) */
@media(max-width:768px){
  #top-bar{height:34px;padding:0 6px;gap:4px;border-radius:0}
  .surrender-btn{font-size:9px;padding:2px 6px}
  .unit-count-info{font-size:10px}
  .topbar-hp-bar-outer{height:16px}
  .topbar-hp-number{font-size:10px}
  .topbar-hp-label{font-size:12px}
  #round-stage-banner{gap:4px;padding:2px 4px}
  .round-stage-left{padding:1px 6px;gap:4px}
  .stage-round-num{font-size:14px}
  .stage-round-name{font-size:8px;padding:0 4px}
  .round-info{font-size:10px}
  .stage-info{font-size:9px}
  .timer-display{font-size:18px;padding:1px 6px}
  #bottom-panel{height:auto;min-height:120px;flex-direction:column}
  #card-pool-area{flex-wrap:wrap;padding:4px 6px;gap:3px}
  #equip-slots-area{flex-direction:row;flex-wrap:wrap;min-width:0;border-left:none;border-top:1px solid rgba(40,50,80,.3);padding:3px 6px}
  .equip-slot{width:48px;height:22px}
  #bottom-controls{width:100%;border-left:none;border-top:1px solid rgba(40,50,80,.3);padding:4px 6px}
  .controls-row-packs{flex-wrap:wrap}
  .card-pack{width:80px;min-width:70px;height:60px;font-size:10px}
  .ready-btn{font-size:12px;padding:6px 16px}
  /* v67: 移动端战报按钮适配 */
  .left-review-stats-btn{right:-110px;top:0;width:auto;height:26px;padding:0 6px;font-size:10px}
  /* v67: 移动端安全箱适配 */
  .safebox-panel{right:-95px;width:88px;padding:3px 4px;font-size:8px}
  .safebox-panel-unit{padding:2px 3px}
  .safebox-panel-avatar{width:18px;height:18px}
  .safebox-toggle-slider{width:24px;height:12px}
  .safebox-toggle-slider::after{width:8px;height:8px}
  .safebox-toggle-input:checked+.safebox-toggle-slider::after{left:13px}
  /* 棋子适配 */
  .chessman{width:42px;height:42px}
  .chessman .chess-icon{font-size:16px}
  .chessman .chess-name{font-size:6px}
  .chessman .hp-mini,.chessman .mana-mini{width:76%;max-width:32px}
  .champ-avatar{width:16px!important;height:16px!important}
  /* 卡池中的棋子 */
  .card-slot{width:65px;height:90px}
  /* 开包弹窗适配 */
  .reveal-card-wrapper{width:90px;height:130px}
  #card-reveal-content{gap:8px}
  .reveal-pool-section{padding:6px 8px}
  .rp-card{width:60px;min-height:50px}
  /* 海克斯选择适配 */
  .hex-choice-card{width:140px;padding:12px 8px}
  /* 教程提示框适配 */
  .tutorial-tooltip{max-width:260px;padding:10px 12px}
  .tutorial-title{font-size:13px}
  .tutorial-desc{font-size:11px}
  /* 死亡弹窗适配 */
  .dead-popup{min-width:200px;max-width:90vw;padding:12px 14px}
  /* 羁绊/海克斯面板 */
  #synergy-panel{font-size:9px}
  #hex-augments-display{font-size:9px}
}
/* 小手机端 (<=480px) */
@media(max-width:480px){
  .landing-title{font-size:22px}
  .landing-subtitle{font-size:11px}
  .detail-tab-bar{flex-wrap:wrap;gap:3px}
  .detail-tab-btn{font-size:10px;padding:4px 8px}
  .landing-explore-container{padding:12px 10px 10px}
  .landing-explore-title{font-size:15px}
  .landing-hero-grid{grid-template-columns:repeat(2,1fr);gap:5px}
  .lhg-avatar{width:36px;height:36px}
  .compare-callout{padding:6px 10px}
  .compare-side-layout{flex-direction:column}
  .compare-left-img{flex:none}
  .mini-thumb{width:40px;height:24px}
  .showcase-text{font-size:9px}
  .caption-tag{font-size:9px;padding:2px 6px}
  .callout-before{font-size:10px;min-width:100px}
  .callout-after{font-size:10px}
  #players-panel-inner{width:36px;min-width:36px}
  .player-card{width:32px}
  .pc-avatar-circle{width:22px;height:22px;font-size:12px}
  .pc-name-tft{display:none}
  .chessman{width:36px;height:36px}
  .chessman .chess-icon{font-size:14px}
  .chessman .chess-name{display:none}
  .chessman .hp-mini,.chessman .mana-mini{width:72%;max-width:26px}
  #bottom-controls{gap:2px}
  .card-pack{width:70px;min-width:60px;height:52px;font-size:9px}
  /* 棋盘缩小 */
  #main-area{transform:scale(0.85);transform-origin:top center}
  /* v68: 小手机端安全箱和战报按钮适配 */
  .left-review-stats-btn{right:-90px;height:24px;padding:0 5px;font-size:9px}
  .safebox-panel{right:-80px;width:74px;padding:2px 3px;font-size:7px}
  .safebox-panel-avatar{width:16px;height:16px}
  .safebox-panel-name{font-size:7px}
  .safebox-toggle-slider{width:20px;height:10px}
  .safebox-toggle-slider::after{width:6px;height:6px}
  .safebox-toggle-input:checked+.safebox-toggle-slider::after{left:11px}
}

/* ==================== v49: 上回合战报回看弹窗 ==================== */
.last-battle-backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:9998;
  transition:opacity .3s;
}
.last-battle-backdrop.hidden{display:none}
.last-battle-popup{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
  border:2px solid rgba(100,150,255,.4);border-radius:16px;
  padding:16px 20px;min-width:340px;max-width:480px;max-height:75vh;overflow-y:auto;
  z-index:9999;box-shadow:0 8px 32px rgba(0,0,0,.6);color:#e0e0e0;
}
.last-battle-popup.hidden{display:none}
.lbp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.15);}
.lbp-title{font-size:16px;font-weight:700;color:#ffd700;}
.lbp-close{background:none;border:1px solid rgba(255,255,255,.25);color:#aaa;font-size:18px;cursor:pointer;padding:2px 8px;border-radius:6px;transition:all .2s;}
.lbp-close:hover{color:#fff;background:rgba(255,255,255,.1)}

/* v49: 回看按钮样式 */
.controls-row-bottom{
  display:flex;gap:8px;align-items:center;justify-content:center;width:100%;
}
.review-stats-btn{
  background:linear-gradient(135deg,#2a4a7f,#1e3a6a);
  color:#8cb4ff;border:1px solid rgba(100,150,255,.4);border-radius:10px;
  padding:8px 14px;font-size:13px;cursor:pointer;font-weight:600;
  transition:all .25s;white-space:nowrap;
}
.review-stats-btn:hover{
  background:linear-gradient(135deg,#3a5a9f,#2e4a8a);color:#b0d0ff;
  box-shadow:0 0 12px rgba(100,150,255,.3);transform:translateY(-1px);
}
/* v67/v70: 上回合战报按钮——棋盘右上角（#battlefield内absolute定位） */
.left-review-stats-btn{
  position:absolute;right:-115px;top:8px;z-index:91;
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;font-size:11px;line-height:1.2;font-weight:bold;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:linear-gradient(135deg,rgba(20,40,80,.95),rgba(15,30,60,.95));
  border:1px solid rgba(100,150,255,.35);border-radius:8px;
  color:#aaccff;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:all .25s;
  animation:reviewBtnPulse 2s ease-in-out infinite;
}
.left-review-stats-btn:hover{
  background:linear-gradient(135deg,rgba(30,60,120,.95),rgba(25,50,100,.95));
  color:#fff;border-color:rgba(100,150,255,.6);
  box-shadow:0 0 12px rgba(100,150,255,.3);
  transform:scale(1.05);
}
@keyframes reviewBtnPulse{
  0%,100%{box-shadow:0 0 6px rgba(100,150,255,.2)}
  50%{box-shadow:0 0 14px rgba(100,150,255,.5)}
}
/* v66: 治疗统计条样式 */
.rs-bar-heal{background:linear-gradient(90deg,#44cc88,#22aa66)}

/* v49: 卡池待替换模式 - 可选中卡片高亮 */
.rp-selectable{
  cursor:pointer;position:relative;
  animation:rp-pulse 1.2s ease-in-out infinite;
}
.rp-selectable:hover{
  box-shadow:0 0 12px rgba(255,200,0,.6) !important;
  border-color:rgba(255,200,0,.7) !important;
  transform:translateY(-2px);
}
@keyframes rp-pulse{
  0%,100%{box-shadow:0 0 4px rgba(255,200,0,.2)}
  50%{box-shadow:0 0 10px rgba(255,200,0,.45)}
}
.rp-pending-hint{
  width:100%;text-align:center;padding:6px 10px;margin-bottom:6px;
  background:rgba(255,200,0,.12);border:1px dashed rgba(255,200,0,.5);border-radius:8px;
  color:#ffd700;font-size:13px;font-weight:600;
}

/* v63: 金币可点击样式 */
.gold-clickable{cursor:pointer;transition:all .2s}
.gold-clickable:hover{background:rgba(255,215,0,.15) !important;box-shadow:0 0 12px rgba(255,215,0,.3) !important}
/* v63: 金币利息规则弹窗 */
.gold-interest-popup{position:fixed;z-index:10000;left:50%;top:50%;transform:translate(-50%,-50%);min-width:320px;max-width:400px;background:rgba(15,18,28,.97);border:1.5px solid rgba(255,215,0,.5);border-radius:14px;padding:16px 20px;box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 20px rgba(255,215,0,.15);animation:gipSlideIn .25s ease-out}
@keyframes gipSlideIn{from{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.gip-title{font-size:16px;font-weight:bold;color:#ffd700;text-align:center;margin-bottom:12px;text-shadow:0 0 8px rgba(255,215,0,.3)}
.gip-section{display:flex;flex-direction:column;gap:6px}
.gip-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#ccc;padding:3px 0}
.gip-row span:last-child{color:#ffd700;font-weight:bold}
.gip-total{border-top:1px solid rgba(255,215,0,.3);padding-top:8px;margin-top:4px;font-size:13px}
.gip-total span:last-child{color:#ffcc00;font-size:14px}
.gip-divider{height:1px;background:rgba(255,255,255,.1);margin:10px 0}
.gip-subtitle{font-size:13px;color:#aaa;margin-bottom:6px;font-weight:bold}
.gip-current{background:rgba(255,215,0,.05);border-radius:8px;padding:10px}
.gip-tip{font-size:11px;color:#888;text-align:center;margin-top:10px;font-style:italic}
.gip-close{position:absolute;top:8px;right:10px;background:none;border:none;color:#888;font-size:16px;cursor:pointer;padding:4px}
.gip-close:hover{color:#fff}

/* ==================== v80: 牌型tooltip ==================== */
.hand-info-btn{cursor:pointer;font-size:13px;margin-left:4px;opacity:.7;transition:opacity .2s}
.hand-info-btn:hover{opacity:1}
.hand-type-tooltip{position:fixed;z-index:12000;min-width:240px;max-width:320px;padding:12px 14px;background:rgba(10,14,30,.97);border:1.5px solid rgba(240,200,100,.4);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 16px rgba(240,200,100,.1);transform:translateX(-50%) translateY(-100%);pointer-events:none;opacity:0;transition:opacity .2s;font-size:11px;color:#ccc;line-height:1.6}
.hand-type-tooltip.show{opacity:1;pointer-events:auto}
.htt-title{font-size:14px;font-weight:bold;color:#f0c866;text-align:center;margin-bottom:8px;text-shadow:0 0 6px rgba(240,200,100,.3)}
.htt-desc{font-size:10px;color:#99aabb;margin-bottom:8px;text-align:center;line-height:1.5}
.htt-list{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.htt-row{display:flex;align-items:center;gap:6px;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.03)}
.htt-row:hover{background:rgba(255,255,255,.06)}
.htt-icon{font-size:14px;min-width:20px;text-align:center}
.htt-name{flex:1;color:#ddd;font-size:11px}
.htt-gold{color:#4CAF50;font-weight:bold;font-size:11px;min-width:40px;text-align:right}
.htt-note{font-size:9px;color:#778;border-top:1px solid rgba(255,255,255,.08);padding-top:6px;line-height:1.5}

/* ==================== v80: 海克斯/准备按钮各占一半 ==================== */
.hex-shop-btn-half{flex:1;min-width:0;text-align:center;box-sizing:border-box}
.ready-btn-half{flex:1;min-width:0;text-align:center;box-sizing:border-box}

/* ==================== v81: 式神选择系统 ==================== */
.shishen-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:ssFadeIn .4s ease}
/* v108: 开局华丽特效 */
.ss-opening-fx{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(240,200,100,.08) 0%,transparent 50%);animation:ssOpenFx 2s ease-out forwards}
.ss-opening-fx::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,transparent,rgba(100,80,200,.06),transparent,rgba(240,200,100,.04),transparent);animation:ssRotate 8s linear infinite}
.ss-opening-fx::after{content:'✦';position:absolute;top:15%;left:50%;transform:translateX(-50%);font-size:48px;color:rgba(240,200,100,.15);animation:ssStar 1.5s ease-out forwards;pointer-events:none}
@keyframes ssOpenFx{0%{opacity:0;transform:scale(.8)}30%{opacity:1;transform:scale(1.05)}100%{opacity:.5;transform:scale(1)}}
@keyframes ssRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes ssStar{0%{opacity:0;transform:translateX(-50%) scale(0)}40%{opacity:.4;transform:translateX(-50%) scale(1.2)}100%{opacity:0;transform:translateX(-50%) scale(2) translateY(-30px)}}
.shishen-intro{font-size:11px;color:#99aabb;line-height:1.6;text-align:center;max-width:400px;margin-bottom:12px;padding:8px 16px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
@keyframes ssFadeIn{from{opacity:0}to{opacity:1}}
.shishen-overlay.ss-fade-out{opacity:0;transition:opacity .4s}
.shishen-title{font-size:24px;font-weight:900;color:#f0c866;margin-bottom:6px;text-shadow:0 0 20px rgba(240,200,100,.4);letter-spacing:3px}
.shishen-subtitle{font-size:12px;color:#8899bb;margin-bottom:20px}
.shishen-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.shishen-card{width:150px;height:220px;padding:0;background:linear-gradient(145deg,rgba(15,18,35,.95),rgba(8,10,22,.98));border:2px solid rgba(100,100,140,.3);border-radius:14px;cursor:pointer;transition:all .4s;text-align:center;position:relative;overflow:hidden;perspective:600px;transform-style:preserve-3d}
.shishen-card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.shishen-card.ss-economy{border-color:rgba(240,200,100,.4)}.shishen-card.ss-economy:hover{border-color:rgba(240,200,100,.7);box-shadow:0 0 20px rgba(240,200,100,.2)}
.shishen-card.ss-trait{border-color:rgba(255,80,80,.4)}.shishen-card.ss-trait:hover{border-color:rgba(255,80,80,.7);box-shadow:0 0 20px rgba(255,80,80,.2)}
.shishen-card.ss-hero{border-color:rgba(80,150,255,.4)}.shishen-card.ss-hero:hover{border-color:rgba(80,150,255,.7);box-shadow:0 0 20px rgba(80,150,255,.2)}
.shishen-card.ss-chaos{border-color:rgba(180,100,255,.4)}.shishen-card.ss-chaos:hover{border-color:rgba(180,100,255,.7);box-shadow:0 0 20px rgba(180,100,255,.2)}
.shishen-card.ss-selected{transform:translateY(-8px) scale(1.05);border-width:3px}
.shishen-card.ss-selected.ss-economy{box-shadow:0 0 30px rgba(240,200,100,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card.ss-selected.ss-trait{box-shadow:0 0 30px rgba(255,80,80,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card.ss-selected.ss-hero{box-shadow:0 0 30px rgba(80,150,255,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card.ss-selected.ss-chaos{box-shadow:0 0 30px rgba(180,100,255,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card.pl-fortune{border-color:rgba(240,200,100,.4)}.shishen-card.pl-fortune:hover{border-color:rgba(240,200,100,.7);box-shadow:0 0 20px rgba(240,200,100,.2)}
.shishen-card.pl-fortune.ss-selected{box-shadow:0 0 30px rgba(240,200,100,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card.pl-battle{border-color:rgba(255,80,80,.4)}.shishen-card.pl-battle:hover{border-color:rgba(255,80,80,.7);box-shadow:0 0 20px rgba(255,80,80,.2)}
.shishen-card.pl-battle.ss-selected{box-shadow:0 0 30px rgba(255,80,80,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card.pl-star{border-color:rgba(80,150,255,.4)}.shishen-card.pl-star:hover{border-color:rgba(80,150,255,.7);box-shadow:0 0 20px rgba(80,150,255,.2)}
.shishen-card.pl-star.ss-selected{box-shadow:0 0 30px rgba(80,150,255,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card.pl-chaos{border-color:rgba(180,100,255,.4)}.shishen-card.pl-chaos:hover{border-color:rgba(180,100,255,.7);box-shadow:0 0 20px rgba(180,100,255,.2)}
.shishen-card.pl-chaos.ss-selected{box-shadow:0 0 30px rgba(180,100,255,.4),0 8px 30px rgba(0,0,0,.5)}
.shishen-card-back{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a3a,#0a0a2a);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:32px;transition:all .5s;backface-visibility:hidden}
.shishen-card.ss-flipped .shishen-card-back{opacity:0;transform:rotateY(180deg)}
.shishen-card-front{opacity:0;transition:all .5s}
.shishen-card.ss-flipped .shishen-card-front{opacity:1}
.ss-type-badge{font-size:9px;padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:6px;font-weight:bold}
.ss-type-badge.ss-economy{background:rgba(240,200,100,.15);color:#f0c866}
.ss-type-badge.ss-trait{background:rgba(255,80,80,.15);color:#ff8888}
.ss-type-badge.ss-hero{background:rgba(80,150,255,.15);color:#88bbff}
.ss-type-badge.ss-chaos{background:rgba(180,100,255,.15);color:#bb88ff}
.ss-icon{font-size:36px;margin:6px 0}
.ss-name{font-size:14px;font-weight:bold;color:#eee;margin-bottom:4px}
.ss-desc{font-size:10px;color:#99aabb;line-height:1.5}
.shishen-timer{font-size:11px;color:#889;margin-top:4px}
.shishen-confirm{margin-top:12px;padding:10px 28px;border:none;border-radius:10px;font-size:14px;font-weight:bold;cursor:pointer;background:linear-gradient(135deg,#f0c866,#d4a035);color:#1a1a2e;box-shadow:0 4px 16px rgba(240,200,100,.3);transition:all .2s;opacity:.5;pointer-events:none}
.shishen-confirm.ss-ready{opacity:1;pointer-events:auto}
.shishen-confirm.ss-ready:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(240,200,100,.5)}

/* v110fix2: wrapper包裹panel+bubble+boon，不做3D变换 */
.pailing-wrapper{position:absolute;right:6px;top:30%;transform:translateY(-50%);z-index:50;width:110px;pointer-events:none}
.pailing-wrapper>*{pointer-events:auto}
/* 游戏内牌灵3D卡牌 */
.shishen-panel{position:relative;width:110px;height:156px;background:linear-gradient(145deg,rgba(15,18,35,.95),rgba(8,10,22,.98));border-radius:12px;padding:0;text-align:center;z-index:50;cursor:pointer;transition:all .3s;overflow:hidden;
  transform:perspective(800px) rotateY(-8deg);
  box-shadow:-8px 4px 20px rgba(0,0,0,.6),2px -1px 10px rgba(255,255,255,.03);
  animation:pailingFloat 3s ease-in-out infinite}
@keyframes pailingFloat{0%,100%{transform:perspective(800px) rotateY(-8deg) translateZ(0) translateY(0)}50%{transform:perspective(800px) rotateY(-10deg) translateZ(3px) translateY(-5px)}}
.shishen-panel::before{content:'';position:absolute;inset:0;border-radius:12px;border:1.5px solid transparent;pointer-events:none;z-index:2;overflow:hidden}
.shishen-panel::after{content:'';position:absolute;top:-40%;left:-40%;width:180%;height:80%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);transform:rotate(-20deg);pointer-events:none;z-index:1;clip-path:inset(0 0 0 0 round 12px)}
/* 卡面花纹装饰 */
.shishen-panel .pl-card-inner::before{content:'';position:absolute;inset:4px;border-radius:8px;border:1px solid rgba(255,255,255,.04);pointer-events:none;z-index:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.015) 8px,rgba(255,255,255,.015) 9px),
  repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(255,255,255,.015) 8px,rgba(255,255,255,.015) 9px)}
.shishen-panel .pl-card-inner::after{content:'';position:absolute;top:6px;left:6px;right:6px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);pointer-events:none;z-index:0}
/* 卡牌内容区 */
.pl-card-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 6px}
.pl-card-icon{font-size:28px;margin-bottom:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));position:relative;display:inline-block;animation:emojiPulse 2.5s ease-in-out infinite}
@keyframes emojiPulse{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.08) rotate(-3deg)}50%{transform:scale(1) rotate(0deg)}75%{transform:scale(1.05) rotate(2deg)}}
/* 恩赐触发时emoji兴奋动画 */
.pl-card-icon.emoji-excited{animation:emojiExcited .6s ease-out !important}
@keyframes emojiExcited{0%{transform:scale(1)}20%{transform:scale(1.3) rotate(-8deg)}40%{transform:scale(0.9) rotate(5deg)}60%{transform:scale(1.15) rotate(-3deg)}80%{transform:scale(1.05)}100%{transform:scale(1)}}
/* 玩家操作时emoji反应动画 */
.pl-card-icon.emoji-react{animation:emojiReact .5s ease-out !important}
@keyframes emojiReact{0%{transform:translateY(0)}30%{transform:translateY(-6px) scale(1.1)}60%{transform:translateY(2px)}100%{transform:translateY(0) scale(1)}}
.pl-card-name{font-size:12px;font-weight:bold;color:#eef;margin-bottom:2px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pl-card-type{font-size:8px;color:#889;margin-bottom:4px;letter-spacing:1px}
.pl-card-desc{font-size:8px;color:#99a;line-height:1.3;margin-bottom:4px}
.pl-card-boon{font-size:8px;padding:3px 5px;border-radius:4px;background:rgba(0,0,0,.3);margin-top:auto;width:90%;text-align:center}
.pl-card-stats{font-size:7px;color:#667;margin-top:3px}
/* 4色卡牌 */
.shishen-panel.sp-economy{border-color:rgba(240,200,100,.35)}
.shishen-panel.sp-economy::before{border-color:rgba(240,200,100,.35);box-shadow:inset 0 0 20px rgba(240,200,100,.06)}
.shishen-panel.sp-economy{box-shadow:8px 4px 20px rgba(0,0,0,.6),0 0 15px rgba(240,200,100,.08),-2px -1px 10px rgba(255,255,255,.03)}
.shishen-panel.sp-economy .pl-card-icon{color:#f0c866}
.shishen-panel.sp-economy .pl-card-boon{border:1px solid rgba(240,200,100,.2)}

.shishen-panel.sp-trait{border-color:rgba(255,80,80,.35)}
.shishen-panel.sp-trait::before{border-color:rgba(255,80,80,.35);box-shadow:inset 0 0 20px rgba(255,80,80,.06)}
.shishen-panel.sp-trait{box-shadow:8px 4px 20px rgba(0,0,0,.6),0 0 15px rgba(255,80,80,.08),-2px -1px 10px rgba(255,255,255,.03)}
.shishen-panel.sp-trait .pl-card-icon{color:#ff8888}
.shishen-panel.sp-trait .pl-card-boon{border:1px solid rgba(255,80,80,.2)}

.shishen-panel.sp-hero{border-color:rgba(80,150,255,.35)}
.shishen-panel.sp-hero::before{border-color:rgba(80,150,255,.35);box-shadow:inset 0 0 20px rgba(80,150,255,.06)}
.shishen-panel.sp-hero{box-shadow:8px 4px 20px rgba(0,0,0,.6),0 0 15px rgba(80,150,255,.08),-2px -1px 10px rgba(255,255,255,.03)}
.shishen-panel.sp-hero .pl-card-icon{color:#88bbff}
.shishen-panel.sp-hero .pl-card-boon{border:1px solid rgba(80,150,255,.2)}

.shishen-panel.sp-chaos{border-color:rgba(180,100,255,.35)}
.shishen-panel.sp-chaos::before{border-color:rgba(180,100,255,.35);box-shadow:inset 0 0 20px rgba(180,100,255,.06)}
.shishen-panel.sp-chaos{box-shadow:8px 4px 20px rgba(0,0,0,.6),0 0 15px rgba(180,100,255,.08),-2px -1px 10px rgba(255,255,255,.03)}
.shishen-panel.sp-chaos .pl-card-icon{color:#bb88ff}
.shishen-panel.sp-chaos .pl-card-boon{border:1px solid rgba(180,100,255,.2)}

.shishen-panel:hover{transform:perspective(800px) rotateY(-2deg) scale(1.05);z-index:60}
/* v88: 拖动用CSS变量+过渡 */
.shishen-panel.pl-dragging{animation:none !important;transition:none !important;transform:perspective(800px) rotateY(calc(-8deg + var(--drag-ry,0deg))) rotateX(var(--drag-rx,0deg)) !important}
.shishen-panel:not(.pl-dragging){--drag-ry:0deg;--drag-rx:0deg;transition:transform .15s ease-out}

/* v88: 翻牌背功能已移除，改为丝滑拖动 */

/* v110fix: 牌灵对话气泡——panel子元素，定位在上方 */
.pl-bubble{position:absolute;bottom:calc(100% + 8px);right:0;z-index:200;padding:10px 14px;background:linear-gradient(135deg,rgba(20,25,45,.97),rgba(12,16,32,.97));border:1.5px solid rgba(140,120,200,.35);border-radius:12px;max-width:200px;pointer-events:none;transition:opacity .4s,transform .4s;animation:bubbleIn .35s ease-out;box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 10px rgba(120,100,200,.08)}
.pl-bubble::after{content:'';position:absolute;right:16px;bottom:-8px;width:0;height:0;border:5px solid transparent;border-top:6px solid rgba(20,25,45,.97)}
.pl-bubble-line{font-size:12px;color:#eef;line-height:1.5;margin-bottom:4px;font-style:normal;font-weight:500}
.pl-bubble-boon{font-size:9px;color:#aab;border-top:1px solid rgba(255,255,255,.06);padding-top:4px;margin-top:2px}
@keyframes bubbleIn{0%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* v85: 牌灵恩赐详情弹窗 */
.pl-detail-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15000;width:320px;max-height:80vh;overflow-y:auto;background:rgba(10,14,30,.97);border:1.5px solid rgba(120,100,200,.4);border-radius:14px;padding:16px;box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 20px rgba(120,100,200,.1);animation:pldIn .3s ease-out}
@keyframes pldIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.pld-header{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px}
.pld-icon{font-size:32px}
.pld-name{font-size:15px;font-weight:bold}
.pld-type{font-size:10px;color:#889;margin-top:2px}
.pld-desc{font-size:11px;color:#aab;margin-top:3px;line-height:1.4}
.pld-stats{font-size:10px;color:#778;text-align:center;margin-bottom:8px}
.pld-boons-title{font-size:11px;color:#aab;font-weight:bold;margin-bottom:6px}
.pld-boon-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px;margin-bottom:2px;font-size:10px;background:rgba(255,255,255,.02);transition:background .2s}
.pld-boon-row:hover{background:rgba(255,255,255,.05)}
.pld-boon-row.pld-current{background:rgba(100,150,255,.1);border:1px solid rgba(100,150,255,.2)}
.pld-boon-row.pld-used{opacity:.5}
.pld-tier{font-size:12px;min-width:16px}
.pld-boon-name{color:#dde;font-weight:bold;min-width:60px}
.pld-boon-desc{color:#99a;flex:1}
.pld-close{text-align:center;margin-top:10px;padding:6px;font-size:11px;color:#889;cursor:pointer;border-radius:6px;transition:all .2s}
.pld-close:hover{background:rgba(255,255,255,.05);color:#eef}

/* 移动端式神适配 */
@media(max-width:900px){
  .shishen-cards{gap:8px}
  .shishen-card{width:110px;padding:10px 8px}
  .ss-icon{font-size:28px}
  .ss-name{font-size:12px}
  .ss-desc{font-size:9px}
  .pailing-wrapper{position:relative;right:auto;top:auto;transform:none;width:auto}
  .shishen-panel{position:relative;left:auto;right:auto;top:auto;transform:none;width:auto;height:auto;display:flex;align-items:center;gap:6px;padding:4px 8px;margin:2px 0;animation:none}
  .sp-icon{font-size:16px}
}