/* 叠！杀！— 样式表（像素·末日风，v1.7 菜单重构: 60-30-10 配色 / 按钮三级 / 种族三态） */
/* 配色基准 60-30-10: 深红背景 60% · 暗灰面板 30% · 金/亮红强调 10% */
:root{--cardW:86px;--cardH:126px;
 --bg-red:#1a0303;--panel:#1a1a1a;--panel-2:#232323;--panel-line:#3c3c3c;
 --accent-gold:#fd0;--accent-red:#e03a2f;
 --gold:#fd0;--blood:#c22;--line:#f50;--txt-dim:#9a9a9a}
@media(min-width:768px){:root{--cardW:110px;--cardH:158px}}
@media(orientation:landscape) and (max-height:480px){:root{--cardW:68px;--cardH:100px}}
*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
body{font-family:"Microsoft YaHei",sans-serif;color:#ffd;min-height:100vh;
background:radial-gradient(ellipse at 50% 35%,#3a0808,#1a0303 60%,#000);overscroll-behavior:none;position:relative}
/* 像素网格 + 灼烧斑 + 雷达 */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.022) 3px 4px),
repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.022) 3px 4px)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(circle at 12% 80%,rgba(0,0,0,.5),transparent 34%),
radial-gradient(circle at 88% 20%,rgba(120,10,10,.28),transparent 30%),
radial-gradient(circle at 70% 90%,rgba(0,0,0,.45),transparent 30%)}
.radar{position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
background:repeating-radial-gradient(circle at 50% 40%,transparent 0 36px,#f33 36px 38px)}
.wrap{max-width:1100px;margin:0 auto;padding:10px;padding-bottom:calc(120px + env(safe-area-inset-bottom));position:relative;z-index:1}
.title{font-size:clamp(28px,7vw,46px);font-weight:900;color:var(--accent-gold);text-align:center;letter-spacing:10px;
text-shadow:3px 3px 0 #600,6px 6px 0 #000,0 0 18px #f006;margin:14px 0}
.title .bang{color:var(--accent-red);margin:0 -2px}
.verBadge{display:inline-block;font-size:12px;font-weight:normal;letter-spacing:1px;color:#c9c9c9;
 background:#000a;border:2px solid #555;padding:2px 9px;margin-left:6px;vertical-align:14px;
 box-shadow:2px 2px 0 #000}
.title small{display:block;font-size:12px;color:#d9a05a;letter-spacing:8px;margin-top:4px}
.btn{display:block;width:100%;max-width:340px;margin:8px auto;padding:14px 18px;min-height:48px;
background:linear-gradient(#c22,#600);border:3px solid #f50;border-radius:0;color:#fd0;
font-size:17px;font-weight:bold;cursor:pointer;text-align:center;touch-action:manipulation;
box-shadow:4px 4px 0 #000}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000;background:#400}
@media(min-width:768px){.btn:hover{box-shadow:4px 4px 0 #000,0 0 14px #f00}}
.btn.small{max-width:none;margin:0;padding:10px 8px;font-size:14px;min-height:44px}
.btn.inline{display:inline-block;width:auto;padding:6px 12px;font-size:13px;min-height:0;margin:0 0 0 8px}
/* 按钮三级分级: primary(金, 主操作) / sub(深红金边, 次操作) / ghost(暗灰描边, 三级) */
.btn.gold{background:linear-gradient(#ffe27a,#e6ac1f 55%,#c08410);border-color:#ffe9a8;color:#3a2600;
text-shadow:none}
@media(min-width:768px){.btn.gold:hover{box-shadow:4px 4px 0 #000,0 0 16px #fd08}}
.btn.sub{background:linear-gradient(#7c1d18,#480d0a);border:2px solid var(--accent-gold);color:#ffd24a}
@media(min-width:768px){.btn.sub:hover{box-shadow:4px 4px 0 #000,0 0 12px #fd04}}
.btn.ghost{background:#242424;border:2px solid #555;color:#c9c9c9;font-weight:normal}
.btn.ghost:active{background:#1b1b1b}
@media(min-width:768px){.btn.ghost:hover{border-color:#9a9a9a;color:#ffe}}
.card{background:linear-gradient(#1f1f1f,#161616);border:2px solid var(--panel-line);border-radius:0;padding:12px;margin:8px 0;
box-shadow:4px 4px 0 #000c, inset 0 2px 0 #ffffff10}
.hidden{display:none!important}
input,select{background:#161616;border:2px solid #555;color:var(--accent-gold);padding:12px;border-radius:0;
width:100%;font-size:16px;text-align:center;margin:6px 0;box-shadow:inset 2px 2px 0 #000}
input::placeholder{color:#777}
input:focus,select:focus{border-color:var(--accent-gold);outline:none;box-shadow:inset 2px 2px 0 #000,0 0 8px #fd05}
.secLbl{color:#d9a05a;font-size:14px;font-weight:bold;letter-spacing:1px;margin:2px 0 8px}
.secLbl .tag{margin-left:4px;font-weight:normal;color:#8a8a8a}
.raceTabs{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.raceTabs .raceTab{margin:0;flex:1;min-width:78px;display:flex;align-items:center;justify-content:center;gap:4px;position:relative}
.raceTabs .rtIco{font-size:16px}
.raceTabs .on{background:#a00;box-shadow:0 0 10px #f00,4px 4px 0 #000}
/* 出场种族×全局禁用联动: 禁用种族灰底+✕角标, 与配置区「全局禁用种族」呼应 */
.raceTab.raceBan{background:#242424;border-color:#4a4a4a;color:#6f6f6f;font-weight:normal}
.raceTab.raceBan .rtIco{filter:grayscale(1);opacity:.45}
.raceTab .banX{display:none;position:absolute;top:-9px;left:50%;transform:translateX(-50%);
 background:#3a0d0d;border:1px solid var(--accent-red);color:#ff6b5e;font-size:10px;
 font-weight:bold;font-style:normal;padding:1px 6px;line-height:1.4;white-space:nowrap;
 box-shadow:2px 2px 0 #000}
.raceTab.raceBan .banX{display:block}
/* 「你」金色角标: 标记当前座次 / 出场种族 */
.youTag{position:absolute;top:-8px;right:-6px;background:var(--accent-gold);color:#000;
 font-size:10px;font-weight:bold;font-style:normal;padding:0 6px;line-height:1.5;box-shadow:2px 2px 0 #000}
.raceTab .youTag{top:auto;bottom:-8px}
/* ===== 房间页头部 ===== */
.roomHead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.roomHead b{color:var(--accent-gold);font-size:17px;letter-spacing:1px}
/* ===== 玩家状态行: 序号+种族徽章 ｜ 昵称(阵营) ｜ 禁牌摘要 ｜ 状态徽章, 同一栅格 ===== */
.pList{display:flex;flex-direction:column;margin:2px 0 10px}
.pRow{display:grid;grid-template-columns:30px 34px minmax(0,1.2fr) minmax(0,1fr) 92px;
 gap:6px;align-items:center;padding:9px 6px;border-bottom:1px solid #422;font-size:14px;min-height:44px}
.pRow:last-child{border-bottom:none}
.pRow.me{background:#1c1206;box-shadow:inset 3px 0 0 var(--accent-gold)}
.pSeq{color:#8a6a4a;font-weight:bold;font-size:12px;text-align:center}
.pRace{font-size:18px;text-align:center;filter:drop-shadow(1px 1px 0 #000)}
.pName{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;padding-right:2px}
.pName small{margin-left:5px;font-size:12px}
.pName .youTag{position:static;margin-left:5px;vertical-align:2px}
.pBans{font-size:12px;color:#c9884a;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pBans i{color:#5a5a5a;font-style:normal}
.pStat{font-size:12px;text-align:center;padding:4px 2px;border:1px solid #665;color:#b9a05a;
 background:#221d10;font-weight:bold;letter-spacing:1px}
.pStat.rdy{color:#7de07d;border-color:#2a5a2a;background:#0f1f0f}
/* ===== 配置区: 统一「标签左 / 值右」键值行 ===== */
.cfgList{display:flex;flex-direction:column;border-top:1px dashed var(--panel-line)}
.cfgRow{display:flex;align-items:center;justify-content:space-between;gap:10px;
 min-height:44px;padding:8px 4px;border-bottom:1px dashed #2c2c2c;font-size:13px}
.cfgRow:last-child{border-bottom:none}
.cfgLbl{color:#d9a05a;font-weight:bold;flex:none;letter-spacing:1px}
.cfgVal{color:#e8d9c0;text-align:right;min-width:0;overflow:hidden;display:flex;align-items:center;gap:4px}
.cfgVal select{width:auto;min-width:96px;margin:0;padding:8px 10px;font-size:14px;flex:none}
.cfgRow.ban .cfgVal{color:#ff7a6a;font-weight:bold}
.cfgVal .dim,.cfgVal.dim{color:#7a7a7a;font-weight:normal}
.cfgVal .dimTxt{font-style:normal;font-size:11px;color:#8a8a8a}
#hostSet.nonHost .cfgLbl::after{content:'（房主可改）';font-weight:normal;color:#8a8a8a;font-size:11px}
/* ===== 强牌禁用: 额度计数 + 总数 + 固定宽度卡片滚动列表 ===== */
.strongHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.strongHead b{color:#ffd24a;font-size:15px}
.banCount{display:inline-block;margin-left:8px;font-size:12px;font-weight:bold;color:#c9c9c9;
 background:#242424;border:1px solid #555;padding:1px 8px;vertical-align:2px}
.banCount.has{color:#ff8a7a;border-color:var(--accent-red);background:#2a0d0d}
#strongList{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;
 max-height:320px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.strongCard{background:#181818;border:2px solid #4a3030;padding:7px 8px;cursor:pointer;
 display:flex;flex-direction:column;gap:3px;min-width:0;min-height:56px}
.strongCard:active{background:#300}
@media(min-width:768px){.strongCard:hover{border-color:#fa0;box-shadow:0 0 8px #fa03}}
.scTop{display:flex;align-items:center;justify-content:space-between;gap:4px}
.scTop b{color:#fd0;font-size:13px}
.scHint{font-size:10px;color:#6a5a5a;flex:none}
.scBy{font-size:10px;color:#ff8a7a;flex:none;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.scDesc{font-size:11px;color:#cda;line-height:1.4;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.strongCard.banned{opacity:.62}
.strongCard.banned .scTop b{text-decoration:line-through;color:#a88}
.strongCard.banned{border-color:#5a2a2a;background:#1c1010}
.tag{font-size:12px;color:#c9884a}
#errBar{position:fixed;top:0;left:0;right:0;z-index:999;background:#900;color:#ffd;
font-size:12px;padding:8px;white-space:pre-wrap;word-break:break-all;display:none}
.muteB{position:fixed;top:8px;right:10px;z-index:98;background:#161616e6;border:2px solid #4a4a4a;
color:#c9c9c9;font-size:18px;padding:5px 9px;min-width:44px;min-height:44px;cursor:pointer;box-shadow:3px 3px 0 #000}
/* 规则按钮: 图标+文字描边样式, 触控热区 ≥44px */
.helpB{position:fixed;top:8px;right:60px;z-index:98;display:flex;align-items:center;gap:4px;
background:#000c;border:2px solid #fa0;color:#fd0;font-size:14px;padding:6px 10px;
min-width:44px;min-height:44px;cursor:pointer;box-shadow:3px 3px 0 #000;font-family:inherit}
.helpB:active{background:#420}
@media(min-width:768px){.helpB:hover{box-shadow:3px 3px 0 #000,0 0 10px #fa06}}

/* ===== 悬停图鉴 ===== */
#tip{position:fixed;z-index:100;max-width:250px;background:#000f0e;border:3px solid #fa0;
border-radius:0;padding:9px 11px;font-size:12px;color:#ffd;pointer-events:none;display:none;
box-shadow:4px 4px 0 #000;line-height:1.55}
.tipNm{font-weight:bold;color:#fd0;font-size:13px}
.tipTag{font-size:10px;color:#fa0;margin-left:6px;font-weight:normal}
.tipCost{color:#8cf;font-size:11px;margin:2px 0}
.tipSec{color:#f80;font-size:11px;margin-top:4px;font-weight:bold}
.tipFx{color:#cda;font-size:11px}

/* ===== 对战布局 ===== */
.gameLayout{display:flex;flex-direction:column;gap:10px}
@media(min-width:768px){.gameLayout{flex-direction:row}
.gameLayout .left{flex:1.4}.gameLayout .right{flex:1}}
.stGame{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media(min-width:768px){.stGame{grid-template-columns:repeat(4,1fr)}}
.st{background:#000a;border:3px solid #722;border-radius:0;padding:8px;font-size:12px;cursor:pointer;
box-shadow:3px 3px 0 #000c;position:relative}
.st.me{box-shadow:3px 3px 0 #000c,0 0 8px #f004}
.st.tgt{outline:2px solid #0af;outline-offset:1px}
.st.tgtAble{outline:2px dashed #0af;outline-offset:1px;cursor:crosshair}
.st b{color:#fd0}
.eyeB{position:absolute;top:4px;right:4px;background:#000;border:1px solid #fa0;color:#fd0;
font-size:11px;padding:2px 5px;min-width:28px;min-height:28px;cursor:pointer}
.eyeB:active{background:#420}
/* ===== 阵营面板指标化: 标题行+状态徽章 / 指标分组行 / 特殊资源角标行 ===== */
.stTop{display:flex;align-items:center;gap:5px;min-width:0;padding-right:26px}
.stTop b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:60%}
.stRace{font-size:11px;flex:none}
.stTop .viewing{flex:none;font-size:11px}
/* 状态色条: 行动中=绿 / 等待=暗灰; 置于标题行右端 */
.stStat{margin-left:auto;flex:none;font-size:10px;font-weight:bold;letter-spacing:1px;
 padding:2px 6px;border:1px solid #555;color:#9a9a9a;background:#000a}
.stStat.on{color:#0a0;background:#7de07d;border-color:#2a5a2a;
 box-shadow:0 0 8px #5f55;text-shadow:none}
.st.acting{box-shadow:3px 3px 0 #000c,0 0 10px #5f54}
/* 指标分组行: 生命/护甲/资源/格位/手牌 图标+数值, 手机端允许换行两行 */
.stMetrics{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.stMetrics span{display:inline-flex;align-items:center;gap:1px;background:#000a;
 border:1px solid #533;padding:1px 4px;font-size:11px;line-height:1.5;white-space:nowrap}
.stMetrics b{font-weight:bold;color:#ffe}
.stMetrics i{font-style:normal;color:#9a8a8a;font-size:10px}
.stMetrics .mHp b{color:#ff8a7a}
.stMetrics .mAr b{color:#8cf}
.stMetrics .mRes b{color:#8ce68c}
/* 四族配色 + 扩展包两族 */
.r-ren{--rc:#ffd24a;border-color:#ffd24a}
.r-shen{--rc:#4ad8ff;border-color:#4ad8ff}
.r-shou{--rc:#ff9a3c;border-color:#ff9a3c}
.r-gui{--rc:#c07aff;border-color:#c07aff}
.r-yg{--rc:#d2b04c;border-color:#d2b04c}
.r-bs{--rc:#7ec850;border-color:#7ec850}
.r-univ{--rc:#8ce68c;border-color:#8ce68c}
.r-floor{--rc:#d8c9a3;border-color:#d8c9a3}
/* ===== v1.7 菜单: Tab 分段控件 / Toggle 开关 / 高级选项折叠 ===== */
#menu{max-width:420px;margin:0 auto}
#menu .btn{max-width:none;width:100%}
.segTabs{display:flex;margin:14px 0 10px;border:2px solid #4a4a4a;background:#161616;box-shadow:3px 3px 0 #000}
.segTab{flex:1;padding:13px 8px;min-height:48px;background:none;border:none;color:var(--txt-dim);
 font-size:15px;font-weight:bold;cursor:pointer;letter-spacing:2px;font-family:inherit}
.segTab.on{background:linear-gradient(#2c2416,#1d180c);color:var(--accent-gold);
 box-shadow:inset 0 -3px 0 var(--accent-gold)}
.segTab:active{background:#242424}
.panel{padding:14px}
.bigCta{margin:12px auto 6px;font-size:19px;letter-spacing:8px;padding:16px 18px;min-height:56px;position:relative}
.ctaTag{display:inline-block;margin-left:6px;font-size:11px;font-weight:bold;letter-spacing:1px;line-height:1.5;
 background:#00000038;border:1px solid #7a5200;color:#4a3200;padding:1px 8px;vertical-align:4px}
.ctaHint{text-align:center;font-size:12px;color:#8a8a8a;line-height:1.6;margin-bottom:4px}
.row2{display:flex;gap:8px;margin:8px 0}
.row2 .btn{margin:0;flex:1;min-height:48px}
.advHead{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;
 background:none;border:none;color:#d9a05a;font-size:14px;font-weight:bold;letter-spacing:1px;
 cursor:pointer;padding:6px 2px;font-family:inherit}
.advArrow{color:var(--txt-dim)}
#advBody{margin-top:8px;border-top:1px dashed var(--panel-line);padding-top:4px}
/* Toggle 开关: 选中金色填充, 未选中暗灰; 整行热区 ≥48px */
.switchRow{display:flex;align-items:center;gap:10px;padding:10px 6px;min-height:48px;cursor:pointer;
 border-bottom:1px dashed #2c2c2c;position:relative}
.switchRow:last-child{border-bottom:none}
.swIcon{font-size:20px;flex:none}
.swTxt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.swTxt b{color:#e8d9c0;font-size:14px}
.swTxt small{color:#8a8a8a;font-size:11px;line-height:1.5}
.swInput{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.swTrack{flex:none;width:52px;height:28px;background:#2e2e2e;border:2px solid #555;position:relative;
 transition:background .15s,border-color .15s}
.swThumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#777;transition:left .15s,background .15s}
.swInput:checked~.swTrack{background:#4a3808;border-color:var(--accent-gold)}
.swInput:checked~.swTrack .swThumb{left:26px;background:var(--accent-gold);box-shadow:0 0 8px #fd06}
.swInput:focus-visible~.swTrack{outline:2px dashed var(--accent-gold);outline-offset:2px}
.modHint{font-size:12px;color:#8a8a8a;line-height:1.6;margin-top:8px}
.modHint.warn{color:#ff6b5e;font-weight:bold}
.btn.banOn{background:#5a0000;border-color:#f55;box-shadow:0 0 12px #f559,4px 4px 0 #000}

/* ===== v1.7 网络状态角标: 默认收起为角落图标, 点开/悬停展开详情 ===== */
.netStat{position:fixed;top:8px;left:10px;z-index:98;display:flex;align-items:center;gap:6px;
 background:#161616e6;border:2px solid var(--panel-line);color:var(--txt-dim);font-size:13px;
 padding:6px 10px;min-height:44px;cursor:pointer;box-shadow:3px 3px 0 #000;font-family:inherit}
.netStat .dot{width:9px;height:9px;border-radius:50%;background:#666;flex:none}
.netStat .dot.ok{background:var(--accent-gold);box-shadow:0 0 6px #fd08}
.netStat .dot.bad{background:var(--accent-red);box-shadow:0 0 6px #f008}
.netStat .netIco{font-size:14px}
.netPop{display:none;pointer-events:none;position:absolute;top:calc(100% + 6px);left:0;width:200px;
 background:#161616f2;border:2px solid #4a4a4a;padding:10px 12px;box-shadow:4px 4px 0 #000;
 flex-direction:column;gap:4px;text-align:left}
.netPop b{color:var(--accent-gold);font-size:13px;letter-spacing:1px}
.netPop span{font-size:12px;color:var(--txt-dim)}
.netStat.open .netPop{display:flex}
@media(hover:hover){.netStat:hover .netPop{display:flex}}
/* ===== 手机端: 触控热区 ≥44px, 网格收紧行距 ===== */
@media(max-width:767.98px){
 .totemGrid{gap:6px}
 .totemGrid .totem{min-height:68px}
 .row2{flex-direction:column}
 .segTab{letter-spacing:1px}
 /* 玩家状态行: 第一行 序号+种族+昵称+状态, 禁牌摘要独占第二行 */
 .pRow{grid-template-columns:24px 30px minmax(0,1fr) 78px;row-gap:2px;padding:8px 4px}
 .pBans{grid-column:1/-1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;line-height:1.4}
 .pStat{padding:5px 2px}
 /* 强牌列表: 两列卡片, 高度收窄 */
 #strongList{grid-template-columns:repeat(2,1fr);max-height:44vh}
 /* 阵营面板指标行允许两行; 状态徽章保持可读 */
 .stMetrics span{padding:2px 4px}
 .stTop b{max-width:46%}
 /* 角顶按钮热区 */
 .muteB,.helpB{min-width:44px;min-height:44px}
 .helpB{right:62px}
}
.lbl{color:#d9a05a;font-size:13px;margin:6px 0 4px}
#viewBar{background:#000c;border:2px solid #fa0;padding:6px 8px;font-size:13px;color:#fd0;margin-bottom:4px}
#field{display:flex;gap:8px;flex-wrap:wrap;min-height:calc(var(--cardH) + 10px);
background:#0008;border:3px dashed #722;border-radius:0;padding:8px;
box-shadow:inset 3px 3px 0 #0009}
.slotBox{width:var(--cardW);height:var(--cardH);border:2px dashed #644;border-radius:0;
display:flex;align-items:center;justify-content:center;color:#644;font-size:12px}
.slotBox.dim{opacity:.45}
.slotBox.open{border-color:var(--gold);color:var(--gold);animation:slotGlow 1s ease-in-out infinite}
@keyframes slotGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 12px #fd08,inset 0 0 8px #fd06}}
.gcard{width:var(--cardW);height:var(--cardH);min-height:var(--cardH);flex:0 0 auto;
background:linear-gradient(160deg,#262626,#111);border:3px solid var(--rc,#a33);border-radius:0;
padding:4px;font-size:11px;position:relative;display:flex;flex-direction:column;gap:1px;
cursor:pointer;transition:transform .1s;box-shadow:3px 3px 0 #000c, inset 0 2px 0 #ffffff18}
.t-hero{box-shadow:3px 3px 0 #000c, inset 0 0 0 2px #ffffff2e, inset 0 2px 0 #ffffff20}
.t-effect{border-style:solid}
.t-floor{background-image:repeating-linear-gradient(0deg,transparent 0 12px,#0008 12px 14px),
repeating-linear-gradient(90deg,transparent 0 18px,#0008 18px 20px),linear-gradient(160deg,#3a332a,#191512)}
.gcard .ty{position:absolute;top:-9px;left:-4px;background:#000;border:1px solid var(--rc,#a33);
font-size:9px;padding:0 3px;color:var(--rc,#fa0);line-height:1.3}
.gcard .nm{font-weight:bold;color:var(--rc,#fd0);font-size:13px;line-height:1.15}
.gcard .art{font-size:24px;text-align:center;line-height:1.2;filter:drop-shadow(2px 2px 0 #000)}
.gcard .ct{color:#8cf;font-size:10px}
.gcard .fx{color:#cda;font-size:10px;flex:1;overflow:hidden;line-height:1.25;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gcard .costTag{position:absolute;top:-9px;right:-4px;background:#014;border:1px solid #48f;
border-radius:0;padding:0 5px;font-size:11px;color:#8cf;line-height:1.4;font-weight:bold}
.gcard .costTag .miss{color:#f66}
.gcard.poor{filter:grayscale(.7) brightness(.6)}
.gcard.poor .costTag{background:#400;border-color:#f66}
.gcard.sel{border-color:#fff;box-shadow:3px 3px 0 #000,0 0 12px var(--rc,#fd0);transform:translateY(-10px)}
.gcard.danger{border-color:#f80;box-shadow:3px 3px 0 #000,0 0 10px #f80}
.gcard.canStack{outline:2px solid var(--gold);outline-offset:1px;animation:slotGlow 1s ease-in-out infinite}
.gcard .stack{position:absolute;right:2px;bottom:2px;background:#a00;border:1px solid #fd0;
padding:0 5px;font-size:10px;color:#fd0}
.gcard.spawn{animation:spawnIn .35s ease-out}
@keyframes spawnIn{from{transform:translateY(-26px) scale(.7);opacity:0}to{transform:none;opacity:1}}
@media(min-width:768px){.gcard:hover{transform:translateY(-5px);border-color:#fff}
.gcard.sel:hover{transform:translateY(-10px)}}
#hand{display:flex;gap:8px;overflow-x:auto;padding:10px 4px}
@media(min-width:768px){#hand{flex-wrap:wrap;overflow:visible}}
#log{background:#000c;border:3px solid #522;padding:8px;font-size:12px;max-height:110px;
overflow:auto;color:#c99;box-shadow:inset 3px 3px 0 #000}
@media(min-width:768px){#log{max-height:280px}}

/* ===== 血条 ===== */
.hpbar{height:7px;background:#311;border:1px solid #000;margin-top:3px;position:relative}
.hpbar i{display:block;height:100%;background:linear-gradient(#5f5,#292)}
.hpbar.low i{background:linear-gradient(#f66,#a11)}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;font-size:11px}
.chips span{background:#000a;border:1px solid #533;padding:0 4px}
/* ===== v1.5 被动可视化计量条 ===== */
.meters{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.pmeter{display:flex;align-items:center;gap:5px;font-size:10px;line-height:1.4}
.pmeter .pi{font-size:12px;flex:none}
.pmeter .pb{display:flex;gap:2px;flex:none}
.pmeter .pb i{width:13px;height:7px;background:#000;border:1px solid #533;display:block}
.pmeter .pb i.f{background:linear-gradient(#fe5,#c80);box-shadow:0 0 5px #fa06}
.pmeter .pl{color:#daa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeter.mShen .pb i.f{background:linear-gradient(#7ef,#08c);box-shadow:0 0 5px #0cf8}
.pmeter.mYg .pb i.f{background:linear-gradient(#ed9,#753);box-shadow:0 0 5px #b848}
.pmeter.mBs .pb i.f{background:linear-gradient(#8e8,#161);box-shadow:0 0 5px #3f38}
/* ===== v1.5 高塔/时光枢纽面板(旧, 保留兼容类) ===== */
.modG{color:#f80;font-weight:bold;flex:none}
.modCard{background:#180d0d;border:1px solid #a55;padding:1px 5px;color:#fda;cursor:help}
.modCard.tapped{border-color:#fd0;color:#ff6;box-shadow:0 0 6px #fd04}
.modSlot{border:1px dashed #644;padding:1px 5px;color:#977}
.modSlot.free{color:#fd0;border-color:#fa0}
.modSlot.used{color:#fc0;border-color:#fc0}
.modSlot.cd{color:#555}

/* ===== v1.6 高塔/时光枢纽独立面板 ===== */
#modAreas{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
@media(min-width:768px){#modAreas{flex-direction:row;align-items:stretch}
 #modAreas .modArea{flex:1;min-width:0}}
.modArea{background:#000a;border:2px solid #744;padding:6px 8px;font-size:12px;min-width:0}
.modArea.towerOn{border-color:#a86}
.modArea.hubOn{border-color:#997}
.modHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px}
.modTitle{color:#f80;font-weight:bold;font-size:13px;flex:none}
.modSum{color:#c96;font-size:11px}
.modFold{margin-left:auto;flex:none;background:#000;border:1px solid #a55;color:#fda;
 font-size:12px;padding:6px 12px;min-height:44px;cursor:pointer}
.modFold:active{background:#420}
/* 可操作提示: 折叠态下折叠钮金色脉冲(手机端不展开也能看到) */
.modArea.act .modFold{border-color:var(--accent-gold);color:var(--accent-gold);font-weight:bold;
 animation:foldPulse 1.2s ease-in-out infinite}
@keyframes foldPulse{0%,100%{box-shadow:0 0 2px #fd04}50%{box-shadow:0 0 12px #fd0a}}
.modBody{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
.modChip{display:inline-flex;align-items:center;gap:3px;border:1px dashed #644;padding:4px 7px;
 color:#977;background:#140a0a;font-size:11px;line-height:1.4;min-height:28px}
.modChip.free{color:#fd0;border-color:#fa0}
.modChip.used{color:#fda;border-color:#a55;border-style:solid;cursor:help}
.modChip.used b{font-weight:bold;color:#ffd24a}
/* 剩余轮数徽章(占用格) */
.modChip .turnB{font-style:normal;font-size:10px;color:#8cf;background:#001428;
 border:1px solid #369;padding:0 4px;line-height:1.5;white-space:nowrap}
/* 冷却: 红色倒计时徽章, 一眼可辨 */
.modChip.cd{color:#ff8a7a;border-color:#a33;background:#1a0505}
.modChip .cdB{font-style:normal;font-size:11px;font-weight:bold;color:#ff6b5e;
 background:#2a0d0d;border:1px solid var(--accent-red);padding:1px 6px;line-height:1.5;
 white-space:nowrap;box-shadow:0 0 6px #f004}
.modChip.hcard{color:#fda;border-color:#a55;border-style:solid;cursor:help}
/* 横置双信号: ⏳ 旋转90° + 整体变暗30% */
.modChip.tapped{opacity:.7;filter:saturate(.35) brightness(.82);border-color:#fd0}
.modChip .hTap{display:inline-block;transform:rotate(90deg);filter:drop-shadow(0 0 3px #fd08)}
.modAct{min-height:44px}
/* 手机端: 折叠为一行摘要, 点"详情"展开; 电脑端平铺 */
@media(max-width:767.98px){.modArea:not(.open) .modBody{display:none}}
@media(min-width:768px){.modFold{display:none}.modBody{margin-top:4px}}

/* ===== 操作栏 + 流程引导 ===== */
.actionBar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;gap:8px;flex-wrap:wrap;
align-items:center;background:linear-gradient(#200,#000ee);border-top:3px solid #f50;
padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
.actionBar .btn{margin:0;flex:1;max-width:none;padding:12px 4px;font-size:15px;min-width:88px;order:2}
.actionBar .hint{color:#f80;font-size:13px;width:100%;padding-bottom:2px;order:1}
/* 流程主按钮(开始回合/去拿资源/直接放置/完成弃牌): 金色主层级, 置于最右并加宽 */
.actionBar .btn.pri{order:3;flex:1.4;max-width:260px;
 box-shadow:4px 4px 0 #000,0 0 14px #fd08;font-size:16px}
.steps{display:flex;gap:6px;width:100%;margin-bottom:2px;order:0}
.steps .step{flex:1;text-align:center;font-size:12px;color:#866;border:2px solid #533;background:#000a;padding:4px 2px}
.steps .step.on{color:#fd0;border-color:var(--gold);background:#200;box-shadow:0 0 8px #fd04}
.steps .step.done{color:#5f5;border-color:#282}
.steps .step b{display:block;font-size:10px;font-weight:normal}

/* ===== 结算/横幅/特效 ===== */
#overModal{position:fixed;inset:0;background:#000d;z-index:99;display:flex;align-items:center;justify-content:center}
#overModal .card{max-width:380px;text-align:center;font-size:18px}
#standings{text-align:left;font-size:13px;margin:10px 0}
#standings .p{display:flex;justify-content:space-between;border-bottom:1px dashed #533;padding:5px 2px}
.trophy{font-size:64px;animation:bnc 1s ease-in-out infinite;display:inline-block}
@keyframes bnc{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.08)}}
.confetti{position:fixed;top:-40px;z-index:140;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(360deg)}}
.fFloat{position:fixed;z-index:150;font-weight:bold;font-size:18px;pointer-events:none;
text-shadow:2px 2px 0 #000;animation:fUp 1.1s ease-out forwards}
.fDmg{color:#ff5050}.fHeal{color:#5f5}.fArm{color:#ffd24a}.fRes{color:#8cf}.fBrk{color:#fff;font-size:15px}
@keyframes fUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-48px);opacity:0}}
.st.aFlash{animation:afl .6s}
@keyframes afl{0%,100%{filter:none}50%{filter:brightness(2.4) saturate(2)}}
#banner{position:fixed;top:16%;left:50%;transform:translateX(-50%);z-index:120;display:none;
background:#000d;border:3px solid #f50;color:#ffd24a;font-size:26px;font-weight:900;
letter-spacing:5px;padding:12px 30px;box-shadow:5px 5px 0 #000,0 0 24px #f008;white-space:nowrap}
#banner.bIn{animation:bpop .3s ease-out}
@keyframes bpop{from{transform:translateX(-50%) scale(.5);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#banner .be{font-size:30px;margin-right:8px}
#splash{position:fixed;inset:0;z-index:130;background:#000e;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:18px;cursor:pointer}
.spT{font-size:22px;color:#fd0;letter-spacing:6px;text-shadow:3px 3px 0 #600}
.spR{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.totem{border:2px solid #4a4a4a;padding:14px 12px;text-align:center;font-size:14px;background:var(--panel-2);
box-shadow:4px 4px 0 #000;min-width:74px;position:relative;color:#b9b9b9;cursor:pointer}
.totem .te{font-size:44px;filter:drop-shadow(2px 2px 0 #000);opacity:.5;transition:opacity .15s}
.totem.me{border-color:var(--accent-gold);box-shadow:4px 4px 0 #000,0 0 22px var(--accent-gold);transform:scale(1.15)}
.totem .you{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent-gold);color:#000;
font-size:10px;font-weight:bold;padding:0 6px}
.spH{color:#d9a05a;font-size:13px;letter-spacing:3px}
/* ===== 出场种族三态: selected 金框提亮 / normal 灰框降透明 / banned 红✕+灰度 ===== */
.quickBox{margin:4px 0 2px}
.totemGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.totemGrid .totem{min-width:0;min-height:72px;padding:10px 4px;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.totemGrid .totem .te{font-size:30px}
.totemGrid .totem.normal .te{opacity:.45}
.totemGrid .totem.selected{border-color:var(--accent-gold);background:#262014;color:var(--accent-gold);font-weight:bold;
 box-shadow:3px 3px 0 #000,0 0 10px #fd05}
.totemGrid .totem.selected .te{opacity:1;filter:drop-shadow(2px 2px 0 #000) drop-shadow(0 0 4px #fd06)}
.totemGrid .totem.banned{border-color:var(--accent-red);background:#191212;color:#8a6a6a}
.totemGrid .totem.banned .te{opacity:.35;filter:grayscale(.9)}
.totemGrid .totem.banned::after{content:'✕ 已禁用';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 color:#ff5a4a;font-size:14px;font-weight:900;letter-spacing:1px;background:#000000a0;text-shadow:0 0 8px #000}
#reconnBox{margin:8px 0}

/* ===== 战场格位网格 (v1.6): 4列竖长矩形格(宽:高=3:4), 多格牌仅水平拉伸 =====
 * 比例锁死: 格子 aspect-ratio:3/4 恒定 + min-width/min-height:0(防内容撑高轨道);
 * 容器 max-height 兜底, 超出内部滚动, 禁止格子随战场高度被拉成细长条 */
#field{min-height:0;background:none;border:none;padding:0;box-shadow:none}
.fieldGrid{display:grid;gap:6px;background:#0008;border:3px dashed #722;
 padding:8px;box-shadow:inset 3px 3px 0 #0009;
 width:100%;max-width:500px;margin:0 auto;
 max-height:min(76vh,720px);overflow-y:auto;overscroll-behavior:contain}
/* 电脑端适中宽度; 手机端容器 ≥90vw, 收紧内边距 */
@media(max-width:767.98px){.fieldGrid{width:90vw;max-width:none;padding:6px;gap:4px;max-height:58vh}}
.fieldGrid.ro{opacity:.92}
.cell{position:relative;aspect-ratio:3/4;border:2px dashed #544;min-width:0;min-height:0;
 background:#0006;display:flex;align-items:center;justify-content:center;
 color:#644;font-size:clamp(10px,2.4vw,12px);border-radius:0}
.cell.free.openCell{border-color:#6f6;color:#8f8;cursor:pointer;
 animation:cellOpen 1s ease-in-out infinite}
@keyframes cellOpen{0%,100%{box-shadow:0 0 4px #5f54,inset 0 0 4px #5f33}
 50%{box-shadow:0 0 14px #5f5,inset 0 0 9px #5f56}}
/* 叠放备用区: 不计入放置格配额的画布空位, 仅叠放牌扩散时占用 */
.cell.free.reserved{opacity:.32;border-color:#433130}
.cell.free.reserved:hover{opacity:.5}
/* 底座占格卡: 横向连续占格合并为一张横跨卡片(高度恒为1行) */
.cellB{border:2px solid var(--rc,#a33);background:linear-gradient(160deg,#262626,#111);
 box-shadow:3px 3px 0 #000c, inset 0 2px 0 #ffffff18;padding:4px;font-size:clamp(9px,2.2vw,11px);
 flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px;
 cursor:pointer;transition:transform .1s;overflow:visible;min-width:0;min-height:0}
.cellB .bnm{font-weight:bold;color:var(--rc,#fd0);font-size:clamp(10px,2.7vw,13px);line-height:1.15;
 overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.cellB .bart{font-size:clamp(16px,5vw,24px);line-height:1.2;filter:drop-shadow(2px 2px 0 #000);align-self:center}
.cellB .bct{color:#8cf;font-size:clamp(9px,2.2vw,10px)}
.cellB .bcap{color:#cda;font-size:clamp(9px,2.1vw,10px)}
@media(min-width:768px){.cellB:hover{transform:translateY(-4px);border-color:#fff}}
.cellB.canStack{outline:2px solid var(--gold);outline-offset:1px;
 animation:slotGlow 1s ease-in-out infinite}
.cellB.spawn{animation:spawnIn .35s ease-out}
/* 叠放牌缩略: 画在其占用的相邻格上, 内容为格子的65%, 半透明 */
.cellStk{border:2px solid #fa0;background:rgba(20,8,0,.82);cursor:default;min-width:0;min-height:0;
 flex-direction:column;gap:0}
.cellStk .stkBox{width:65%;height:66%;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:1px;border:1px dashed #fa066}
.cellStk .stkArt{font-size:clamp(14px,3.6vw,20px);filter:drop-shadow(1px 1px 0 #000);opacity:.92}
.cellStk .stkNm{font-size:clamp(8px,2vw,10px);color:#fd0;max-width:94%;overflow:hidden;
 white-space:nowrap;text-overflow:ellipsis}
.stkX{position:absolute;top:1px;right:1px;background:#a00;border:1px solid #fd0;
 color:#fd0;font-size:10px;line-height:1.4;padding:0 4px;min-height:24px;cursor:pointer}
.stkX:active{background:#500}
/* 层数角标(×N, 点击展开叠放列表) + 底座拆解按钮 */
.stackBadge{position:absolute;top:-9px;right:-4px;background:#a00;border:1px solid #fd0;
 color:#fd0;font-size:10px;font-weight:bold;padding:2px 6px;min-height:24px;line-height:1.4;
 box-shadow:2px 2px 0 #000;cursor:pointer;z-index:3}
.stackBadge:active{background:#500}
/* 叠放列表展开层: 覆盖底座格, 逐张列出叠放牌(可单独拆解) */
.stkList{position:absolute;inset:0;z-index:6;background:#000ee6;border:2px solid #fa0;
 display:flex;flex-direction:column;gap:2px;padding:3px;overflow:auto;cursor:pointer}
.stkRow{display:flex;align-items:center;justify-content:space-between;gap:2px;
 font-size:10px;color:#fda;background:#180d0dcc;border:1px solid #a55;
 padding:2px 3px;min-height:26px}
.stkRow .stkRowNm{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.salvB{position:absolute;bottom:2px;right:2px;background:#000;border:1px solid #644;
 color:#c99;font-size:10px;line-height:1.5;padding:0 4px;min-height:24px;cursor:pointer}
.salvB:active{background:#420}
.salvB[disabled]{opacity:.4;cursor:not-allowed}
/* ←v1.7 重新部署(游侠/飞行器): 🚚移按钮置左下与拆解错开; 移动中的源卡绿色虚线描边 */
.salvB.moveB{right:auto;left:2px;border-color:#465;color:#8c9}
.salvB.moveB:active{background:#040}
.cellB.mvSrc{outline:2px dashed #6f6;outline-offset:-2px}
/* 悬停高亮: 叠放牌将占用的相邻空闲格 */
.cell.hl{border-color:#5f5;box-shadow:0 0 6px #5f55,inset 0 0 6px #5f54;color:#5f5;
 animation:hlPulse 1s ease-in-out infinite}
@keyframes hlPulse{0%,100%{box-shadow:0 0 5px #5f55,inset 0 0 5px #5f44}
 50%{box-shadow:0 0 14px #5f5,inset 0 0 9px #5f56}}

/* ===== 独立页面容器（游戏规则 / 卡牌图鉴）===== */
.page{position:fixed;inset:0;z-index:40;overflow-y:auto;overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
 background:radial-gradient(ellipse at 50% 12%,#2c0707,#170303 62%,#000)}
.pageHead{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
 padding:10px 12px;background:#120203f5;border-bottom:3px solid #f50;box-shadow:0 3px 10px #000c}
.pageHead .backB{flex:none;width:auto;min-width:104px;max-width:none;margin:0;
 padding:10px 14px;font-size:14px}
.pageTtl{font-size:20px;font-weight:900;color:var(--gold);letter-spacing:4px;
 text-shadow:2px 2px 0 #000,0 0 12px #f006;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pageBody{max-width:1100px;margin:0 auto;padding:12px 12px 80px}

/* ===== 规则页排版 ===== */
.rulesBody h3{color:var(--gold);font-size:19px;letter-spacing:2px;margin:20px 0 8px;
 padding:7px 10px;background:#200;border-left:5px solid #f50;box-shadow:2px 2px 0 #000}
.rulesBody h4{color:#fa0;font-size:15px;margin:14px 0 4px;letter-spacing:1px}
.rulesBody p{font-size:14px;line-height:1.8;color:#e8d9c0;margin:6px 0}
.rulesBody ul,.rulesBody ol{margin:6px 0;padding-left:22px;
 font-size:14px;line-height:1.8;color:#e8d9c0}
.rulesBody li{margin:3px 0}
.rulesBody b{color:#fd0}
.rulesBody .note{background:#1a0d05;border:2px dashed #a55;color:#dcb;
 padding:10px 12px;font-size:13px;line-height:1.7;margin:10px 0}
.rulesBody .verTag{display:inline-block;background:#a00;border:1px solid #f55;color:#ffe;
 font-size:11px;font-weight:normal;letter-spacing:1px;padding:2px 8px;margin-left:8px;vertical-align:2px}
.rulesBody .qa{border-bottom:1px dashed #533;padding:8px 2px;font-size:13px;line-height:1.65}
.rulesBody .qa .q{color:#fd0;font-weight:bold}
.rulesBody .qa .a{color:#cda}

/* ===== 卡牌图鉴 ===== */
.galBar{background:#000a;border:3px solid #722;padding:10px;margin-bottom:12px;
 box-shadow:inset 2px 2px 0 #000}
.galBar input{margin:0 0 4px;text-align:left}
.galRow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.chip{background:#200;border:2px solid #933;color:#fd0;font-size:13px;font-weight:bold;
 padding:8px 11px;min-height:44px;cursor:pointer;box-shadow:2px 2px 0 #000}
.chip:active{transform:translate(1px,1px)}
.chip.on{background:#a00;border-color:var(--gold);box-shadow:0 0 8px #fd05,2px 2px 0 #000;color:#ffe}
.galCount{color:#c96;font-size:12px;margin-top:6px}
#galleryGrid{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:600px){#galleryGrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){#galleryGrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){#galleryGrid{grid-template-columns:repeat(4,1fr)}}
.galSec{grid-column:1/-1;color:var(--rc,var(--gold));font-weight:bold;font-size:16px;
 letter-spacing:2px;border-left:5px solid var(--rc,var(--gold));background:#200;
 padding:6px 10px;margin-top:8px;box-shadow:2px 2px 0 #000}
.galCard{background:linear-gradient(160deg,#232323,#101010);border:3px solid var(--rc,#a33);
 padding:9px 10px;box-shadow:3px 3px 0 #000c,inset 0 2px 0 #ffffff15;
 display:flex;flex-direction:column;gap:4px;min-width:0}
.galCard .gh{display:flex;align-items:center;gap:7px}
.galCard .gart{font-size:24px;line-height:1;filter:drop-shadow(2px 2px 0 #000);flex:none}
.galCard .gnm{font-weight:bold;color:var(--rc,#fd0);font-size:15px;line-height:1.25;flex:1;min-width:0}
.galCard .gtags{display:flex;gap:4px;flex-wrap:wrap}
.gtag{font-size:11px;border:1px solid #644;background:#000a;color:#daa;padding:1px 6px;line-height:1.55}
.gtag.rc{color:var(--rc,#fa0);border-color:var(--rc,#644)}
.gtag.ty{color:#fd0;border-color:#a80}
.gtag.cost{color:#8cf;border-color:#48f}
.galCard .gsec{color:#f80;font-size:11px;font-weight:bold;margin-top:2px}
.galCard .gfx{color:#cda;font-size:12px;line-height:1.55}
.galCard .gno{color:#887;font-size:12px}
.galCard.t-floor{background-image:repeating-linear-gradient(0deg,transparent 0 12px,#0006 12px 14px),
 repeating-linear-gradient(90deg,transparent 0 18px,#0006 18px 20px),linear-gradient(160deg,#3a332a,#191512)}

/* ===== 新手引导 ===== */
/* 独立固定定位层: 不挂游戏 DOM, renderGame 全量 innerHTML 重建免疫; z 96 < overModal 99/tip 100
 * 整层 pointer-events:none 放行点击(否则教程局整个界面不可点); 区外拦截由 .tutBlock 四条拦截条(auto)承担 */
#tutorialOverlay{position:fixed;inset:0;z-index:96;pointer-events:none}
/* 聚光灯: 巨大 box-shadow 形成镂空遮罩; 位置/尺寸全由 JS 写 transform/width/height(零 reflow 链) */
#tutorialOverlay .tutSpot{position:absolute;left:0;top:0;display:none;pointer-events:none;
 border:2px solid var(--accent-gold);border-radius:4px;
 box-shadow:0 0 0 9999px rgba(0,0,0,.82),0 0 18px #fd08,inset 0 0 10px #fd03;
 transition:transform .18s ease,width .18s ease,height .18s ease}
/* 4 块透明拦截条围合高亮目标: 区外点击拦截(pointer-events), 视觉遮罩全部由聚光灯承担 */
#tutorialOverlay .tutBlock{position:absolute;left:0;top:0;display:none;pointer-events:auto}
/* 提示卡: 目标下方优先, 放不下换上方, 兕底视口居中 */
#tutorialOverlay .tutCard{position:absolute;left:0;top:0;width:min(340px,88vw);pointer-events:auto;z-index:2;
 background:linear-gradient(#202020,#141414);border:3px solid var(--accent-gold);
 box-shadow:4px 4px 0 #000,0 0 14px #fd05;padding:10px 14px;transition:transform .18s ease}
#tutorialOverlay .tutCard .tutTtl{color:var(--accent-gold);font-weight:900;letter-spacing:3px;font-size:13px;margin-bottom:4px}
#tutorialOverlay .tutCard .tutTxt{font-size:14px;line-height:1.7;color:#ffe}
/* 弹层: 教程选择 / 种族选择 / 完成层 */
.tutModal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 background:#000a;pointer-events:auto;padding:12px}
.tutModal .tutPickCard{max-width:380px;width:100%}
.tutTtl{color:var(--accent-gold);font-weight:900;letter-spacing:2px;font-size:18px;margin-bottom:8px;text-shadow:2px 2px 0 #000}
.tutSub{color:#c9c9c9;font-size:13px;margin-bottom:10px}
.tutLv{display:flex;flex-direction:column;gap:1px;border-left:4px solid var(--accent-gold);background:#000a;
 padding:7px 10px;margin:7px 0;font-size:13px}
.tutLv b{color:#fd0}
.tutLv span{color:#b9a08a;font-size:12px}
/* 完成层: 星星标题复用结算层弹跳动画 */
.tutDoneCard{text-align:center;max-width:360px}
.tutDoneTtl{font-size:26px;font-weight:900;color:var(--accent-gold);letter-spacing:4px;
 text-shadow:3px 3px 0 #600,0 0 16px #fd06;animation:bnc 1s ease-in-out infinite}
.tutDoneSub{color:#e8d9c0;font-size:14px;line-height:1.7;margin:12px 0}
.tutDoneBtns{display:flex;flex-direction:column;gap:8px;margin-top:10px}
/* 底部引导条: 仿 .actionBar 固定底部, z 97 盖遮罩保证文案常显可点; 原生操作栏抬高让位 */
#tutorialBar{position:fixed;left:0;right:0;bottom:0;z-index:97;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
 background:linear-gradient(#200,#000ee);border-top:3px solid var(--accent-gold);
 padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 12px #000c}
#tutorialBar .tutProg{flex:none;color:#000;background:var(--accent-gold);font-weight:bold;font-size:12px;
 padding:3px 8px;box-shadow:2px 2px 0 #000}
#tutorialBar .tutMsg{flex:1;min-width:0;color:#ffe;font-size:13px;line-height:1.5;text-shadow:1px 1px 0 #000}
#tutorialBar .btn{flex:none;width:auto;min-width:96px;margin:0;min-height:40px;padding:6px 12px;font-size:13px}
body.tutOn .actionBar{bottom:58px}
@media(min-width:768px){body.tutOn .actionBar{bottom:52px}}
/* 快速开局锁定态(未完成教程) */
.btn.locked{opacity:.45;filter:grayscale(.6);cursor:not-allowed}
.btn.locked:active{transform:none;box-shadow:4px 4px 0 #000}

/* ===== 录像回放 ===== */
/* 菜单/回放页共用的 ID 输入行(复用 .galBar/.chip 语言) */
.rpIdBar{margin:10px 0 2px}
.rpIdBar .galRow{margin:0;align-items:stretch}
.rpIdBar input{margin:0;flex:1;min-width:0}
/* 列表条目 */
#replayList{display:flex;flex-direction:column;gap:8px}
.rpItem{display:flex;align-items:center;gap:10px;background:linear-gradient(#1f1f1f,#161616);
 border:2px solid var(--panel-line);box-shadow:4px 4px 0 #000c;padding:10px 12px}
.rpItem .rpInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rpItem .rpT{color:#d9a05a;font-size:13px;font-weight:bold}
.rpItem .rpPlayers{display:flex;gap:10px;flex-wrap:wrap;font-size:13px}
.rpItem .rpP{white-space:nowrap}
.rpItem .rpWatch{flex:none;width:auto;min-width:96px;margin:0}
.rpEmpty{color:#c96;text-align:center;padding:18px;font-size:14px}
/* 播放器 chrome */
#replayViewer{display:flex;flex-direction:column;gap:8px;padding-bottom:120px}
#replayHead{display:flex;flex-direction:column;gap:4px;background:#000a;border:3px solid #722;
 padding:10px 12px;box-shadow:inset 2px 2px 0 #000}
#replayHead .rpTitle{color:var(--gold);font-size:17px;letter-spacing:2px}
#replayHead .rpMeta{color:#c9c9c9;font-size:12px;line-height:1.6}
#replayHead .rpRound{color:var(--accent-gold);font-size:14px;font-weight:bold}
/* 双方状态条 + 玩家切换 chips */
#replayStats .rpChips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
#replayStats .rpBars{display:flex;flex-direction:column;gap:6px}
.rpStat{background:#0008;border:2px solid #3c3c3c;padding:7px 9px}
.rpStat.me{border-color:var(--accent-gold);box-shadow:0 0 8px #fd03}
.rpSHead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px;margin-bottom:4px}
.rpSHead b{font-size:14px}
.rpSHead .rpAct{color:#7de07d;font-style:normal;font-size:11px;font-weight:bold}
.rpSHead .rpRace{color:#8a8a8a;font-style:normal;font-size:11px;margin-left:auto}
.rpBar{height:10px;background:#2a0d0d;border:1px solid #533;position:relative;overflow:hidden}
.rpBar.hp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#e03a2f,#7a1010);transition:width .25s}
.rpNums{font-size:12px;color:#cda;margin-top:4px;letter-spacing:.5px}
/* 战场复用 .fieldGrid/.cell 体系(vp 只读), 容器不限高 */
#replayField{min-height:120px;background:none;border:none;padding:0;box-shadow:none}
#replayField .fieldGrid{max-height:none}
/* 固定控制条: 盖在 .page(z40) 之上 */
#replayCtrl{position:fixed;left:0;right:0;bottom:0;z-index:46;display:flex;flex-direction:column;gap:8px;
 background:linear-gradient(#200,#000ee);border-top:3px solid #f50;
 padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
#replayCtrl input[type=range]{width:100%;margin:0;padding:0;height:26px;border:none;background:none;
 box-shadow:none;accent-color:var(--accent-gold)}
#replayCtrl .rpBtns{display:flex;gap:6px;flex-wrap:wrap}
#replayCtrl .chip{flex:1;min-width:74px;min-height:42px}