/* ========== 设计系统变量 ========== */
:root {
    /* 主色板 - 中世纪暖色调 */
    --bg-deep: #0f0a06;
    --bg-base: #1a120a;
    --bg-panel: #241a10;
    --bg-panel-light: #2e2218;
    --bg-card: #3a2a1c;
    --bg-cell: #e8d5a8;
    --bg-cell-alt: #ddc89e;
    --gold: #d4a847;
    --gold-bright: #f0c050;
    --gold-soft: #b8941e;
    --parchment: #f5e6c0;
    --parchment-dim: #d9c89e;
    --text-primary: #f9eec1;
    --text-secondary: #c8b48a;
    --text-muted: #8a7860;
    --blue-side: #2a5d8a;
    --blue-side-light: #3a7dad;
    --red-side: #8b3c2c;
    --red-side-light: #a85040;
    --accent-purple: #8a4cc0;
    --accent-green: #3a7d3a;
    --accent-teal: #2c6e6e;
    --danger: #c44535;
    --border-gold: rgba(212, 168, 71, 0.35);
    --border-dim: rgba(138, 120, 96, 0.25);

    /* 阴影系统 */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 28px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.3);
    --shadow-gold: 0 0 0 1px rgba(212,168,71,0.2), 0 4px 12px rgba(0,0,0,0.5);

    /* 圆角 */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 999px;

    /* 过渡 */
    --t-fast: 0.12s ease;
    --t-mid: 0.2s ease;
    --t-slow: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========== 基础重置 ========== */
* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(58, 38, 20, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(30, 18, 10, 0.6) 0%, transparent 50%),
        #0f0a06;
    background-attachment: fixed;
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    padding: 8px;
    margin: 0;
    min-height: 100vh;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ========== 自定义滚动条 ========== */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-soft), #6a5020); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--gold-soft)); }
* { scrollbar-width: thin; scrollbar-color: var(--gold-soft) rgba(0,0,0,0.2); }

/* ========== 游戏主容器 ========== */
.game-container {
    display: flex;
    gap: 16px;
    max-width: 1400px;
    width: 100%;
    background:
        linear-gradient(135deg, #2a1f14 0%, #22160c 50%, #1e1208 100%);
    border-radius: var(--r-xl);
    padding: 16px;
    box-shadow:
        var(--shadow-xl),
        var(--shadow-inset),
        0 0 0 1px rgba(212,168,71,0.12);
    margin: 0 auto;
    border: 1px solid rgba(212,168,71,0.1);
}

/* ========== 棋盘区域 ========== */
.board-area {
    flex-shrink: 0;
    background:
        linear-gradient(145deg, #9a6840, #7a5028 40%, #6a4218 100%);
    border-radius: var(--r-lg);
    padding: 10px;
    box-shadow:
        inset 0 0 0 2px rgba(245,230,192,0.15),
        inset 0 0 30px rgba(0,0,0,0.3),
        0 8px 20px rgba(0,0,0,0.5);
    overflow-x: auto;
    position: relative;
}

.board-area::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 14px;
    border: 1px solid rgba(245,230,192,0.08);
    pointer-events: none;
}

.grid {
    display: grid;
    gap: 3px;
    background:
        linear-gradient(180deg, #4a3216, #3a2810);
    border: 2px solid #2e1c08;
    border-radius: var(--r-md);
    margin: 0 auto;
    grid-template-rows: repeat(5, 210px);
    grid-template-columns: repeat(3, 240px);
    padding: 3px;
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.3);
}

.cell {
    background:
        linear-gradient(160deg, var(--bg-cell) 0%, var(--bg-cell-alt) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    border: 1px solid rgba(140, 100, 50, 0.4);
    border-radius: 8px;
    cursor: pointer;
    overflow-y: auto;
    padding: 4px;
    gap: 4px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(120,80,30,0.1);
}

.cell:hover {
    border-color: rgba(180, 140, 70, 0.6);
}

.coord {
    font-size: 9px;
    color: rgba(100, 70, 30, 0.55);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

/* ========== 单位卡片 ========== */
.unit {
    width: 130px;
    font-size: 12px;
    padding: 6px 8px;
    background: var(--unit-bg, rgba(0,0,0,0.85));
    border-radius: var(--r-md);
    text-align: center;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    margin: 0 auto;
    flex-shrink: 0;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.unit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
    border-radius: var(--r-md);
}

.unit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

.unit b {
    display: block;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.unit.selected-unit {
    border: 2px solid #ffd700;
    transform: scale(1.03);
    box-shadow:
        0 0 0 1px rgba(255,215,0,0.3),
        0 0 14px rgba(255,215,0,0.4),
        0 4px 10px rgba(0,0,0,0.5);
}

.unit.targetable {
    border: 2px solid #ffd700;
    box-shadow:
        0 0 0 1px rgba(255,215,0,0.2),
        0 0 12px rgba(255,215,0,0.5),
        0 2px 6px rgba(0,0,0,0.4);
    animation: targetablePulse 1.5s ease-in-out infinite;
    cursor: pointer;
}

/* 选中己方单位时，可攻击的敌方单位高亮 */
.unit.attackable-enemy {
    box-shadow:
        0 0 0 2px rgba(255,80,50,0.7),
        0 0 10px rgba(255,80,50,0.35),
        0 2px 6px rgba(0,0,0,0.4);
    animation: attackablePulse 1.2s ease-in-out infinite;
    cursor: pointer;
}

@keyframes attackablePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,80,50,0.7), 0 0 10px rgba(255,80,50,0.35), 0 2px 6px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 0 2px rgba(255,80,50,0.4), 0 0 6px rgba(255,80,50,0.2), 0 2px 6px rgba(0,0,0,0.4); }
}

@keyframes targetablePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.78; }
}

.unit.stunned {
    filter: brightness(0.45) saturate(0.5);
    opacity: 0.7;
}

.cell.targetable-cell {
    background:
        linear-gradient(160deg, #b8d4f5, #90b8e0);
    cursor: pointer;
    box-shadow:
        inset 0 0 0 2px rgba(255,215,0,0.6),
        inset 0 0 12px rgba(255,215,0,0.15);
    border-color: rgba(255,215,0,0.5);
}

/* ========== 单位三层布局 ========== */
.unit-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.unit-name {
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

/* 血条 */
.hp-bar {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2px;
    border: 1px solid rgba(0,0,0,0.3);
}

.hp-fill {
    height: 100%;
    transition: width 0.3s ease, background 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.9), 0 1px 1px rgba(0,0,0,0.8);
    line-height: 1;
}

/* 护盾显示 */
.unit-shield {
    display: inline-block;
    font-size: 9px;
    color: #7dd3fc;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
    margin-bottom: 1px;
}

/* 中间战斗属性 */
.unit-mid {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    line-height: 1.2;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.dmg-stat { color: #fff; }
.range-stat { color: #fde68a; }

/* 底部行动状态 */
.unit-bot {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    line-height: 1.2;
    margin-top: 1px;
}

.act-move { color: #a0a0a0; }
.act-ok { color: #4ade80; font-weight: bold; }
.act-done { color: #666; opacity: 0.6; }
.move-count { color: #93c5fd; font-size: 9px; }

/* 蓄力标记 */
.charge-tag {
    display: inline-block;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    white-space: nowrap;
}
.charge-normal { background: rgba(251,191,36,0.3); color: #fcd34d; border: 1px solid rgba(251,191,36,0.5); }
.charge-super { background: rgba(168,85,247,0.3); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.5); }
.charge-sweep { background: rgba(239,68,68,0.3); color: #fca5a5; border: 1px solid rgba(239,68,68,0.5); }

/* 悬赏标记（3/5/7/9连杀进入悬赏，被移除时对方获得赏金） */
.bounty-tag {
    display: inline-block;
    font-size: 9px;
    padding: 1px 5px;
    margin-left: 3px;
    border-radius: 4px;
    font-weight: bold;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(255,179,0,0.35), rgba(255,120,0,0.35));
    color: #ffd54a;
    border: 1px solid rgba(255,170,0,0.7);
    text-shadow: 0 0 4px rgba(255,150,0,0.7);
    animation: bountyPulse 1.6s ease-in-out infinite;
}
@keyframes bountyPulse {
    0%, 100% { box-shadow: 0 0 2px rgba(255,170,0,0.4); }
    50% { box-shadow: 0 0 8px rgba(255,170,0,0.9); }
}

/* 蓄力光晕动画 */
.unit.charging-normal {
    box-shadow:
        0 0 0 2px rgba(251,191,36,0.5),
        0 0 10px rgba(251,191,36,0.4),
        0 2px 6px rgba(0,0,0,0.4);
    animation: chargeGlowGold 1.5s ease-in-out infinite;
}

.unit.charging-super {
    box-shadow:
        0 0 0 2px rgba(168,85,247,0.5),
        0 0 12px rgba(168,85,247,0.4),
        0 2px 6px rgba(0,0,0,0.4);
    animation: chargeGlowPurple 1.5s ease-in-out infinite;
}

.unit.charging-sweep {
    box-shadow:
        0 0 0 2px rgba(239,68,68,0.5),
        0 0 12px rgba(239,68,68,0.4),
        0 2px 6px rgba(0,0,0,0.4);
    animation: chargeGlowRed 1.5s ease-in-out infinite;
}

@keyframes chargeGlowGold {
    0%, 100% { box-shadow: 0 0 0 2px rgba(251,191,36,0.4), 0 0 8px rgba(251,191,36,0.3), 0 2px 6px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 0 2px rgba(251,191,36,0.6), 0 0 14px rgba(251,191,36,0.5), 0 2px 6px rgba(0,0,0,0.4); }
}
@keyframes chargeGlowPurple {
    0%, 100% { box-shadow: 0 0 0 2px rgba(168,85,247,0.4), 0 0 8px rgba(168,85,247,0.3), 0 2px 6px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 0 2px rgba(168,85,247,0.6), 0 0 14px rgba(168,85,247,0.5), 0 2px 6px rgba(0,0,0,0.4); }
}
@keyframes chargeGlowRed {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.4), 0 0 8px rgba(239,68,68,0.3), 0 2px 6px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 0 2px rgba(239,68,68,0.6), 0 0 14px rgba(239,68,68,0.5), 0 2px 6px rgba(0,0,0,0.4); }
}

/* 状态图标栏 */
.status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.08);
    line-height: 1;
}

.si {
    display: inline-block;
    font-size: 9px;
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(0,0,0,0.35);
    white-space: nowrap;
    line-height: 1.3;
}

/* ========== 战斗反馈动效 ========== */

/* 受击闪白 */
.cell-hit-flash {
    animation: cellHitFlash 0.35s ease;
}
@keyframes cellHitFlash {
    0% { background-color: transparent; }
    20% { background-color: rgba(255, 80, 80, 0.45) !important; }
    100% { background-color: transparent; }
}

/* 攻击发起闪白 */
.cell-attack-flash {
    animation: cellAttackFlash 0.3s ease;
}
@keyframes cellAttackFlash {
    0% { background-color: transparent; }
    30% { background-color: rgba(255, 220, 100, 0.35) !important; }
    100% { background-color: transparent; }
}

/* 浮动伤害数字 */
.float-text {
    position: fixed;
    z-index: 9999;
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);
    animation: floatUp 0.9s ease-out forwards;
}
.float-text.damage {
    color: #ff6b6b;
}
.float-text.heal {
    color: #4ade80;
}
.float-text.crit {
    color: #fbbf24;
    font-size: 20px;
}
@keyframes floatUp {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -80%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -200%) scale(1); }
}

/* 攻击路径光束 */
.attack-beam {
    position: fixed;
    z-index: 9998;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,220,100,0.8), rgba(255,100,50,0.6), transparent);
    box-shadow: 0 0 6px rgba(255,200,80,0.5);
    pointer-events: none;
    animation: beamFade 0.4s ease-out forwards;
}
@keyframes beamFade {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 0; }
}

/* ========== 右侧面板 ========== */
.right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 280px;
}

/* 信息栏 */
.info-bar {
    background:
        linear-gradient(135deg, #1e1610, #2a1f14);
    border-radius: var(--r-full);
    color: var(--text-primary);
    font-weight: bold;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    flex-wrap: wrap;
    gap: 8px;
    box-shadow:
        var(--shadow-md),
        var(--shadow-inset),
        0 0 0 1px rgba(212,168,71,0.15);
}

.player-card {
    background:
        linear-gradient(135deg, #2c2a24, #38332a);
    padding: 6px 14px;
    border-radius: var(--r-full);
    min-width: 130px;
    text-align: center;
    font-size: 12px;
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255,255,255,0.06);
    border: 1px solid rgba(138,120,96,0.2);
}

.turn-indicator {
    font-size: 20px;
    background:
        linear-gradient(135deg, rgba(0,0,0,0.7), rgba(20,12,6,0.8));
    padding: 6px 16px;
    border-radius: var(--r-full);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212,168,71,0.2);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.big-round-badge {
    font-size: 12px;
    background: linear-gradient(135deg, rgba(212,168,71,0.25), rgba(180,140,50,0.15));
    padding: 2px 8px;
    border-radius: var(--r-full);
    border: 1px solid rgba(212,168,71,0.35);
    color: #f0d090;
    white-space: nowrap;
    text-shadow: none;
}

.big-round-extreme {
    background: linear-gradient(135deg, rgba(100,180,255,0.3), rgba(60,120,200,0.2));
    border-color: rgba(100,180,255,0.5);
    color: #aaddff;
}

.big-round-death {
    background: linear-gradient(135deg, rgba(200,60,60,0.35), rgba(140,30,30,0.25));
    border-color: rgba(255,80,80,0.5);
    color: #ffaaaa;
}

/* 手牌区域 */
.hand-area {
    background:
        linear-gradient(160deg, #2b4127, #1f3120);
    border-radius: var(--r-lg);
    padding: 12px;
    border: 1px solid rgba(58,125,58,0.2);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.hand-title {
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
}

/* 顶部小按钮 */
.clear-hand-btn, .pokedex-btn, .tutorial-btn, .test-mode-btn {
    background: linear-gradient(135deg, #8a4a28, #6a3818);
    border: 1px solid rgba(212,168,71,0.15);
    color: white;
    padding: 5px 12px;
    border-radius: var(--r-full);
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08);
}

.clear-hand-btn:hover, .pokedex-btn:hover, .tutorial-btn:hover, .test-mode-btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.clear-hand-btn:active, .pokedex-btn:active, .tutorial-btn:active, .test-mode-btn:active {
    transform: scale(0.96);
}

.test-mode-btn { background: linear-gradient(135deg, #2c6e6e, #1a5252); }
.tutorial-btn { background: linear-gradient(135deg, #2c6e2c, #1a4e1a); }
.pokedex-btn { background: linear-gradient(135deg, #6a2dad, #4a1d7a); }

/* 手牌卡片容器 */
.hand-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    min-height: 100px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 4px;
}

/* 敌方手牌 */
.enemy-hand-area {
    background:
        linear-gradient(160deg, #3d2020, #2a1414);
    border-radius: var(--r-lg);
    padding: 10px;
    margin-top: 4px;
    border: 1px solid rgba(139,60,44,0.2);
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

.enemy-hand-title {
    font-size: 11px;
    margin-bottom: 6px;
    color: #d0a0a0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.enemy-hand-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    min-height: 36px;
    max-height: 140px;
    overflow-y: auto;
    padding: 2px;
}

.enemy-card {
    background:
        linear-gradient(160deg, #3a2a2a, #2a1a1a) !important;
    border-radius: var(--r-md);
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    text-align: center;
    color: #cc9a9a;
    border: 1px solid rgba(106,58,58,0.4) !important;
    position: relative;
    width: 68px;
    padding: 20px 2px 6px 2px;
    font-size: 8px;
    transition: transform var(--t-fast);
}

.enemy-card:hover {
    transform: translateY(-2px);
}

.enemy-card .card-name { color: #cc9a9a; font-size: 12px; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.enemy-card .card-cost-badge { width: 18px; height: 18px; font-size: 10px; top: 1px; left: 1px; }
.enemy-card .card-disabled-overlay { font-size: 20px; border-radius: var(--r-md); }

/* ========== 游戏卡牌 ========== */
.card {
    background:
        linear-gradient(170deg, #fef6de 0%, #f0dca8 50%, #e4cc94 100%);
    border-radius: var(--r-md);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(180,150,100,0.2);
    cursor: pointer;
    text-align: center;
    color: #2a2418;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    border: 1px solid #c8a868;
    position: relative;
    width: 100px;
    padding: 20px 4px 22px 4px;
    font-size: 10px;
    overflow: hidden;
    will-change: transform;
}

/* 稀有度边框 */
.card.grade-1 { border: 2px solid #ffd700; box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 6px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5); }
.card.grade-2 { border: 1px solid #9c6cff; box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 4px rgba(156,108,255,0.1), inset 0 1px 0 rgba(255,255,255,0.5); }
.card.grade-3 { border: 1px solid #c8a868; }

/* 费用徽章 */
.card-cost-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    z-index: 2;
    line-height: 1;
}

.cost-up { font-size: 9px; color: #ff4444; text-shadow: 0 0 2px rgba(255,0,0,0.5); }
.cost-down { font-size: 9px; color: #00cc00; text-shadow: 0 0 2px rgba(0,255,0,0.5); }

/* 手牌快捷键编号 */
.card-key-hint {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 9px;
    font-family: monospace;
    color: rgba(255,255,255,0.3);
    z-index: 2;
}

/* 卡牌名称 */
.card-name {
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    line-height: 1.2;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡牌属性行 */
.card-stats {
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.2;
}
.cs-hp { color: #dc2626; }
.cs-dmg { color: #1e3a5f; }
.cs-range { color: #92400e; }

/* 被动名 */
.card-passive {
    font-size: 8px;
    color: #6b5b3a;
    margin-top: 2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

/* 禁用覆盖层 */
.card-disabled-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(40,30,20,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: 3;
    border-radius: var(--r-md);
}

.card.card-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    pointer-events: none;
}

/* 敌方手牌不需要顶部白色高光条 */
.enemy-card::before { display: none; }

.card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 6px 16px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(180,150,100,0.2);
    border-color: #d4b878;
}

.card.selected-card {
    background:
        linear-gradient(170deg, #ffe580 0%, #ffd650 50%, #f0c030 100%);
    transform: scale(1.05) translateY(-2px);
    border: 2px solid #ff9900;
    box-shadow:
        0 0 0 1px rgba(255,153,0,0.3),
        0 6px 18px rgba(255,153,0,0.35),
        0 2px 6px rgba(0,0,0,0.4);
}

.card b {
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* 弃牌按钮 */
.discard-btn {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: linear-gradient(135deg, #8b3c2c, #6a2818);
    color: white;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: var(--r-full);
    font-size: 9px;
    padding: 2px 8px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    min-height: 18px;
    line-height: 1;
}

.discard-btn:hover { opacity: 0.88; }
.discard-btn:active { transform: scale(0.92); }

/* ========== 预牌堆 ========== */
.prepool-area {
    background:
        linear-gradient(160deg, #1f2e1a, #142208);
    border-radius: var(--r-md);
    padding: 8px 10px;
    border: 1px solid rgba(58,125,58,0.15);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.03);
}

.prepool-area > div:first-child {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.prepool-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    max-height: 70px;
    overflow-y: auto;
}

.prepool-card {
    background:
        linear-gradient(135deg, #2d4025, #1f3020);
    padding: 4px 12px;
    border-radius: var(--r-full);
    color: var(--text-primary);
    font-size: 12px;
    border: 1px solid rgba(58,125,58,0.25);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
}

.prepool-card:hover {
    border-color: rgba(120,200,120,0.4);
    transform: translateY(-1px);
}

/* ========== 通用按钮 ========== */
button {
    background:
        linear-gradient(135deg, #d4a868, #b88848 50%, #a87838 100%);
    border: 1px solid rgba(0,0,0,0.2);
    padding: 8px 20px;
    border-radius: var(--r-full);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    margin: 4px;
    touch-action: manipulation;
    color: #2a1a08;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(120,80,30,0.2);
    will-change: transform;
}

button:hover {
    transform: translateY(-1px);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(120,80,30,0.2);
}

button:active {
    transform: scale(0.96);
    box-shadow:
        var(--shadow-sm),
        inset 0 2px 4px rgba(0,0,0,0.2);
}

.skill-btn {
    background: linear-gradient(135deg, #8a4cc0, #6a2ca0 50%, #5a1c90 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border: 1px solid rgba(138,76,192,0.3);
}

.cancel-btn {
    background: linear-gradient(135deg, #8b3c2c, #6a2818 50%, #5a1808 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border: 1px solid rgba(139,60,44,0.3);
}

.pop-btn {
    background: linear-gradient(135deg, #a0522d, #804220 50%, #703218 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border: 1px solid rgba(160,82,45,0.3);
}

/* ========== 日志 ========== */
.log {
    background:
        linear-gradient(180deg, #16100c, #100a06);
    height: 80px;
    overflow-y: auto;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    color: #a89878;
    border: 1px solid rgba(138,120,96,0.15);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,0.03);
    line-height: 1.5;
}

.flex-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* 快捷键提示 */
.shortcut-hints {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 9px;
    color: rgba(255,255,255,0.35);
}
.shortcut-hints span {
    white-space: nowrap;
}
.kbd-hint {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 9px;
    font-family: monospace;
    color: rgba(255,255,255,0.6);
    margin-right: 2px;
    line-height: 1.4;
}

/* ========== 弹窗系统 ========== */
.prepick-overlay, .discard-overlay, .pokedex-overlay,
.tutorial-overlay, .test-panel-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.82);
    display: flex; justify-content: center; align-items: center;
    z-index: 3000;
    animation: overlayFadeIn 0.2s ease;
}
/* 确认/消息弹窗：必须显示在一切浮层之上（含排行榜 5000 / 结算 4000）——从排行榜点删除时确认框不能被压在下层 */
.custom-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.82);
    display: flex; justify-content: center; align-items: center;
    z-index: 6000;
    animation: overlayFadeIn 0.2s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.custom-modal-content, .prepick-panel, .discard-panel, .pokedex-panel,
.tutorial-panel, .test-panel {
    background:
        linear-gradient(160deg, #2c2118 0%, #22160c 100%);
    border-radius: var(--r-xl);
    padding: 24px;
    text-align: center;
    color: var(--text-primary);
    border: 1px solid rgba(212,168,71,0.3);
    width: 90%; max-width: 700px;
    max-height: 80vh; overflow-y: auto;
    box-shadow:
        var(--shadow-xl),
        var(--shadow-inset),
        0 0 60px rgba(212,168,71,0.08);
    animation: panelSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes panelSlideIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.custom-modal-content h3, .prepick-panel h3, .pokedex-panel h2, .tutorial-panel h3 {
    color: var(--gold-bright);
    margin-top: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.custom-modal-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 12px 0 20px;
}

.custom-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.custom-modal-btn {
    padding: 10px 28px;
    border-radius: var(--r-full);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
}

.custom-modal-btn.confirm {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold) 50%, var(--gold-soft));
    color: #2a1a08;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.custom-modal-btn.cancel {
    background: linear-gradient(135deg, #6a5848, #4a3828);
    color: var(--text-secondary);
}

/* 预牌选择弹窗 */
.prepick-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.prepick-btn {
    background: linear-gradient(135deg, var(--bg-card), #2a1f14);
    border: 1px solid rgba(212,168,71,0.2);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 14px;
    text-align: left;
    text-shadow: none;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05);
}

.prepick-btn:hover {
    border-color: var(--border-gold);
    opacity: 0.92;
    transform: translateY(-1px);
}

.prepick-cancel {
    background: linear-gradient(135deg, #6a3828, #4a2018) !important;
    color: #d0a890 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.prepick-selected {
    background: linear-gradient(135deg, #b8862b, #8a6418) !important;
    border-color: #f0d090 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(212,168,71,0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.discard-selected {
    background: linear-gradient(135deg, #c0392b, #922b21) !important;
    border-color: #ff6655 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(231,76,60,0.5), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* 选择列表弹窗 */
.select-list {
    margin: 12px 0;
}

.select-item {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    text-align: left;
    font-size: 14px;
}

.select-item:hover {
    border-color: var(--border-gold);
    background: #3a2a1c;
    transform: translateX(4px);
}

/* ========== 测试面板 ========== */
.test-panel h3 { color: var(--gold-bright); margin-top: 0; }

.test-group {
    background:
        linear-gradient(160deg, rgba(58,42,28,0.8), rgba(42,30,18,0.8));
    border-radius: var(--r-md);
    padding: 14px;
    margin-bottom: 16px;
    text-align: left;
    border: 1px solid rgba(138,120,96,0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.test-group h4 {
    margin: 0 0 10px 0;
    color: var(--gold-bright);
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.test-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.test-card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.test-card-btn {
    background: linear-gradient(135deg, #8a4a28, #6a3818);
    color: white;
    border: 1px solid rgba(0,0,0,0.2);
    padding: 5px 10px;
    border-radius: var(--r-full);
    font-size: 11px;
    cursor: pointer;
    margin: 2px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
}

.test-card-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.test-grade-buttons {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.test-grade-btn {
    background: rgba(58,42,28,0.8);
    border: 1px solid rgba(212,168,71,0.25);
    padding: 4px 12px;
    border-radius: var(--r-full);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    font-weight: 600;
}

.test-grade-btn.active {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft));
    color: #2a1a08;
    border-color: var(--gold);
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.test-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    gap: 6px;
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
    justify-content: center;
}

.test-card-item {
    background:
        linear-gradient(160deg, rgba(58,42,28,0.9), rgba(42,30,18,0.9));
    border-radius: var(--r-md);
    padding: 8px 10px;
    text-align: left;
    font-size: 10px;
    color: var(--text-primary);
    border-left: 3px solid var(--gold);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.test-card-item:hover {
    background: linear-gradient(160deg, rgba(74,58,40,0.95), rgba(54,38,26,0.95));
    border-left-color: var(--gold-bright);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.test-card-item b {
    color: var(--gold-bright);
    font-size: 11px;
    display: block;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.test-card-item .stats {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: var(--text-secondary);
    font-size: 9px;
}

.test-card-search {
    padding: 6px 12px;
    border-radius: var(--r-full);
    border: 1px solid rgba(212,168,71,0.3);
    background: rgba(20,14,8,0.8);
    color: var(--text-primary);
    width: 160px;
    font-size: 11px;
    margin-bottom: 6px;
    outline: none;
    transition: border-color var(--t-fast);
}

.test-card-search:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,168,71,0.15);
}

.test-card-search::placeholder { color: var(--text-muted); }

.test-panel-buttons {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ========== 图鉴 ========== */
.pokedex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 180px);
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

.pokedex-card {
    background:
        linear-gradient(160deg, rgba(58,42,28,0.9), rgba(42,30,18,0.9));
    border-radius: var(--r-md);
    padding: 12px;
    text-align: left;
    font-size: 11px;
    color: var(--text-primary);
    border-left: 4px solid var(--gold);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    cursor: pointer;
}

.pokedex-card:hover {
    border-left-color: var(--gold-bright);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.pokedex-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.pokedex-card-header b {
    color: var(--gold-bright);
    font-size: 13px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.pokedex-grade-tag {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    font-weight: 600;
}
.pokedex-grade-tag.grade-1 { background: rgba(255,215,0,0.15); color: #ffd700; border: 1px solid rgba(255,215,0,0.3); }
.pokedex-grade-tag.grade-2 { background: rgba(168,85,247,0.15); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }
.pokedex-grade-tag.grade-3 { background: rgba(192,192,192,0.15); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.3); }

.pokedex-card-stats {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: var(--text-secondary);
    font-size: 10px;
}

/* ===== 卡池查看 ===== */
.pool-side-toggle {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}
.pool-side-toggle button {
    padding: 8px 18px;
    border-radius: var(--r-md);
    border: 1px solid rgba(212,168,71,0.3);
    background: rgba(42,30,18,0.8);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.pool-side-toggle button.active {
    background: linear-gradient(135deg, #3a6b3a, #2a5b2a);
    color: #e8f5c8;
    border-color: rgba(90,155,90,0.5);
}
.pool-side-toggle button:hover { border-color: var(--gold); }
.pool-summary {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    margin: 8px 0 2px;
}
.pool-summary b { color: var(--gold-bright); }
.pool-count {
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: rgba(90,155,90,0.15);
    color: #a5d6a5;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}
.pool-count.zero { background: rgba(120,100,80,0.15); color: #8a7a66; }
.pokedex-card.pool-empty { opacity: 0.45; }
.pokedex-card.pool-empty:hover { opacity: 0.7; }

/* ===== 图鉴详情浮层 ===== */
.pokedex-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fadeIn 0.2s ease;
}

.pokedex-detail-panel {
    background: linear-gradient(165deg, #3a2a1c, #2a1e12);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    max-width: 460px;
    width: 92%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.15);
    position: relative;
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pokedex-detail-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.pokedex-detail-close:hover {
    background: rgba(255,80,80,0.2);
    color: #ff8080;
}

.pokedex-detail-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    padding-right: 40px;
    border-bottom: 1px solid rgba(255,215,0,0.15);
}
.pokedex-detail-titlebar.grade-1 { border-bottom-color: rgba(255,215,0,0.3); }
.pokedex-detail-titlebar.grade-2 { border-bottom-color: rgba(168,85,247,0.3); }
.pokedex-detail-titlebar.grade-3 { border-bottom-color: rgba(192,192,192,0.3); }

.pokedex-detail-titlebar h2 {
    margin: 0;
    font-size: 22px;
    color: var(--gold-bright);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.pokedex-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.stat-pill {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-md);
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-pill b {
    color: var(--text-primary);
    font-size: 16px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.pokedex-detail-section {
    margin-bottom: 18px;
}
.pokedex-detail-section h3 {
    font-size: 14px;
    color: var(--gold);
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(255,215,0,0.15);
}
.pokedex-detail-section p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pokedex-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.pokedex-controls button {
    background: rgba(58,42,28,0.8);
    border: 1px solid rgba(212,168,71,0.25);
    padding: 5px 14px;
    border-radius: var(--r-full);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-shadow: none;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    box-shadow: none;
}

.pokedex-controls button:hover {
    border-color: var(--gold);
    opacity: 0.9;
    transform: translateY(-1px);
}

.pokedex-controls button.active {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft));
    color: #2a1a08;
    border-color: var(--gold);
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.pokedex-search {
    padding: 5px 12px;
    border-radius: var(--r-full);
    border: 1px solid rgba(212,168,71,0.3);
    background: rgba(20,14,8,0.8);
    color: var(--text-primary);
    width: 160px;
    font-size: 12px;
    outline: none;
    transition: border-color var(--t-fast);
}

.pokedex-search:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,168,71,0.15);
}

.pokedex-search::placeholder { color: var(--text-muted); }

/* ========== 工具提示 & Toast ========== */
.tooltip {
    position: fixed;
    background:
        linear-gradient(160deg, rgba(30,26,16,0.95), rgba(20,16,10,0.95));
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 12px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    pointer-events: none;
    z-index: 9999;
    border-left: 4px solid var(--gold);
    max-width: 280px;
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px rgba(212,168,71,0.15);
    line-height: 1.6;
    white-space: pre-line;
}

.game-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background:
        linear-gradient(135deg, rgba(0,0,0,0.9), rgba(20,14,8,0.9));
    backdrop-filter: blur(12px);
    color: var(--text-primary);
    padding: 10px 22px;
    border-radius: var(--r-full);
    font-size: 14px;
    font-weight: bold;
    z-index: 9999;  /* 必须高于一切浮层（管理面板 6000 / 排行榜 5000 / 结算 4000），否则被遮挡 */
    pointer-events: none;
    white-space: nowrap;
    border: 1px solid rgba(212,168,71,0.25);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255,255,255,0.05);
    animation: toastIn 0.2s ease-out;
    will-change: transform, opacity;
}

.game-toast.toast-out {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.95); }
}

/* ========== 击杀提示 ========== */
.kill-streak-toast {
    position: fixed;
    top: 45%; left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    background: linear-gradient(135deg, #ff4757cc, #ff6348cc, #ffa502cc);
    backdrop-filter: blur(16px);
    color: #fff;
    padding: 14px 36px;
    border-radius: var(--r-md);
    font-size: 22px;
    font-weight: 900;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 0 20px rgba(255,71,87,0.8), 0 2px 4px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.3);
    letter-spacing: 4px;
    opacity: 0;
    animation: killStreakIn 0.3s ease-out forwards, killStreakOut 0.5s 1.5s ease-in forwards;
}

.kill-streak-toast.penta {
    background: linear-gradient(135deg, #a855f7cc, #6366f1cc, #3b82f6cc);
    border-color: rgba(168,85,247,0.5);
    text-shadow: 0 0 30px rgba(168,85,247,0.9), 0 2px 4px rgba(0,0,0,0.5);
    font-size: 28px;
    animation: killStreakIn 0.35s ease-out forwards, killStreakOut 0.55s 1.6s ease-in forwards;
}

.kill-streak-toast.legendary {
    background: linear-gradient(135deg, #fbbf24cc, #f59e0bcc, #ef4444cc);
    border-color: rgba(251,191,36,0.6);
    text-shadow: 0 0 40px rgba(251,191,36,0.9), 0 2px 4px rgba(0,0,0,0.5);
    font-size: 32px;
    letter-spacing: 6px;
    animation: killStreakIn 0.4s ease-out forwards, killStreakOut 0.6s 1.8s ease-in forwards;
}

@keyframes killStreakIn {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes killStreakOut {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) translateY(-30px); }
}

/* ========== 教程面板 ========== */
.tutorial-content { text-align: left; }

/* ========== 新手引导教程：发光高亮 ========== */
.tutorial-glow {
    outline: 2px solid #ffd98a !important;
    outline-offset: -2px;
    box-shadow: 0 0 14px 4px rgba(255, 200, 80, 0.85) !important;
    animation: tutGlowPulse 1.2s ease-in-out infinite;
    position: relative;
    z-index: 5;
}

@keyframes tutGlowPulse {
    0%, 100% { box-shadow: 0 0 10px 3px rgba(255, 200, 80, 0.6); }
    50% { box-shadow: 0 0 20px 7px rgba(255, 200, 80, 1); }
}

.tutorial-content h4 {
    color: var(--gold-bright);
    margin: 16px 0 8px 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.tutorial-content ul, .tutorial-content ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.tutorial-content li {
    padding: 5px 0;
    border-bottom: 1px dashed rgba(138,120,96,0.2);
    color: var(--text-secondary);
    line-height: 1.5;
}

.tutorial-content li:last-child { border-bottom: none; }

.tutorial-content li b {
    color: var(--gold-bright);
}

.tutorial-content kbd {
    background: var(--bg-card);
    border: 1px solid rgba(212,168,71,0.3);
    border-radius: var(--r-sm);
    padding: 1px 6px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--gold-bright);
    box-shadow: var(--shadow-sm), inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* ========== 模式选择 ========== */
.mode-select-overlay, .deck-builder-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: overlayFadeIn 0.2s ease;
}
/* 不使用 backdrop-filter：全屏模糊在低端设备/大棋盘上重绘开销大，是界面卡顿来源之一；深色遮罩已足够区分层级 */

.mode-select-panel {
    background:
        linear-gradient(160deg, #2c2118 0%, #22160c 100%);
    border-radius: var(--r-xl);
    padding: 32px;
    text-align: center;
    color: var(--text-primary);
    max-width: 440px; width: 90%;
    border: 1px solid rgba(212,168,71,0.3);
    box-shadow: var(--shadow-xl), var(--shadow-inset), 0 0 60px rgba(212,168,71,0.08);
    animation: panelSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.mode-select-panel h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--gold-bright);
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.mode-select-panel p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.mode-btn {
    display: block;
    width: 100%;
    padding: 16px;
    margin: 10px 0;
    border-radius: var(--r-md);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    text-align: center;
}

.mode-btn.full {
    background: linear-gradient(135deg, #3a6b3a, #2a5b2a);
    color: #e8f5c8;
    border-color: rgba(90,155,90,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}

.mode-btn.full:hover {
    background: linear-gradient(135deg, #4a8b4a, #3a7b3a);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
}

.mode-btn.custom {
    background: linear-gradient(135deg, #6a4a1a, #4a3010);
    color: #f5e4b0;
    border-color: rgba(154,122,58,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}

.mode-btn.custom:hover {
    background: linear-gradient(135deg, #8a6a2a, #6a4020);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
}

.mode-btn.ai {
    background: linear-gradient(135deg, #5a3a8a, #3a2a6a 50%, #2a1a5a);
    color: #e0d0ff;
    border-color: rgba(156,108,255,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}

.mode-btn.ai:hover {
    background: linear-gradient(135deg, #6a4a9a, #4a3a7a);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
}

.mode-btn.ai small {
    color: #b8a0e0;
}

.mode-btn.tutorial {
    background: linear-gradient(135deg, #2e7d4f, #1f5c3a);
    color: #d8f5e0;
    border-color: rgba(80,180,120,0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}

.mode-btn.tutorial:hover {
    background: linear-gradient(135deg, #3a9d63, #2a7d4a);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
}

.mode-btn.tutorial small {
    color: #a8d8b8;
}

.mode-btn.online {
    background: linear-gradient(135deg, #2a6a8a, #1a4a6a 50%, #123a55);
    color: #cfe8ff;
    border-color: rgba(90,170,220,0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}

.mode-btn.online:hover {
    background: linear-gradient(135deg, #3a8aac, #2a6a8c);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
}

.mode-btn.online small {
    color: #9cc8e8;
}

/* ========== 卡组构建器 ========== */
.deck-builder-panel {
    background:
        linear-gradient(160deg, #2c2118 0%, #22160c 100%);
    border-radius: var(--r-xl);
    padding: 18px 22px;
    color: var(--text-primary);
    max-width: 800px; width: 95%;
    max-height: 92vh; overflow-y: auto;
    border: 1px solid rgba(212,168,71,0.25);
    box-shadow: var(--shadow-xl), var(--shadow-inset);
    animation: panelSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.deck-builder-panel h2 {
    font-size: 20px;
    margin: 0 0 4px 0;
    text-align: center;
    color: var(--gold-bright);
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.deck-builder-panel .subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.5;
}

.deck-grade-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.deck-grade-label {
    writing-mode: vertical-lr;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    min-width: 26px;
    text-align: center;
    letter-spacing: 2px;
    box-shadow: var(--shadow-sm);
}

.deck-grade-label.g1 {
    background: linear-gradient(180deg, #8b6914, #6a4f10);
    color: #ffd700;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.deck-grade-label.g2 {
    background: linear-gradient(180deg, #5a4a5a, #3a2a3a);
    color: #c0a0c0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.deck-grade-label.g3 {
    background: linear-gradient(180deg, #4a5a4a, #2a3a2a);
    color: #a0c0a0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.deck-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.deck-card-chip {
    background:
        linear-gradient(160deg, rgba(58,48,40,0.9), rgba(42,32,28,0.9));
    border: 1px solid rgba(90,74,56,0.4);
    border-radius: var(--r-sm);
    padding: 5px 9px;
    font-size: 10px;
    cursor: pointer;
    color: #c8b898;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    text-align: center;
    min-width: 72px;
    box-shadow: var(--shadow-sm);
}

.deck-card-chip:hover {
    border-color: rgba(184,124,79,0.5);
    background: linear-gradient(160deg, rgba(74,58,42,0.95), rgba(52,38,26,0.95));
    transform: translateY(-1px);
}

.deck-card-chip.selected {
    background: linear-gradient(160deg, rgba(42,74,42,0.9), rgba(30,50,30,0.9));
    border-color: rgba(90,155,90,0.5);
    color: #c8f0a0;
    font-weight: bold;
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(90,155,90,0.15);
}

.deck-card-chip .chip-name {
    font-weight: bold;
    font-size: 11px;
}

.deck-card-chip .chip-info {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
}

.deck-card-chip.selected .chip-info { color: #8ab868; }

.deck-counter {
    font-size: 11px;
    margin-left: 6px;
    color: #f0c060;
    white-space: nowrap;
    font-weight: 600;
}

.deck-counter.done { color: #60e060; }

.deck-confirm-bar {
    text-align: center;
    margin-top: 16px;
}

.deck-confirm-btn {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold) 50%, var(--gold-soft));
    border: 1px solid rgba(0,0,0,0.2);
    padding: 12px 40px;
    border-radius: var(--r-full);
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    color: #2a1a08;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
}

.deck-confirm-btn:disabled {
    background: linear-gradient(135deg, #5a4a38, #4a3a28);
    color: var(--text-muted);
    cursor: not-allowed;
    text-shadow: none;
    box-shadow: var(--shadow-sm);
}

.deck-preset-btn {
    background: linear-gradient(135deg, #3a6a6a, #2a5050);
    border: 1px solid rgba(90,170,170,0.3);
    color: #c0f0f0;
    padding: 8px 18px;
    border-radius: var(--r-full);
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    margin-bottom: 8px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08);
}

.deck-preset-btn:hover {
    background: linear-gradient(135deg, #4a8a8a, #3a6a6a);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ========== 预设卡组选择 ========== */
.preset-select-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100;
    animation: overlayFadeIn 0.2s ease;
}

.preset-select-panel {
    background:
        linear-gradient(160deg, #2c2118 0%, #22160c 100%);
    border-radius: var(--r-xl);
    padding: 22px;
    text-align: center;
    color: var(--text-primary);
    max-width: 700px; width: 95%;
    max-height: 90vh; overflow-y: auto;
    border: 1px solid rgba(212,168,71,0.25);
    box-shadow: var(--shadow-xl), var(--shadow-inset);
    animation: panelSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.preset-select-panel h2 {
    font-size: 20px;
    margin: 0 0 4px 0;
    color: var(--gold-bright);
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.preset-select-panel .subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.preset-item {
    background:
        linear-gradient(160deg, rgba(58,48,40,0.9), rgba(42,32,28,0.9));
    border: 1px solid rgba(90,74,56,0.3);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
    box-shadow: var(--shadow-sm);
}

.preset-item:hover {
    border-color: rgba(184,124,79,0.5);
    background: linear-gradient(160deg, rgba(74,58,42,0.95), rgba(52,38,26,0.95));
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.preset-item h3 {
    margin: 0 0 5px 0;
    font-size: 15px;
    color: var(--gold-bright);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.preset-item .preset-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.4;
}

.preset-item .preset-grade {
    font-size: 10px;
    color: var(--text-muted);
    margin: 3px 0;
}

.preset-item .preset-grade b {
    color: #c8b080;
    font-weight: 600;
}

.deck-top-bar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.deck-back-btn {
    padding: 6px 14px;
    font-size: 13px;
    min-height: 36px;
}

/* ========== 导入/导出面板 ========== */
.deck-io-btn {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 36px;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, #5a4a2a, #3a2e1a);
    color: #f0e0b0;
    cursor: pointer;
    transition: all 0.2s;
}
.deck-io-btn:hover {
    background: linear-gradient(135deg, #6a5a3a, #4a3e2a);
    border-color: rgba(255,215,0,0.5);
}

.deck-io-panel {
    max-width: 500px !important;
    width: 92% !important;
    max-height: 85vh;
    overflow-y: auto;
}

.deck-name-input {
    width: 100%;
    padding: 8px 12px;
    margin: 8px 0 12px;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: var(--r-sm);
    background: #2a1e12;
    color: #f0e0b0;
    font-size: 14px;
    box-sizing: border-box;
}
.deck-name-input:focus {
    outline: none;
    border-color: rgba(255,215,0,0.6);
    box-shadow: 0 0 8px rgba(255,215,0,0.15);
}

.deck-io-section {
    margin: 10px 0;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--r-sm);
    border: 1px solid rgba(255,255,255,0.06);
}
.deck-io-label {
    display: block;
    font-size: 12px;
    color: #c0a868;
    margin-bottom: 6px;
    font-weight: 600;
}

.deck-io-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: var(--r-sm);
    background: #1a1208;
    color: #e0d0a0;
    font-size: 11px;
    font-family: monospace;
    resize: none;
    box-sizing: border-box;
    word-break: break-all;
}
.deck-io-textarea:focus {
    outline: none;
    border-color: rgba(255,215,0,0.5);
}

.deck-io-action-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, #5a4a2a, #3a2e1a);
    color: #f0e0b0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.deck-io-action-btn:hover {
    background: linear-gradient(135deg, #6a5a3a, #4a3e2a);
    border-color: rgba(255,215,0,0.5);
}
.deck-io-action-btn.save-btn {
    background: linear-gradient(135deg, #3a6d3a, #2c5e2c);
    border-color: rgba(100,200,100,0.3);
}
.deck-io-action-btn.save-btn:hover {
    background: linear-gradient(135deg, #4a7d4a, #3c6e3c);
}

.saved-deck-list {
    max-height: 180px;
    overflow-y: auto;
    margin: 6px 0;
}
.saved-deck-empty {
    text-align: center;
    color: #807060;
    font-size: 12px;
    padding: 12px;
}
.saved-deck-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin: 4px 0;
    background: rgba(0,0,0,0.3);
    border-radius: var(--r-sm);
    border: 1px solid rgba(255,255,255,0.05);
}
.saved-deck-item.clickable {
    cursor: pointer;
    transition: all 0.15s;
}
.saved-deck-item.clickable:hover {
    background: rgba(255,215,0,0.1);
    border-color: rgba(255,215,0,0.2);
}
.saved-deck-name {
    color: #e0d0a0;
    font-size: 13px;
    font-weight: 600;
}
.saved-deck-del {
    background: none;
    border: none;
    color: rgba(255,100,100,0.6);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
}
.saved-deck-del:hover {
    color: rgba(255,100,100,1);
    background: rgba(255,100,100,0.1);
}

/* ========== 版本标签 ========== */
.version-label {
    position: fixed;
    bottom: 6px; right: 10px;
    color: rgba(255,255,255,0.2);
    font-size: 11px;
    pointer-events: none;
    z-index: 9999;
    user-select: none;
    font-weight: 600;
}

/* ========== 重启确认弹窗 ========== */
.restart-request-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.82);
    display: flex; align-items: center; justify-content: center;
    z-index: 1200;
    animation: overlayFadeIn 0.2s ease;
}

.restart-request-panel {
    background:
        linear-gradient(160deg, #2c2118 0%, #22160c 100%);
    border-radius: var(--r-xl);
    padding: 32px;
    text-align: center;
    color: var(--text-primary);
    max-width: 400px; width: 90%;
    border: 1px solid rgba(212,168,71,0.3);
    box-shadow: var(--shadow-xl), var(--shadow-inset);
    animation: panelSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.restart-request-panel h2 {
    font-size: 22px;
    margin: 0 0 12px 0;
    color: var(--gold-bright);
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.restart-request-panel p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.5;
}

.restart-request-btns {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

/* ========== 对局复盘面板 ========== */
.recap-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex; justify-content: center; align-items: center;
    z-index: 4000;
    animation: overlayFadeIn 0.2s ease;
}

.recap-panel {
    background:
        linear-gradient(160deg, #2c2118 0%, #22160c 100%);
    border-radius: var(--r-xl);
    padding: 28px;
    text-align: center;
    color: var(--text-primary);
    border: 1px solid rgba(212,168,71,0.3);
    width: 90%; max-width: 580px;
    max-height: 85vh; overflow-y: auto;
    box-shadow: var(--shadow-xl), var(--shadow-inset), 0 0 60px rgba(212,168,71,0.08);
    animation: panelSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.recap-panel h2 {
    color: var(--gold-bright);
    margin: 0 0 8px;
    font-size: 24px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.recap-winner {
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    margin: 8px 0 20px;
    text-shadow: 0 0 14px rgba(255,215,0,0.4);
}

.recap-section {
    margin-bottom: 20px;
    text-align: left;
}

.recap-section h3 {
    color: var(--gold-bright);
    margin: 0 0 10px;
    font-size: 15px;
    border-bottom: 1px solid rgba(138,120,96,0.2);
    padding-bottom: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.recap-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.recap-stats-table th {
    background:
        linear-gradient(135deg, rgba(58,42,28,0.8), rgba(42,32,20,0.8));
    color: var(--gold-bright);
    padding: 8px 10px;
    text-align: center;
    border-radius: var(--r-sm);
    font-weight: 600;
}

.recap-stats-table td {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(138,120,96,0.15);
}

.recap-stats-table td:first-child {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
}

.recap-commentary p {
    margin: 6px 0;
    line-height: 1.7;
    font-size: 13px;
    color: var(--text-primary);
}

.recap-mvp {
    background:
        linear-gradient(160deg, rgba(58,42,28,0.8), rgba(42,30,18,0.8));
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--gold-bright);
    border-left: 4px solid #ffd700;
    box-shadow: var(--shadow-sm);
    line-height: 1.6;
}

.recap-events {
    max-height: 180px;
    overflow-y: auto;
    font-size: 12px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.recap-event-item {
    padding: 5px 10px;
    margin: 3px 0;
    background:
        linear-gradient(160deg, rgba(30,22,16,0.8), rgba(20,14,8,0.8));
    border-radius: var(--r-sm);
    border-left: 3px solid var(--gold);
    color: var(--text-secondary);
    line-height: 1.5;
}

.recap-event-item .recap-turn {
    color: var(--gold-bright);
    font-weight: bold;
    margin-right: 6px;
}

.recap-event-item.tactic-event {
    border-left-color: #c060ff;
    background: linear-gradient(160deg, rgba(26,16,32,0.8), rgba(18,10,24,0.8));
}

.recap-tactical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.tactic-item {
    background:
        linear-gradient(160deg, rgba(30,22,16,0.8), rgba(20,14,8,0.8));
    border-radius: var(--r-sm);
    padding: 10px 14px;
    border-left: 3px solid #c060ff;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
}

.tactic-item:hover {
    border-left-color: #d080ff;
    background: linear-gradient(160deg, rgba(40,28,20,0.9), rgba(28,18,12,0.9));
}

.tactic-header {
    font-size: 14px;
    color: #e0b0ff;
    margin-bottom: 4px;
    font-weight: 600;
}

.tactic-desc {
    font-size: 12px;
    color: #ccbbdd;
    line-height: 1.6;
}

.recap-buttons {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.recap-buttons button {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold) 50%, var(--gold-soft));
    color: #2a1a08;
    border: 1px solid rgba(0,0,0,0.2);
    padding: 12px 36px;
    border-radius: var(--r-full);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.12s ease;
}

.recap-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    body { padding: 0; }
    .game-container { flex-direction: column; padding: 8px 4px; gap: 8px; border-radius: 12px; }
    .board-area { width: 100%; overflow-x: auto; padding: 4px; border-radius: 12px; }
    .grid { grid-template-rows: repeat(5, minmax(86px, 17vh)); grid-template-columns: repeat(3, minmax(86px, 28vw)); gap: 1px; }
    .cell { padding: 2px; gap: 1px; }
    .coord { font-size: 8px; }
    .unit { width: 88%; max-width: 100px; font-size: 10px; padding: 4px; margin: 1px auto; min-height: 52px; display: flex; flex-direction: column; justify-content: center; border-radius: var(--r-sm); }
    .unit-name { font-size: 10px; max-width: 80px; }
    .hp-bar { height: 8px; }
    .hp-text { font-size: 8px; }
    .unit-mid { font-size: 10px; gap: 6px; }
    .status-bar { gap: 1px; }
    .si { font-size: 8px; padding: 0 1px; }
    .card { width: calc(min(85px, 26vw)); font-size: 9px; padding: 18px 2px 20px 2px; margin: 1px; min-height: 44px; border-radius: var(--r-sm); }
    .card-cost-badge { width: 18px; height: 18px; font-size: 11px; }
    .card-name { font-size: 10px; }
    .card-stats { font-size: 9px; gap: 4px; }
    .card-passive { font-size: 7px; }
    .right-panel { min-width: auto; gap: 6px; }
    .info-bar { font-size: 10px; padding: 5px 8px; border-radius: 24px; gap: 4px; }
    .player-card { min-width: 100px; font-size: 9px; padding: 2px 5px; }
    .turn-indicator { font-size: 14px; padding: 3px 10px; gap: 4px; }
    .big-round-badge { font-size: 9px; padding: 1px 5px; }
    .hand-title { font-size: 11px; margin-bottom: 4px; }
    button { padding: 8px 14px; font-size: 13px; margin: 3px; min-height: 42px; min-width: 42px; }
    .pop-btn, .skill-btn, .cancel-btn { font-size: 12px; padding: 6px 12px; min-height: 42px; min-width: 42px; }
    .discard-btn { font-size: 9px; padding: 2px 5px; min-height: 22px; }
    .log { height: 60px; font-size: 10px; border-radius: var(--r-sm); padding: 4px; }
    .prepick-btn, .discard-btn-choice, .custom-modal-btn { padding: 10px 16px; font-size: 14px; min-height: 42px; }
    .game-toast { font-size: 12px; white-space: normal; max-width: 85%; bottom: 60px; }
    .test-panel { max-width: 96%; padding: 10px; margin: 0 4px; border-radius: var(--r-lg); }
    .test-row { flex-direction: column; align-items: flex-start; }
    .test-card-grid { grid-template-columns: repeat(auto-fill, 110px); max-height: 200px; }
    .test-card-item { padding: 6px; font-size: 11px; }
    .test-card-item b { font-size: 12px; margin-bottom: 0; }
    .hand-cards { max-height: 160px; gap: 4px; }
    .enemy-hand-cards { max-height: 90px; gap: 2px; }
    .enemy-card { width: 52px; font-size: 7px; }
    .unit, .card { cursor: pointer; touch-action: manipulation; }
    .pokedex-grid { grid-template-columns: repeat(auto-fill, 150px); gap: 8px; }
    .pokedex-panel, .tutorial-panel { max-width: 96%; padding: 14px; margin: 0 4px; }
    .custom-modal-content { max-width: 96%; padding: 14px; }
    .mode-select-panel { max-width: 95%; padding: 20px 14px; }
    .deck-builder-panel { max-width: 98%; padding: 12px; max-height: 95vh; }
    .preset-select-panel { max-width: 98%; padding: 14px; }
    .restart-request-panel { max-width: 90%; padding: 20px 14px; }
    .player-info { font-size: 10px; }
    .player-stats { font-size: 9px; display: flex; flex-wrap: wrap; gap: 3px; }
    .prepool-list { max-height: 50px; }
    .flex-row { gap: 4px; }
    .shortcut-hints { font-size: 8px; gap: 4px; }
}
@media (max-width: 480px) {
    body { padding: 0; }
    .game-container { padding: 4px 2px; gap: 4px; border-radius: 8px; }
    .board-area { padding: 2px; border-radius: 8px; }
    .grid { grid-template-rows: repeat(5, minmax(68px, 15vh)); grid-template-columns: repeat(3, minmax(68px, 26vw)); gap: 1px; }
    .cell { padding: 1px; }
    .unit { width: 86%; max-width: 80px; font-size: 8px; padding: 2px 1px; min-height: 42px; border-radius: 4px; }
    .unit-name { font-size: 8px; max-width: 62px; }
    .hp-bar { height: 6px; }
    .hp-text { font-size: 7px; }
    .unit-mid { font-size: 9px; gap: 4px; }
    .unit .unit-bot { display: none; }
    .unit .status-bar { display: none; }
    .unit.selected-unit .unit-bot { display: flex; }
    .unit.selected-unit .status-bar { display: flex; }
    .si { font-size: 7px; padding: 0 1px; }
    .charge-tag { font-size: 7px; padding: 0 2px; }
    .card { width: calc(min(72px, 28vw)); font-size: 7px; padding: 16px 1px 16px 1px; min-height: 38px; border-radius: 4px; }
    .card-cost-badge { width: 16px; height: 16px; font-size: 9px; top: 1px; left: 1px; }
    .card-name { font-size: 8px; }
    .card-stats { font-size: 7px; gap: 3px; }
    .card-passive { font-size: 6px; }
    .info-bar { font-size: 9px; padding: 4px 6px; border-radius: 16px; flex-direction: column; gap: 2px; }
    .player-card { min-width: 80px; font-size: 8px; padding: 1px 4px; }
    .turn-indicator { font-size: 12px; padding: 2px 8px; gap: 3px; }
    .big-round-badge { font-size: 8px; padding: 1px 4px; }
    .hand-title { font-size: 10px; }
    button { padding: 6px 12px; font-size: 12px; margin: 2px; min-height: 38px; min-width: 38px; border-radius: 24px; }
    .pop-btn, .skill-btn, .cancel-btn { padding: 4px 10px; font-size: 11px; min-height: 38px; min-width: 38px; }
    .discard-btn { font-size: 8px; padding: 1px 4px; }
    .log { height: 50px; font-size: 9px; }
    .test-panel { max-width: 98%; padding: 8px; }
    .test-card-grid { grid-template-columns: repeat(auto-fill, 100px); max-height: 180px; gap: 3px; }
    .test-card-item { padding: 4px 5px; font-size: 10px; }
    .test-card-item b { font-size: 11px; }
    .hand-cards { max-height: 140px; gap: 3px; }
    .enemy-hand-cards { max-height: 70px; }
    .enemy-card { width: 44px; font-size: 6px; }
    .player-info { font-size: 9px; }
    .player-stats { font-size: 8px; display: flex; flex-wrap: wrap; gap: 2px; }
    .pokedex-grid { grid-template-columns: repeat(auto-fill, 130px); gap: 6px; }
    .pokedex-card { padding: 8px; font-size: 10px; }
    .prepick-list { max-height: 40px; }
    .prepool-card { font-size: 10px; padding: 2px 6px; }
    .flex-row { gap: 2px; }
    .shortcut-hints { display: none; }
    .kbd-hint { display: none; }
    .card-key-hint { display: none; }
}

/* ========== 语言选择（与模式选择并列） ========== */
.mode-select-panel.wide {
    max-width: 780px;
    width: 94%;
}

.mode-select-wrap {
    display: flex;
    gap: 28px;
    align-items: stretch;
    justify-content: center;
    text-align: left;
}

.lang-column,
.mode-column {
    flex: 1;
    min-width: 0;
}

.lang-column {
    border-right: 1px solid rgba(212, 168, 71, 0.25);
    padding-right: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lang-column h3,
.mode-column h3 {
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--gold-bright);
    margin: 0 0 12px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 语言按钮：与模式按钮同尺寸同风格，配色区分中/英 */
.mode-btn.lang-btn {
    padding: 14px 12px;
    margin: 8px 0;
    font-size: 15px;
    color: #f9eec1;
    border-color: rgba(212, 168, 71, 0.35);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease;
}

.mode-btn.lang-btn small {
    color: #c8b48a;
    font-size: 11px;
}

.mode-btn.lang-btn-zh {
    background: linear-gradient(135deg, #8a3a2a, #6a2418);
    border-color: rgba(255, 140, 90, 0.45);
}

.mode-btn.lang-btn-en {
    background: linear-gradient(135deg, #2a5d8a, #1a3d6a);
    border-color: rgba(90, 170, 220, 0.45);
}

.mode-btn.lang-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mode-btn.lang-btn.active {
    outline: 2px solid #ffd98a;
    outline-offset: 2px;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), 0 0 18px rgba(255, 217, 138, 0.25);
}

.lang-column .lang-note {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    margin: 10px 0 0;
    line-height: 1.5;
}

/* 移动端 / 窄屏：两列改为上下堆叠，语言列置顶并加分隔线 */
@media (max-width: 680px) {
    .mode-select-wrap {
        flex-direction: column;
        gap: 18px;
    }
    .lang-column {
        border-right: none;
        border-bottom: 1px solid rgba(212, 168, 71, 0.25);
        padding-right: 0;
        padding-bottom: 16px;
    }
    .lang-column h3,
    .mode-column h3 {
        margin-bottom: 8px;
    }
}

/* ========== 开发者验证 ========== */
.dev-verify-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3a3a6a, #26264f);
    color: #cdd4ff;
    border: 1px solid rgba(122, 132, 255, 0.45);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1001;
}
.dev-verify-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.dev-auth-overlay { z-index: 1100; }
.dev-auth-panel { max-width: 470px; width: 92%; }
.dev-auth-body { text-align: left; margin: 10px 0 14px; }
.dev-auth-row {
    display: flex;
    gap: 10px;
    margin: 8px 0;
    align-items: center;
}
.dev-auth-row label {
    width: 74px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.dev-auth-row input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(212, 168, 71, 0.35);
    background: #1a120a;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}
.dev-auth-row input:focus {
    border-color: rgba(212, 168, 71, 0.7);
    box-shadow: 0 0 0 2px rgba(212, 168, 71, 0.15);
}
.dev-auth-msg {
    font-size: 12px;
    min-height: 18px;
    margin: 6px 0;
    color: #ff9a6a;
    line-height: 1.5;
}
.dev-auth-msg.ok { color: #8ad98a; }
.dev-auth-btn {
    width: 100%;
    padding: 11px;
    margin: 8px 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid;
    background: linear-gradient(135deg, #3a6b3a, #2a5b2a);
    color: #e8f5c8;
    border-color: rgba(90, 155, 90, 0.4);
}
.dev-logout-btn {
    background: linear-gradient(135deg, #6a3a3a, #552828);
    color: #ffd9c8;
    border-color: rgba(200, 100, 100, 0.4);
}
.dev-auth-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #3a2a1f;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.dev-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: #2c6e6e;
    color: #d8ffff;
}
.dev-badge.admin { background: #8a6c1a; color: #fff3c4; }
.dev-section-title {
    font-size: 14px;
    color: var(--gold-bright);
    margin: 16px 0 8px;
    font-weight: bold;
}
.dev-user-list { max-height: 190px; overflow-y: auto; }
.dev-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #3a2a1f;
    border-radius: 8px;
    padding: 7px 12px;
    margin: 5px 0;
    font-size: 13px;
}
.dev-user-name {
    flex: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dev-remove-btn {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    background: #6a2c2c;
    color: #ffc9c0;
    border: 1px solid rgba(220, 100, 90, 0.4);
}
.dev-remove-btn:hover { background: #8a3232; }
/* ========== 联系作者（模式选择页右下角） ========== */
.contact-author {
    position: fixed;
    bottom: 14px;
    right: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3a4a3a, #263a26);
    color: #c8e6c8;
    border: 1px solid rgba(110, 170, 110, 0.45);
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1001;
}
.contact-author:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ========== 死亡回合操作栏（投降 / 求和） ========== */
.death-round-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 8px 0 2px;
}
.death-round-btn {
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid;
    color: #f9eec1;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.death-round-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.death-round-btn.surrender {
    background: linear-gradient(135deg, #7a3a2a, #5a2418);
    border-color: rgba(220, 110, 80, 0.5);
}
.death-round-btn.draw {
    background: linear-gradient(135deg, #3a5a7a, #2a3d5a);
    border-color: rgba(100, 150, 210, 0.5);
}

/* ========== 移动端增强（新增元素适配 + 交互优化 + 安全区；桌面端不受影响，全部置于媒体查询内） ========== */
@media (max-width: 768px) {
    /* 开发者验证入口：右上角紧凑 + 顶部安全区（刘海屏） */
    .dev-verify-btn {
        top: calc(8px + env(safe-area-inset-top, 0px));
        right: 8px;
        padding: 6px 10px;
        font-size: 11px;
        border-radius: 8px;
    }
    /* 联系作者：右下角紧凑 + 超长邮箱截断防溢出 + 底部安全区 */
    .contact-author {
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        right: 8px;
        padding: 6px 10px;
        font-size: 11px;
        max-width: calc(100vw - 16px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 8px;
    }
    /* 开发者验证面板：适配窄屏 */
    .dev-auth-panel { max-width: 94%; }
    /* 死亡回合操作栏 */
    .death-round-bar { gap: 8px; }
    .death-round-btn { padding: 8px 14px; font-size: 13px; min-height: 40px; }
    /* 全局触摸优化：去除点击灰色高亮、防双击缩放延迟 */
    body { -webkit-tap-highlight-color: transparent; }
    button, .mode-btn, .dev-auth-btn, .dev-remove-btn, .death-round-btn, .contact-author, .dev-verify-btn, .select-item {
        touch-action: manipulation;
    }
    /* iOS 输入框聚焦自动放大：字号须 >=16px（含图鉴/卡池/测试面板搜索框） */
    .dev-auth-row input, .pokedex-search, .test-card-search { font-size: 16px; }
    /* 棋盘惯性滚动（iOS） */
    .board-area { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
    /* 开发者验证面板：更宽、表单行紧凑、大触摸目标 */
    .dev-auth-panel { width: 96%; max-width: 96%; }
    .dev-auth-row label { width: 62px; font-size: 12px; }
    .dev-auth-row input { padding: 10px 10px; font-size: 16px; }
    .dev-auth-btn { padding: 12px; font-size: 15px; }
    .dev-user-item { padding: 8px 10px; }
    /* 死亡回合按钮：平分宽度避免溢出 */
    .death-round-bar { width: 100%; }
    .death-round-btn { flex: 1; padding: 10px 8px; }
    /* 预牌堆标题：窄屏换行友好 */
    .prepool-area { font-size: 9px; line-height: 1.3; }
    /* 模式选择按钮紧凑 */
    .mode-btn { padding: 13px 10px; font-size: 14px; }
    /* 搜索输入框：窄屏自适应宽度 */
    .pokedex-search, .test-card-search { width: 100%; max-width: 220px; }
    /* 主操作按钮触摸目标增大 */
    .flex-row button, .pop-btn, .skill-btn, .cancel-btn { min-height: 42px; }
    /* toast 底部安全区（底部操作条） */
    .game-toast { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* 手机横屏（高度受限）：紧凑布局，保证棋盘与操作区同屏可见 */
@media (max-height: 520px) and (orientation: landscape) {
    body { padding: 0; }
    .game-container { flex-direction: row; gap: 6px; padding: 4px; border-radius: 8px; }
    .board-area { width: auto; flex: 0 1 auto; padding: 2px; }
    .grid {
        grid-template-rows: repeat(5, minmax(46px, 13vh));
        grid-template-columns: repeat(3, minmax(46px, 14vw));
        gap: 1px;
    }
    .cell { padding: 1px; }
    .unit { width: 88%; max-width: 64px; font-size: 8px; padding: 2px 1px; min-height: 34px; }
    .unit-name { font-size: 8px; max-width: 56px; }
    .hp-bar { height: 5px; }
    .hp-text { font-size: 6px; }
    .unit-mid { font-size: 8px; gap: 3px; }
    .unit .status-bar { display: none; }
    .unit.selected-unit .status-bar { display: flex; }
    .unit .unit-bot { display: none; }
    .unit.selected-unit .unit-bot { display: flex; }
    .right-panel { min-width: 0; gap: 3px; }
    .info-bar { font-size: 9px; padding: 2px 6px; gap: 2px; }
    .player-card { min-width: 70px; font-size: 8px; padding: 1px 3px; }
    .turn-indicator { font-size: 11px; padding: 1px 6px; }
    .hand-title { font-size: 9px; margin-bottom: 2px; }
    .hand-cards { max-height: 74px; gap: 2px; }
    .enemy-hand-cards { max-height: 44px; gap: 2px; }
    .enemy-card { width: 34px; font-size: 6px; }
    .card { width: calc(min(56px, 16vw)); font-size: 7px; padding: 12px 1px 12px 1px; min-height: 30px; }
    .card-cost-badge { width: 14px; height: 14px; font-size: 8px; }
    .card-name { font-size: 7px; }
    .card-stats { font-size: 6px; }
    .prepool-list { max-height: 30px; }
    .flex-row { gap: 2px; }
    button { padding: 4px 10px; font-size: 11px; min-height: 32px; min-width: 32px; margin: 2px; }
    .pop-btn, .skill-btn, .cancel-btn { padding: 3px 8px; font-size: 10px; min-height: 32px; min-width: 32px; }
    .log { height: 36px; font-size: 8px; padding: 2px 4px; }
    .shortcut-hints { display: none; }
    .kbd-hint { display: none; }
    .card-key-hint { display: none; }
    .test-panel { max-width: 92%; padding: 6px; }
    .death-round-bar { width: 100%; }
    .death-round-btn { flex: 1; padding: 6px 6px; font-size: 12px; min-height: 34px; }
    .game-toast { bottom: 40px; font-size: 11px; max-width: 80%; }
}
/* ========== 排行榜（远程战绩） ========== */
.rank-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 5000;  /* 必须高于结算界面 .recap-overlay(4000)：提交战绩弹窗从结算界面打开时不能被压在下层 */
    animation: overlayFadeIn 0.2s ease;
}
.rank-modal {
    background: linear-gradient(160deg, #2c2118 0%, #22160c 100%);
    border-radius: var(--r-xl);
    padding: 24px;
    text-align: center;
    color: var(--text-primary);
    max-width: 480px; width: 92%;
    border: 1px solid rgba(212,168,71,0.3);
    box-shadow: var(--shadow-xl), var(--shadow-inset), 0 0 60px rgba(212,168,71,0.08);
    animation: panelSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}
.rank-modal h2 {
    font-size: 22px;
    margin-bottom: 14px;
    color: var(--gold-bright);
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.rank-close-btn {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; color: var(--text-secondary);
    font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.rank-close-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rank-table th {
    background: rgba(212,168,71,0.15);
    color: var(--gold-bright);
    padding: 8px 6px;
    font-size: 12px;
    border-bottom: 1px solid rgba(212,168,71,0.25);
}
.rank-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(212,168,71,0.1);
    color: var(--text-primary);
    word-break: break-all;
}
.rank-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.rank-table td:first-child { color: var(--gold); font-weight: bold; }
.rank-empty { text-align: center; color: var(--text-secondary); padding: 24px 0; }
.rank-form-row { display: flex; gap: 10px; align-items: center; margin: 10px 0; text-align: left; }
.rank-form-row label { width: 60px; flex-shrink: 0; font-size: 13px; color: var(--text-secondary); }
.rank-form-row input {
    flex: 1; padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(212,168,71,0.35); background: #1a120a;
    color: var(--text-primary); font-size: 16px; outline: none;
}
.rank-form-row input:focus { border-color: rgba(212,168,71,0.7); box-shadow: 0 0 0 2px rgba(212,168,71,0.15); }
.rank-form-msg { font-size: 12px; min-height: 18px; margin: 6px 0; color: #ff9a6a; }
.rank-form-msg.ok { color: #8ad98a; }
.rank-form-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.rank-form-buttons button { min-width: 100px; }
@media (max-width: 480px) {
    .rank-modal { max-width: 96%; padding: 16px 12px; }
    .rank-table { font-size: 11px; }
    .rank-table th, .rank-table td { padding: 6px 4px; }
    .rank-form-row label { width: 52px; font-size: 12px; }
    .rank-form-row input { font-size: 16px; }
}
/* ========== 玩家账号（登录/注册） ========== */
.auth-overlay { z-index: 6000; }
.auth-modal { max-width: 400px; }
.auth-tabs {
    display: flex;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(212,168,71,0.25);
}
.auth-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}
.auth-tab.active {
    color: var(--gold-bright);
    border-bottom-color: var(--gold-bright);
}
.auth-pane { display: flex; flex-direction: column; gap: 2px; }
.auth-row label { width: 80px; }
.auth-switch {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 0;
    margin-top: 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.auth-switch:hover { color: var(--gold-bright); }
.auth-submit-btn { margin-top: 8px; width: 100%; }
.auth-guest-row { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(212,168,71,0.2); }
.auth-guest-btn { width: 100%; }
.auth-guest-note {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 8px;
    text-align: center;
}
.rank-identity-row label { width: 60px; }
.rank-identity-value { font-size: 14px; color: var(--gold-bright); }
.rank-identity-guest { color: var(--text-secondary); }
/* HUD 账号徽标 */
.player-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(212,168,71,0.12);
    border: 1px solid rgba(212,168,71,0.3);
    color: var(--gold-bright);
    font-size: 12px;
    margin-right: 6px;
    cursor: default;
}
button.player-auth-badge { cursor: pointer; }
button.player-auth-badge:hover { background: rgba(212,168,71,0.22); }
.player-auth-logout {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 4px;
}
.player-auth-logout:hover { color: #ff9a6a; background: rgba(255,255,255,0.08); }

/* ========== 最高管理员管理面板 ========== */
.admin-overlay { z-index: 6000; }
.admin-modal { max-width: 640px; width: 94%; }
.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(212,168,71,0.25);
    flex-wrap: wrap;
}
.admin-tab {
    flex: 1;
    min-width: 110px;
    padding: 10px 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}
.admin-tab.active {
    color: var(--gold-bright);
    border-bottom-color: var(--gold-bright);
}
.admin-content { min-height: 260px; }
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 8px 0;
}
.admin-stat-card {
    background: rgba(212,168,71,0.08);
    border: 1px solid rgba(212,168,71,0.2);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}
.admin-stat-icon { font-size: 22px; margin-bottom: 6px; }
.admin-stat-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.admin-stat-value { font-size: 22px; font-weight: bold; color: var(--gold-bright); }
.admin-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.admin-search-input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(212,168,71,0.35);
    background: #1a120a;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}
.admin-search-input:focus { border-color: rgba(212,168,71,0.7); }
.admin-search-btn { min-width: 80px; padding: 8px 12px; }
.admin-list-wrap { max-height: 42vh; overflow-y: auto; }
.admin-table { font-size: 12px; }
.admin-page-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.admin-page-info { font-size: 13px; color: var(--text-secondary); min-width: 60px; text-align: center; }
.admin-page-btn { min-width: 90px; padding: 6px 10px; }
.admin-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-empty { text-align: center; color: var(--text-secondary); padding: 30px 0; font-size: 13px; }
.admin-devs-hint { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.6; }
.admin-devs-open { width: 100%; }
@media (max-width: 480px) {
    .admin-modal { max-width: 96%; padding: 16px 10px; }
    .admin-tab { min-width: 0; font-size: 12px; padding: 8px 4px; }
    .admin-stat-card { padding: 10px 6px; }
    .admin-stat-value { font-size: 18px; }
}


/* ========== 个人设置 ========== */
.settings-overlay { z-index: 6000; }
.settings-modal { max-width: 420px; width: 92%; }
.settings-who {
    font-size: 14px;
    color: var(--gold-bright);
    margin: 4px 0 14px;
    padding: 8px 12px;
    background: rgba(212,168,71,0.08);
    border-radius: 8px;
    border: 1px solid rgba(212,168,71,0.2);
    text-align: center;
}
.settings-section {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(212,168,71,0.2);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    text-align: left;
}
.settings-section h3 {
    font-size: 14px;
    color: var(--gold-bright);
    margin-bottom: 10px;
}
.settings-row label { width: 88px; font-size: 12px; }
.settings-row input { font-size: 14px; }
.settings-btn { width: 100%; margin-top: 8px; }
.settings-msg { font-size: 12px; min-height: 16px; margin: 6px 0 0; color: #ff9a6a; }
.settings-msg.ok { color: #8ad98a; }
.settings-danger { border-color: rgba(255, 90, 70, 0.4); background: rgba(255, 90, 70, 0.06); }
.settings-danger h3 { color: #ff6a5a; }
.settings-danger-warn {
    font-size: 12px;
    color: #ff9a8a;
    line-height: 1.6;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 90, 70, 0.12);
    border: 1px solid rgba(255, 90, 70, 0.3);
    margin-bottom: 8px;
}
.settings-danger-btn {
    background: #a83228 !important;
    border-color: #c84a3a !important;
}
.settings-danger-btn:hover { background: #c03a2e !important; }
.player-auth-settings { margin-right: 4px; }
@media (max-width: 480px) {
    .settings-modal { max-width: 96%; padding: 14px 10px; }
    .settings-row label { width: 70px; font-size: 11px; }
}

/* 排行榜高亮当前玩家记录 */
.rank-table tr.rank-my-row td {
    background: #f0c050 !important;
    color: #1a120a !important;
    font-weight: bold;
}
.rank-match-result {
    font-size: 14px;
    color: var(--gold-bright);
    margin: 4px 0 10px;
    padding: 8px 12px;
    background: rgba(212,168,71,0.08);
    border-radius: 8px;
    border: 1px solid rgba(212,168,71,0.2);
}
.rank-side-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 10px 0;
}
.rank-side-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid rgba(212,168,71,0.3);
    background: #3a2a1f;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.rank-side-btn.active {
    outline: 2px solid #ffd98a;
    outline-offset: 2px;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.rank-score-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--gold);
    text-align: center;
    margin: 10px 0 2px;
}
.rank-score-note {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 6px;
}
.rank-score-breakdown {
    font-size: 12px;
    color: var(--gold-bright);
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
@media (max-width: 480px) {
    .rank-side-btn { font-size: 13px; padding: 8px; }
    .rank-match-result { font-size: 12px; }
}
.rank-both-scores {
    font-size: 14px;
    color: var(--text-primary);
    text-align: center;
    margin: 8px 0 4px;
    padding: 8px 10px;
    background: rgba(212,168,71,0.06);
    border-radius: 8px;
    border: 1px solid rgba(212,168,71,0.15);
}
.rank-my-side {
    font-size: 13px;
    color: var(--gold-bright);
    text-align: center;
    margin: 6px 0 2px;
}
.recap-submit.submitted { opacity: 0.7; cursor: default; }
@media (max-width: 480px) {
    .rank-both-scores { font-size: 12px; }
}
/* ========== 装备商店移动端适配 ========== */
.equip-shop-panel {
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .equip-shop-panel { max-width: 96%; padding: 14px; }
    .equip-shop-panel .shop-grid-inline { max-width: 100%; }
}
@media (max-width: 480px) {
    .equip-shop-panel { max-width: 98%; padding: 10px; }
    /* 长描述截断 2 行，避免装备按钮过高撑满屏幕 */
    .equip-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .equip-shop-panel .mode-btn { font-size: 12px; padding: 6px 10px; }
}
/* ========== 排行榜管理员删除按钮 ========== */
.rank-del-btn {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    background: #6a2c2c;
    color: #ffc9c0;
    border: 1px solid rgba(220, 100, 90, 0.4);
}
.rank-del-btn:hover { background: #8a3232; }
.rank-del-btn:disabled { opacity: 0.6; cursor: default; }