/* UI additions for tutorial/settings and battle status */
.settings-page, .tutorial-page { min-height: 100vh; }
.settings-content, .tutorial-content { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 72px; }
.settings-section { margin-bottom: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: rgba(20,24,35,.72); }
.settings-section h3 { margin: 0 0 12px; color: var(--gold); font-size: 15px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; border-top:1px solid rgba(255,255,255,.06); color:var(--text); cursor:pointer; }
.settings-row span { display:grid; gap:4px; }
.settings-row small { color:var(--text-dim); font-size:12px; }
.settings-row input { width:18px; height:18px; accent-color:var(--gold); }
.settings-action, .tutorial-start { width:100%; min-height:44px; margin-top:10px; padding:10px 14px; border:1px solid var(--border); border-radius:6px; color:var(--text); background:rgba(255,255,255,.04); cursor:pointer; text-align:left; }
.settings-action:hover, .tutorial-start:hover { border-color:var(--gold); background:rgba(212,175,55,.09); }
.settings-action.danger { color:#fca5a5; }
.settings-note { color:var(--text-dim); font-size:12px; line-height:1.6; }
.tutorial-step { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.tutorial-number { flex:0 0 30px; height:30px; border:1px solid var(--gold-dim); border-radius:50%; color:var(--gold); line-height:30px; text-align:center; }
.tutorial-step h3 { margin:2px 0 6px; color:var(--text); font-size:16px; }
.tutorial-step p { margin:0; color:var(--text-dim); line-height:1.7; font-size:13px; }
.tutorial-start { margin-top:24px; color:#151515; background:var(--gold); border-color:var(--gold); text-align:center; font-weight:700; }
.tutorial-start:hover { color:#151515; background:#f2cf68; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
@media (max-width:600px) { .settings-content, .tutorial-content { width:calc(100% - 24px); padding-top:16px; } .settings-section { padding:14px; } .sub-page-header { padding-left:12px; padding-right:12px; } .tutorial-step { gap:12px; } }
.battle-status-badge { display:inline-flex; align-items:center; max-width:180px; padding:4px 8px; border:1px solid rgba(234,179,8,.45); border-radius:4px; color:#fde68a; background:rgba(120,53,15,.28); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ========== 联机大厅 v2（page-online 新布局） ========== */
.lobby-v2 { gap: 14px; }

/* 快速开始区 */
.lobby-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.lobby-quick-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.lobby-quick-card:hover {
    border-color: var(--border-gold, rgba(var(--brand-rgb),.4));
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.lqc-icon {
    font-size: 26px;
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--brand-rgb),.10);
    border: 1px solid rgba(var(--brand-rgb),.22);
    border-radius: 10px;
}
.lqc-body { flex: 1; min-width: 0; }
.lqc-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.lqc-sub { font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.lqc-input {
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-family: monospace;
    letter-spacing: 1px;
}
.lqc-input:focus { outline: none; border-color: var(--gold); }
.lqc-btn { flex: 0 0 auto; padding: 8px 16px; font-size: 13px; }

/* 创建成功后房间号展示条（替代旧的内嵌在 create-room-area 的版本） */
.lobby-v2 .room-code-display {
    grid-column: 1 / -1;
    display: none; /* JS 控制 */
    margin-top: -2px;
    justify-content: flex-start;
    animation: lobby-fade-in .25s ease;
}
.lobby-v2 .room-code-display.show { display: inline-flex; }
.lobby-v2 .room-code-value {
    font-size: 20px;
    padding: 2px 8px;
    background: rgba(212,175,55,.14);
    border-radius: 4px;
}
.lobby-v2 .room-code-label { font-size: 11px; }

/* 房间列区 */
.lobby-rooms {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lobby-rooms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.lobby-rooms-head .section-title { margin-bottom: 0; font-size: 14px; }
.lobby-rooms-count {
    display: inline-block;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 400;
    margin-left: 6px;
    background: rgba(255,255,255,.05);
    padding: 1px 8px;
    border-radius: 10px;
    vertical-align: middle;
}
.lobby-rooms-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lobby-search {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    padding: 7px 10px;
    background: rgba(0,0,0,.28);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12.5px;
}
.lobby-search:focus { outline: none; border-color: var(--gold); }
.lobby-v2 .lobby-deck-hint {
    padding: 0;
    border: none;
    margin-top: 2px;
}

/* 房间条目增强 */
.lobby-v2 .room-item {
    transition: border-color .12s, background .12s;
}
.lobby-v2 .room-item:hover {
    border-color: var(--border-gold, rgba(var(--brand-rgb),.4));
    background: rgba(212,175,55,.05);
}
.lobby-v2 .room-item.disabled {
    opacity: .6;
}
.room-empty-icon { font-size: 28px; display: block; margin-bottom: 6px; opacity: .6; }

/* 动画 */
@keyframes lobby-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 移动端 */
@media (max-width: 640px) {
    .lobby-quick { grid-template-columns: 1fr; }
    .lobby-search { max-width: 100%; }
    .lobby-rooms-tools { width: 100%; }
}

/* ========== 横屏一键进入（rotate overlay v2） ========== */
/* 放行后压过 portrait 遮罩显示规则：点击进入后即使视口仍竖向也直接进游戏 */
body.battle-page-active.rotate-dismissed .rotate-overlay { display: none !important; }
body:not(.battle-page-active) .rotate-overlay,
body.ui-mode-desktop .rotate-overlay { display: none !important; }

/* 进入游戏后的竖视口兜底重试入口：仅「触屏+竖屏+已放行」显示 */
#rotate-retry {
    display: none;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    z-index: 4999; /* 低于遮罩(5000)，高于决斗页内容 */
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(var(--brand-rgb),.35);
    background: rgba(10,10,18,.55);
    color: rgba(var(--brand-bright-rgb),.85);
    align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
#rotate-retry svg { width: 19px; height: 19px; }
#rotate-retry:active { background: rgba(var(--brand-rgb),.25); }
@media (orientation: portrait) and (pointer: coarse) {
    body.battle-page-active.rotate-dismissed #rotate-retry { display: flex; }
}

/* ========== 好友系统（P3a 独立一级页 + P3b 聊天） ========== */
/* 底部导航红点 */
.nav-item { position: relative; }
.nav-badge {
    position: absolute; top: 4px; right: 12px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #e53e3e; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.friends-page-body { width: min(560px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 72px; }
#friends-chat { flex-direction: column; height: calc(100dvh - 200px); min-height: 380px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; border-bottom: 1px solid var(--border, rgba(var(--brand-rgb),.25)); flex: none; }
.chat-back { background: none; border: none; color: var(--gold, var(--brand)); font-size: 14px; cursor: pointer; padding: 4px 6px; }
.chat-peer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-peer b { color: var(--text, #e0d8c8); font-size: 15px; }
.chat-peer small { color: var(--text-dim, #8a8070); font-size: 11px; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 2px; }
.chat-loading { text-align: center; color: var(--text-dim, #8a8070); font-size: 12.5px; padding: 24px 0; }
.chat-msg { display: flex; max-width: 82%; }
.chat-msg.mine { align-self: flex-end; }
.chat-msg.theirs { align-self: flex-start; }
.chat-bubble {
    padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; word-break: break-word;
    background: rgba(var(--brand-rgb),.1); border: 1px solid rgba(var(--brand-rgb),.25); color: var(--text, #e0d8c8);
}
.chat-msg.mine .chat-bubble { background: rgba(var(--brand-rgb),.22); border-color: rgba(var(--brand-rgb),.45); }
.chat-deck-card {
    padding: 10px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 170px;
    background: rgba(125,208,160,.08); border: 1px solid rgba(125,208,160,.4);
}
.chat-msg.mine .chat-deck-card { background: rgba(125,208,160,.14); }
.chat-deck-card .cd-title { color: var(--text, #e0d8c8); font-size: 13.5px; font-weight: 700; }
.chat-deck-card .cd-meta { color: var(--text-dim, #8a8070); font-size: 11.5px; margin-bottom: 2px; }
.chat-input-row { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border, rgba(var(--brand-rgb),.25)); flex: none; align-items: flex-end; }
.chat-attach {
    flex: 0 0 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border, rgba(var(--brand-rgb),.3));
    background: rgba(var(--brand-rgb),.08); font-size: 17px; cursor: pointer;
}
.chat-attach:hover { background: rgba(var(--brand-rgb),.2); }
/* 微信式输入框：16px 字号防 iOS 聚焦自动缩放；textarea 自动增高 1~4 行 */
.chat-input {
    flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
    background: rgba(0,0,0,.3); border: 1px solid var(--border, rgba(var(--brand-rgb),.3));
    color: var(--text, #e0d8c8); font-size: 16px; line-height: 1.4;
    font-family: inherit; resize: none; box-sizing: border-box;
    height: 42px; min-height: 42px; max-height: 96px; overflow-y: auto;
}
.chat-input:focus { outline: none; border-color: var(--gold, var(--brand)); }
.chat-send {
    flex: 0 0 64px; height: 42px; border: none; border-radius: 10px;
    background: var(--gold, var(--brand)); color: #151515; font-size: 15px; font-weight: 700; cursor: pointer;
}
.chat-send:hover { background: #f2cf68; }
/* 好友行未读小红标 */
.friend-unread {
    display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
    border-radius: 8px; background: #e53e3e; color: #fff;
    font-size: 10px; font-weight: 700; font-style: normal; line-height: 16px; text-align: center; vertical-align: 1px;
}
/* 我的好友码展示行 */
.my-code-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 12px; margin-bottom: 10px; border-radius: 10px;
    background: rgba(var(--brand-rgb),.07); border: 1px dashed rgba(var(--brand-rgb),.35);
    color: var(--text-dim, #8a8070); font-size: 12.5px;
}
.my-code-row b { color: var(--gold, var(--brand)); font-size: 14px; letter-spacing: 1px; }
.my-code-row .friend-btn { margin-left: auto; }

/* 好友页保留原列表样式（friend-item 等沿用 lobby 时代的类名） */
.lobby-friends-head { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.lobby-friends-tools { display: flex; gap: 8px; }
.lobby-friends-tools .lobby-search { flex: 1; min-width: 0; }

.friend-list { display: flex; flex-direction: column; gap: 8px; }
.friend-item {
    display: flex; align-items: center; gap: 11px;
    background: var(--bg-card, rgba(20,24,35,.72)); border: 1px solid var(--border, rgba(var(--brand-rgb),.22));
    border-radius: 10px; padding: 10px 12px;
}
.friend-item.request { border-color: rgba(var(--brand-bright-rgb),.45); }
.friend-item.request.sent { border-style: dashed; opacity: .85; }
.friend-item.share { border-color: rgba(125,208,160,.4); }
.friend-avatar {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(var(--brand-rgb),.14); border: 1px solid var(--border, rgba(var(--brand-rgb),.3));
    color: var(--gold-bright, var(--brand-bright)); font-size: 16px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.friend-avatar.online { border-color: #7dd0a0; box-shadow: 0 0 8px rgba(125,208,160,.35); }
.friend-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.friend-info b { color: var(--text, #e0d8c8); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-info small { color: var(--text-dim, #8a8070); font-size: 11.5px; }
.friend-online { font-style: normal; }
.friend-online.on { color: #7dd0a0; }
.friend-online.off { color: #6b6357; }
.friend-actions { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.friend-btn {
    padding: 6px 11px; border: 1px solid rgba(var(--brand-rgb),.4); border-radius: 7px;
    background: rgba(212,175,55,.1); color: var(--gold, var(--brand)); font-size: 12px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.friend-btn:hover { background: rgba(212,175,55,.22); }
.friend-btn:disabled { opacity: .38; cursor: not-allowed; }
.friend-btn.ghost { background: transparent; border-color: rgba(var(--brand-rgb),.25); color: var(--text-dim, #8a8070); }
.friend-btn.ghost:hover { color: var(--gold, var(--brand)); border-color: rgba(var(--brand-rgb),.5); }
.friend-btn.ghost.danger:hover { color: #ff9b9b; border-color: rgba(229,62,62,.5); }
.friend-empty {
    text-align: center; padding: 26px 0; color: var(--text-dim, #8a8070); font-size: 13px; line-height: 2;
    background: rgba(0,0,0,.2); border: 1px dashed var(--border, rgba(var(--brand-rgb),.25)); border-radius: 10px;
}
.friend-empty small { font-size: 11.5px; color: #5c5548; }
.friend-login-btn {
    margin-top: 8px; padding: 8px 22px; border: none; border-radius: 8px;
    background: var(--gold, var(--brand)); color: #151515; font-size: 13.5px; font-weight: 700; cursor: pointer;
}

/* ========== 好友页焕新：名片卡 / 氛围行 / 分组 / 头像渐变 / 未读呼吸 / 波纹装饰 ========== */
.my-code-row { display: block; }
.my-code-row > .friend-btn { display: block; margin: 8px 0 0 auto; }
.idcard {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 12px;
    background:
        radial-gradient(120% 160% at 90% -30%, rgba(var(--brand-rgb),.18), transparent 55%),
        rgba(var(--brand-rgb),.08);
    border: 1px solid rgba(var(--brand-rgb),.4);
    box-shadow: inset 0 0 24px rgba(var(--brand-rgb),.06);
}
.idcard-main { flex: 1; min-width: 0; }
.idcard-label { font-size: 10.5px; letter-spacing: 2px; color: var(--text-dim, #8a8070); margin-bottom: 5px; }
.idcard-code {
    display: inline-block; border: none; background: transparent; padding: 0; cursor: pointer;
    font-family: Consolas, 'Courier New', monospace; font-size: 24px; font-weight: 800; letter-spacing: 3px;
    color: var(--gold-bright, var(--brand-bright)); text-shadow: 0 0 14px rgba(var(--brand-rgb),.45);
    transition: filter .15s; -webkit-tap-highlight-color: transparent;
}
.idcard-code:hover { filter: brightness(1.15); }
.idcard-code.copied { animation: idcardCopied .5s ease; }
@keyframes idcardCopied { 0%{ transform: scale(1); } 40%{ transform: scale(1.06); color:#9fe6b8; text-shadow:0 0 16px rgba(125,208,160,.6);} 100%{ transform: scale(1);} }
.idcard-sub { font-size: 11px; color: var(--text-dim, #8a8070); margin-top: 5px; }
.idcard-qr {
    flex: 0 0 82px; width: 82px; height: 82px; border-radius: 10px; overflow: hidden;
    background: #f5efe0; border: 1px solid rgba(var(--brand-rgb),.5);
    display: flex; align-items: center; justify-content: center; position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.idcard-qr img, .idcard-qr canvas { display: block; width: 74px !important; height: 74px !important; }
.idcard-qr .iq-tip {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 10.5px; color: var(--text-dim, #8a8070); line-height: 1.5;
}
.idcard-qr.ready .iq-tip { display: none; }

/* 在线氛围行 */
.friend-ambient {
    display: flex; align-items: center; gap: 7px;
    margin: 2px 0 4px; padding: 0 2px;
    font-size: 11.5px; color: var(--text-dim, #8a8070); letter-spacing: 1px;
}
.friend-ambient .fa-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b6357; }
.friend-ambient .fa-dot.on { background: #7dd0a0; box-shadow: 0 0 8px rgba(125,208,160,.7); }

/* 分组小标题 */
.friend-group-title {
    margin: 10px 0 6px; font-size: 10.5px; letter-spacing: 2px;
    color: #6f675a; border-bottom: 1px dashed rgba(var(--brand-rgb),.18); padding-bottom: 4px;
}

/* 头像渐变 8 档（按昵称哈希取色，千人千面） */
.friend-avatar.avc0 { background: linear-gradient(135deg,#2b6cb0,#4f8fd6); color:#eaf2ff; }
.friend-avatar.avc1 { background: linear-gradient(135deg,#2f855a,#54b98a); color:#eafff3; }
.friend-avatar.avc2 { background: linear-gradient(135deg,#6b46c1,#9f7aea); color:#f3ecff; }
.friend-avatar.avc3 { background: linear-gradient(135deg,#b83280,#e569a8); color:#ffeef6; }
.friend-avatar.avc4 { background: linear-gradient(135deg,#2c7a7b,#4fd1c5); color:#e6fffc; }
.friend-avatar.avc5 { background: linear-gradient(135deg,#c05621,#f6ad55); color:#fff4e6; }
.friend-avatar.avc6 { background: linear-gradient(135deg,#4a5568,#a0aec0); color:#f0f4f8; }
.friend-avatar.avc7 { background: linear-gradient(135deg,#9b2c2c,#fc8181); color:#ffecec; }
.friend-item.is-off { opacity: .62; }
.friend-item.is-off .friend-avatar { filter: grayscale(.6); }

/* 未读好友行：金色描边 + 呼吸微光 */
.friend-item.has-unread {
    border-color: rgba(212,175,55,.55);
    animation: friendBreath 2.2s ease-in-out infinite;
}
@keyframes friendBreath {
    0%,100% { box-shadow: 0 0 0 rgba(212,175,55,0); }
    50% { box-shadow: 0 0 14px rgba(212,175,55,.28); }
}

/* 最近消息预览 */
.friend-preview {
    font-size: 11.5px; color: #a89c86; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.friend-item.has-unread .friend-preview { color: var(--gold, #d4af37); }
.friend-time { font-style: normal; color: #6f675a; }

/* 空状态三步引导 */
.friend-empty.guide { padding: 30px 18px 26px; }
.friend-empty .fe-emoji { font-size: 34px; margin-bottom: 8px; }
.friend-empty .fe-title { font-size: 14px; color: var(--text, #e0d8c8); font-weight: 700; letter-spacing: 2px; margin-bottom: 12px; }
.friend-empty .fe-steps { display: flex; flex-direction: column; gap: 8px; max-width: 330px; margin: 0 auto; text-align: left; }
.friend-empty .fe-steps div { font-size: 12px; color: var(--text-dim, #8a8070); line-height: 1.8; }
.friend-empty .fe-steps i {
    font-style: normal; display: inline-block; width: 18px; height: 18px; line-height: 18px; margin-right: 8px;
    border-radius: 50%; background: rgba(var(--brand-rgb),.15); border: 1px solid rgba(var(--brand-rgb),.4);
    color: var(--gold-bright, var(--brand-bright)); font-size: 11px; font-weight: 700; text-align: center;
}
.friend-empty .fe-steps b { color: var(--gold, #d4af37); }

/* 右上角雷达波纹装饰（连接主题，低调） */
#page-friends .sub-page-container { position: relative; overflow: hidden; }
#page-friends .sub-page-container::before {
    content: ''; position: absolute; top: -70px; right: -70px; width: 240px; height: 240px;
    border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(var(--brand-rgb),.12) 0%, transparent 60%);
}
#page-friends .sub-page-container::after {
    content: ''; position: absolute; top: -70px; right: -70px; width: 240px; height: 240px;
    border-radius: 50%; pointer-events: none; z-index: 0;
    border: 1px solid rgba(var(--brand-rgb),.25);
    animation: friendRadar 3.2s ease-out infinite;
}
@keyframes friendRadar {
    0% { transform: scale(.45); opacity: .8; }
    100% { transform: scale(1.15); opacity: 0; }
}
#page-friends .friends-page-body { position: relative; z-index: 1; }

/* ========== 卡组编辑器 · 移动端 Tab 模式（<768px；桌面双栏不变） ========== */

/* Tab 栏本体：桌面隐藏 */
.dwb-tabs { display: none; }
#page-deck-editor .dwb-tab {
    flex: 1; padding: 11px 0; border: none; background: transparent;
    color: var(--text-dim, #8a8070); font-size: 13.5px; letter-spacing: 1px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border-top: 2px solid transparent;
    -webkit-tap-highlight-color: transparent;
}
#page-deck-editor .dwb-tab b { font-size: 12px; font-weight: 700; color: var(--gold-bright, var(--brand-bright)); }
#page-deck-editor .dwb-tab.active { color: var(--gold, var(--brand)); border-top-color: var(--gold, var(--brand)); background: rgba(var(--brand-rgb),.06); font-weight: 700; }

@media (max-width: 767px) {
    /* 覆盖内联 1000px 断点的"上下堆叠整页滚动"：改为单栏独占 + Tab 切换，无折返跑
       （内联 <style> 在本文件之后加载，故用 .deck-workbench 提高特异性） */
    #page-deck-editor .deck-workbench .dwb-columns { display: flex; flex-direction: column; overflow: hidden; }
    #page-deck-editor .deck-workbench .dwb-left,
    #page-deck-editor .deck-workbench .dwb-right {
        flex: 1; min-height: 0; border-right: none; border-bottom: none; width: 100%;
        max-height: none; overflow: hidden; display: flex;
    }
    #page-deck-editor.tab-deck .deck-workbench .dwb-right { display: none; }
    #page-deck-editor.tab-pool .deck-workbench .dwb-left { display: none; }
    /* 卡组网格恢复内部滚动（内联 1000px 断点把它改成了 overflow:visible） */
    #page-deck-editor .deck-workbench .deck-grid.dwb-grid { overflow-y: auto; flex: 1; }
    /* Tab 栏固定底部（拇指热区） */
    .dwb-tabs {
        display: flex; flex: none;
        background: #0e0e1a;
        border-top: 1px solid rgba(var(--brand-rgb),.3);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* 顶栏瘦身：卡组名收窄，防挤压保存按钮 */
    #page-deck-editor .dwb-name { width: 96px; font-size: 13px; }
    #page-deck-editor .dwb-save { padding: 6px 10px; font-size: 12.5px; }

    /* 卡库 Tab：筛选器折叠（关键词行常驻，其余收起；角标显示激活筛选数） */
    #page-deck-editor .dwb-filter-toggle {
        margin: 8px 14px 0; padding: 6px 12px; align-self: flex-start;
        background: rgba(var(--brand-rgb),.08); border: 1px solid rgba(var(--brand-rgb),.3); border-radius: 14px;
        color: var(--text-dim, #8a8070); font-size: 12px; cursor: pointer;
    }
    #page-deck-editor .dwb-filter-toggle::after { content: ' ▸'; }
    #page-deck-editor .dwb-filter-toggle.expanded::after { content: ' ▴'; }
    #page-deck-editor .dwb-filter-toggle .ft-badge {
        display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px;
        border-radius: 8px; background: var(--gold, var(--brand)); color: #0a0a12;
        font-size: 10.5px; font-weight: 700; text-align: center;
    }
    #page-deck-editor .dwb-filters:not(.expanded) .filter-row:nth-child(n+2) { display: none; }
    #page-deck-editor .dwb-filters { padding-bottom: 9px; }

    /* 我的卡组 Tab：统计条保留一行，费用曲线默认收起（按钮展开） */
    #page-deck-editor .dwb-curve { display: none; }
    #page-deck-editor .dwb-left.curve-open .dwb-curve { display: flex; }
    #page-deck-editor .dwb-curve-toggle {
        margin-left: auto; padding: 2px 8px;
        background: rgba(var(--brand-rgb),.08); border: 1px solid rgba(var(--brand-rgb),.3); border-radius: 10px;
        color: var(--text-dim, #8a8070); font-size: 11px; cursor: pointer;
    }
    #page-deck-editor .dwb-left.curve-open .dwb-curve-toggle { color: var(--gold, var(--brand)); border-color: rgba(var(--brand-rgb),.5); }

    /* 减卡按钮：触屏无 hover，常显并放大触控区 */
    #page-deck-editor .dwb-minus { opacity: 1; width: 30px; height: 30px; font-size: 16px; }
}

/* ========== 个人中心（page-personal，P1 账号体系） ========== */
.personal-page { min-height: 100vh; }
.personal-content { width: min(560px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 72px; display: flex; flex-direction: column; gap: 14px; }

/* 双栏容器（手机 = 单列堆叠；桌面 ≥1024px 由升格主题升级为双栏网格，行高互不撑高） */
.pa-cols { display: flex; flex-direction: column; gap: 14px; }
.pa-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pa-shared { display: flex; flex-direction: column; gap: 14px; }

/* 未登录态 */
.pa-hero { text-align: center; padding: 6px 0 2px; }
.pa-hero-title { font-size: 19px; font-weight: 800; color: var(--gold, var(--brand)); letter-spacing: 1px; }
.pa-hero-points { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; text-align: left; width: fit-content; margin-left: auto; margin-right: auto; }
.pa-point { display: flex; align-items: center; gap: 9px; color: var(--text-dim, #8a8070); font-size: 13px; }
.pa-pt-icon { font-size: 16px; }
.pa-auth-card { background: var(--bg-card, rgba(20,24,35,.72)); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 12px; padding: 16px; }
.pa-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.pa-tab { flex: 1; padding: 9px 0; background: transparent; border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 8px; color: var(--text-dim, #8a8070); font-size: 14px; cursor: pointer; transition: all .15s; }
.pa-tab.active { color: var(--gold, var(--brand)); border-color: var(--gold, var(--brand)); background: rgba(var(--brand-rgb),.09); font-weight: 700; }
.pa-form { display: flex; flex-direction: column; gap: 10px; }
.pa-input { width: 100%; padding: 11px 12px; background: rgba(0,0,0,.3); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 8px; color: var(--text, #e0d8c8); font-size: 14px; box-sizing: border-box; }
.pa-input:focus { outline: none; border-color: var(--gold, var(--brand)); }
.pa-submit { margin-top: 4px; padding: 11px 0; background: var(--gold, var(--brand)); border: none; border-radius: 8px; color: #151515; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s; }
.pa-submit:hover { background: #f2cf68; }
.pa-form-err { min-height: 16px; color: #ff9b9b; font-size: 12px; text-align: center; }
.pa-guest-line {
    display: block; width: 100%; padding: 11px 0; text-align: center;
    background: rgba(var(--brand-rgb), .06);
    border: 1px dashed rgba(var(--brand-rgb), .4); border-radius: 10px;
    color: var(--text-dim, #8a8070); font-size: 13.5px; cursor: pointer;
    font-family: inherit; transition: color .15s, border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.pa-guest-line:hover { color: var(--gold, var(--brand)); border-color: rgba(var(--brand-rgb), .6); background: rgba(var(--brand-rgb), .12); }

/* 登录态 · 资料卡 */
.pa-profile-card { display: flex; align-items: center; gap: 13px; background: var(--bg-card, rgba(20,24,35,.72)); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 12px; padding: 15px 16px; }
.pa-avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--brand-rgb),.16); border: 1px solid var(--border-gold, rgba(var(--brand-rgb),.4)); color: var(--gold-bright, var(--brand-bright)); font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* 自定义头像：图片通过内联 background-image 注入，这里只统一铺图方式。
   放在 .pa-avatar / .friend-avatar 之后，覆盖它们 background 简写里的 background-size:auto。
   有图时 JS 会清空元素文字，所以首字母不会和图片叠在一起。 */
.pa-avatar, .friend-avatar { background-position: center; background-repeat: no-repeat; background-size: cover; }
.pa-avatar[data-avatar-pick] { cursor: pointer; }
.pa-profile-body { flex: 1; min-width: 0; }
.pa-nick { font-size: 16px; font-weight: 700; color: var(--text, #e0d8c8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-uid { font-size: 11px; color: var(--text-dim, #8a8070); margin-top: 2px; }
.pa-profile-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pa-link-btn { background: none; border: none; color: var(--gold, var(--brand)); font-size: 12px; cursor: pointer; padding: 3px 4px; }
.pa-link-btn.danger { color: #ff9b9b; }

/* 生日设置行（生日问候用；只记月-日、不记年份，留空也完全不影响使用） */
.pa-birth-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 11px 14px; background: var(--bg-card, rgba(20,24,35,.72)); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 12px; }
.pa-birth-label { font-size: 12.5px; color: var(--text, #e0d8c8); letter-spacing: 1px; }
.pa-birth-select { background: rgba(0,0,0,.28); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 7px; color: var(--text, #e0d8c8); font-size: 12.5px; padding: 5px 6px; cursor: pointer; }
.pa-birth-select:focus { outline: none; border-color: var(--border-gold, rgba(var(--brand-rgb),.55)); }
.pa-birth-unit { font-size: 11.5px; color: var(--text-dim, #8a8070); }
.pa-birth-row .pa-link-btn { margin-left: auto; }
.pa-birth-note { font-size: 11px; color: var(--text-dim, #8a8070); margin: 6px 2px 0; line-height: 1.5; }

/* 登录态 / 未登录态共用的本机战绩四格（总场次 · 胜 · 负 · 胜率，读 localStorage） */
.pa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pa-stat { background: var(--bg-card, rgba(20,24,35,.72)); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 10px; padding: 12px 6px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.pa-stat b { font-size: 19px; color: var(--text, #e0d8c8); }
.pa-stat span { font-size: 10.5px; color: var(--text-dim, #8a8070); letter-spacing: 1px; }
.pa-stat.win b { color: #7dd0a0; }
.pa-stat.lose b { color: #ff9b9b; }

/* 登录态 · 云端卡组 */
.pa-deck-count { font-size: 11px; color: var(--text-dim, #8a8070); font-weight: 400; margin-left: 6px; }
.pa-deck-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pa-deck-empty {
    position: relative; text-align: center; color: var(--text-dim, #8a8070);
    font-size: 12.5px; padding: 20px 12px 16px; line-height: 1.8;
    border: 1px dashed var(--border, rgba(var(--brand-rgb), .3)); border-radius: 10px;
    background: rgba(0, 0, 0, .18);
}
.pa-deck-empty::before {
    content: '❖'; display: block; font-size: 24px; margin-bottom: 4px; line-height: 1;
    color: var(--gold, var(--brand)); opacity: .6; text-shadow: 0 0 14px rgba(var(--brand-rgb), .35);
}
.pa-deck-empty small { font-size: 11px; opacity: .85; }
.pa-deck-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 8px; padding: 9px 11px; }
.pa-deck-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-deck-name { color: var(--text, #e0d8c8); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-deck-meta { color: var(--text-dim, #8a8070); font-size: 11px; }
.pa-deck-tag { font-weight: 400; }
.pa-deck-tag.ok { color: #7dd0a0; }
.pa-deck-tag.warn { color: #ffb36b; }
.pa-deck-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.pa-deck-btn { padding: 6px 12px; border: 1px solid var(--border-gold, rgba(var(--brand-rgb),.4)); border-radius: 6px; background: rgba(212,175,55,.1); color: var(--gold, var(--brand)); font-size: 12px; cursor: pointer; }
.pa-deck-btn:hover { background: rgba(212,175,55,.22); }
.pa-deck-btn.danger { border-color: rgba(229,62,62,.4); background: rgba(229,62,62,.08); color: #ff9b9b; }
.pa-deck-btn.danger:hover { background: rgba(229,62,62,.18); }


body { user-select: none; -webkit-user-select: none; }
input, textarea,
.room-code-value, .deck-name-edit, .card-detail-effect, .card-detail-ruling,
.replay-item-title, .replay-item-meta { user-select: text; -webkit-user-select: text; }

/* 键盘操作可见焦点（可访问性） */
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--cyan, #00e5ff);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ========== 对局录像 UI ========== */
.replay-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(4,6,12,.78); backdrop-filter: blur(2px); }
.replay-modal { width: min(520px, calc(100% - 32px)); max-height: 72vh; display: flex; flex-direction: column; background: var(--bg-panel, #0e0e1a); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 10px; overflow: hidden; }
.replay-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border, rgba(var(--brand-rgb),.25)); color: var(--gold, var(--brand)); font-weight: 700; letter-spacing: 2px; }
.replay-close { background: none; border: none; color: var(--text-dim, #8a8070); font-size: 20px; cursor: pointer; padding: 2px 8px; }
.replay-close:hover { color: var(--text-bright, #fff); }
.replay-list { overflow-y: auto; padding: 8px 12px 16px; }
.replay-item { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.replay-item-info { flex: 1; min-width: 0; }
.replay-item-title { color: var(--text, #e0d8c8); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-item-meta { color: var(--text-dim, #8a8070); font-size: 12px; margin-top: 4px; }
.replay-play-btn { min-width: 64px; padding: 8px 12px; border: 1px solid var(--gold, var(--brand)); border-radius: 6px; background: rgba(var(--brand-rgb),.12); color: var(--gold, var(--brand)); cursor: pointer; }
.replay-play-btn:hover { background: rgba(var(--brand-rgb),.24); }
.replay-del-btn { padding: 8px 10px; border: none; background: none; color: var(--text-dim, #8a8070); cursor: pointer; }
.replay-del-btn:hover { color: var(--red, #e53e3e); }

.replay-controls { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 2500; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(10,12,22,.92); border: 1px solid var(--border, rgba(var(--brand-rgb),.25)); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.replay-badge { padding: 3px 8px; border-radius: 4px; background: rgba(0,229,255,.14); color: var(--cyan, #00e5ff); font-size: 12px; }
.replay-controls span#replay-frame-counter { color: var(--text-dim, #8a8070); font-size: 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-controls button { padding: 7px 12px; border: 1px solid var(--border-gold, rgba(var(--brand-rgb),.5)); border-radius: 6px; background: rgba(var(--brand-rgb),.08); color: var(--gold, var(--brand)); cursor: pointer; font-size: 12px; }
.replay-controls button:hover:not(:disabled) { background: rgba(var(--brand-rgb),.2); }
.replay-controls button:disabled { opacity: .4; cursor: not-allowed; }
#replay-exit { border-color: rgba(229,62,62,.5) !important; color: var(--red, #e53e3e) !important; background: rgba(229,62,62,.08) !important; }
@media (max-width:600px) { .replay-controls { width: calc(100% - 20px); flex-wrap: wrap; justify-content: center; } }

/* ===== P0-P2 修复新增：手牌费用徽章 / 【起】按钮状态 ===== */
.hand-cost-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 5;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 50%;
    background: rgba(20, 28, 48, 0.92);
    border: 1px solid rgba(120, 200, 255, 0.45);
    color: #cfe8ff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
}

.hand-cost-badge.discounted {
    border-color: rgba(110, 231, 160, 0.8);
    color: #6ee7a0;
    background: rgba(16, 38, 30, 0.95);
}

.hand-cost-badge .cost-original {
    font-size: 10px;
    font-weight: 400;
    color: rgba(207, 232, 255, 0.55);
    text-decoration: line-through;
}

/* ★P1 修复（审计 P1-4「手牌无可打性标识」）：
   可支付 → 金色细边框；费用不足 → 压暗降饱和；瞬时战术合法时点 → 脉冲可用。 */
.hand-card.playable {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55), 0 0 14px rgba(212, 175, 55, 0.18);
}
.hand-card.dim {
    opacity: 0.55;
    filter: saturate(0.6) brightness(0.8);
}
.hand-card.dim .hand-cost-badge {
    background: rgba(20, 28, 48, 0.85);
    border-color: rgba(255, 120, 120, 0.45);
    color: rgba(255, 190, 190, 0.9);
}
.hand-card.instant-ready {
    animation: instantPulse 1.6s ease-in-out infinite;
}
@keyframes instantPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(160, 200, 255, 0.55), 0 0 16px rgba(120, 180, 255, 0.35); }
    50%      { box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.75), 0 0 22px rgba(212, 175, 55, 0.55); }
}

/* 费用徽章不可支付样式 */
.hand-cost-badge.unaffordable {
    border-color: rgba(255, 120, 120, 0.55);
    color: rgba(255, 190, 190, 0.9);
    background: rgba(30, 16, 16, 0.9);
}

/* 卡片右下角状态标签 */
.hand-card-status-tag {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 1px 5px;
    border-radius: 4px;
    pointer-events: none;
}
.hand-card-status-tag.dim-tag {
    background: rgba(60, 20, 20, 0.85);
    color: rgba(255, 190, 190, 0.9);
    border: 1px solid rgba(255, 120, 120, 0.4);
}
.hand-card-status-tag.instant-tag {
    background: rgba(20, 30, 55, 0.9);
    color: var(--gold-bright, var(--brand-bright, #f0c040));
    border: 1px solid rgba(var(--brand-rgb, 212, 175, 55), 0.5);
}

/* ★反馈#7（2026-09-26）：旧版 .activate-btn 无任何基础样式（全仓只有 .activate-disabled 一条）
   ——按钮以默认 <button> 形态渲染在战场卡右上角，被 3D 卡牌图层挤压后几乎看不清、
   命中区又小 → 「起效果icon很难点到」。补基础样式：固定尺寸 + 抬 z-index + 可辨识配色。 */
.activate-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 8;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(var(--brand-rgb, 212, 175, 55), .65);
    border-radius: 5px;
    background: rgba(10, 12, 20, .82);
    color: var(--brand-bright, #f0c040);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 20px;
    cursor: pointer;
    transition: background .12s, box-shadow .12s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.activate-btn:hover {
    background: rgba(var(--brand-rgb, 212, 175, 55), .22);
    box-shadow: 0 0 8px rgba(var(--brand-rgb, 212, 175, 55), .45);
}
.activate-btn:active {
    transform: scale(.95);
}
.activate-btn.activate-disabled {
    opacity: 0.45;
    filter: grayscale(.5);
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, .18);
    color: var(--text-dim, #8a8070);
    background: rgba(12, 14, 22, .7);
}
.activate-btn.activate-disabled:hover {
    box-shadow: none;
    background: rgba(12, 14, 22, .7);
}

/* ===== P0-2：卡牌操作菜单按钮（右键/长按手牌） ===== */
.card-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.menu-action-btn {
    padding: 10px 14px;
    border: 1px solid rgba(120, 200, 255, 0.35);
    border-radius: 6px;
    background: rgba(30, 44, 74, 0.85);
    color: #d6e8ff;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    text-align: center;
}

.menu-action-btn:hover {
    background: rgba(52, 84, 140, 0.95);
    border-color: rgba(140, 220, 255, 0.7);
}

.menu-action-btn:active {
    transform: scale(0.97);
}

.menu-action-btn.primary {
    border-color: rgba(120, 200, 255, 0.6);
    color: #eaf5ff;
    font-weight: 600;
}

.menu-action-btn.danger {
    border-color: rgba(255, 120, 120, 0.4);
    color: #ffb3b3;
}

.menu-action-btn.danger:hover {
    background: rgba(120, 40, 40, 0.85);
    border-color: rgba(255, 140, 140, 0.7);
}

/* ===== 修复⑤-P2：战场道具卡（装备放空位 / 辅助机）渲染 ===== */
.item-card {
    position: relative;
    border: 1.5px solid rgba(120, 200, 255, 0.35);
    border-radius: 6px;
    overflow: hidden;
}

.item-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.item-tag {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(16, 26, 44, 0.92);
    border: 1px solid rgba(120, 200, 255, 0.45);
    color: #cfe8ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}

.item-card .tapped-mark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(30, 44, 74, 0.95);
    border: 1px solid rgba(255, 180, 120, 0.6);
    color: #ffc9a0;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card.selected-for-equip {
    border-color: var(--gold, var(--brand));
    box-shadow: 0 0 12px rgba(var(--brand-rgb), 0.55);
}

/* ===== 修复⑤：结束阶段手牌上限弃牌面板（复用 mulligan 面板样式） ===== */
#hand-discard-overlay .mulligan-desc {
    max-width: 520px;
    line-height: 1.6;
}

#hand-discard-overlay .mulligan-card.discard-picked {
    border-color: rgba(255, 120, 120, 0.75);
    box-shadow: 0 0 15px rgba(255, 120, 120, 0.5);
    transform: translateY(-8px);
}

#hand-discard-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   UI/UX Sprint 1-2（依据 docs/UI_UX_IMPROVEMENT_PROPOSAL.md）
   ============================================================ */

/* ---- S1: 卡组编辑器「−」移除按钮常驻显示（触屏无 hover，原方案 hover 才可见） ---- */
#page-deck-editor .dwb-minus { opacity: 1 !important; }

/* ---- 已撤回：战斗页字号上调 ----
   该改动曾把决斗盘字号整体放大（zone-label 10→11、info-item 11→12 …），
   破坏了与原型 prototype-ui-v2-黑金-侵蚀危机版.html 的 1:1 对齐。
   决斗盘样式以原型为唯一基准，此处不再覆盖任何排版值。 */

/* ---- S2: 视口高度 dvh + 安全区适配（100vh 保留为旧浏览器回退） ---- */
.main-app, .sub-page-container, .deck-editor-container, .duel-prep-container,
#page-deck-editor .deck-workbench,
body.main-page-active, body.sub-page-active, body.battle-page-active {
    height: 100dvh;
}
.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(60px + env(safe-area-inset-bottom, 0));
}
#toast-container {
    top: calc(14px + env(safe-area-inset-top, 0));
}

/* ---- S2: 系统级减少动态偏好（与设置页「减少动画」并存，双保险） ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- S2: 填充阶段「本局跳过」按钮 ---- */
.fill-btn.auto-skip {
    color: var(--text-dim);
    border: 1px dashed var(--border);
    background: transparent;
    font-size: 12px;
    padding: 8px 18px;
    letter-spacing: 1px;
}
.fill-btn.auto-skip:hover { color: var(--gold); border-color: var(--border-gold); }
.fill-remember-note {
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--text-dim);
    text-align: center;
}

/* ============================================================
   阻挡决策 / 攻击自由时点 / 瞬时窗口
   1:1 复刻原型 prototype-ui-v2-黑金-侵蚀危机版.html 的
   .block-modal / .block-panel / .block-* 视觉（居中模态，而非底部条）。
   原型来源：L510-539。数值逐项对齐，不做修饰。
   ============================================================ */
.block-decision-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 12, .6);
    z-index: var(--z-overlay);
    display: none;
    align-items: center;
    justify-content: center;
}
.block-decision-overlay.show,
.block-decision-overlay[style*="flex"] { display: flex; }
.block-decision-panel {
    width: min(480px, 90%);
    background: var(--bg-panel);
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .6);
    animation: pop .22s ease;
    max-height: 82vh;
    overflow-y: auto;
}
@keyframes pop {
    0% { transform: scale(.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
/* 原型 .block-title */
.block-decision-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-bright);
    text-align: center;
}
/* 原型 .block-attacker */
.block-decision-desc {
    text-align: center;
    font-size: 12.5px;
    color: var(--text);
    margin: 6px 0 12px;
}
/* 原型 .block-options */
.block-decision-options {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
/* 原型 .block-opt */
.block-option-btn {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: all .12s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.block-option-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.block-option-btn.selected {
    background: rgba(var(--brand-rgb), .15);
    border-color: var(--border-gold);
    color: var(--gold-bright);
}
.block-option-name { font-size: 12.5px; font-weight: 700; }
.block-option-stats { font-size: 10.5px; color: var(--text-dim); }
.block-option-btn.selected .block-option-stats { color: var(--gold-bright); }
/* 原型 .block-options 内的按钮组 */
.block-decision-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
/* 原型 .block-opt / .block-opt.confirm / .block-opt.skip */
.block-btn {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: all .12s;
}
.block-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.block-btn.confirm {
    background: rgba(var(--brand-rgb), .15);
    border-color: var(--border-gold);
    color: var(--gold-bright);
}
.block-btn.cancel { margin-left: 0; }
.block-btn.cancel:hover { border-color: var(--red); color: var(--red); }
/* 原型 .block-instant-sec / .bi-title / .bi-cards / .bi-btn */
.block-instant-section {
    border: 1px solid var(--border-gold);
    background: rgba(var(--brand-rgb), .06);
    border-radius: 8px;
    padding: 9px 10px;
    margin-bottom: 10px;
}
.block-instant-title {
    font-size: 10.5px;
    color: var(--gold-bright);
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.block-instant-cards { display: flex; gap: 6px; flex-wrap: wrap; }
.block-instant-btn {
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    background: rgba(10, 10, 18, .7);
    padding: 5px 9px;
    font-size: 11.5px;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: all .12s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.block-instant-btn:hover { background: rgba(var(--brand-rgb), .2); transform: translateY(-1px); }
.block-instant-name { color: var(--text); }
.block-instant-cost {
    font-size: 10px;
    color: var(--gold-bright);
    border: 1px solid rgba(var(--brand-rgb), .4);
    border-radius: 4px;
    padding: 0 5px;
}
/* 原型 .block-opt 无额外 confirm:hover；保持 hover 语言一致 */
.block-btn.confirm:hover { border-color: var(--gold); color: var(--text-bright); }

/* ============================================================
   Sprint: 卡组体检清单 + 撤销提示
   ============================================================ */

/* 状态徽章变为可点击按钮（沿用原配色，补齐按钮态） */
#deck-validity-status {
    cursor: pointer;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    padding: 2px 9px;
    transition: filter .14s, background .14s;
}
#deck-validity-status:hover { filter: brightness(1.25); background: rgba(255, 255, 255, .06); }
#deck-validity-status.deck-validity { margin-left: auto; font-size: 11.5px; }

/* 体检清单 */
.deck-validity-panel {
    margin: 8px 0 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(10, 10, 18, .6);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
    padding: 3px 4px;
    border-radius: 5px;
}
.dv-row.ok { color: var(--text-dim); }
.dv-row.bad { color: #ffc9a0; }
.dv-row.clickable { cursor: pointer; }
.dv-row.clickable:hover { background: rgba(var(--brand-rgb), .12); }
.dv-mark { flex: 0 0 12px; font-weight: 800; }
.dv-row.ok .dv-mark { color: var(--green, #38a169); }
.dv-row.bad .dv-mark { color: var(--red, #e53e3e); }
.dv-label { flex: 0 0 auto; color: var(--text); font-weight: 600; }
.dv-hint { flex: 1 1 auto; text-align: right; opacity: .9; }
.dv-go { flex: 0 0 auto; color: var(--gold-bright, var(--brand-bright)); font-size: 11.5px; }

/* 定位高亮：帮助用户在卡组里一眼找到问题卡 */
@keyframes locateFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-bright-rgb), 0); }
    25%, 75% { box-shadow: 0 0 0 3px rgba(var(--brand-bright-rgb), .85), 0 0 18px rgba(var(--brand-bright-rgb), .55); }
}
.locate-flash {
    animation: locateFlash 1.6s ease-in-out 1;
    border-radius: 8px;
}

/* 撤销提示：与重要级 Toast 同族，但带操作按钮 */
.toast-undo { padding-right: 8px; }
.toast-undo-btn {
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid var(--gold-bright, var(--brand-bright));
    border-radius: 6px;
    background: rgba(var(--brand-bright-rgb), .14);
    color: var(--gold-bright, var(--brand-bright));
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .14s;
}
.toast-undo-btn:hover { background: var(--gold-bright, var(--brand-bright)); color: #0a0a12; }

/* ============================================================
   Sprint 4: 拖拽出牌 / 拖拽攻击的视觉反馈
   ============================================================ */
body.dnd-active {
    cursor: grabbing;
    user-select: none;
}
#page-battle .hand-card.dragging,
#page-battle .card.dragging {
    opacity: .45;
    transform: scale(.96);
    cursor: grabbing;
}
#page-battle .battle-slot.drop-hover {
    border-style: solid;
    border-color: var(--gold-bright, var(--brand-bright)) !important;
    box-shadow: 0 0 16px var(--gold-glow), inset 0 0 20px rgba(var(--brand-rgb), .12);
    background: rgba(var(--brand-rgb), .06);
}
/* 拖拽跟手的极简指针，不复制整张卡（性能与可读性平衡） */
#drag-ghost {
    position: fixed;
    z-index: var(--z-top);
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--gold-bright, var(--brand-bright));
    box-shadow: 0 0 12px rgba(var(--brand-bright-rgb), .9);
    pointer-events: none;
}
/* ============================================================
   决斗盘 1:1 移植层
   原样提取自 prototype-ui-v2-黑金-侵蚀危机版.html 的 <style>
   共 173 条规则 + 8 组关键帧 + 5 组变量
   未做任何数值修饰；作用域 #page-battle
   ============================================================ */

/* ---- 侵蚀危机换色变量体系（.dz / .dz-1..4）---- */
#page-battle .dz {
  --s-gold:var(--brand); --s-bright:var(--brand-bright); --s-dim:var(--brand-dim);
  --s-line:rgba(var(--brand-rgb),.25); --s-line2:rgba(var(--brand-rgb),.5);
  --s-fill:rgba(12,12,24,.55); --s-rowfill:transparent;
  transition: background .5s, border-color .5s;
}
#page-battle .dz-1 { --s-gold:#d8823f; --s-bright:#f4984c; --s-line:rgba(216,130,63,.3); --s-line2:rgba(216,130,63,.55); }
#page-battle .dz-2 { --s-gold:#db6041; --s-bright:#f97a54; --s-line:rgba(219,96,65,.35); --s-line2:rgba(219,96,65,.6); }
#page-battle .dz-3 { --s-gold:#df3e40; --s-bright:#fd595f; --s-dim:#a03a44; --s-line:rgba(223,62,64,.4); --s-line2:rgba(223,62,64,.68); }
#page-battle .dz-4 {
  --s-gold:#e03040; --s-bright:#ff5163; --s-dim:#93283a;
  --s-line:rgba(213,218,226,.22); --s-line2:rgba(213,218,226,.45);
  --s-fill:rgba(23,11,16,.9);
}

/* ---- 版式规则 ---- */
#page-battle .scene-tab.active {color:var(--text-bright); background:var(--bg-panel); border-color:var(--border);}
#page-battle .battle-scene {
  position:absolute; inset:0; display:none; flex-direction:row; padding:10px 12px 8px; gap:10px;
}
#page-battle .battle-scene.active {display:flex;}
#page-battle .battle-main {flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; position:relative;}
#page-battle .dz {
  --s-gold:var(--brand); --s-bright:var(--brand-bright); --s-dim:var(--brand-dim);
  --s-line:rgba(var(--brand-rgb),.25); --s-line2:rgba(var(--brand-rgb),.5);
  --s-fill:rgba(12,12,24,.55); --s-rowfill:transparent;
  transition: background .5s, border-color .5s;
}
#page-battle .opp-row.dz { --s-rowfill:rgba(229,62,62,.045); }
#page-battle .my-row.dz { --s-rowfill:rgba(0,229,255,.045); }
#page-battle .opp-row.dz,
#page-battle .my-row.dz { border:1px solid var(--s-line2); background:var(--s-rowfill); }
#page-battle .opp-row.dz-2,
#page-battle .my-row.dz-2 { --s-rowfill:rgba(224,48,64,.05); }
#page-battle .opp-row.dz-3,
#page-battle .my-row.dz-3 { --s-rowfill:rgba(224,48,64,.09); }
#page-battle .opp-row.dz-4,
#page-battle .my-row.dz-4 { --s-rowfill:rgba(224,48,64,.12); }
#page-battle .info-strip.dz { background:var(--s-fill); border:1px solid var(--s-line); }
#page-battle .info-strip.dz-2 { background:rgba(20,12,16,.6); }
#page-battle .info-strip.dz-3 { background:rgba(23,11,16,.75); }
#page-battle .info-strip.dz-4 { background:rgba(23,11,16,.92); }
#page-battle .dz .erosion-pip.lit { background:var(--s-gold); border-color:var(--s-bright); box-shadow:none; }
#page-battle .dz .cm-pip.lit { background:var(--s-gold); border-color:var(--s-bright); box-shadow:none; }
#page-battle .dz .cm-pip.lit.hot-lit { background:#ff8a3d; border-color:#ffb066; box-shadow:none; }
#page-battle .dz .cm-pip.lit.crisis-lit { background:var(--red); border-color:#ff7070; box-shadow:none; }
#page-battle .dz .cost-slot.lit { background:var(--s-gold); border-color:var(--s-bright); box-shadow:none; }
#page-battle .dz .mini-cost .mc { border-color:var(--s-line); }
#page-battle .dz .mini-cost .mc.lit { background:var(--s-gold); border-color:var(--s-bright); }
#page-battle .dz .player-info .erosion-value { color:var(--s-bright); }
#page-battle .dz-3 .player-name { color:#ffd9dc; }
#page-battle .dz-4 .player-name { color:#ffe9ea; }
#page-battle .divider-chip.dz { color:var(--s-gold); }
#page-battle .divider-chip.dz.danger { color:var(--red); }
#page-battle .hand-zone.dz,
#page-battle .signal-row.dz { border-color:var(--s-line); }
#page-battle .hand-zone.dz { background:var(--s-fill); }
#page-battle .dz-4 .cm-box { border-color:var(--s-line2); }
#page-battle .cm-box {display:flex; align-items:center; gap:7px; border:1px solid var(--border-gold); border-radius:9px; background:rgba(14,14,26,.85); padding:4px 10px;}
#page-battle .cm-label {font-size:10px; color:var(--text-dim); letter-spacing:1px;}
#page-battle .cm-value {font-size:24px; font-weight:800; color:var(--gold-bright); min-width:30px; text-align:center; line-height:1; font-variant-numeric:tabular-nums;}
#page-battle .cm-value.hot {color:#ff8a3d;}
#page-battle .cm-value.crisis {color:#ff4d4d; animation:pulse .7s infinite;}
#page-battle .cm-track {display:flex; gap:3px; align-items:center;}
#page-battle .cm-badge {font-size:10px; color:#ffb3b3; border:1px solid rgba(229,62,62,.55); background:rgba(229,62,62,.14); padding:1px 7px; border-radius:9px; white-space:nowrap; display:none;}
#page-battle .cm-badge.show {display:inline-block; animation:pulse 1.1s infinite;}
#page-battle .info-strip {display:flex; align-items:center; gap:14px; flex:none; padding:5px 8px; border-radius:9px; background:rgba(12,12,24,.55); border:1px solid rgba(var(--brand-rgb),.12);}
#page-battle .info-strip.opp {flex-direction:row;}
#page-battle .info-item {display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); white-space:nowrap;}
#page-battle .info-item b {color:var(--text-bright); font-size:12px;}
#page-battle .hand-fan {display:flex; align-items:flex-end;}
#page-battle .top-bar {display:flex; align-items:center; justify-content:space-between; gap:10px;}
#page-battle .player-info {display:flex; align-items:center; gap:8px; min-width:200px;}
#page-battle .player-info.right {flex-direction:row-reverse; text-align:right;}
#page-battle .player-name {font-size:13px; color:var(--text-bright); font-weight:600; white-space:nowrap;}
#page-battle .erosion-chip {display:flex; align-items:center; gap:5px;}
#page-battle .erosion-value {font-size:15px; color:var(--gold-bright); font-weight:700; min-width:16px; text-align:center;}
#page-battle .erosion-value.danger {color:var(--red); animation:pulse .8s infinite;}
#page-battle .erosion-track {display:flex; gap:3px;}
#page-battle .phase-stepper {display:flex; align-items:center; gap:2px; background:var(--bg-panel); border:1px solid var(--border); border-radius:20px; padding:3px 6px;}
#page-battle .phase-item.active {color:#0a0a12; background:var(--gold-bright); font-weight:600;}
#page-battle .phase-item.active .dot {opacity:1; color:#0a0a12;}
#page-battle .sub-steps {display:flex; gap:3px; align-items:center; margin-top:2px;}
#page-battle .field-wrap {
  flex:1; display:flex; flex-direction:column; gap:8px; min-height:0;
  border:1px solid rgba(var(--brand-rgb),.15); border-radius:12px; padding:10px 16px;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(0,229,255,.05), transparent 70%),
    radial-gradient(80% 55% at 50% 100%, rgba(var(--brand-rgb),.06), transparent 70%),
    rgba(10,12,22,.55);
}
#page-battle .opp-row,
#page-battle .my-row {
  display:flex; justify-content:center; align-items:center; gap:var(--slot-gap);
  flex:1; min-height:calc(var(--card-h) + 18px);
  padding:8px 12px; border-radius:10px; position:relative;
}
#page-battle .opp-row {background:rgba(229,62,62,.045); border:1px solid rgba(229,62,62,.14);}
#page-battle .my-row {background:rgba(0,229,255,.045); border:1px solid rgba(0,229,255,.14);}
#page-battle .row-wrap { display:flex; align-items:stretch; gap:18px; flex:1; min-height:calc(var(--card-h) + 18px); }
#page-battle .row-wrap .opp-row,
#page-battle .row-wrap .my-row { flex:1; min-height:0; }
#page-battle .pz-side { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
#page-battle .pz-big {
  width:var(--card-w); height:var(--card-h); border-radius:var(--card-radius);
  border:1px dashed rgba(var(--brand-rgb),.35); background:var(--bg-card-slot);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  position:relative; transition:border-color .3s, background .3s;
}
#page-battle .pz-big .pz-hint { font-size:10px; letter-spacing:2px; }
#page-battle .pz-big.filled { border-style:solid; border-color:var(--cyan-border); background:rgba(0,229,255,.05); }
#page-battle .pz-big.dz { border-color:var(--s-line2); }
#page-battle .pz-big.dz-2 { background:rgba(224,48,64,.05); }
#page-battle .pz-big.dz-3 { background:rgba(224,48,64,.09); }
#page-battle .pz-big.dz-4 { border-color:rgba(213,218,226,.4); background:rgba(24,12,18,.85); }
#page-battle .divider-row {display:flex; align-items:center; justify-content:center; gap:14px; padding:2px 0;}
#page-battle .divider-line {flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border-gold),transparent);}
#page-battle .divider-chip {font-size:11px; color:var(--text-dim); padding:0 8px;}
#page-battle .divider-chip.danger {color:var(--red); font-weight:600;}
#page-battle .kw-tip {
  position:absolute; z-index:60; max-width:210px; background:var(--bg-panel); border:1px solid var(--border-gold);
  border-radius:6px; padding:7px 9px; font-size:11px; color:var(--text); pointer-events:none; display:none; line-height:1.5;
}
#page-battle .kw-tip b {color:var(--gold-bright);}
#page-battle .attack-preview {
  position:fixed; z-index:50; background:var(--bg-panel); border:1px solid var(--gold); border-radius:8px;
  padding:8px 10px; font-size:12px; pointer-events:none; display:none; min-width:150px; box-shadow:0 8px 24px rgba(0,0,0,.55);
}
#page-battle .attack-preview .row {display:flex; justify-content:space-between; gap:14px; align-items:center;}
#page-battle .attack-preview .me {color:var(--text-bright);}
#page-battle .attack-preview .them {color:var(--text);}
#page-battle .attack-preview .vs {color:var(--gold-dim); font-size:10px; padding:0 4px;}
#page-battle .side-panel {width:250px; min-width:250px; display:flex; flex-direction:column; gap:8px; position:relative;}
#page-battle .pile-panel {display:flex; gap:8px;}
#page-battle .pile {flex:1; border:1px solid var(--border); border-radius:var(--card-radius); background:var(--bg-zone); padding:8px 6px; text-align:center; cursor:pointer; transition:border-color .15s;}
#page-battle .pile:hover {border-color:var(--border-gold);}
#page-battle .pile .count {font-size:19px; font-weight:700; color:var(--gold-bright);}
#page-battle .pile .label {font-size:9.5px; color:var(--text-dim); letter-spacing:1px;}
#page-battle .log-panel {flex:1; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--card-radius); background:var(--bg-zone); overflow:hidden; min-height:0;}
#page-battle .log-panel.collapsed {flex:0 0 auto;}
#page-battle .log-panel.collapsed .log-body {display:none;}
#page-battle .log-panel.collapsed .log-head {border-bottom:none;}
#page-battle .log-head {display:flex; align-items:center; gap:6px; padding:6px 8px; border-bottom:1px solid var(--border);}
#page-battle .log-toggle {width:22px; height:20px; flex:none; font-size:11px; color:var(--gold); border:1px solid var(--border); border-radius:4px; line-height:1;}
#page-battle .log-toggle:hover {color:var(--gold-bright); border-color:var(--border-gold);}
#page-battle .log-latest {display:none; flex:1; min-width:0; align-items:center; gap:5px; font-size:11px; color:var(--text-dim); cursor:pointer; padding:0 2px; overflow:hidden;}
#page-battle .log-panel.collapsed .log-latest {display:flex;}
#page-battle .log-latest .lt-tx {flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#page-battle .log-head .t {font-size:12px; color:var(--text-bright); font-weight:600;}
#page-battle .log-head .clear-btn {margin-left:auto; font-size:10px; color:var(--text-dim); border:1px solid var(--border); border-radius:4px; padding:1px 6px;}
#page-battle .log-head .clear-btn:hover {color:var(--red); border-color:var(--red);}
#page-battle .log-body {flex:1; overflow-y:auto; padding:4px 6px; display:flex; flex-direction:column; gap:2px;}
#page-battle .bottom-wrap {display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--border); padding-top:6px;}
#page-battle .signal-row {display:flex; align-items:center; gap:8px;}
#page-battle .zone-label {font-size:10px; color:var(--text-dim); letter-spacing:1px; white-space:nowrap;}
#page-battle .signal-tray {
  flex:1; min-height:64px; border:1px solid var(--border); border-radius:var(--card-radius);
  background:var(--bg-zone); display:flex; align-items:center; justify-content:flex-start; padding:5px 10px; gap:5px; position:relative;
  box-shadow:inset 14px 0 16px -10px rgba(0,0,0,.65);
}
#page-battle .opp-zone-strip {
  flex:none; display:flex; align-items:center; gap:10px; padding:4px 10px; border-radius:9px;
  background:rgba(12,12,24,.45); border:1px dashed rgba(var(--brand-rgb),.2); min-height:68px;
}
#page-battle .ozs-label { font-size:10px; color:var(--text-dim); letter-spacing:1px; cursor:pointer; white-space:nowrap; flex:none; }
#page-battle .ozs-label:hover { color:var(--gold-bright); }
#page-battle .ozs-div { width:1px; height:44px; background:var(--border); flex:none; }
#page-battle .orb-stack { display:flex; align-items:center; }
#page-battle .sig-bottom-anchor {position:absolute; left:5px; bottom:3px; font-size:9px; color:var(--gold-dim); letter-spacing:1px; z-index:2; background:rgba(10,10,18,.7); padding:0 4px; border-radius:3px; border:1px dashed rgba(var(--brand-rgb),.3);}
#page-battle .sig-frame {position:absolute; top:2px; bottom:2px; border:2px solid var(--cyan); border-radius:6px; box-shadow:0 0 10px var(--cyan-glow), inset 0 0 8px var(--cyan-glow); z-index:3; pointer-events:none; display:none;}
#page-battle .triple-btn {
  font-size:11px; color:var(--cyan); border:1px solid var(--cyan-border); border-radius:6px; padding:6px 10px;
  background:rgba(0,229,255,.06); white-space:nowrap; transition:all .15s;
}
#page-battle .triple-btn:disabled {opacity:.35; cursor:not-allowed;}
#page-battle .triple-btn:not(:disabled):hover {background:rgba(0,229,255,.16);}
#page-battle .main-bottom {display:flex; gap:8px; align-items:stretch;}
#page-battle .cost-cards { display:flex; align-items:center; flex-wrap:wrap; gap:3px; row-gap:4px; }
#page-battle .act-box { position:fixed; z-index:66; width:216px; display:none; background:var(--bg-panel); border:1px solid var(--border-gold); border-radius:10px; padding:10px 12px; box-shadow:0 12px 34px rgba(0,0,0,.6); }
#page-battle .act-box.show { display:block; animation:pop .18s ease; }
#page-battle .act-box .ab-name { font-size:13px; font-weight:700; color:var(--text-bright); }
#page-battle .act-box .ab-meta { font-size:10px; color:var(--cyan); margin:1px 0 4px; }
#page-battle .act-box .ab-where { font-size:10.5px; color:var(--text-dim); margin:4px 0 7px; line-height:1.45; }
#page-battle .cost-summary {
  flex:none; min-height:20px; font-size:11px; color:var(--gold-bright); cursor:pointer;
  background:rgba(var(--brand-rgb),.08); border:1px dashed rgba(var(--brand-rgb),.35); border-radius:7px; padding:2px 10px;
  display:flex; align-items:center; gap:6px;
}
#page-battle .cost-summary:hover { border-color:var(--border-gold); background:rgba(var(--brand-rgb),.14); }
#page-battle .cost-summary .cs-none { color:var(--text-dim); }
#page-battle .cost-cap {font-size:9px;color:var(--text-dim);width:100%;text-align:center;letter-spacing:1px;margin-top:2px;}
#page-battle .hand-zone {
  flex:1; border:1px solid var(--border); border-radius:var(--card-radius); background:var(--bg-zone);
  padding:8px 8px 12px; display:flex; gap:8px; align-items:flex-end; position:relative; min-height:158px;
}
#page-battle .hand-label {position:absolute; top:4px; left:8px; font-size:10px; color:var(--text-dim); letter-spacing:1px;}
#page-battle .hand-sort-btn {position:absolute; top:2px; right:8px; font-size:10px; color:var(--text-dim); border:1px solid var(--border); border-radius:4px; padding:1px 7px;}
#page-battle .hand-sort-btn:hover {color:var(--cyan); border-color:var(--cyan-border);}
/* ★P2 修复（审计 P2-9）：.hand-price-tip 死 UI 清理——无任何 JS 写入，费用提示现由
   手牌卡上的 .hand-cost-badge（14 renderHand）实时显示。HTML 元素与样式同步删除。 */
#page-battle .actions-zone {width:92px; min-width:92px; display:flex; flex-direction:column; gap:6px; justify-content:flex-end;}
#page-battle .action-btn {
  border-radius:var(--card-radius); padding:10px 4px; font-size:13px; font-weight:600; border:1px solid var(--border);
  background:var(--bg-panel); transition:all .15s; position:relative;
}
#page-battle .action-btn:hover {border-color:var(--border-gold);}
#page-battle .action-btn.primary {background:linear-gradient(160deg,rgba(var(--brand-rgb),.32),rgba(var(--brand-rgb),.12)); border-color:var(--border-gold); color:var(--gold-bright);}
#page-battle .action-btn.primary:hover {box-shadow:0 0 12px var(--gold-glow);}
#page-battle .action-btn.danger:hover {color:var(--red); border-color:var(--red);}
#page-battle .action-btn .pend-dot {position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 6px var(--gold-bright); display:none;}
#page-battle .action-btn .pend-dot.show {display:block;}
#page-battle .action-btn:disabled {opacity:.4; cursor:not-allowed;}
/* ★P2 修复（审计 P2-9）：#undo-bar 撤销浮条死 UI 清理——「撤销结束回合」功能从未实现，
   无任何 JS 引用 .undo-bar/.undo-btn（btn-undo/undo-countdown 均无引用），HTML 已删除，
   样式同步清理。将来实现撤销（endTurn 前快照 gameState）时在此重建。 */
#page-battle .sheet-overlay {
  position:absolute; inset:0; background:rgba(5,6,12,.6); z-index:70; display:none;
  align-items:center; justify-content:center;
}
#page-battle .sheet-overlay.show {display:flex;}
#page-battle .sheet {
  width:min(480px,92%); background:linear-gradient(180deg,var(--bg-panel),rgba(8,10,18,.97));
  border:1px solid var(--border-gold); border-radius:12px;
  padding:16px 18px 18px; transform:translateY(16px) scale(.96); opacity:0; transition:transform .22s, opacity .22s;
  max-height:72%; overflow-y:auto; box-shadow:0 16px 50px rgba(0,0,0,.6);
}
#page-battle .sheet-overlay.show .sheet {transform:none; opacity:1;}
#page-battle .sheet-grip {display:none;}
#page-battle .sheet-title {font-size:15px; font-weight:700; color:var(--gold-bright); text-align:center; margin-bottom:4px;}
#page-battle .sheet-desc {font-size:12px; color:var(--text-dim); text-align:center; margin-bottom:12px;}
#page-battle .sheet-options {display:flex; flex-direction:column; gap:8px;}
#page-battle .sheet-row {display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12px; color:var(--text-dim);}
#page-battle .sheet-row input {accent-color:var(--gold);}
#page-battle .sheet-actions {display:flex; gap:8px; margin-top:12px;}
#page-battle .sheet-btn {flex:1; text-align:center; padding:9px 0; border-radius:8px; font-size:13px; font-weight:600;}
#page-battle .sheet-btn.pay {background:var(--gold); color:#0a0a12;}
#page-battle .sheet-btn.pay:hover {filter:brightness(1.08);}
#page-battle .sheet-btn.skip {border:1px solid var(--border); color:var(--text-dim);}
#page-battle .sheet-btn.skip:hover {color:var(--text); border-color:var(--border-gold);}
#page-battle .sheet-btn.close-btn {margin-top:0; border:1px solid var(--border); border-radius:8px; padding:9px; color:var(--text-dim); font-size:12px; flex:0 0 72px;}
#page-battle .sheet-btn.close-btn:hover {color:var(--text); border-color:var(--border-gold);}
/* ★2026-09-25 UI 审计 #16：#page-battle .block-modal 死样式已删除
   （实际阻挡面板是 .block-decision-overlay / #block-decision-overlay）。
#page-battle .block-panel {
  width:min(480px,90%); background:var(--bg-panel); border:1px solid var(--border-gold); border-radius:12px;
  padding:18px 20px; box-shadow:0 16px 50px rgba(0,0,0,.6); animation:pop .22s ease;
}
#page-battle .block-opt.skip:hover {border-color:var(--red); color:var(--red);}
#page-battle .phase-banner {
  position:absolute; left:50%; top:30%; transform:translateX(-50%) scale(.8); z-index:45;
  background:var(--bg-panel); border:1px solid var(--gold); border-radius:10px; padding:12px 30px;
  font-size:19px; font-weight:700; color:var(--gold-bright); opacity:0; pointer-events:none; text-align:center;
  box-shadow:0 0 40px rgba(var(--brand-rgb),.25); letter-spacing:2px;
}
#page-battle .phase-banner.show {animation:bannerIn 1.6s ease forwards;}
#page-battle .end-stat .t {font-size:10.5px; color:var(--text-dim);}
#page-battle .home-scene.active {display:flex;}
#page-battle .hn-item.active {color:var(--gold-bright);}
#page-battle .detail-tab.active {color:var(--gold-bright); border-color:var(--border-gold); background:rgba(var(--brand-rgb),.1);}

/* ---- 原型关键帧（逐字保留）---- */
@keyframes pulse {0%,100%{opacity:1}50%{opacity:.45}}
@keyframes goldpulse {0%,100%{box-shadow:0 0 6px var(--gold-glow)}50%{box-shadow:0 0 16px var(--gold-bright)}}
@keyframes destroy {0%{transform:scale(1);opacity:1}60%{transform:scale(1.15) rotate(6deg);opacity:.9}100%{transform:scale(.2) rotate(20deg);opacity:0}}
@keyframes charge {0%{transform:translateX(0)}15%{transform:translateX(116px)}25%{transform:translateX(100px)}35%{transform:translateX(112px)}45%{transform:translateX(100px)}70%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes lunge {0%{transform:translateX(0)}40%{transform:translateX(66px) scale(1.08)}100%{transform:translateX(0)}}
@keyframes placePulse {0%,100%{box-shadow:0 0 6px var(--cyan-glow)}50%{box-shadow:0 0 16px var(--cyan-glow)}}
@keyframes pop {0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes bannerIn {0%{opacity:0;transform:translateX(-50%) scale(.8)}18%{opacity:1;transform:translateX(-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.06)}}


/* ============================================================
   结构适配层：主程序独有的包裹元素 → 映射到原型的对应行为
   原型没有这些类，但它们必须表现成原型里的等价结构。
   ============================================================ */

/* .game-container 相当原型的 .battle-scene：
   横向排列 .battle-main + .side-panel（原型 .battle-scene 为 flex-direction:row，
   padding:10px 12px 8px，gap:10px）。此前误设为 column，导致左右两栏纵向堆叠、
   总高超出视口，底部手牌区被 overflow:hidden 裁掉。 */
#page-battle .game-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    min-height: 0;
    background: var(--bg);
    gap: 10px;
    padding: 10px 12px 8px;
}

/* .battle-row 是主程序给 5 个战斗槽加的横排容器，
   原型里 .opp-row/.my-row 本身就是 flex 容器，直接承接 */
#page-battle .battle-row {
    display: flex;
    gap: var(--slot-gap, 10px);
    width: 100%;
    align-items: center;
}

/* .stepper-col：原型用内联 flex 列包裹 phase-stepper + sub-steps */
#page-battle .stepper-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* .strip-right：原型用内联 style="margin-left:auto" 实现右对齐 */
#page-battle .strip-right {
    margin-left: auto;
}

/* .zone-danger 是主程序语义标记，原型无对应视觉，保持透明 */
#page-battle .zone-danger {
    /* 视觉完全由 .opp-row/.my-row 的 .dz 规则决定 */
}

/* 主程序的页面容器高度与滚动：原型 html,body{height:100%;overflow:hidden} */
#page-battle {
    height: 100%;
    overflow: hidden;
}

/* ============================================================
   类名映射层：把原型 v2 的视觉语言映射到主程序实际的类名。
   原型类名              主程序类名
   .sheet-*          →   .charge-select-*
   .block-modal/panel →  .block-decision-overlay/panel（已在移植层复刻）
   .phase-banner     →   .phase-announcement（已加 .phase-banner 类）
   .sheet-opt        →   .charge-option-btn
   ============================================================ */

/* ---- 充能选择面板：套用原型 .sheet 视觉 ---- */
#page-battle .charge-select-overlay,
.charge-select-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 12, .6);
    align-items: center;
    justify-content: center;
}
.charge-select-panel {
    width: min(480px, 92%);
    max-height: 72%;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-panel), rgba(8, 10, 18, .97));
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    padding: 16px 18px 18px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .6);
}
/* 原型 .sheet-title */
.charge-select-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-bright);
    text-align: center;
    margin-bottom: 4px;
}
/* 原型 .sheet-desc */
.charge-select-desc {
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 12px;
}
/* 原型 .sheet-options */
.charge-select-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 原型 .sheet-opt */
.charge-option-btn {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(12, 16, 30, .7);
    padding: 11px 14px;
    font-size: 13px;
    text-align: left;
    color: var(--text);
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}
.charge-option-btn:hover {
    border-color: var(--gold);
    background: rgba(var(--brand-rgb), .1);
    transform: translateX(2px);
}

/* ---- 阶段提示：套用原型 .phase-banner 视觉（覆盖主程序的全屏大字实现）---- */
#page-battle .phase-banner {
    position: fixed;
    left: 50%;
    top: 30%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%) scale(.8);
    z-index: 45;
    display: block;
    background: var(--bg-panel);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 12px 30px;
    font-size: 19px;
    font-weight: 700;
    color: var(--gold-bright);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    box-shadow: 0 0 40px rgba(var(--brand-rgb), .25);
    letter-spacing: 2px;
    transition: none;
    align-items: initial;
    justify-content: initial;
}
#page-battle .phase-banner::before { display: none; content: none; }
#page-battle .phase-banner.show { animation: bannerIn 1.6s ease forwards; }
#page-battle .phase-banner .phase-announcement-text {
    font-size: 19px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: none;
    letter-spacing: 2px;
    padding: 0;
    border: none;
    background: none;
    animation: none;
}

/* ---- 手牌容器的 flex 布局 ----
   原型靠内联 style="display:flex;gap:8px;align-items:flex-end;..." 撑开手牌横排，
   主程序 #my-hand 此前无任何样式（默认 display:block），导致卡牌纵向堆叠、
   在 .hand-zone 的 158px 高度里只露出第一张。此处补齐。 */
#page-battle #my-hand {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 16px;
    min-height: 138px;
    flex: 1;
    min-width: 0;
    /* 手牌过多时横向滚动，不挤压卡牌、不换行 */
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
#page-battle #my-hand::-webkit-scrollbar { height: 6px; }
#page-battle #my-hand::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-rgb), .25);
    border-radius: 3px;
}

/* ---- 对手手牌区：紧凑牌背，不得撑高所在的信息带 ----
   注意：#opponent-hand-container 位于 .info-strip.opp【内部】，
   与 #my-hand（位于独立 .hand-zone）位置完全不同。
   此前误将其与 #my-hand 同设为 min-height:138px，使对手信息带被撑到 166px，
   连带把 .field-wrap 内容顶出可视区，费用区反被下方 .bottom-wrap 覆盖
   （1366×768 实测遮挡 64470px²）。此处改为紧凑显示。 */
#page-battle #opponent-hand-container {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: none;
    min-height: 0;
    max-height: 46px;
    overflow: hidden;
}
#page-battle #opponent-hand-container .hand-card {
    width: 30px;
    height: 42px;
    min-width: 30px;
    flex: 0 0 30px;
    margin: 0 -18px 0 0;   /* 叠压成扇形，压缩横向占用 */
}
#page-battle #opponent-hand-container .hand-card:last-child {
    margin-right: 0;
}

/* 手牌区本身改为纵向：标签在上、手牌在下（原型 .hand-label 绝对定位已处理） */
#page-battle .hand-zone {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ---- 手牌区按钮的必要属性补充 ----
   .hand-sort-btn / .hand-price-tip / .cost-cap 的视觉值已在移植层按原型给出，
   此处只补原型省略（因为原型用 <button> 默认 UA 样式）但主程序需要的属性。 */
#page-battle .hand-sort-btn {
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* ---- 修正 .hand-zone 布局冲突 ----
   移植层给的是原型值（display:flex + align-items:flex-end），那是原型
   「手牌直接作为 flex 子项」的写法；主程序多了一层 #my-hand 容器，
   因此这里改为纵向布局，由 #my-hand 自己横向铺开手牌。 */
#page-battle .hand-zone {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}

/* ---- 底部区域防压缩 ----
   .battle-main 是定高 flex column，内含 top-bar + field-wrap(flex:1) + bottom-wrap。
   若垂直空间不足，flex 默认会压缩 bottom-wrap，导致手牌那一横被压扁/裁掉。
   原型里战场(field-wrap)是唯一可伸缩项，底部必须完整保留。 */
#page-battle .bottom-wrap {
    flex: 0 0 auto;
}
#page-battle .top-bar {
    flex: 0 0 auto;
}
/* 战场区：可伸缩，内容超高时内部滚动。
   对照原型 1366×768 实测：原型 .field-wrap 可视高 410px，其内容
   （敌带46 + 处理区条 + 2×战场156 + 分隔 + 我带78 + 费用摘要）约 460px，
   原型同样溢出，靠 .scene-body{overflow:hidden} 裁掉上方内容。
   本实现改为竖向滚动，让内容【可达】而非把上方直接裁掉。
   注：我方费用区已移出到 .cost-bar 独立行，不再受此处滚动影响。 */
#page-battle .field-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
#page-battle .field-wrap::-webkit-scrollbar { width: 8px; }
#page-battle .field-wrap::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-rgb), .25);
    border-radius: 3px;
}
#page-battle .field-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-rgb), .55);
}
/* 战场行保持原型固有高度（min-height:calc(var(--card-h)+18px)），不参与压缩。
   若用原型值 flex:1，矮视口下会被压到 5px，其子元素溢出后正好盖住
   下方元素 —— 这正是「费用区被挡住」的直接原因。 */
#page-battle .field-wrap > .row-wrap {
    flex: 0 0 auto;
}
/* 手牌区保底高度，任何情况下不被压扁 */
#page-battle .hand-zone {
    min-height: 158px;
    flex: 0 0 auto;
}
#page-battle .signal-tray {
    flex: 0 0 auto;
}
#page-battle .side-panel {
    flex: 0 0 250px;
    min-height: 0;
    overflow: hidden;
}

/* ---- 矮视口降级：整体等比缩放，而非压塌某个区域 ----
   设计原则（来自用户反馈）：是【我们适配玩家】，不是玩家适配我们。
   因此小屏不做「牺牲某块 UI」的取舍，而是缩小卡牌基准尺寸 --card-h，
   让战场行、手牌、费用区一起等比收缩，所有区域保持完整可见。

   反例（曾经的错误做法）：给 .row-wrap 设 min-height:0 让战场行塌陷到 5px，
   其子元素溢出后正好盖住我方信息带的费用区 —— 这正是「费用区被挡住」的真凶。 */
@media (max-height: 900px) {
    #page-battle { --card-h: 96px; }
}
@media (max-height: 820px) {
    #page-battle { --card-h: 86px; }
    #page-battle { --slot-gap: 8px; }
}
@media (max-height: 740px) {
    #page-battle { --card-h: 78px; }
    #page-battle { --slot-gap: 7px; }
    #page-battle .hand-zone { min-height: 132px; }
    #page-battle .signal-tray { min-height: 50px; }
}
@media (max-height: 660px) {
    #page-battle { --card-h: 68px; }
    #page-battle { --slot-gap: 6px; }
    #page-battle .hand-zone { min-height: 116px; }
    #page-battle .signal-tray { min-height: 44px; }
}
@media (max-height: 560px) {
    #page-battle { --card-h: 58px; }
    #page-battle { --slot-gap: 5px; }
    #page-battle .hand-zone { min-height: 100px; }
    #page-battle .signal-tray { min-height: 38px; }
    #page-battle .field-wrap { padding: 6px 8px; gap: 5px; }
    #page-battle .battle-main { gap: 5px; }
}
@media (max-height: 460px) {
    #page-battle { --card-h: 48px; }
    #page-battle { --slot-gap: 4px; }
    #page-battle .hand-zone { min-height: 86px; }
    #page-battle .signal-tray { min-height: 34px; }
}

/* ---- 极矮视口（横屏手机 390px 级）----
   此档只收缩间距与内边距；卡牌尺寸已由上面的 --card-h 各档统一接管，
   不再单独覆盖 .battle-slot / .hand-card 的固定像素，避免与等比缩放冲突。 */
@media (max-height: 520px) {
    #page-battle .hand-zone { padding: 6px 6px 8px; }
    #page-battle #my-hand { min-height: 84px; gap: 6px; }
    #page-battle .field-wrap { padding: 6px 8px; gap: 4px; }
    #page-battle .battle-main { gap: 4px; }
    #page-battle .bottom-wrap { gap: 4px; padding-top: 4px; }
    #page-battle .top-bar { padding: 2px 0; }
}

/* ---- 修复 1：#page-battle 建立定位上下文 ----
   .attack-preview / .kw-tip 是 position:absolute，需要定位祖先。
   此前 #page-battle 是 position:static，导致它们以 body 为基准定位，
   落入 #page-battle{overflow:hidden} 的裁切区外（实测超出视口 44px）。
   原型中 .battle-main 有 position:relative 提供该基准，主程序里这些元素
   挂在 #page-battle 下，故在此建立。 */
#page-battle {
    position: relative;
}

#page-battle .attack-preview {
    position: fixed;
}

/* ---- 修复 2：手牌区横向容量 ----
   .hand-zone 受 .actions-zone(92px) 挤压后，可用宽度不足时卡牌会顶出右边界
   （实测末卡 right=805 超出容器 21px）。减小内边距并让容器正确滚动。 */
#page-battle .hand-zone {
    padding: 8px 6px 12px;
}
#page-battle #my-hand {
    padding: 0;
    margin-right: 2px;
}

/* ★P2 修复（审计 P2-9）：撤销浮条隐藏态溢出修复已随 .undo-bar 死 UI 清理整体移除
   （「撤销结束回合」功能从未实现，HTML 已删除）。
   .battle-main 的 overflow:hidden 保留——阶段横幅/预览浮层仍依赖该裁切基准。 */
/* .battle-main 裁掉浮层隐藏态的位移，语义与原型 .scene-body{overflow:hidden} 一致 */
#page-battle .battle-main {
    overflow: hidden;
}

/* ============================================================
   费用区（对照原型 L375-392 与 L742 修正）
   主程序的 #cost-slots-container 同时带 .cost-cards 与 .cost-zone 两个类，
   但原型里这是两种不同元素：
     · .cost-cards —— 我方信息带里的【内联迷你卡列表】（L742，span）
     · .cost-zone  —— 独立的 150×150 方块容器（L375，另一处 UI）
   此前把原型的 .cost-zone（150px 方块）套到本元素上，导致费用区被撑成
   150×150 大方块并溢出 .field-wrap 被 overflow:hidden 裁掉。
   此处按原型语义处理：本元素等价于 .cost-cards，按内联迷你卡列表渲染。
   ============================================================ */
/* ============================================================
   我方费用区 —— 独立行（位于战场区与手牌区之间）

   演化过程（保留原因，避免回退）：
     原型把费用卡内嵌在 .info-strip.my 的 <span class="cost-cards"> 里。
     主程序照搬该结构后，费用区与战场行同在 .field-wrap 内争抢垂直空间：
     原型 .field-wrap 可视高 410px 而内容需约 460px（原型自己靠
     .scene-body{overflow:hidden} 裁掉上方），主程序的战场行 DOM 顺序在前，
     直接压在费用区上（1366×768 实测遮挡 61992px²）。

     试过的无效方向：调 --card-h 缩放 / overflow 滚动 / flex:0 0 auto /
     position:sticky —— 都只是在同一段空间里挪动，两者始终重叠。

     最终解法：把费用区移出 .field-wrap，作为独立一行置于其下、
     .bottom-wrap 之上。它不再参与战场空间争夺，任何视口下都完整可见。
   ============================================================ */
#page-battle .cost-bar {
    flex: 0 0 auto;              /* 绝不参与压缩，任何视口都完整保留 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin: 0;
    border: 1px solid rgba(var(--brand-rgb), .18);
    border-radius: 9px;
    background: rgba(12, 12, 24, .72);
    min-height: 0;
}
#page-battle .cost-bar-label {
    flex: none;
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}
/* 费用上限提示：原型定义 width:100%（独占整行、居中）。
   此处必须让它换行独占一行，否则它会撑满整行并把 flex:1 的费用区挤成 0 宽
   （1366×768 实测 .cost-cap 宽 1060px、费用区 0px，费用卡被压到看不见）。 */
#page-battle .cost-bar .cost-cap {
    flex: 0 0 100%;
    order: 4;
    font-size: 9px;
    color: var(--text-dim);
    text-align: center;
    letter-spacing: 1px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-battle .cost-bar {
    flex-wrap: wrap;
    row-gap: 2px;
}
#page-battle .cost-bar .cost-zone,
#page-battle .cost-bar .cost-cards {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;           /* 单行不换行，避免撑高本行 */
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
#page-battle .cost-bar .cost-zone::-webkit-scrollbar,
#page-battle .cost-bar .cost-cards::-webkit-scrollbar { height: 5px; }
#page-battle .cost-bar .cost-zone::-webkit-scrollbar-thumb,
#page-battle .cost-bar .cost-cards::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-rgb), .25);
    border-radius: 3px;
}
/* 窄屏：费用区独占整行，避免被标签/上限提示挤扁（412/390 实测被压到 33~46px）。
   必须置于上面基础规则【之后】，否则同优先级下基础规则的 flex 会覆盖本档。 */
@media (max-width: 900px) {
    #page-battle .cost-bar {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    #page-battle .cost-bar .cost-zone,
    #page-battle .cost-bar .cost-cards {
        flex: 1 1 100%;
        order: 3;
    }
}
/* 非独立行场景（对手侧信息带内的费用卡）保持原有内联行为 */
#page-battle .cost-zone,
#page-battle .cost-cards {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    row-gap: 4px;
    /* 关键约束：费用区不得撑高所在的信息带。
       实测（1366×768）费用卡换行两排时，对手信息带被撑到 166px，
       连带把 .field-wrap 内容顶出可视区，费用区自身反被下方 .bottom-wrap 覆盖。
       这里限制为固定行高、超出横向滚动，保证信息带高度恒定。 */
    max-height: 70px;
    overflow-x: auto;
    overflow-y: hidden;
    align-content: flex-start;
    scrollbar-width: thin;
}
#page-battle .cost-zone::-webkit-scrollbar,
#page-battle .cost-cards::-webkit-scrollbar { height: 5px; }
#page-battle .cost-zone::-webkit-scrollbar-thumb,
#page-battle .cost-cards::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-rgb), .25);
    border-radius: 3px;
}
#page-battle .cost-slot {
    width: 19px;
    height: 26px;
    border-radius: 3px;
    background: rgba(var(--brand-rgb), .18);
    border: 1px solid var(--border);
    position: relative;
}
#page-battle .cost-card {
    width: 48px;
    height: 66px;
    border-radius: 5px;
    border: 1px solid var(--border-gold);
    flex: none;
    background: linear-gradient(160deg, rgba(16, 28, 56, .95), rgba(10, 16, 34, .95));
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    transition: transform .35s, margin .35s;
}
#page-battle .cost-card .cc-name {
    font-size: 8px;
    color: var(--text-bright);
    padding: 2px 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-battle .cost-card .cc-art {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 15px;
    bottom: 3px;
    border-radius: 3px;
    background: linear-gradient(150deg, #233055, #0d1020);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
/* 横置=已使用 */
#page-battle .cost-card.tapped {
    transform: rotate(-90deg);
    margin-left: 9px;
    margin-right: 9px;
}

/* ============================================================
   UX 修复 A 类（2026 审计·〇b 节）：只改交互正确性，不改任何视觉尺寸/颜色
   A1 点击热区扩展 —— 用透明 ::after 外扩命中区，元素外观零变化。
      实测：hand-sort-btn 66×18、clear-btn 34×18、log-toggle 22×20、
      triple-btn 66×29，均低于 32px 最小热区标准，触屏难以命中。
   ============================================================ */
/* 注意：hand-sort-btn 本身已是 position:absolute，绝不可在此给它 relative
   （同优先级后写的规则会覆盖 absolute，导致按钮回到文档流被拉宽——实测踩坑）。
   ::after 以 absolute 定位基准对 absolute 元素同样生效，无需额外声明。 */
#page-battle .log-head .clear-btn,
#page-battle .log-toggle,
#page-battle .triple-btn {
    position: relative;   /* 仅为 ::after 提供定位基准，不影响布局 */
}
#page-battle .hand-sort-btn::after,
#page-battle .log-head .clear-btn::after,
#page-battle .log-toggle::after,
#page-battle .triple-btn::after {
    content: '';
    position: absolute;
    inset: -7px;          /* 命中区四向外扩 7px，视觉不可见 */
}
/* 日志头部按钮排列密集（间距仅 6px），外扩幅度分方向收敛：
   竖向 -7px（18px 高的按钮，竖向命中是痛点）；横向 -5px（避免与相邻按钮抢点击）。 */
#page-battle .log-head .clear-btn::after,
#page-battle .log-toggle::after {
    inset: -7px -5px;
}

/* ============================================================
   A2 补齐 cursor:pointer —— 42 个可点元素中 19 个缺手势提示。
      卡牌（手牌/战场上的卡/费用卡）与未禁用按钮均可点，统一给 pointer；
      禁用态给 not-allowed，明确"不能点"而非"忘了做"。
   ============================================================ */
#page-battle button:not(:disabled) { cursor: pointer; }
#page-battle button:disabled { cursor: not-allowed; }
#page-battle .hand-card { cursor: pointer; }
#page-battle .battle-slot .card { cursor: pointer; }
#page-battle .cost-card { cursor: pointer; }

/* ============================================================
   第三轮 UX（〇c 节）：P1 遮挡修复 + P2 原型缺失补全
   ============================================================ */

/* ---------- P1b 战场折叠渐隐遮罩 ----------
   field-wrap 内容超出可视高时，上/下缘出现渐隐，提示还有内容。
   JS（21-battle-extras.js）在滚动时切换 fold-top / fold-bottom。
   sticky 伪元素是滚动容器内"停在视口边缘"的标准做法：
   高 14px + 负 margin 抵占位，不参与布局。 */
#page-battle .field-wrap::before,
#page-battle .field-wrap::after {
    content: '';
    position: sticky;
    left: 0; right: 0;
    display: block;
    height: 14px;
    flex: 0 0 14px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
#page-battle .field-wrap::before {
    top: 0;
    margin-bottom: -22px;   /* 14px 自身 + 8px flex gap，抵消后内容位置不变 */
    background: linear-gradient(rgba(6,8,16,.88), rgba(6,8,16,0));
}
#page-battle .field-wrap::after {
    bottom: 0;
    margin-top: -22px;     /* 同上，不增加滚动高度 */
    background: linear-gradient(rgba(6,8,16,0), rgba(6,8,16,.88));
}
#page-battle .field-wrap.fold-top::before { opacity: 1; }
#page-battle .field-wrap.fold-bottom::after { opacity: 1; }

/* ---------- P2a 结算面板（1:1 原型 end-overlay，原型 L552-563）
   注：面板挂在主容器层（与 charge-select-overlay 同层，#page-battle 外），
   故用 ID 选择器 + position:fixed（视口全覆盖，视觉与原型 absolute inset:0 一致）。 ---------- */
#end-overlay{position:fixed;inset:0;background:rgba(5,6,12,.82);z-index:400;display:none;align-items:center;justify-content:center;}
#end-overlay.show{display:flex;}
#end-overlay .end-panel{text-align:center;background:var(--bg-panel);border:1px solid var(--border-gold);border-radius:14px;padding:28px 44px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
#end-overlay .end-panel h1{font-size:26px;color:var(--gold-bright);letter-spacing:4px;margin-bottom:6px;}
#end-overlay .end-panel h1.lose{color:var(--red);}
#end-overlay .end-panel .sub{font-size:12.5px;color:var(--text-dim);margin-bottom:16px;}
#end-overlay .end-stats{display:flex;gap:20px;justify-content:center;margin-bottom:18px;}
#end-overlay .end-stat .n{font-size:20px;font-weight:700;color:var(--text-bright);}
#end-overlay .end-stat .t{font-size:10.5px;color:var(--text-dim);}
#end-overlay .end-panel .btns{display:flex;gap:10px;justify-content:center;}
#end-overlay .end-btn{border:1px solid var(--border-gold);background:rgba(var(--brand-rgb),.15);color:var(--gold-bright);border-radius:8px;padding:9px 20px;font-size:13px;cursor:pointer;}
#end-overlay .end-btn:hover{background:rgba(var(--brand-rgb),.28);}

/* ---------- P2c/P2e 区域查看面板（1:1 原型 cost-panel，原型 L423-436） ---------- */
#cost-panel{position:fixed;inset:0;background:rgba(5,6,12,.72);z-index:390;display:none;align-items:center;justify-content:center;}
#cost-panel.show{display:flex;}
#cost-panel .cp-box{width:min(680px,92%);max-height:78%;background:var(--bg-panel);border:1px solid var(--border-gold);border-radius:12px;padding:14px 16px;box-shadow:0 16px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px;}
#cost-panel .cp-head{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-bright);}
#cost-panel .cp-head label{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-dim);cursor:pointer;margin-left:auto;}
#cost-panel .cp-head input{accent-color:var(--gold);}
#cost-panel .cp-close{border:1px solid var(--border);border-radius:6px;padding:3px 10px;font-size:11px;color:var(--text-dim);background:none;cursor:pointer;}
#cost-panel .cp-close:hover{color:var(--text);border-color:var(--border-gold);}
#cost-panel .cp-grid{display:flex;flex-wrap:wrap;gap:8px;overflow-y:auto;}
#cost-panel .cp-card{width:122px;border:1px solid var(--border-gold);border-radius:8px;background:linear-gradient(160deg,rgba(16,28,56,.95),rgba(10,16,34,.95));padding:6px;}
#cost-panel .cp-card .cl-top{font-size:11px;color:var(--text-bright);font-weight:600;}
#cost-panel .cp-card .cl-art{height:56px;margin:4px 0;border-radius:5px;background:linear-gradient(150deg,#1c2440,#0d1020);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;}
#cost-panel .cp-card .cl-art img{width:100%;height:100%;object-fit:cover;}
#cost-panel .cp-card .cl-eff{font-size:9.5px;color:var(--text);line-height:1.4;min-height:40px;}
#cost-panel .cp-card .cl-tag{font-size:9px;color:var(--gold-bright);border:1px solid rgba(var(--brand-rgb),.4);border-radius:3px;padding:0 4px;margin-top:3px;display:inline-block;}

/* ---------- P2d 费用卡悬停放大镜（1:1 原型 cost-lens，原型 L406-415） ---------- */
#cost-lens{
    position:fixed;z-index:70;display:none;width:170px;pointer-events:none;
    background:var(--bg-panel);border:1px solid var(--border-gold);border-radius:10px;padding:10px;
    box-shadow:0 12px 36px rgba(0,0,0,.6);
}
#cost-lens .cl-name{font-size:13px;color:var(--text-bright);font-weight:600;}
#cost-lens .cl-type{font-size:10px;color:var(--cyan);margin:2px 0 6px;}
#cost-lens .cl-art{height:64px;border-radius:6px;background:linear-gradient(150deg,#1c2440,#0d1020);border:1px solid var(--border);margin-bottom:6px;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;}
#cost-lens .cl-art img{width:100%;height:100%;object-fit:cover;}
#cost-lens .cl-eff{font-size:11px;line-height:1.5;color:var(--text);}
#cost-lens .cl-tag{display:inline-block;font-size:9.5px;color:var(--gold-bright);border:1px solid rgba(var(--brand-rgb),.4);border-radius:4px;padding:0 5px;margin-bottom:4px;}

/* ---------- P2b 关键词提示（kw 样式取自原型 .detail-body .kw，L617）
   .kw span 由 kwLink() 生成：卡牌详情 / 费用面板 / 放大镜，全局唯一来源，可直接全局匹配 ---------- */
.kw {
    color: var(--cyan);
    cursor: help;
    border-bottom: 1px dashed var(--cyan-border);
}

/* ---------- P2e 对方公开区条：标签可点 ---------- */
#page-battle .ozs-label[data-zone] { cursor: pointer; }
#page-battle .ozs-label[data-zone]:hover { color: var(--gold-bright); }

/* ---------- 3b 费用上限提示 cost-cap ---------- */
#page-battle .cost-bar .cost-cap { color: var(--text-dim); letter-spacing: 1px; }

/* ============================================================
   第四轮 UX：交互流程摩擦优化
   1a'/1b' 划选+可付高亮 / 1c' 常驻进度 / 3b 攻击者选中 / Q4 徽章
   ============================================================ */

/* 1b' 选费引导：未横置可付卡亮金脉冲；已横置暗掉 */
#page-battle .cost-card.payable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    outline: 2px solid var(--border-gold);
    outline-offset: 1px;
    animation: cost-payable-pulse 1.2s ease-in-out infinite;
    border-radius: 6px;
}
/* 划选手势仅限精确指针（鼠标/触控笔）：触屏从卡上起手仍可滚动费用区 */
@media (hover:hover) and (pointer:fine) {
    #page-battle .cost-card.payable { touch-action: none; }
}
@keyframes cost-payable-pulse {
    0%, 100% { box-shadow: 0 0 4px 1px var(--gold-glow); }
    50%      { box-shadow: 0 0 10px 3px var(--gold-glow); }
}
#page-battle .cost-card.dimmed {
    filter: grayscale(.7) brightness(.45);
    cursor: not-allowed;
}

/* 1b' 身份徽章：✦费用区生效 / ●信号球标记（按颜色着色） */
.cost-card .cost-bdg {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 10px;
    line-height: 12px;
    font-weight: 700;
    text-shadow: 0 0 3px #000, 0 0 4px #000;
    pointer-events: none;
}
.cost-card .cost-bdg.bdg-orb { top: 12px; }
.cost-card .cost-bdg.orb-红 { color: #ff6b6b; }
.cost-card .cost-bdg.orb-蓝 { color: #5aa7ff; }
.cost-card .cost-bdg.orb-黄 { color: #ffd24a; }
.cost-card .cost-bdg.bdg-eff { color: var(--gold-bright); }
/* B4 批：费用区【起】可发动徽章（id221/222/223/226 艾拉·万华）——青色闪电，脉冲呼吸提示 */
.cost-card .cost-bdg.bdg-act { top: 24px; color: #35e0c8; animation: zs-act-pulse 1.6s ease-in-out infinite; }
@keyframes zs-act-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 1c' 常驻支付进度（绝对定位悬浮于费用条上方：出现/消失不引发布局回流，
   划选中途卡牌位置稳定不跳动） */
#page-battle .cost-bar { position: relative; }
#page-battle .cost-bar .cost-progress {
    position: absolute;
    left: 50%;
    top: -4px;
    transform: translate(-50%, -100%);
    z-index: 5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gold-bright);
    background: rgba(20, 16, 8, .92);
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* 1d'/1e' 取消出牌 / 返回重选按钮 */
#page-battle .actions-zone .play-assist-group { display: flex; flex-direction: column; gap: 6px; }
#page-battle .action-btn.play-assist {
    padding: 7px 4px;
    font-size: 12px;
    color: var(--gold-bright);
    border-color: var(--border-gold);
    background: linear-gradient(160deg, rgba(var(--brand-rgb), .18), rgba(var(--brand-rgb), .06));
}
/* 窄屏（<480px，按钮区本就溢出视口）：支付辅助按钮组改为悬浮于手牌上方，
   保证触屏玩家在支付流程中始终够得着「取消出牌」（触屏没有 ESC 替代）。
   同时组脱离文档流后，actions-zone 恢复原型两键布局。 */
@media (max-width: 480px) {
    #page-battle .actions-zone .play-assist-group {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 190px;
        z-index: 360;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
    }
}

/* 3b 攻击者选中：金色脉冲描边 */
#page-battle .card.attacker-selected {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
    border-radius: 6px;
    animation: attacker-pulse 1.2s ease-in-out infinite;
}
@keyframes attacker-pulse {
    0%, 100% { box-shadow: 0 0 6px 2px var(--gold-glow); }
    50%      { box-shadow: 0 0 14px 4px var(--gold-glow); }
}

/* ============================================================
   第五轮 UX（〇e 节）：零滚动决斗盘 + 攻击引导 + 三消可发现性
   ============================================================ */

/* ---- 5-1 零滚动决斗盘：根因修复 ----
   style.css 的 @media(min-width:900px){.battle-slot{min-height:130px}}
   （视口 <900px 宽时反而回落到基础 .battle-slot{min-height:175px}）
   按视口【宽度】钉死了槽位高度，把 1105-1144 段按视口【高度】的
   --card-h 降级链整条废掉：任何窗口下战场行恒 148px（手机 193px），
   决斗盘内容 572px 塞不进 373px 客户区 → 我方战场必须滚动才能看全。
   槽位最小高度改为跟随 --card-h（#page-battle 前缀必胜原型的媒体查询）。 */
#page-battle .battle-slot { min-height: calc(var(--card-h) + 18px); }

/* 5-1b 紧凑条带档 L1（视口高 ≤900px）：压缩非战场条带
   —— 对方费用/信号球条、双方信息带、侵蚀数字。战场行不动。 */
@media (max-height: 900px) {
    #page-battle .opp-zone-strip { min-height: 44px; }
    #page-battle .ozs-div { height: 30px; }
    #page-battle .info-strip { padding: 3px 8px; }
    #page-battle .info-strip .hand-fan .hand-card { width: 20px; height: 30px; }
    #page-battle .cm-value { font-size: 16px; min-width: 22px; }
    #page-battle .cm-box { padding: 2px 8px; }
}
/* 5-1b L2（≤860px）：行内边距与决斗盘间隙收拢，槽位空气层减薄 */
@media (max-height: 860px) {
    #page-battle .field-wrap { gap: 5px; padding: 6px 12px; }
    #page-battle .opp-row, #page-battle .my-row { padding: 4px 10px; }
    #page-battle .battle-slot { min-height: calc(var(--card-h) + 10px); }
    #page-battle .opp-zone-strip { min-height: 30px; padding: 2px 8px; }
    #page-battle .ozs-div { height: 16px; }
    #page-battle .divider-row { padding: 0; }
    #page-battle .cost-summary { padding: 1px 8px; }
    #page-battle .info-strip { padding: 2px 8px; }
    #page-battle .info-strip .hand-fan .hand-card { width: 14px; height: 22px; }
    #page-battle .cm-value { font-size: 14px; }
}
/* 5-1b L3（≤740px）：进一步收拢 */
@media (max-height: 740px) {
    #page-battle .field-wrap { gap: 4px; padding: 4px 10px; }
    #page-battle .opp-row, #page-battle .my-row { padding: 3px 8px; }
    #page-battle .battle-slot { min-height: calc(var(--card-h) + 8px); }
    #page-battle .opp-zone-strip { min-height: 26px; }
    #page-battle .info-strip .hand-fan .hand-card { width: 12px; height: 18px; }
    #page-battle .divider-chip { font-size: 10px; padding: 0 6px; }
}
/* 5-1c' 高度档补钉：768 高（1366/1024 笔记本）与 620 以下横屏更激进一档。
   注意：置于宽度档【之前】，让宽度档（更具体的设备类别）在两者都命中时胜出。 */
@media (max-height: 780px) {
    #page-battle { --card-h: 76px; }
    #page-battle .field-wrap { gap: 4px; }
    #page-battle .cost-card { width: 42px; height: 56px; }
}
@media (max-height: 620px) {
    #page-battle { --card-h: 48px; }
    /* 极矮横屏：费用卡同步缩小（点击目标仍 ≥34px 高） */
    #page-battle .cost-card { width: 36px; height: 48px; }
    #page-battle .field-wrap { gap: 3px; }
}
/* 5-1c 窄视口（宽 ≤900 且高 ≥720，即竖屏平板/手机）：与矮视口同待遇。
   手机上顶部导航 + 底部堆叠吃掉大量高度，决斗盘客户区仅 ~360px，
   需要与 ≤740px 高度档同级的压缩才能零滚动。
   高度条件（min-height:720px）避免与更矮的窗口冲突（那边高度档更激进）；
   720 而非 750：360×740 这类矮手机（高 740）也要吃到宽度档。 */
@media (max-width: 900px) and (min-height: 720px) {
    #page-battle { --card-h: 84px; }
    #page-battle .field-wrap { gap: 5px; padding: 6px 10px; }
    #page-battle .opp-row, #page-battle .my-row { padding: 4px 8px; }
    #page-battle .battle-slot { min-height: calc(var(--card-h) + 10px); }
    #page-battle .opp-zone-strip { min-height: 30px; padding: 2px 8px; }
    #page-battle .ozs-div { height: 16px; }
    #page-battle .divider-row { padding: 0; }
    #page-battle .cost-summary { padding: 1px 8px; }
    #page-battle .info-strip { padding: 2px 8px; }
    #page-battle .info-strip .hand-fan .hand-card { width: 14px; height: 22px; }
    #page-battle .cm-value { font-size: 14px; }
}
@media (max-width: 480px) and (min-height: 720px) {
    #page-battle { --card-h: 70px; }
    #page-battle .field-wrap { gap: 3px; padding: 4px 8px; }
    #page-battle .opp-row, #page-battle .my-row { padding: 3px 6px; }
    #page-battle .battle-slot { min-height: calc(var(--card-h) + 8px); }
    #page-battle .opp-zone-strip { min-height: 26px; }
    #page-battle .divider-row { padding: 0; gap: 8px; }
    #page-battle .info-strip .hand-fan .hand-card { width: 12px; height: 18px; }
}
/* 5-1e 全列等比伸缩：手牌卡 / 手牌扇 / 手牌区 / 信号球行此前为固定像素
   （.hand-card 80×112、#my-hand min 138、hand-zone min 158、signal-tray min 64），
   不随 --card-h 降级——矮视口下它们吃掉大半列高，决斗盘被挤到只剩
   133px。全部改为跟随 --card-h 计算，与战场行同步收缩。 */
#page-battle #my-hand .hand-card {
    width: calc(var(--card-h) * .64);
    height: calc(var(--card-h) * .9 + 6px);
}
#page-battle #my-hand { min-height: calc(var(--card-h) * .9 + 10px); }
#page-battle .hand-zone { min-height: calc(var(--card-h) * .9 + 40px); }
/* 对手手牌扇：必须用 #opponent-hand-container 双 ID 选择器才能盖过
   L1016 的固定 30×42（1 ID 3 类打不过 2 ID）；等比缩放后桌面 27×37
   与原视觉几乎一致，矮视口同步收缩，不再把信息带撑到 48px。 */
#page-battle #opponent-hand-container .hand-card {
    width: calc(var(--card-h) * .24);
    min-width: calc(var(--card-h) * .24);
    flex: 0 0 calc(var(--card-h) * .24);
    height: calc(var(--card-h) * .33);
}
#page-battle .signal-tray { min-height: calc(var(--card-h) * .42 + 18px); }
/* 5-1f 防纵向换行：窄屏下 CJK 文本在 flex 子项里被逐字竖排
   （cm-label"对手侵蚀"56px 高、divider-chip 45px、cost-summary 49px），
   单行元素一律 nowrap；cost-summary 超宽省略。 */
#page-battle .cm-label,
#page-battle .info-item,
#page-battle .divider-chip,
#page-battle .cost-summary,
#page-battle .ozs-label,
#page-battle .zone-label { white-space: nowrap; }
#page-battle .cost-summary { overflow: hidden; text-overflow: ellipsis; }
/* 5-1g top-bar 窄屏受控换行：player-info 的 min-width:200 在 <1100px 时
   把 phase-stepper 挤成竖排（139px 高）。放开最小宽 + 允许 wrap +
   手机档紧凑化，换行后为 2 行小高度而非竖排长条。 */
#page-battle .top-bar { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 1200px) {
    #page-battle .player-info { min-width: 0; }
}
/* ≤1000：阶段步进条压缩一档（条目 11px）+ 独占一行，
   避免在 616~740px 内容宽下与两侧信息挤成 105px 高的三行错落。 */
@media (max-width: 1000px) {
    #page-battle .phase-item { font-size: 11px; padding: 3px 7px; }
    #page-battle .phase-stepper { gap: 1px; padding: 3px 5px; }
    #page-battle .erosion-pip { width: 8px; height: 8px; }
    #page-battle .erosion-track { gap: 2px; }
    #page-battle .player-name { font-size: 12px; }
    #page-battle .stepper-col { flex-basis: 100%; order: 3; justify-content: center; display: flex; }
}
@media (max-width: 600px) {
    #page-battle .erosion-pip { width: 7px; height: 7px; }
    #page-battle .erosion-track { gap: 2px; }
    #page-battle .player-name { font-size: 11px; }
    #page-battle .erosion-value { font-size: 12px; }
    #page-battle .phase-stepper { padding: 2px 4px; gap: 1px; }
    #page-battle .phase-item { font-size: 10px; padding: 2px 5px; }
    #page-battle .sub-steps { margin-top: 1px; }
    /* 阶段步进独占一行居中，防止条目在残余宽度里竖排堆叠 */
    #page-battle .stepper-col { flex-basis: 100%; order: 3; justify-content: center; display: flex; }
}
/* 5-1d 兜底：极端视口若仍溢出，底部内阴影提示可下滚（绝不静默裁剪） */
#page-battle .field-wrap.fw-overflow {
    box-shadow: inset 0 -22px 16px -14px rgba(0, 0, 0, .85);
}
/* 5-1h 侧栏搬迁（窄屏）：game-container 为 flex 行 [battle-main | side-panel 250px]，
   手机上战场被挤到只剩 ~106px 宽（视口−284）。按"适配玩家"原则，
   ≤760px 宽（手机/窄平板）时 side-panel（牌堆+战斗日志）搬到决斗区下方成横条：
   牌堆横排 + 日志折叠为单行最新消息（点击 log-latest 仍可展开完整日志）。
   820~900 的桌面窄窗不搬——侧栏在右侧尚可容纳（战场 ~540px 宽）。 */
@media (max-width: 760px) {
    #page-battle .game-container { flex-direction: column; gap: 6px; }
    #page-battle .side-panel {
        width: auto; min-width: 0; flex: 0 0 auto;
        flex-direction: row; gap: 8px;
    }
    #page-battle .pile-panel { flex: 0 0 auto; }
    #page-battle .pile { padding: 4px 8px; }
    #page-battle .pile .count { font-size: 14px; }
    #page-battle .pile .label { font-size: 8px; }
    #page-battle .log-panel { flex: 1 1 auto; min-height: 0; max-height: 30px; overflow: hidden; }
    #page-battle .log-panel .log-head { padding: 4px 8px; }
    /* 折叠为单行最新日志（等价 .collapsed 视觉），点击 log-latest 可展开 */
    #page-battle .log-panel .log-body { display: none; }
    #page-battle .log-panel .log-latest { display: flex; }
    #page-battle .log-panel .log-head .t { font-size: 10px; }
    #page-battle .log-panel .clear-btn { display: none; }
}

/* ---- 5-2 攻击引导 ----
   选中攻击者后：对方信息带成为「直击目标」（红色虚线框 + 呼吸光），
   顶部出现引导条；hover 对方角色/信息带 → #attack-preview 战斗预演。 */
#page-battle .info-strip.opp { position: relative; }
#page-battle .info-strip.opp.direct-target {
    border-color: rgba(229, 62, 62, .7);
    border-style: dashed;
    box-shadow: 0 0 14px rgba(229, 62, 62, .3), inset 0 0 12px rgba(229, 62, 62, .08);
    cursor: crosshair;
    animation: direct-target-pulse 1.3s ease-in-out infinite;
}
@keyframes direct-target-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(229, 62, 62, .18), inset 0 0 6px rgba(229, 62, 62, .05); }
    50%      { box-shadow: 0 0 16px rgba(229, 62, 62, .42), inset 0 0 14px rgba(229, 62, 62, .12); }
}
#page-battle .info-strip.opp.direct-target::after {
    content: '⚔ 直击';
    position: absolute;
    right: 8px;
    top: -9px;
    font-size: 10px;
    letter-spacing: 1px;
    color: #ffb3b3;
    background: rgba(20, 8, 10, .95);
    border: 1px solid rgba(229, 62, 62, .6);
    border-radius: 8px;
    padding: 0 7px;
    pointer-events: none;
}
#page-battle .attack-hint-chip {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 40;
    font-size: 12px;
    color: var(--gold-bright);
    background: rgba(16, 13, 6, .94);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 5px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s, transform .18s;
    white-space: nowrap;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-battle .attack-hint-chip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* 战斗预演面板的结论行 */
#page-battle .attack-preview .verdict-win { color: #ffb84d; font-weight: 700; }
#page-battle .attack-preview .verdict-lose { color: var(--text-dim); }
#page-battle .attack-preview .hint {
    color: var(--text-dim);
    font-size: 10px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 4px;
    line-height: 1.5;
}

/* ---- 5-3 三消可发现性 ----
   信号球计数角标（球区右下角）+ 可消时按钮金色脉冲 + 进度文案 N/3。 */
#page-battle .signal-tray .orb-count-chip {
    position: absolute;
    right: 6px;
    bottom: 3px;
    z-index: 4;
    font-size: 10px;
    color: var(--cyan);
    background: rgba(6, 16, 20, .92);
    border: 1px solid var(--cyan-border);
    border-radius: 8px;
    padding: 0 7px;
    pointer-events: none;
    letter-spacing: 1px;
}
#page-battle #btn-triple-elimination.ready {
    color: var(--gold-bright);
    border-color: var(--border-gold);
    animation: attacker-pulse 1.2s ease-in-out infinite;
}

/* ============================================================
   第六轮（〇f 节）：三处交互修复
   6-1 / 6-2 为 JS 侧（js/15、js/03），此处只承载 6-3 视觉规则。
   ============================================================ */
/* 6-3 我方信号球区倾斜方向：向左倒。
   style.css 基类 .signal-orb 为 rotate(90deg)（向右倒），与全局横置
   设计语言冲突——费用区横置卡（.cost-card.tapped）与对方球区
   （.opponent-signal-tray .signal-orb）均为 rotate(-90deg) 向左倒，
   原型里信号球区的球也统一左倾堆叠。双 ID 选择器盖过基类与基类 hover。 */
#page-battle #signal-tray .signal-orb { transform: rotate(-90deg); }
#page-battle #signal-tray .signal-orb:hover { transform: rotate(-90deg) scale(1.08); }

/* ============================================================
   移动端支持轮（js/22-mobile.js 配套样式）
   ① 决斗页竖屏旋转引导 ② 搜索筛选折叠 ③ 破图占位 ④ 横屏手机档
   ============================================================ */

/* ---- ① 旋转引导遮罩 ----
   默认隐藏；仅「触屏 + 竖屏 + 决斗页激活」时显示。
   pointer:coarse 覆盖手机/平板；桌面窄窗（fine 指针）不显示，
   继续走既有的窄窗压缩适配档。 */
.rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000; /* 高于一切决斗页层（--z-top: 4000） */
    background: rgba(5, 6, 12, .96);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
@media (orientation: portrait) and (pointer: coarse) {
    body.battle-page-active:not(.ui-mode-desktop) .rotate-overlay { display: flex; }
}
.rotate-overlay-card {
    text-align: center;
    max-width: 320px;
    padding: 28px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .7);
}
.rotate-icon {
    font-size: 44px;
    margin-bottom: 10px;
    animation: rotate-hint 2.4s ease-in-out infinite;
    display: inline-block;
}
@keyframes rotate-hint {
    0%, 20%   { transform: rotate(0deg); }
    55%, 80%  { transform: rotate(-90deg); }
    100%      { transform: rotate(0deg); }
}
.rotate-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.rotate-desc {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 16px;
}
.rotate-fs-btn {
    font-family: inherit;
    font-size: 13px;
    color: #0a0a12;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 9px 22px;
    cursor: pointer;
    font-weight: 700;
}
.rotate-fs-btn:active { transform: scale(.97); }
.rotate-tip {
    font-size: 10.5px;
    color: var(--text-dim);
    margin-top: 12px;
    line-height: 1.5;
}

/* ---- ② 卡片搜索筛选折叠 ----
   collapsed 时三行筛选项隐藏，只留工具行的「筛选」按钮（带激活数角标）。
   默认收起状态由 js/22-mobile.js 在 ≤600px 时设置。 */
#page-card-search .filter-toggle {
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    background: rgba(12, 16, 30, .7);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
#page-card-search .filter-toggle:hover { border-color: var(--gold); color: var(--gold-bright); }
#page-card-search .filter-toggle::after {
    content: '▾';
    font-size: 10px;
    color: var(--text-dim);
}
#page-card-search .filter-toggle.collapsed::after { content: '▸'; }
#page-card-search .filter-toggle-badge {
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #0a0a12;
    background: var(--gold);
    border-radius: 8px;
    padding: 0 4px;
}
#page-card-search .filter-section.collapsed .filter-row { display: none; }
#page-card-search .filter-section.collapsed { padding: 0; }
/* 折叠态下搜索框保持单行高度，结果列表不被遮挡 */
#page-card-search .filter-section { transition: none; }

/* ---- ③ 破图占位 ----
   js/22-mobile.js 重试一次仍失败时加 .img-broken：暗色底 + 图标，
   不显示浏览器默认破图裂痕。 */
img.img-broken {
    background: rgba(12, 16, 30, .8);
    color: var(--text-dim);
    object-fit: contain;
}
img.img-broken::after { content: ''; }

/* ---- ④ 横屏手机档（决斗盘横版优化） ----
   横屏手机典型视口：宽 640~930px，高 320~430px。
   既有 max-height:620px 档已把 --card-h 压到 48px；此档补充
   触屏横屏的专项微调：压缩顶栏与内边距，确保零滚动。 */
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
    #page-battle .game-container { padding: 4px 6px; gap: 6px; }
    #page-battle .top-bar { row-gap: 2px; }
    #page-battle .player-name { font-size: 10px; }
    #page-battle .erosion-value { font-size: 11px; }
    #page-battle .phase-item { font-size: 9px; padding: 1px 4px; }
    #page-battle .sub-steps { display: none; } /* 极矮屏隐藏版本标签行 */
    #page-battle .field-wrap { padding: 3px 6px; }
    #page-battle .opp-zone-strip { min-height: 22px; }
    #page-battle .cm-label { font-size: 9px; }
    #page-battle .cm-value { font-size: 12px; }
}

/* ---- ⑤ 手机动态视口高度 ----
   body 的 100vh 在手机浏览器含地址栏高度（视口被高估 → 底部手牌被裁）。
   dvh 随地址栏伸缩；不支持 dvh 的老浏览器维持原 100vh 不受影响。 */
@supports (height: 100dvh) {
    body.main-page-active,
    body.sub-page-active,
    body.battle-page-active { height: 100dvh; }
}

/* ============================================================
   联机体验轮：准备页重设计 + 决斗盘联机交互
   ============================================================ */

/* ---- 联机准备页（#page-waiting 重设计） ---- */
.online-prep {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
    overflow-y: auto;
}
.op-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}
.op-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-bright);
    letter-spacing: 2px;
    margin: 0;
}
.op-room-chip {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-gold);
    background: rgba(var(--brand-rgb), .08);
    border-radius: 10px;
    padding: 5px 8px 5px 12px;
}
.op-room-label { font-size: 10px; color: var(--text-dim); letter-spacing: 2px; }
.op-room-code {
    font-size: 15px;
    color: var(--gold-bright);
    letter-spacing: 3px;
    font-weight: 800;
    font-family: 'Consolas', 'Courier New', monospace;
}
.op-copy-btn {
    font-family: inherit;
    font-size: 11px;
    color: var(--gold-bright);
    background: rgba(var(--brand-rgb), .14);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
}
.op-copy-btn:hover { background: rgba(var(--brand-rgb), .28); }

/* 双方卡位 */
.op-players {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: none;
}
.op-pcard {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    position: relative;
    overflow: hidden;
}
.op-pcard.me { border-color: rgba(var(--brand-rgb), .45); }
.op-pcard.foe { border-style: dashed; }
.op-pcard.foe.joined { border-style: solid; border-color: rgba(229, 62, 62, .45); }
.op-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
}
.op-avatar.me { background: rgba(var(--brand-rgb), .16); color: var(--gold-bright); border: 1px solid var(--border-gold); }
.op-avatar.foe { background: rgba(229, 62, 62, .14); color: #ff9b9b; border: 1px solid rgba(229, 62, 62, .4); }
.op-pname {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-bright);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-deck-btn {
    width: 100%;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: rgba(12, 16, 30, .65);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
    cursor: pointer;
    color: var(--text);
}
.op-deck-btn:hover { border-color: var(--gold); }
.op-deck-icon { font-size: 20px; line-height: 1; }
.op-deck-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-deck-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-deck-count { font-size: 10.5px; color: var(--text-dim); }
.op-deck-arrow { color: var(--text-dim); font-size: 11px; }
.op-deck-fake {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(12, 16, 30, .45);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 9px 11px;
    opacity: .8;
}
.op-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px 12px;
}
.op-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #666;
}
.op-status.ready { color: #7dd0a0; border-color: rgba(72, 187, 120, .5); background: rgba(72, 187, 120, .08); }
.op-status.ready .op-dot { background: #48bb78; box-shadow: 0 0 6px rgba(72, 187, 120, .8); }

.op-vs {
    display: flex;
    align-items: center;
    flex: none;
}
.op-vs span {
    font-size: 16px;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 1px;
    text-shadow: 0 0 12px var(--gold-glow);
}

/* 中部状态与行动区 */
.op-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 120px;
}
.op-state-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--text-dim);
    letter-spacing: .5px;
}
.op-state-line.ready { color: var(--gold-bright); }
.waiting-spinner-mini {
    width: 14px;
    height: 14px;
    flex: none;
    border: 2px solid rgba(var(--brand-rgb), .25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin-mini 1s linear infinite;
}
.op-state-line.ready .waiting-spinner-mini { display: none; }
@keyframes spin-mini { to { transform: rotate(360deg); } }
#page-waiting .online-btn { min-width: 200px; justify-content: center; }
.op-tips {
    flex: none;
    font-size: 10.5px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.6;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 8px 14px;
}

/* ---- 结果页双按钮 ---- */
#page-match-result .result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
    flex-wrap: wrap;
}

/* ---- 大厅卡组提示 ---- */
.lobby-deck-section .section-title { margin-bottom: 8px; }
.lobby-deck-hint {
    font-size: 12.5px;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lobby-deck-hint .deck-name { color: var(--gold-bright); font-weight: 700; }
.lobby-deck-hint .deck-warn { color: #ffb36b; }
.lobby-deck-hint .deck-ok { color: #7dd0a0; }

/* ---- 联机决斗盘交互 ----
   ① 角色放置模式：空战场格脉冲金框（区别于攻击高亮的红色） */
.my-battlefield .battle-slot.online-slot-target {
    outline: 2px dashed var(--gold);
    outline-offset: -2px;
    border-radius: 8px;
    animation: online-slot-pulse 1.1s ease-in-out infinite;
    cursor: pointer;
}
@keyframes online-slot-pulse {
    0%, 100% { box-shadow: inset 0 0 0 rgba(var(--brand-rgb), .05); }
    50%      { box-shadow: inset 0 0 18px rgba(var(--brand-rgb), .3); }
}
/* ② 待放置手牌高亮（复用 .selected 基础上加脉冲） */
#my-hand .hand-card.online-pending {
    box-shadow: 0 0 0 2px var(--gold), 0 0 16px var(--gold-glow);
    transform: translateY(-6px);
}
/* ③ 联机模式三消按钮禁用态 */
#page-battle #btn-triple-elimination.online-off {
    opacity: .45;
    cursor: not-allowed;
}


/* ==================================================================
   联机全套规则 · 远端决策面板（js/23-online-fullrules.js）
   复用 .block-decision-* 的既有视觉，只补容器与专属元素
   ================================================================== */
.fr-decision-overlay {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 8, 14, .72);
    backdrop-filter: blur(3px);
}
.fr-decision-overlay .block-decision-panel {
    max-height: 82vh;
    overflow-y: auto;
}
.fr-decision-empty {
    color: var(--text-dim, #8a93a6);
    font-size: 13px;
    padding: 12px 4px;
    text-align: center;
}
/* 弃牌多选网格：与手牌等比缩放，手机端两列 */
.fr-discard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin: 10px 0 14px;
    max-height: 46vh;
    overflow-y: auto;
}
.fr-discard-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    padding: 4px;
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    line-height: 1.25;
    transition: border-color .15s, transform .15s;
}
.fr-discard-card img {
    width: 100%;
    border-radius: 5px;
    display: block;
}
.fr-discard-card.selected {
    border-color: var(--gold, var(--brand));
    box-shadow: 0 0 0 2px var(--gold, var(--brand)), 0 0 14px rgba(var(--brand-rgb), .35);
    transform: translateY(-3px);
}
.fr-discard-card span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 充能选项按钮沿用 block-option-btn，仅确保长文案换行 */
.charge-option-btn {
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}
/* 移动端：面板贴近底部，按钮可点区域加大 */
@media (max-width: 640px) {
    .fr-decision-overlay { align-items: flex-end; }
    .fr-decision-overlay .block-decision-panel {
        width: 100%;
        max-height: 88dvh;
        border-radius: 14px 14px 0 0;
    }
    .fr-discard-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}


/* ============================================================
   子页内容滚动修复：个人中心 / 好友页内容区加入滚动白名单
   style.css 的 .sub-page-container{height:100vh;overflow:hidden} 只给
   card-list/preset/settings/tutorial 四类容器开了内部滚动，
   .personal-content 与 .friends-page-body 超高时被裁掉且无法滑动。
   ============================================================ */
.sub-page-container > .personal-content,
.sub-page-container > .friends-page-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   卡组编辑器 · 移动端抽屉式重构（A 档）
   手机竖屏：主视图 = 我的卡组（分组行），卡库 = 底部抽屉，FAB 唤起
   手机横屏 / 桌面：恢复双栏（内联 1000px 断点行为升级）
   ============================================================ */

/* --- 分组卡组行 / FAB / 抽屉头：默认隐藏，仅手机竖屏启用 --- */
#deck-grid-grouped { display: none; }
#dwb-add-fab { display: none; }
#dwb-sheet-head { display: none; }
.dwb-grp-row {
    display: flex; align-items: center; gap: 9px;
    margin: 6px 12px; padding: 8px 10px;
    background: rgba(0,0,0,.25); border: 1px solid rgba(var(--brand-rgb),.2); border-radius: 10px;
    position: relative; cursor: pointer;
}
.dwb-grp-row .grp-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 8px 0 0 8px; background: var(--ac, var(--brand)); }
.dwb-grp-row .grp-img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: #0e0e1a; }
.dwb-grp-row .grp-noimg { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #1c2440; color: var(--brand-bright); font-size: 18px; font-weight: 800; }
.dwb-grp-row .grp-body { flex: 1; min-width: 0; }
.dwb-grp-row .grp-name { font-size: 14px; font-weight: 700; color: #e0d8c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwb-grp-row .grp-meta { font-size: 11px; color: #8a8070; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwb-grp-row .grp-count { font-size: 13px; font-weight: 800; color: var(--brand-bright); min-width: 24px; text-align: center; }
.dwb-grp-row .grp-btn {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    border: 1px solid rgba(var(--brand-rgb),.4); background: rgba(var(--brand-rgb),.1); color: var(--brand-bright);
    font-size: 18px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dwb-grp-row .grp-btn:active { transform: scale(.92); }
.dwb-grp-row .grp-btn.grp-minus { border-color: rgba(229,62,62,.45); background: rgba(229,62,62,.12); color: #ff9b9b; }
.dwb-grp-row .grp-btn.disabled { opacity: .3; pointer-events: none; }

/* 抽屉头部（把手 + 标题 + 关闭） */
#dwb-sheet-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; flex: none;
}
.dwb-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(var(--brand-rgb),.4); }
.dwb-sheet-title { flex: 1; font-size: 14px; font-weight: 800; color: var(--brand-bright); letter-spacing: 2px; }
#dwb-sheet-close {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(var(--brand-rgb),.35); background: rgba(0,0,0,.3); color: var(--brand-bright);
    font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* FAB 拇指热区大按钮 */
#dwb-add-fab {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    padding: 14px 22px; border-radius: 24px;
    border: 1px solid rgba(var(--brand-rgb),.5);
    background: linear-gradient(160deg, var(--brand-bright), var(--brand)); color: #151515;
    font-size: 15px; font-weight: 800; letter-spacing: 1px;
    box-shadow: 0 8px 24px rgba(var(--brand-rgb),.35); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#dwb-add-fab:active { transform: scale(.95); }

/* ============ 手机竖屏（≤767px + portrait）：抽屉模式 ============ */
@media (max-width: 767px) and (orientation: portrait) {
    /* ============ 卡组编辑器 · 手机竖屏抽屉（唯一权威块） ============
       结构 .dwb-right（底部固定抽屉，grid 4 行）：
         row1 #dwb-sheet-head / row2 .dwb-pane-title / row3 .dwb-filters
         row4 #dwb-pool（minmax(0,1fr) 自动占满剩余空间并滚动）
       卡池排版与主站卡牌搜索页完全一致（search-card-item 卡图网格）。
       历史教训：不要在此改 .dwb-pool 的 display——内联 <style> 的
       display:grid + auto-fill 列正是搜索页排版，改成 flex 会让卡片
       失去网格宽高约束而塌成金色细线。 */
    #page-deck-editor .dwb-right {
        position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 50;
        height: 72vh; height: 72dvh;            /* dvh 不支持时回退 vh */
        max-height: 72vh; max-height: 72dvh;
        background: #0b0b15; border-radius: 16px 16px 0 0;
        border-top: 1px solid rgba(var(--brand-rgb),.4);
        box-shadow: 0 -12px 40px rgba(0,0,0,.6);
        transform: translateY(105%); transition: transform .28s ease;
        display: grid !important;
        grid-template-rows: auto auto auto minmax(0, 1fr) !important;
        overflow: hidden;
    }
    #page-deck-editor.sheet-open .dwb-right { transform: translateY(0); }
    #dwb-sheet-head { display: flex; }
    /* Tab 状态类只用于保左栏可见，不得触碰抽屉布局 */
    #page-deck-editor.tab-pool .dwb-left { display: flex !important; }

    /* --- 左栏：分组卡组行 + FAB --- */
    #page-deck-editor .deck-grid.dwb-grid { display: none !important; }
    #deck-grid-grouped { display: block; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .dwb-tabs { display: none !important; }
    #dwb-add-fab { display: flex; }

    /* --- 抽屉内筛选：关键词行独占，其余变横向滑动芯片 --- */
    #page-deck-editor .dwb-filters { gap: 7px; }
    #page-deck-editor .dwb-filters .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #page-deck-editor .dwb-filters .filter-row::-webkit-scrollbar { display: none; }
    #page-deck-editor .dwb-filters .filter-buttons { flex-wrap: nowrap; }
    #page-deck-editor .dwb-filters .filter-label { width: auto; }
    #page-deck-editor .dwb-filters .dwb-kw { flex: 1 1 100%; min-width: 0; }
    #page-deck-editor.sheet-open .dwb-filters:not(.expanded) .filter-row:nth-child(n+2) { display: flex; }
    #page-deck-editor .dwb-filter-toggle { display: none; }
    #page-deck-editor .dwb-filters .filter-btn {
        padding: 7px 14px; font-size: 12.5px; min-height: 34px;
        flex: 0 0 auto; white-space: nowrap;
    }
    #page-deck-editor .dwb-kw { font-size: 16px; }   /* 防 iOS 自动缩放 */

    /* --- 卡池：搜索页同款 grid，只微调间距与滚动 --- */
    #page-deck-editor .dwb-pool {
        gap: 8px !important; padding: 10px 12px !important;
        overflow-y: auto !important; min-height: 0 !important;
    }
    #page-deck-editor .dwb-pool .search-card-item.maxed { opacity: .4; }

    /* --- 键盘弹出时抽屉自动降低（JS visualViewport 写入 --kbd-h） --- */
    #page-deck-editor .dwb-right {
        height: min(72vh, calc(100vh - var(--kbd-h, 0px)));
        height: min(72dvh, calc(100dvh - var(--kbd-h, 0px)));
        max-height: min(72vh, calc(100vh - var(--kbd-h, 0px)));
        max-height: min(72dvh, calc(100dvh - var(--kbd-h, 0px)));
    }

    /* --- 顶栏瘦身：名字收窄，保存保持可见 --- */
    #page-deck-editor .dwb-name { width: 84px; font-size: 12.5px; }
}

/* ============ 手机横屏（≤899px landscape）：恢复紧凑双栏 ============ */
@media (max-width: 899px) and (orientation: landscape) {
    #page-deck-editor .dwb-columns {
        display: grid !important; grid-template-columns: minmax(0,44%) 1fr !important;
        flex-direction: row !important; overflow: hidden !important;
    }
    #page-deck-editor .dwb-left { display: flex !important; max-height: none; border-bottom: none; }
    #page-deck-editor .dwb-right {
        position: static !important; transform: none !important;
        height: auto !important; max-height: none !important;
        border-radius: 0 !important; box-shadow: none !important;
        border-top: none !important; display: flex !important;
    }
    #page-deck-editor .deck-grid.dwb-grid { display: grid !important; overflow-y: auto !important; }
    #deck-grid-grouped { display: none !important; }
    #dwb-add-fab { display: none !important; }
    #dwb-sheet-head { display: none; }
    .dwb-tabs { display: flex; }
}


/* ============ 决斗页 · 双端渲染 ============
   一套程序两种盘：大屏（桌面/平板）完整盘；小屏（手机）紧凑盘。
   分档由 js/22-mobile.js 实测有效视口决定，挂 #page-battle 上的
   .bp-compact / .bp-large 类（min(宽,高) < 560 → 紧凑）。

   ---- A. 竖屏强制横屏几何（放行后仍竖屏的兜底，仅几何不改布局） ----
   触发：触屏+竖屏+决斗页激活+已点过旋转弹窗（rotate-dismissed）。
   只负责把 #page-battle 旋转 90° 占满竖屏（手机向左倒观看）；
   里面的布局一律交给上面的分档类——旋转时视口按竖屏求值，
   @media 阶梯会错判，bp-compact 的类选择器特异性更高、不受骗。
   数学：rotate(90deg) 以 top-left 为轴把元素甩到屏幕上方之外，
   translateY(-100%) 拉回视口；漏了这句 = 整页在屏幕外 = 空白。 */
body.force-landscape-battle #page-battle {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: 100vh; height: 100vw;
    width: 100dvh;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    overflow: hidden;
}
/* style.css 基类 .game-container{width:100vw} 在竖屏视口只有 ~390px，
   会把旋转后的容器限宽漏出空带 → 用 100% 跟随旋转容器 */
body.force-landscape-battle #page-battle .game-container {
    width: 100% !important; height: 100% !important;
}

/* ---- B. 手机紧凑盘（.bp-compact 基础档 / .bp-tiny 极小屏档）----
   实测教训：min-height 压不过内容固有高度（info-strip 内容 21px、
   行内容 57px），flex 仍然溢出 → 对手区被裁。改用固定高度硬预算：
   每个条带 height 固定 + overflow hidden，行高 = 卡高公式，
   总预算（基础档，卡高 44）：
   顶栏24 + 带16 + 公开条14 + 行48 + 分隔6 + 行48 + 带16 + 小结14 +
   费用36 + 信号32 + 手牌52 + 间隙12 ≈ 318 ≤ 356(360 手机旋转) ✓
   tiny 档（有效高 <350）≈ 266 ≤ 316(320 手机) ✓
   field-wrap 保留纵向滚动兜底：极端情形宁可滚动也绝不静默裁切。 */
#page-battle.bp-compact { --card-h: 54px; --slot-gap: 4px; }
#page-battle.bp-compact.bp-tiny { --card-h: 46px; --slot-gap: 3px; }
#page-battle.bp-compact .game-container { padding: 2px 3px; gap: 0; width: 100% !important; height: 100% !important; }
#page-battle.bp-compact .battle-main { gap: 2px; overflow: hidden; }

/* --- 侧栏：收为 0 宽宿主（内部浮层仍可弹出） --- */
#page-battle.bp-compact .side-panel {
    width: 0 !important; min-width: 0 !important; flex: 0 0 0 !important;
    overflow: visible; gap: 0;
}
#page-battle.bp-compact .side-panel .pile-panel { display: none; }
#page-battle.bp-compact .side-panel .log-panel { display: none; }
/* 日志浮层：浮钮点开 */
#page-battle.bp-compact.bp-log-open .log-panel {
    display: flex !important;
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(480px, 94%); height: min(70%, 380px);
    z-index: 3900; box-shadow: 0 16px 50px rgba(0,0,0,.7);
    background: var(--bg-zone, #12131f);
}
/* 墓地详情 / 瞬时战术：显示时全屏浮层 */
#page-battle.bp-compact .side-panel .graveyard-view,
#page-battle.bp-compact .side-panel .instant-zone {
    position: fixed !important; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 3950; width: auto !important; height: auto !important;
    overflow-y: auto; background: rgba(5, 6, 12, .94) !important;
}
/* 日志浮钮：左缘中点 */
#bp-log-fab {
    display: none;
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    z-index: 3650;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(var(--brand-rgb),.55);
    background: rgba(12,16,30,.9); color: var(--gold-bright, var(--brand-bright));
    font-size: 14px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
#page-battle.bp-compact #bp-log-fab { display: flex; }

/* ★P2 修复（审计 P2-I）：对方信息带「墓地 N」计数可点——打开对方墓地详情浮层。
   与 15 的 #opp-strip-grave 点击绑定配套；grabbable 类由 14 的渲染层在对方墓地非空时加上。 */
#page-battle #opp-strip-grave.grabbable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(var(--brand-rgb, 212, 175, 55), .55);
    transition: color .15s, border-color .15s;
}
#page-battle #opp-strip-grave.grabbable:hover {
    color: var(--gold-bright, var(--brand-bright, #f0c040));
    border-color: var(--gold-bright, var(--brand-bright, #f0c040));
}
/* 紧凑档信息带只有 12px，dashed 下划线易越界——改用 hover 变色即可 */
#page-battle.bp-compact #opp-strip-grave.grabbable { border-bottom: none; }

/* ★P1 修复（审计 P1-⑦）：紧凑盘日志入口按钮——放在顶栏 sub-steps（非悬浮，不挡视野）。
   复用 .ui-version-tag 基础尺寸/圆角，加可点击反馈。 */
.btn-log-toggle {
    font-size: 12px;
    padding: 1px 6px;
    margin-left: 4px;
    border: 1px solid rgba(var(--brand-rgb),.4);
    background: rgba(12,16,30,.55);
    color: var(--gold-bright, var(--brand-bright));
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.4;
}
.btn-log-toggle:active { transform: scale(.96); }
.btn-log-toggle.active {
    background: rgba(var(--brand-rgb),.28);
    border-color: rgba(var(--brand-rgb),.85);
}
#page-battle.bp-compact .btn-log-toggle { font-size: 11px; }

/* --- 顶栏：固定 22px 单行 --- */
#page-battle.bp-compact .top-bar {
    padding: 0 4px; row-gap: 0;
    height: 20px; overflow: hidden; flex: 0 0 20px;
    align-items: center;
}
#page-battle.bp-compact .player-name { font-size: 8px; line-height: 1; }
#page-battle.bp-compact .erosion-pip { width: 5px; height: 5px; }
#page-battle.bp-compact .erosion-value { font-size: 9px; line-height: 1; }
#page-battle.bp-compact .phase-item { font-size: 7px; padding: 1px 2px; line-height: 1.1; }
#page-battle.bp-compact .phase-stepper { padding: 1px 2px; gap: 1px; }
#page-battle.bp-compact .sub-steps { display: none; }
/* ★P2 修复（审计 P2-⑦ 回归 + P2「手机回合数不可见」）：
   bp-compact 下 sub-steps 整行隐藏会把日志按钮 #btn-log-open 也藏掉
   （它专为紧凑盘设计，却在大屏才可见——P1-⑦ 的原始目标落空）。
   恢复 sub-steps 显示，仅保留日志按钮，藏掉
   current-turn / turn-number / current-phase 文本与 v3 版本标签
   （信息带 12px 单行放不下，回合数由 phase-stepper 上的点承担）。
   注意：日志按钮 class="ui-version-tag btn-log-toggle" 是 button 元素，
   v3 标签是 span.ui-version-tag——用 span 限定才能精准藏 v3 而不误藏按钮。 */
#page-battle.bp-compact .sub-steps { display: flex; gap: 2px; align-items: center; }
#page-battle.bp-compact .sub-steps > span:not(#btn-log-open) { display: none; }
#page-battle.bp-compact .btn-log-toggle { font-size: 10px; padding: 0 4px; margin-left: 0; min-width: 22px; }
#page-battle.bp-compact .stepper-col { flex-basis: auto !important; order: 0 !important; }
#page-battle.bp-compact .player-info { min-width: 0; }

/* --- 信息带（双方）：固定 14px 单行 --- */
#page-battle.bp-compact .info-strip {
    padding: 1px 5px; height: 12px; flex: 0 0 12px;
    overflow: hidden; align-items: center;
}
#page-battle.bp-compact .info-item { font-size: 8px; line-height: 1; }
#page-battle.bp-compact .cm-label { font-size: 7px; line-height: 1; }
#page-battle.bp-compact .cm-value { font-size: 9px; min-width: 13px; line-height: 1; }
#page-battle.bp-compact .cm-track { display: none; }
#page-battle.bp-compact .info-strip .hand-fan .hand-card { width: 8px; height: 10px; }

/* --- 对方公开区条：固定 12px --- */
#page-battle.bp-compact .opp-zone-strip {
    min-height: 0; height: 20px; flex: 0 0 20px;
    padding: 1px 5px; overflow: hidden; align-items: center;
}
#page-battle.bp-compact .ozs-label { font-size: 7px; line-height: 1; }
#page-battle.bp-compact .ozs-div { height: 8px; }
#page-battle.bp-compact .opp-zone-strip .cost-card { width: 14px; height: 18px; }
#page-battle.bp-compact .opp-zone-strip .signal-orb { width: 12px; height: 16px; }

/* --- 战场：行高 = 卡高+4；可滚动兜底 --- */
#page-battle.bp-compact .field-wrap {
    padding: 2px 3px; gap: 1px; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#page-battle.bp-compact .row-wrap { flex: 0 0 auto; min-height: 0; gap: 3px; }
#page-battle.bp-compact .opp-row, #page-battle.bp-compact .my-row {
    padding: 1px 3px; min-height: 0; align-items: center;
}
#page-battle.bp-compact .battle-slot {
    min-height: 0; height: calc(var(--card-h) + 4px);
    /* 槽位宽度贴合卡牌，不再 flex 拉伸成胖盒子挡处理区 */
    flex: 0 0 auto !important; width: calc(var(--card-h) * .72 + 8px);
}
#page-battle.bp-compact .pz-side {
    flex: 0 0 calc(var(--card-h) * .72 + 10px) !important;
    min-width: calc(var(--card-h) * .72 + 10px); min-height: 0;
    height: calc(var(--card-h) + 4px); overflow: hidden;
    justify-content: center; gap: 2px;
}
#page-battle.bp-compact .pz-big { width: calc(var(--card-h) * .64); height: calc(var(--card-h) * .8); }
#page-battle.bp-compact .pz-big { font-size: 8px; line-height: 1.1; }
#page-battle.bp-compact .zone-label { display: none; }

/* --- 分隔行 / 费用小结 --- */
#page-battle.bp-compact .divider-row { padding: 0; height: 4px; flex: 0 0 4px; min-height: 0; overflow: hidden; align-items: center; }
#page-battle.bp-compact .divider-chip { font-size: 7px; padding: 0 3px; line-height: 1; }
#page-battle.bp-compact .divider-line { margin: 0; }
#page-battle.bp-compact .cost-summary { font-size: 7px; padding: 0 4px; height: 10px !important; flex: 0 0 10px; line-height: 10px; overflow: hidden; min-height: 0; }

/* --- 费用区：42px（费用卡 32×42，群友反馈原 22×28 太挤而放大；bp-tiny 仍回落小尺寸） --- */
#page-battle.bp-compact .cost-bar { padding: 1px 5px; gap: 4px; min-height: 0; height: 42px; flex: 0 0 42px; overflow: hidden; align-items: center; }
#page-battle.bp-compact .cost-bar-label { font-size: 10px; line-height: 1; }
#page-battle.bp-compact .cost-bar .cost-card,
#page-battle.bp-compact .cost-zone .cost-card { width: 32px; height: 42px; flex: 0 0 32px; }
#page-battle.bp-compact .cost-card .cc-name { font-size: 8px; }
#page-battle.bp-compact .cost-cap { display: none; }

/* --- 底部：信号球 42px（球 28×36 完整露出）；手牌弹性填充 --- */
#page-battle.bp-compact .bottom-wrap { flex-direction: column; gap: 2px; padding-top: 2px; flex: 0 0 auto; }
#page-battle.bp-compact .signal-row { min-height: 0; height: 42px; flex: 0 0 42px; overflow: hidden; align-items: center; }
#page-battle.bp-compact .signal-row .zone-label { display: none; }
#page-battle.bp-compact .sig-bottom-anchor { display: none; }
#page-battle.bp-compact .signal-tray { min-height: 0; }
#page-battle.bp-compact #signal-tray .signal-orb { width: 28px; height: 36px; margin: 1px 2px; }
#page-battle.bp-compact .triple-btn { font-size: 8px; padding: 2px 5px; height: 26px; }
#page-battle.bp-compact .main-bottom { flex-direction: row; gap: 4px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
#page-battle.bp-compact .hand-zone {
    flex: 1 1 auto; min-height: 0 !important; padding: 2px; overflow: hidden;
    align-items: center;
}
#page-battle.bp-compact #my-hand { min-height: 0; align-items: center; }
#page-battle.bp-compact .hand-label { display: none; }
#page-battle.bp-compact .hand-sort-btn { font-size: 7px; padding: 1px 4px; }
#page-battle.bp-compact .actions-zone { flex: 0 0 76px; flex-direction: column; gap: 3px; }
#page-battle.bp-compact .actions-zone .action-btn { font-size: 9px; padding: 3px 2px; height: 28px; min-height: 0; }

/* --- bp-tiny 极小屏档（有效高 <350）：卡高 46 --- */
/* bp-tiny 空间最紧：费用/信号球回落紧凑尺寸（优先级高于上方 bp-compact 放大） */
#page-battle.bp-tiny .cost-bar { height: 30px; flex-basis: 30px; }
#page-battle.bp-tiny .cost-bar .cost-card,
#page-battle.bp-tiny .cost-zone .cost-card { width: 22px; height: 28px; flex-basis: 22px; }
#page-battle.bp-tiny .cost-bar-label { font-size: 8px; }
#page-battle.bp-tiny .signal-row { height: 30px; flex-basis: 30px; }
#page-battle.bp-tiny #signal-tray .signal-orb { width: 18px; height: 24px; }
#page-battle.bp-compact.bp-tiny .top-bar { height: 20px; flex-basis: 20px; }
#page-battle.bp-compact.bp-tiny .info-strip { height: 12px; flex-basis: 12px; }
#page-battle.bp-compact.bp-tiny .opp-zone-strip { height: 18px; flex-basis: 18px; }
#page-battle.bp-compact.bp-tiny .battle-slot { height: calc(var(--card-h) + 2px); }
#page-battle.bp-compact.bp-tiny .pz-side { height: calc(var(--card-h) + 2px); }
#page-battle.bp-compact.bp-tiny .opp-row, #page-battle.bp-compact.bp-tiny .my-row { padding: 1px 2px; }
#page-battle.bp-compact.bp-tiny .divider-row { height: 4px; flex-basis: 4px; }
#page-battle.bp-compact.bp-tiny .cost-summary { height: 10px !important; flex-basis: 10px; line-height: 10px; }
#page-battle.bp-compact.bp-tiny .cost-bar { height: 28px; flex-basis: 28px; }
#page-battle.bp-compact.bp-tiny .cost-bar .cost-card,
#page-battle.bp-compact.bp-tiny .cost-zone .cost-card { width: 20px; height: 26px; flex-basis: 20px; }
#page-battle.bp-compact.bp-tiny .signal-row { height: 28px; flex-basis: 28px; }
#page-battle.bp-compact.bp-tiny #signal-tray .signal-orb { width: 16px; height: 22px; margin: 1px 2px; }
#page-battle.bp-compact.bp-tiny .actions-zone { flex-basis: 68px; }
#page-battle.bp-compact.bp-tiny .actions-zone .action-btn { height: 24px; font-size: 8px; }

/* --- 游戏内弹窗（制衡/弃牌/阻挡决策）：盘面相对尺寸 ---
   弹窗在 #page-battle 内，fixed 随旋转盘面定位正确；但内部
   80×112 大卡 + 85vh/90vw（旋转坐标系下 vh/vw 是竖屏视口）
   会把面板撑爆 356px 高的盘面 → 格子被裁/挤压。
   紧凑盘一律按盘面百分比 + 小卡重排。 */
#page-battle.bp-compact .mulligan-panel,
#page-battle.bp-compact .block-decision-panel {
    max-width: 94% !important; max-height: 94% !important;
    /* 宽度不能 shrink-to-fit：desc 短文会让 8 张卡挤成窄条内滚动 */
    min-width: min(560px, 94%);
    width: auto; padding: 8px 12px; border-radius: 10px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#page-battle.bp-compact .mulligan-title { font-size: 13px; letter-spacing: 2px; margin-bottom: 3px; }
#page-battle.bp-compact .mulligan-desc { font-size: 9px; margin-bottom: 4px; line-height: 1.3; }
#page-battle.bp-compact .mulligan-count { font-size: 10px; margin-bottom: 6px; }
#page-battle.bp-compact .mulligan-hands {
    gap: 5px; padding: 4px; margin-bottom: 8px; max-width: none;
    flex-wrap: wrap;
}
#page-battle.bp-compact .mulligan-card { width: 58px; height: 80px; flex-shrink: 0; }
#page-battle.bp-compact .mulligan-card.selected { transform: translateY(-3px); }
#page-battle.bp-compact .mulligan-card:hover { transform: none; }
#page-battle.bp-compact .mulligan-actions { gap: 8px; }
#page-battle.bp-compact .mulligan-btn { font-size: 10px; padding: 5px 12px; border-radius: 6px; }
#page-battle.bp-compact .block-decision-title { font-size: 11px; }
#page-battle.bp-compact .block-decision-desc { font-size: 9px; }
/* tiny 档再缩 */
#page-battle.bp-compact.bp-tiny .mulligan-card { width: 48px; height: 66px; }
#page-battle.bp-compact.bp-tiny .mulligan-panel,
#page-battle.bp-compact.bp-tiny .block-decision-panel { padding: 6px 8px; }

/* ---- D. 紧凑盘体验修正（悬浮球 / 卡比例 / 遮挡 / 竖屏弹窗） ---- */
/* 1) 悬浮球全部去掉：日志浮钮（JS 已不再创建，CSS 双保险）；
      旋转重试钮在用户已放行后（rotate-dismissed）隐藏 */
#bp-log-fab { display: none !important; }
body.rotate-dismissed #rotate-retry { display: none !important; }

/* 2) 卡牌比例修正：真实卡 80×112（5:7）。紧凑档 --card-w 跟随 --card-h，
      否则继承媒体查询固定 56px 宽 → 卡比槽宽被裁 + 视觉被拉宽 */
#page-battle.bp-compact { --card-w: calc(var(--card-h) * .7143); }
#page-battle.bp-compact #my-hand .hand-card {
    width: calc(var(--card-h) * .72); height: calc(var(--card-h) * .9 + 6px);
}

/* 3) 攻击提示条：原本顶置（旋转坐标系下正好压在对手信息区），
      紧凑盘挪到手牌区上方并缩小；pointer-events 本来就是 none */
#page-battle.bp-compact .attack-hint-chip {
    top: auto; bottom: 118px;
    font-size: 8px; padding: 3px 8px; max-width: 60%;
}
#page-battle.bp-compact .phase-announcement { font-size: 14px; }

/* 4) 竖屏弹窗适配：card-detail / charge-select / fr-decision / end / confirm / cost-pay / fill-cost
      是 body 直属弹窗，不随 #page-battle 旋转 → 强制横屏时用同一变换同步旋转。
      rotate-overlay（旋转引导）故意不在此列。
      ★2026-09-26 手机端反馈「制衡阶段卡死」根因修复：#mulligan-overlay / #hand-discard-overlay
      此前漏在此列表——force-landscape-battle 下仍保持竖屏 inset:0 定位，页面旋转 90° 后
      弹窗被甩到竖屏视口左上角（可见区外），确认/跳过按钮点不到，玩家表现为制衡卡死。
      ⚠️ 制衡/弃牌两 overlay 是 #page-battle 盘内子孙元素，页面 transform 后 fixed 以页面
      为定位基准，其 inset:0 自动铺满旋转后的盘面，**不能再加 transform**（双重旋转 180°
      面板外翻即"制衡框不见了"）。本清单只补 7 个 body 直属弹窗；#mulligan-overlay /
      #hand-discard-overlay 靠 inset:0 语义自适配。 */
body.force-landscape-battle .card-detail-overlay,
body.force-landscape-battle .charge-select-overlay,
body.force-landscape-battle .fr-decision-overlay,
body.force-landscape-battle .end-overlay,
body.force-landscape-battle .confirm-overlay,
body.force-landscape-battle #cost-pay-overlay,
body.force-landscape-battle #fill-cost-overlay {
    top: 0; left: 0; right: auto; bottom: auto;
    width: 100vh; height: 100vw;
    width: 100dvh;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
}
/* 盘内制衡/弃牌 overlay：#page-battle 被 transform 后 fixed 以页面为基准，inset:0 自动
   铺满旋转后的盘面，无需额外 transform；这里只给内容限尺寸防溢出 */
body.force-landscape-battle #mulligan-overlay > *,
body.force-landscape-battle #hand-discard-overlay > * {
    max-width: 94% !important; max-height: 94% !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 弹窗内部按盘面百分比限尺寸，防 vh/vw 撑爆（同制衡弹窗的坑） */
body.force-landscape-battle .card-detail-overlay > *,
body.force-landscape-battle .charge-select-overlay > *,
body.force-landscape-battle .fr-decision-overlay > *,
body.force-landscape-battle .end-overlay > *,
body.force-landscape-battle .confirm-overlay > *,
body.force-landscape-battle #cost-pay-overlay > *,
body.force-landscape-battle #fill-cost-overlay > * {
    max-width: 94% !important; max-height: 94% !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 5) 盘内弹层（区域查看等）限尺寸兜底 */
#page-battle.bp-compact .zone-popup-content {
    max-width: 94%; max-height: 92%;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ========== 卡片 3D 全息展示（js/28-card-holo.js）==========
   入口：详情弹窗卡图点击。纯 CSS 3D：倾斜/缩放由 --rx/--ry/--zoom 驱动，
   全息箔位置/色相由 --mx/--my 驱动，属性色由 --holo-attr-rgb 驱动。 */

/* 详情弹窗卡图：可点提示 */
#card-detail-image { cursor: zoom-in; }
#card-detail-image.holo-available::after {
    content: '\26F6 全息';
    position: absolute;
    right: 6px; bottom: 6px;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.55);
    color: #e8d9a0;
    letter-spacing: 1px;
    pointer-events: none;
}

/* 全屏舞台 */
.holo-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000; /* --z-modal：压过详情弹窗(200)，让位于 Toast(3000) */
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 40%,
            rgba(var(--holo-attr-rgb, 212, 175, 55), 0.10) 0%,
            rgba(2, 4, 9, 0.88) 52%,
            #010208 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.holo-overlay.holo-visible { opacity: 1; }

.holo-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* 背景光锥（属性色，缓慢旋转） */
.holo-beam {
    position: absolute;
    left: 50%;
    top: -42%;
    width: 135vmin;
    height: 135vmin;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%,
        transparent 40%,
        rgba(var(--holo-attr-rgb, 212, 175, 55), 0.11) 46%,
        rgba(var(--holo-attr-rgb, 212, 175, 55), 0.24) 50%,
        rgba(var(--holo-attr-rgb, 212, 175, 55), 0.11) 54%,
        transparent 60%);
    filter: blur(14px);
    opacity: var(--beam-o, 1);
    animation: holo-beam-spin 26s linear infinite;
    pointer-events: none;
}
@keyframes holo-beam-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

/* 漂浮粒子 */
.holo-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.holo-particles span {
    position: absolute;
    bottom: -3%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--holo-attr-rgb, 212, 175, 55), 0.8);
    box-shadow: 0 0 8px rgba(var(--holo-attr-rgb, 212, 175, 55), 0.9);
    animation: holo-rise linear infinite;
    opacity: 0;
}
@keyframes holo-rise {
    0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    12% { opacity: 0.9; }
    88% { opacity: 0.5; }
    100% { transform: translate3d(var(--drift, 12px), -104vh, 0) scale(1); opacity: 0; }
}

/* 悬浮包装层（透视 + 空闲呼吸） */
.holo-float {
    position: relative;
    perspective: 1100px;
    animation: holo-bob 6s ease-in-out infinite;
}
@keyframes holo-bob {
    0%, 100% { transform: translateY(-6px); }
    50% { transform: translateY(6px); }
}

/* 卡本体（3D 倾斜 + 缩放） */
.holo-card {
    position: relative;
    width: min(68vw, 40vh, 340px);
    aspect-ratio: 220 / 310;
    border-radius: 10px;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--zoom, 1));
    transform-style: preserve-3d;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.75),
        0 0 34px rgba(var(--holo-attr-rgb, 212, 175, 55), 0.3),
        0 0 90px rgba(var(--holo-attr-rgb, 212, 175, 55), var(--glow-o, 0.5));
    will-change: transform;
    cursor: grab;
}
.holo-card:active { cursor: grabbing; }

.holo-face {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    transform: translateZ(0);
    filter: saturate(1.06) contrast(1.04);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* 全息箔：随视角（--mx/--my）流光 + 色相偏移 */
.holo-foil {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    background:
        linear-gradient(105deg,
            transparent 32%,
            rgba(255, 90, 160, 0.30) 44%,
            rgba(120, 255, 220, 0.30) 52%,
            transparent 66%),
        repeating-linear-gradient(115deg,
            rgba(255, 60, 60, 0.10) 0 10px,
            rgba(255, 220, 60, 0.10) 10px 20px,
            rgba(60, 255, 120, 0.10) 20px 30px,
            rgba(60, 200, 255, 0.10) 30px 40px,
            rgba(180, 100, 255, 0.10) 40px 50px);
    background-position: calc(var(--mx, 0.5) * 120% - 10%) calc(var(--my, 0.5) * 120% - 10%);
    filter: hue-rotate(calc((var(--mx, 0.5) - 0.5) * 360deg)) brightness(var(--foil-b, 1.3));
    opacity: var(--foil-o, 1);
}

/* 扫描线（静止细纹 + 缓缓下移的亮带） */
.holo-scan {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
        rgba(255, 255, 255, 0.055) 0 1px,
        transparent 1px 4px);
    mix-blend-mode: overlay;
    opacity: var(--scan-o, 0.65);
}
.holo-scan::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    height: 22%;
    background: linear-gradient(180deg,
        transparent,
        rgba(160, 220, 255, 0.18),
        transparent);
    animation: holo-scanline 3.6s linear infinite;
}
@keyframes holo-scanline {
    from { top: -24%; }
    to { top: 100%; }
}

/* 高光扫过（周期性） */
.holo-glint {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255, 255, 255, 0.22) 47%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.22) 53%,
        transparent 60%);
    mix-blend-mode: screen;
    opacity: var(--glint-o, 0.95);
    background-position: 120% 0;
    animation: holo-glint-sweep 3.6s ease-in-out infinite;
}
@keyframes holo-glint-sweep {
    0%, 55%, 100% { background-position: 120% 0; opacity: 0; }
    20% { opacity: 1; }
    45% { background-position: -20% 0; opacity: 0; }
}

/* 属性色描边辉光 */
.holo-edge {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1.5px rgba(var(--holo-attr-rgb, 212, 175, 55), 0.7),
        inset 0 0 30px rgba(var(--holo-attr-rgb, 212, 175, 55), 0.32),
        inset 0 0 2px rgba(255, 255, 255, 0.5);
}

/* 倒影 */
.holo-reflect {
    position: absolute;
    top: 99%;
    left: 0;
    width: 100%;
    height: 55%;
    border-radius: 10px;
    transform: scaleY(-1);
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 75%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 75%);
    filter: blur(3px) saturate(0.8);
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 标题字幕 */
.holo-caption {
    position: relative;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
}
.holo-caption .holo-name {
    font-size: clamp(16px, 2.6vw, 22px);
    font-weight: 700;
    color: #f0e2b6;
    letter-spacing: 3px;
    text-shadow: 0 0 16px rgba(var(--holo-attr-rgb, 212, 175, 55), 0.55);
}
.holo-caption .holo-sub {
    margin-top: 4px;
    font-size: clamp(11px, 1.6vw, 13px);
    color: rgba(240, 226, 182, 0.55);
    letter-spacing: 2px;
}

/* 关闭按钮 + 操作提示 */
.holo-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(0, 0, 0, 0.45);
    color: #e8d9a0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
}
.holo-close:hover {
    border-color: var(--gold, #d4af37);
    color: #fff;
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}
.holo-hint {
    position: absolute;
    bottom: 16px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

/* 手机竖屏：卡略小，提示更短 */
@media (max-width: 600px) {
    .holo-card { width: min(74vw, 42vh); }
    .holo-float { perspective: 900px; }
}

/* 动效敏感用户：关掉自动动画（倾斜仍可用，属用户主动操作） */
@media (prefers-reduced-motion: reduce) {
    .holo-float,
    .holo-beam,
    .holo-scan::after,
    .holo-glint,
    .holo-particles span,
    .holo-overlay .holo-foil,
    .holo-overlay .holo-name {
        animation: none !important;
    }
}

/* ===== 特效调节（设置页「特效调节」分类，js/28-card-holo.js 实时驱动）=====
   强度四档：off=纯图预览 / light=淡雅 / standard=默认基准 / rich=华丽加成。
   组件开关：no-ambience / no-scan / no-glint / no-reflect / no-float。 */
.holo-overlay.no-ambience .holo-beam,
.holo-overlay.no-ambience .holo-particles { display: none; }
.holo-overlay.no-scan .holo-scan { display: none; }
.holo-overlay.no-glint .holo-glint { display: none; }
.holo-overlay.no-reflect .holo-reflect { display: none; }
.holo-overlay.no-float .holo-float { animation: none; }

/* 关闭档：只剩大图预览 */
.holo-overlay.holo-fx-off .holo-foil,
.holo-overlay.holo-fx-off .holo-scan,
.holo-overlay.holo-fx-off .holo-glint,
.holo-overlay.holo-fx-off .holo-reflect,
.holo-overlay.holo-fx-off .holo-beam,
.holo-overlay.holo-fx-off .holo-particles { display: none; }
.holo-overlay.holo-fx-off .holo-card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75); }
.holo-overlay.holo-fx-off .holo-edge {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.22),
        inset 0 0 2px rgba(255, 255, 255, 0.4);
}
.holo-overlay.holo-fx-off .holo-caption .holo-name { text-shadow: none; }

/* 华丽档：色相环循环 + 光锥加速 + 卡名脉冲 */
.holo-overlay.holo-fx-rich .holo-beam { animation-duration: 11s; }
.holo-overlay.holo-fx-rich .holo-foil { animation: holo-hue-cycle 6s linear infinite; }
@keyframes holo-hue-cycle {
    from { filter: hue-rotate(calc((var(--mx, 0.5) - 0.5) * 360deg)) brightness(1.5); }
    to { filter: hue-rotate(calc((var(--mx, 0.5) - 0.5) * 360deg + 360deg)) brightness(1.5); }
}
.holo-overlay.holo-fx-rich .holo-caption .holo-name {
    animation: holo-name-pulse 2.4s ease-in-out infinite;
}
@keyframes holo-name-pulse {
    0%, 100% { text-shadow: 0 0 16px rgba(var(--holo-attr-rgb, 212, 175, 55), 0.5); }
    50% { text-shadow: 0 0 36px rgba(var(--holo-attr-rgb, 212, 175, 55), 0.95); }
}

/* 强制横屏旋转适配（同 card-detail-overlay 等弹窗清单，js/22-mobile.js） */
body.force-landscape-battle #holo-overlay {
    top: 0; left: 0; right: auto; bottom: auto;
    width: 100vh; height: 100vw;
    width: 100dvh;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
}

/* ==========================================================================
   好友页视觉焕新（2026-09-22）
   纯增量层：只覆盖既有类名的观感，不新增结构、不改 JS 契约。
   设计取向——「通讯终端 / 战术链路」：深色玻璃面板 + 品牌金描边 + 状态光晕，
   让原本素净的列表有层次、有身份感，同时保持信息密度不降。
   ========================================================================== */

/* ---- 1. 页面底纹：网格 + 双色辉光（低对比，不干扰阅读） ---- */
#page-friends .sub-page-container {
    background:
        radial-gradient(80% 55% at 12% -8%, rgba(var(--brand-rgb), .10), transparent 62%),
        radial-gradient(60% 45% at 100% 8%, rgba(120, 200, 255, .05), transparent 60%);
}
#page-friends .friends-page-body::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(var(--brand-rgb), .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--brand-rgb), .045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 78%);
}
#page-friends .friends-page-body { position: relative; }

/* ---- 2. 好友码名片：加金边、内高光、扫码区浮起 ---- */
.idcard {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border-radius: 14px;
    border-color: rgba(var(--brand-rgb), .5);
    background:
        linear-gradient(135deg, rgba(var(--brand-rgb), .16) 0%, transparent 42%),
        radial-gradient(120% 170% at 92% -34%, rgba(255, 214, 120, .16), transparent 56%),
        rgba(10, 10, 18, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 26px rgba(0, 0, 0, .34);
}
/* 名片左侧竖向金条（身份标识） */
.idcard::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--gold-bright, var(--brand-bright)), transparent 82%);
    opacity: .85;
}
/* 斜向扫光（悬停时掠过一次） */
.idcard::after {
    content: '';
    position: absolute; top: -60%; left: -70%; width: 55%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
    transform: rotate(18deg); pointer-events: none;
    transition: left .7s cubic-bezier(.3, 0, .2, 1);
}
.idcard:hover::after { left: 130%; }
.idcard-label {
    font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase;
    color: rgba(var(--brand-bright-rgb), .68);
}
.idcard-code { font-size: 27px; }
.idcard-qr {
    box-shadow: 0 5px 18px rgba(0, 0, 0, .46), 0 0 0 1px rgba(var(--brand-rgb), .35);
    transition: transform .18s;
}
.idcard-qr:hover { transform: scale(1.05); }

/* ---- 3. 搜索行：内嵌图标 + 聚焦金环 ---- */
.lobby-friends-tools { position: relative; }
.lobby-friends-tools::before {
    content: '🔍';
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 13px; opacity: .5; pointer-events: none; z-index: 1;
}
.lobby-friends-tools .lobby-search { padding-left: 34px; }
.lobby-friends-tools .lobby-search:focus {
    border-color: var(--gold, var(--brand));
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .16);
}
.lobby-friends-tools .refresh-btn { white-space: nowrap; }

/* ---- 4. 在线氛围行：改成胶囊条 + 脉冲点 ---- */
.friend-ambient {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .26);
    border: 1px solid rgba(var(--brand-rgb), .2);
    letter-spacing: .4px;
}
.friend-ambient .fa-dot.on { animation: frPulse 2s ease-in-out infinite; }
@keyframes frPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(125, 208, 160, .6); opacity: 1; }
    50% { box-shadow: 0 0 14px rgba(125, 208, 160, .95); opacity: .72; }
}

/* ---- 5. 分组标题：左侧短金条 + 计数 ---- */
.friend-group-title {
    display: flex; align-items: center; gap: 8px;
    border-bottom: none;
    padding: 0 2px 6px;
    position: relative;
}
.friend-group-title::before {
    content: ''; width: 12px; height: 2px; border-radius: 2px;
    background: var(--gold, var(--brand)); flex: none;
}
.friend-group-title::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(var(--brand-rgb), .3), transparent);
}

/* ---- 6. 好友卡片：抬起、描边、悬停高光、在线左缘光 ---- */
.friend-item {
    position: relative;
    border-radius: 12px;
    padding: 12px 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 60%),
        var(--bg-card, rgba(20, 24, 35, .72));
    transition: transform .16s cubic-bezier(.3, 0, .2, 1), border-color .16s, box-shadow .16s;
}
.friend-item:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--brand-rgb), .55);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
}
/* 在线好友：左缘绿色状态光 */
.friend-item:not(.is-off):not(.request):not(.share)::before {
    content: '';
    position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #7dd0a0, rgba(125, 208, 160, .15));
}
.friend-item.request { background: linear-gradient(180deg, rgba(var(--brand-rgb), .1), transparent 70%), var(--bg-card, rgba(20, 24, 35, .72)); }
.friend-item.share  { background: linear-gradient(180deg, rgba(125, 208, 160, .1), transparent 70%), var(--bg-card, rgba(20, 24, 35, .72)); }

/* ---- 7. 头像：更大、双环、在线呼吸 ---- */
.friend-avatar {
    flex: 0 0 44px; width: 44px; height: 44px; font-size: 18px;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 3px 10px rgba(0, 0, 0, .35);
}
.friend-avatar.online { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 2px rgba(125,208,160,.55), 0 0 14px rgba(125, 208, 160, .4); }
/* 在线小圆点（贴头像右下） */
.friend-avatar.online::after {
    content: '';
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #7dd0a0; border: 2px solid var(--bg-card, #141823);
}
.friend-info { gap: 3px; }
.friend-info b { font-size: 14.5px; }
.friend-info small { font-size: 11px; letter-spacing: .2px; }

/* ---- 8. 按钮组：胶囊化 + 主次分明 ---- */
.friend-btn {
    border-radius: 999px;
    padding: 6px 13px;
    font-weight: 500;
    transition: all .15s;
}
.friend-btn:not(.ghost):hover { box-shadow: 0 4px 12px rgba(212, 175, 55, .28); transform: translateY(-1px); }

/* ---- 9. 空状态：卡片化 + 图标漂浮 ---- */
.friend-empty {
    border-radius: 14px;
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(var(--brand-rgb), .1), transparent 70%),
        rgba(0, 0, 0, .24);
    padding: 30px 18px;
}
.friend-empty .fe-emoji { animation: frFloat 3.2s ease-in-out infinite; }
@keyframes frFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ---- 10. 聊天视图：头部功能化、气泡尾巴、日期分隔 ---- */
.chat-head {
    position: relative;
    padding: 10px 2px 12px;
    background: linear-gradient(180deg, rgba(var(--brand-rgb), .06), transparent);
}
.chat-back {
    padding: 5px 11px; border-radius: 999px;
    border: 1px solid rgba(var(--brand-rgb), .3);
    background: rgba(0, 0, 0, .22);
    transition: all .15s;
}
.chat-back:hover { background: rgba(var(--brand-rgb), .18); }
.chat-peer b { font-size: 15.5px; letter-spacing: .4px; }

.chat-messages { gap: 10px; }
.chat-bubble { position: relative; border-radius: 14px; padding: 9px 13px; }
/* 气泡尾巴（纯 CSS 三角） */
.chat-msg.theirs .chat-bubble::before {
    content: ''; position: absolute; left: -5px; top: 11px;
    border: 5px solid transparent; border-right-color: rgba(var(--brand-rgb), .25);
    border-left: 0;
}
.chat-msg.mine .chat-bubble::before {
    content: ''; position: absolute; right: -5px; top: 11px;
    border: 5px solid transparent; border-left-color: rgba(var(--brand-rgb), .45);
    border-right: 0;
}
/* 己方气泡：金色描边强调 */
.chat-msg.mine .chat-bubble {
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .28), rgba(var(--brand-rgb), .17));
    border-color: rgba(var(--brand-rgb), .5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.chat-deck-card { position: relative; border-radius: 13px; }
.chat-deck-card::after {
    content: ''; position: absolute; right: 11px; top: 11px;
    width: 6px; height: 6px; border-radius: 50%; background: #7dd0a0;
    box-shadow: 0 0 8px rgba(125, 208, 160, .85);
}
.chat-input-row {
    padding-top: 11px;
    gap: 9px;
}
.chat-input:focus { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.chat-attach { transition: all .15s; }
.chat-attach:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--brand-rgb), .28); }
.chat-send { transition: all .15s; box-shadow: 0 4px 14px rgba(212, 175, 55, .3); }
.chat-send:active { transform: scale(.96); }

/* 聊天内「还没有消息」引导：加个图标氛围 */
.chat-loading { line-height: 2; }

/* ---- 11. 移动端收敛：窄屏去掉多余装饰、保证可点面积 ---- */
@media (max-width: 640px) {
    .friends-page-body { width: calc(100% - 20px); padding-top: 12px; }
    .idcard { padding: 13px 14px; gap: 11px; }
    .idcard-code { font-size: 22px; letter-spacing: 2px; }
    .idcard-qr { flex-basis: 70px; width: 70px; height: 70px; }
    .idcard-qr img, .idcard-qr canvas { width: 62px !important; height: 62px !important; }
    .friend-item { padding: 11px 12px; gap: 10px; }
    .friend-avatar { flex-basis: 40px; width: 40px; height: 40px; font-size: 16px; }
    /* 操作按钮换行铺满，避免挤压昵称 */
    .friend-item { flex-wrap: wrap; }
    .friend-actions { width: 100%; justify-content: flex-start; }
    .friend-btn { flex: 1; text-align: center; }
}

/* ---- 12. 降低动效偏好：关闭全部新增动画 ---- */
@media (prefers-reduced-motion: reduce) {
    .friend-ambient .fa-dot.on,
    .friend-empty .fe-emoji { animation: none; }
    .idcard::after { transition: none; }
    .friend-item:hover { transform: none; }
}

/* ==========================================================================
   后台下发弹窗（js/31-gm-client.js）—— 全员公告 / 定向私信
   级别色由 JS 注入 --gm-accent，四档：info 蓝 / success 绿 / warn 黄 / danger 红
   ========================================================================== */
.zs-gm-mask {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.zs-gm-mask.show { opacity: 1; visibility: visible; }

.zs-gm-pop {
    position: relative;
    width: min(430px, 100%);
    max-height: 78vh; overflow-y: auto;
    padding: 20px 20px 16px;
    border-radius: 16px;
    background:
        radial-gradient(120% 100% at 50% -20%, color-mix(in srgb, var(--gm-accent, #5b8def) 22%, transparent), transparent 62%),
        linear-gradient(180deg, rgba(28, 32, 44, .98), rgba(16, 18, 26, .99));
    border: 1px solid color-mix(in srgb, var(--gm-accent, #5b8def) 55%, transparent);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .62),
        inset 0 1px 0 rgba(255, 255, 255, .07);
    transform: translateY(12px) scale(.97);
    transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}
.zs-gm-mask.show .zs-gm-pop { transform: translateY(0) scale(1); }

/* 顶部级别色条 */
.zs-gm-pop::before {
    content: '';
    position: absolute; left: 16px; right: 16px; top: 0; height: 2px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, transparent, var(--gm-accent, #5b8def), transparent);
}
.zs-gm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.zs-gm-ico { font-size: 21px; line-height: 1; }
.zs-gm-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
    padding: 3px 9px; border-radius: 999px;
    color: var(--gm-accent, #5b8def);
    background: color-mix(in srgb, var(--gm-accent, #5b8def) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--gm-accent, #5b8def) 38%, transparent);
}
.zs-gm-title {
    font-size: 17px; font-weight: 700; color: #eef1f7;
    line-height: 1.45; margin-bottom: 8px;
}
.zs-gm-body {
    font-size: 13.5px; line-height: 1.72; color: #b9c0cc;
    word-break: break-word;
}
.zs-gm-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.zs-gm-ok {
    padding: 9px 22px; border-radius: 999px; cursor: pointer;
    font-size: 13.5px; font-weight: 600;
    color: #0f1116;
    background: linear-gradient(135deg, var(--gm-accent, #5b8def), color-mix(in srgb, var(--gm-accent, #5b8def) 68%, #fff));
    border: none;
    transition: transform .15s, box-shadow .15s;
}
.zs-gm-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--gm-accent, #5b8def) 45%, transparent); }
.zs-gm-ok:active { transform: scale(.97); }

/* 维护期间：给 body 加个极轻的标识（重遮罩交给 site-notice.js，避免双重遮挡） */
body.zs-gm-maintenance .top-bar::after {
    content: '维护中';
    margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
    color: #ffd66b; background: rgba(214, 158, 46, .16);
    border: 1px solid rgba(214, 158, 46, .42);
}

@media (max-width: 640px) {
    .zs-gm-pop { padding: 17px 16px 13px; border-radius: 14px; }
    .zs-gm-title { font-size: 15.5px; }
    .zs-gm-body { font-size: 13px; }
    .zs-gm-ok { width: 100%; padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .zs-gm-mask, .zs-gm-pop, .zs-gm-ok { transition: none; }
}

/* ============================================================================
   2026-09-25 决斗盘三层审计（_audit/2026-09-25-duelboard-{ui,interaction,runtime}.md）
   视觉缺口补齐批 —— 全部为「HTML/JS 已渲染、CSS 从未有规则」的孤儿选择器。只加不改。
   ========================================================================== */

/* ---- ① P0：三消过牌确认弹窗 + 信号球高亮（ui 审计 §3-1） ----
   旧状态：.triple-elimination-overlay/-panel/-title/-desc/-actions 与
   .triple-highlight/.triple-dim 全仓零规则 → 玩家看不到消哪三颗、弹窗无遮罩无定位。 */
.triple-elimination-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 4000);
    background: rgba(5, 6, 12, .62);
    display: none;
    align-items: center;
    justify-content: center;
}
.triple-elimination-overlay[style*="flex"] { display: flex; }
.triple-elimination-panel {
    width: min(420px, 90vw);
    background: var(--bg-panel, #0e0e1a);
    border: 1px solid var(--border-gold, rgba(212, 175, 55, .45));
    border-radius: 12px;
    padding: 20px 22px;
    text-align: center;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .6);
    animation: pop .22s ease;
}
.triple-elimination-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--gold-bright, #f0d78c);
    margin-bottom: 10px;
}
.triple-elimination-desc {
    font-size: 13px;
    color: var(--text-dim, #8a8070);
    line-height: 1.7;
    margin-bottom: 16px;
}
.triple-elimination-actions { display: flex; gap: 10px; justify-content: center; }
.triple-elimination-actions .triple-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-gold, rgba(212, 175, 55, .45));
    background: rgba(var(--brand-rgb, 212, 175, 55), .14);
    color: var(--gold-bright, #f0d78c);
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.triple-elimination-actions .triple-btn:hover { background: rgba(var(--brand-rgb, 212, 175, 55), .26); }
.triple-elimination-actions .triple-btn.cancel {
    border-color: var(--border, rgba(255, 255, 255, .16));
    background: transparent;
    color: var(--text-dim, #8a8070);
}
.signal-orb.triple-highlight {
    outline: 2px solid #00e5ff;
    outline-offset: 2px;
    box-shadow: 0 0 12px rgba(0, 229, 255, .75);
    transform: translateY(-3px);
    transition: transform .15s, box-shadow .15s;
}
.signal-orb.triple-dim { opacity: .3; filter: grayscale(.7); transition: opacity .15s, filter .15s; }
/* ★反馈#16（2026-09-26）：三消选球模式——可选但非当前组的球给半亮+指针，可切换 */
.signal-orb.triple-selectable {
    outline: 1px dashed rgba(0, 229, 255, .6);
    outline-offset: 1px;
    cursor: pointer;
    opacity: .8;
}
.signal-orb.triple-selectable:hover {
    outline: 2px solid #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, .5);
    opacity: 1;
}
.triple-pick-hint {
    font-size: 11px;
    color: var(--text-dim, #8a8070);
    margin: 6px 0 2px;
    text-align: center;
}

/* ---- ★2026-09-27 反馈修正：消球选段面板（#orb-pick-overlay，15 号 pickOrbGroup 注入） ---- */
.orb-pick-overlay { position: fixed; inset: 0; }
.orb-pick-panel {
    width: min(440px, 90vw);
    background: var(--bg-panel, #0e0e1a);
    border: 1px solid var(--border-gold, rgba(212, 175, 55, .45));
    border-radius: 12px;
    padding: 18px 20px;
    text-align: center;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .6);
    animation: pop .22s ease;
}
.orb-pick-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--gold-bright, #f0d78c);
    margin-bottom: 8px;
}
.orb-pick-desc {
    font-size: 12px;
    color: var(--text-dim, #8a8070);
    margin-bottom: 12px;
}
.orb-pick-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
    margin-bottom: 12px;
}
.orb-pick-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-gold, rgba(212, 175, 55, .35));
    background: rgba(var(--brand-rgb, 212, 175, 55), .08);
    color: var(--text, #d8d2c4);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-align: left;
}
.orb-pick-option:hover {
    background: rgba(var(--brand-rgb, 212, 175, 55), .22);
    border-color: var(--gold-bright, #f0d78c);
}
.orb-pick-no {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: rgba(var(--brand-rgb, 212, 175, 55), .25);
    color: var(--gold-bright, #f0d78c);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.orb-pick-cards { flex: 1; word-break: break-all; line-height: 1.5; }
.orb-pick-color {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(0, 229, 255, .14);
    border: 1px solid rgba(0, 229, 255, .4);
    color: #00e5ff;
    font-size: 12px;
    margin-right: 6px;
}
.orb-pick-skip {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, .16));
    background: transparent;
    color: var(--text-dim, #8a8070);
    font-size: 13px;
    cursor: pointer;
}
.orb-pick-skip:hover { color: var(--text, #d8d2c4); border-color: var(--text-dim, #8a8070); }

/* ---- ② P1：双方墓地详情浮层（ui 审计 §3-2，旧规则只剩 bp-compact 作用域） ---- */
.graveyard-view {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 4000);
    display: none;
    flex-direction: column;
    background: rgba(5, 6, 12, .94);
    padding: 18px;
}
.graveyard-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-gold, rgba(212, 175, 55, .35));
    color: var(--gold-bright, #f0d78c);
    font-size: 13px;
    letter-spacing: 2px;
    flex: none;
}
.graveyard-close {
    background: none;
    border: 1px solid var(--border, rgba(255, 255, 255, .18));
    border-radius: 6px;
    color: var(--text-dim, #8a8070);
    padding: 3px 10px;
    cursor: pointer;
}
.graveyard-close:hover { color: var(--gold-bright, #f0d78c); border-color: var(--border-gold); }
.graveyard-cards {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    padding-top: 12px;
}
.graveyard-card {
    width: 62px;
    background: var(--bg-panel, #0e0e1a);
    border: 1px solid var(--border, rgba(255, 255, 255, .14));
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: transform .12s, border-color .12s;
}
.graveyard-card:hover { transform: translateY(-3px); border-color: var(--border-gold, rgba(212, 175, 55, .5)); }
.graveyard-card-img { width: 100%; display: block; border-radius: 5px; }
.graveyard-card-name {
    font-size: 9px;
    color: var(--text-dim, #8a8070);
    text-align: center;
    line-height: 1.2;
    max-height: 32px;
    overflow: hidden;
}
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.graveyard-empty { color: var(--text-dim, #8a8070); font-size: 12.5px; padding: 20px 0; letter-spacing: 1px; }

/* ---- ③ P1：瞬时战术区（ui 审计 §3-3：内容/费用/两按钮/空态 全部零样式） ---- */
.instant-zone { gap: 6px; }
.instant-zone .instant-tactics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 66px;
    align-items: center;
    justify-content: center;
}
.instant-tactic-card {
    position: relative;
    width: 54px;
    height: 76px;
    border: 1px solid var(--border, rgba(255, 255, 255, .16));
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #0b0d16;
    transition: transform .12s, border-color .12s, box-shadow .12s;
}
.instant-tactic-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instant-tactic-card:hover { transform: translateY(-2px); border-color: var(--border-gold, rgba(212, 175, 55, .5)); }
.instant-tactic-card.selected {
    border-color: var(--gold, #d9b96a);
    box-shadow: 0 0 10px rgba(212, 175, 55, .55);
}
.instant-cost {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    background: rgba(8, 10, 18, .88);
    border: 1px solid rgba(212, 175, 55, .5);
    color: var(--gold-bright, #f0d78c);
    border-radius: 4px;
    font-size: 9.5px;
    padding: 0 4px;
    line-height: 15px;
}
.instant-empty { color: var(--text-dim, #8a8070); font-size: 11.5px; letter-spacing: 1px; }
.instant-use-btn, .instant-cancel-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-gold, rgba(212, 175, 55, .45));
    background: rgba(var(--brand-rgb, 212, 175, 55), .14);
    color: var(--gold-bright, #f0d78c);
    font-size: 12px;
    cursor: pointer;
}
.instant-use-btn:disabled { opacity: .35; cursor: not-allowed; }
.instant-cancel-btn {
    border-color: var(--border, rgba(255, 255, 255, .18));
    background: transparent;
    color: var(--text-dim, #8a8070);
}

/* ---- ④ P1：战场关键状态可见（.frozen / .has-equipment / 协战 / 装备标） ---- */
.card.frozen {
    filter: saturate(.45) brightness(.82);
    box-shadow: inset 0 0 0 2px rgba(120, 200, 255, .75), 0 0 10px rgba(80, 170, 255, .35);
}
.card.frozen::after {
    content: '❄';
    position: absolute;
    right: 3px;
    top: 1px;
    font-size: 12px;
    color: #9fd8ff;
    text-shadow: 0 0 6px rgba(120, 200, 255, .95);
    z-index: 4;
}
.card-equipment-icon {
    position: absolute;
    left: 3px;
    bottom: 3px;
    z-index: 4;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(8, 10, 18, .9);
    border: 1px solid rgba(212, 175, 55, .6);
    color: var(--gold-bright, #f0d78c);
    font-size: 9px;
    line-height: 14px;
    text-align: center;
}
.card.has-equipment { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .45); }
/* B7 双装备第二槽 + 附属（帕瓦这类"放到某牌下方"的附属卡）此前完全不渲染 → 玩家看不见 */
.card-equipment-icon.eq2 { left: 21px; }
.card-under-chip {
    position: absolute;
    right: 3px;
    bottom: 3px;
    z-index: 4;
    padding: 0 4px;
    height: 15px;
    line-height: 14px;
    border-radius: 4px;
    background: rgba(8, 10, 18, .9);
    border: 1px solid rgba(120, 200, 255, .55);
    color: #9fd8ff;
    font-size: 9px;
    letter-spacing: .5px;
}
.card.cooperate-target {
    box-shadow: inset 0 0 0 2px rgba(180, 120, 255, .7), 0 0 8px rgba(180, 120, 255, .35);
}
.card.cooperate-target::before {
    content: '协';
    position: absolute;
    left: 3px;
    top: 1px;
    z-index: 4;
    font-size: 9.5px;
    color: #d9b6ff;
    text-shadow: 0 0 5px rgba(180, 120, 255, .9);
}
.card.cooperate-partner {
    /* 只加视觉标记，不动 transform/定位（.battle-slot .card 依赖 translate(-50%,-50%) 定位） */
    box-shadow: 0 0 0 2px rgba(180, 120, 255, .85), 0 0 12px rgba(180, 120, 255, .55);
}
.card.cooperate-partner.tapped { opacity: .72; }

/* ---- ④-c P1：可点的"视觉禁用"态（2026-09-25 UI 审计 P1-8：disabled 会吞掉解释性
   toast，触屏也看不到 title → 改为 aria-disabled + 本类，点击仍进入解释分支） ---- */
.btn-disabled,
button.btn-disabled {
    opacity: .42;
    filter: grayscale(.55);
    cursor: not-allowed;
}
.btn-disabled:hover { opacity: .55; }

/* 协战搭档选择高亮（15/05 的 .cooperate-highlight 此前零规则 → 修了选择器也看不见） */
.battle-slot .cooperate-highlight,
.hand-card.cooperate-highlight {
    outline: 2px solid #00e5ff !important;
    outline-offset: 2px;
    box-shadow: 0 0 14px rgba(0, 229, 255, .7);
    animation: zs-cooperate-pulse 1.1s ease-in-out infinite;
    z-index: 6;
}
@keyframes zs-cooperate-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 255, .45); }
    50% { box-shadow: 0 0 20px rgba(0, 229, 255, .95); }
}

/* ---- ④-b P1：升变/高亮选择类此前零规则（.evolve-target/.highlight-target/.attack-select）
   玩家点了「升变」后看不到哪些角色可升变（ui/交互审计都点名） ---- */
.battle-slot.evolve-target {
    outline: 2px solid #b37bff;
    outline-offset: 2px;
    box-shadow: 0 0 14px rgba(179, 123, 255, .7);
    animation: zs-evolve-pulse 1.1s ease-in-out infinite;
    z-index: 6;
}
@keyframes zs-evolve-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(179, 123, 255, .45); }
    50% { box-shadow: 0 0 20px rgba(179, 123, 255, .95); }
}
.battle-slot.highlight-target,
.battle-slot.highlight-attacker { outline: 2px solid rgba(255, 214, 102, .85); outline-offset: 2px; }
.battle-slot.attack-select { outline: 2px dashed rgba(0, 229, 255, .7); outline-offset: 2px; }

/* ---- ⑤ P1：战斗日志行 / 回合分隔（ui 审计 §3-10：.log-row/.lr-ic 零规则） ---- */
#page-battle .log-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-dim, #8a8070);
    padding: 2px 4px;
    border-radius: 4px;
}
#page-battle .log-row .lr-ic { flex: 0 0 auto; font-size: 10.5px; opacity: .85; }
#page-battle .log-row .lr-tx { flex: 1; min-width: 0; word-break: break-word; }
#page-battle .log-row.sys .lr-ic { color: var(--gold-dim, #b89a4e); }
#page-battle .log-row.act .lr-ic { color: #00e5ff; }
#page-battle .log-row.dmg .lr-ic { color: #ff6b6b; }
#page-battle .log-row.draw .lr-ic { color: #7ee787; }
#page-battle .log-row.dmg .lr-tx { color: rgba(255, 150, 150, .92); }
#page-battle .log-turn {
    margin-top: 7px;
    padding: 5px 4px 3px;
    border-top: 1px dashed rgba(212, 175, 55, .3);
    color: var(--gold-dim, #b89a4e);
    font-size: 10.5px;
    letter-spacing: 1.5px;
}

/* ==================== 本地 UI 优化 · 2026-10 ====================
   只提升可达性、层级和触控反馈，不改变规则与卡牌尺寸基准。 */

/* 普通说明、日志、聊天和规则允许长按/复制；可操作卡牌仍由自身规则控制。 */
body { user-select: text; -webkit-user-select: text; }
#page-battle .card,
#page-battle .hand-card,
#page-battle button,
#page-battle [draggable="true"],
#page-main .asc-node,
.bottom-nav .nav-item { user-select: none; -webkit-user-select: none; }
#page-battle .log-body,
#page-battle .log-row,
#page-battle .log-latest,
#page-battle .phase-banner,
#page-battle .battle-status-badge,
#page-battle .zone-label,
#page-battle .info-item,
#page-battle .attack-preview,
#page-battle .kw-tip,
#page-online .op-tips,
#page-duel-prep .rules-full,
#friends-chat .chat-messages,
#friends-chat .chat-messages * { user-select: text; -webkit-user-select: text; }

/* 节点化入口保留原风格，但键盘焦点和按压态要与按钮一样明确。 */
#page-main .asc-node[role="button"]:focus-visible,
.bottom-nav .nav-item[role="button"]:focus-visible {
    outline: 2px solid var(--asc-violet-hi);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(167,120,255,.12), 0 10px 28px rgba(0,0,0,.4);
}
#page-main .asc-node[role="button"]:active,
.bottom-nav .nav-item[role="button"]:active { transform: translateY(1px) scale(.985); }

/* 底部导航在触屏上具有稳定的 44px 触控高度，桌面仍保持导轨比例。 */
.bottom-nav .nav-item { min-height: 44px; justify-content: center; }
@media (max-width: 1023px) {
    .bottom-nav .nav-item { min-height: 52px; padding: 8px 6px; }
}

/* 登录闸门：可见字段标签比 placeholder 更稳定，辅助说明保持低对比度。 */
#gate-overlay .form-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 1px 2px -5px;
    color: var(--text, #e0d8c8);
    font-size: 12px;
    letter-spacing: .5px;
}
#gate-overlay .form-label span { color: var(--text-dim, #8a8070); font-size: 10px; font-weight: 400; }
#gate-overlay .pa-input { min-height: 42px; }

/* 详情页签只保留一个内容面板，hidden 状态不能被内联 display 反向覆盖。 */
.card-detail-effect[hidden],
.card-detail-ruling[hidden] { display: none !important; }
.card-detail-tabs { min-height: 42px; }
.detail-tab { min-height: 40px; }
.detail-tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }

/* 横屏引导更像明确的进入状态，而不是遮挡层；按钮热区达到 44px。 */
.rotate-overlay-card { width: min(360px, 100%); border-radius: 8px; }
.rotate-fs-btn { min-height: 44px; min-width: 148px; }
.rotate-overlay:focus-within .rotate-overlay-card { border-color: var(--gold-bright); box-shadow: 0 18px 60px rgba(0,0,0,.7), 0 0 0 3px rgba(212,175,55,.12); }

/* 战场内部有内容时，渐隐边缘更明显，并给滚动容器键盘焦点。 */
#page-battle .field-wrap:focus-visible {
    outline: 2px solid rgba(0,229,255,.8);
    outline-offset: -2px;
}
#page-battle .field-wrap.fold-bottom::after { opacity: .95; }
#page-battle .field-wrap.fold-top::before { opacity: .7; }
#page-battle .field-wrap.fw-overflow::after {
    box-shadow: 0 -8px 18px rgba(6,8,16,.75);
}
#page-battle .field-wrap.fw-overflow::before {
    box-shadow: 0 8px 18px rgba(6,8,16,.75);
}

/* 手机横屏把关键状态留在视野内，隐藏的是装饰性次级标签，不隐藏操作。 */
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
    #page-battle .zone-label,
    #page-battle .hand-label { font-size: 10px; color: var(--gold-dim); }
    #page-battle .cost-cap { font-size: 10px; color: var(--gold-bright); }
    #page-battle .cost-card .cc-name { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .rotate-icon,
    #page-battle .cost-card.payable,
    #page-battle .cost-card .cost-bdg.bdg-act,
    .battle-slot.evolve-target,
    .battle-slot.cooperate-highlight,
    .hand-card.cooperate-highlight { animation: none !important; }
}