/* ===== DiceHeroes 全局样式（v10 海克斯科技·超绝强化版）===== */
/* ===== CSS 变量系统 ===== */
:root {
    --clr-primary: #00c8ff;
    --clr-gold: #FFD700;
    --clr-purple: #c864ff;
    --clr-green: #4eff91;
    --clr-red: #ff4466;
    --clr-bg-deep: #04040f;
    --clr-bg-mid: #0a0a1e;
    --clr-bg-card: rgba(12,12,32,0.92);
    --clr-border: rgba(0,200,255,0.25);
    --glow-primary: 0 0 12px rgba(0,200,255,0.7), 0 0 30px rgba(0,180,255,0.35);
    --glow-gold: 0 0 14px rgba(255,215,0,0.8), 0 0 30px rgba(255,180,0,0.4);
    --glow-purple: 0 0 14px rgba(200,100,255,0.8), 0 0 30px rgba(160,80,255,0.4);
    --transition-smooth: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* 安全区域变量（由JS动态更新，CSS也可通过env()获取） */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --game-safe-top: 0px;
    --game-safe-bottom: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
@font-face { font-family: 'GameFont'; src: local('Microsoft YaHei'), local('PingFang SC'), local('sans-serif'); }
img { -webkit-user-drag: none; user-drag: none; }

body {
    background: var(--clr-bg-deep);
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    font-family: 'GameFont', sans-serif;
    overflow: hidden;
    /* 全局背景噪波 */
    background-image:
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(0,80,200,0.06) 0%, transparent 100%),
        radial-gradient(ellipse 40% 60% at 80% 70%, rgba(120,0,200,0.05) 0%, transparent 100%);
}

/* ===== 全局环境粒子Canvas ===== */
#ambient-particle-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

/* 外层视口：由JS动态设置尺寸和缩放 */
#game-viewport {
    position: absolute;
    width: var(--game-design-w, 391px);
    height: var(--game-design-h, 850px);
    transform-origin: top left;
    flex-shrink: 0;
    overflow: hidden;
}

#game-container {
    width: 100%; height: 100%;
    position: relative; overflow: hidden;
    background-color: #1a8fd6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== 共享背景层（拉伸占满整个容器，不留黑边）===== */
#shared-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../assets/%E8%83%8C%E6%99%AF/bg_main_ui.webp?v=20260810a');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: #1a8fd6;
    z-index: 0; pointer-events: none;
}

/* ===== 云雾动画覆盖层（高于背景，低于所有UI）===== */
#cloud-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
    overflow: hidden;
}
.cloud-layer {
    position: absolute; top: 0; left: 0;
    width: 200%; height: 100%;
    background-image: url('../assets/%E8%83%8C%E6%99%AF/bg_cloud_overlay.png?v=20260523d');
    background-size: 50% 100%;
    background-repeat: repeat-x;
    will-change: transform;
}
.cloud-layer-a {
    opacity: 0.8;
    animation: cloudDriftA 50s linear infinite;
}
.cloud-layer-b {
    top: -8%;
    opacity: 0.5;
    transform: scaleX(-1) scaleY(1.05);
    animation: cloudDriftB 75s linear infinite;
}
@keyframes cloudDriftA {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes cloudDriftB {
    0%   { transform: scaleX(-1) scaleY(1.05) translateX(0); }
    100% { transform: scaleX(-1) scaleY(1.05) translateX(-50%); }
}

/* ===== 全局共享底部导航栏（不参与界面滑动）===== */
#global-bottom-nav {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 57px;
    z-index: 99;
    display: none; /* 默认隐藏，仅在主界面/英雄养成/技能养成时显示 */
}

/* 容器边框动画（PC端可选） */
@keyframes containerBorderPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,200,255,0.2), 0 0 40px rgba(0,150,255,0.2); }
    50%       { box-shadow: 0 0 0 1px rgba(0,220,255,0.4), 0 0 55px rgba(0,180,255,0.3); }
}

/* 科技边角装饰 */
#game-container::before,
#game-container::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 100;
}
#game-container::before {
    top: 0; left: 0;
    width: 80px; height: 80px;
    border-top: 2px solid rgba(0,200,255,0.6);
    border-left: 2px solid rgba(0,200,255,0.6);
    border-radius: 4px 0 0 0;
    filter: drop-shadow(0 0 6px rgba(0,200,255,0.8));
    animation: cornerGlow 3s ease-in-out infinite;
}
#game-container::after {
    bottom: 0; right: 0;
    width: 80px; height: 80px;
    border-bottom: 2px solid rgba(0,200,255,0.6);
    border-right: 2px solid rgba(0,200,255,0.6);
    border-radius: 0 0 4px 0;
    filter: drop-shadow(0 0 6px rgba(0,200,255,0.8));
    animation: cornerGlow 3s ease-in-out infinite 1.5s;
}
@keyframes cornerGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

canvas#gameCanvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    image-rendering: crisp-edges;
    z-index: 10;
}

#screen-flash {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 95; opacity: 0;
}
#screen-flash.flash-active { animation: screenFlashAnim 0.35s ease-out forwards; }
@keyframes screenFlashAnim {
    0% { opacity: 1; }
    30% { opacity: 0.7; }
    100% { opacity: 0; }
}

#shockwave-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 91; }
/* v1.26 卡顿优化：这两块全屏画布原来没写宽高，浏览器按“像素尺寸=缓冲尺寸”显示，
   在高分屏上就被撑成 3 倍大（391×844 变成 1165×2532）再被裁掉，白画了 8 倍面积。
   补上宽高让它们按 100% 显示，缓冲多大都不会溢出。 */
#shockwave-canvas { width: 100%; height: 100%; }
#levelup-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 92; opacity: 0; transition: opacity 0.2s; }
#levelup-canvas.active { opacity: 1; }

#vignette-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 6;
    background: radial-gradient(ellipse at 50% 50%,
        transparent 50%,
        rgba(0,0,15,0.5) 80%,
        rgba(0,0,15,0.82) 100%);
}

#battle-ambience {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.5s;
    background:
        radial-gradient(ellipse 60% 30% at 50% 88%, rgba(0,80,200,0.22) 0%, transparent 100%),
        radial-gradient(ellipse 90% 22% at 50% 100%, rgba(0,40,120,0.3) 0%, transparent 100%);
}
#battle-ambience.active { opacity: 1; }

#battle-top-light {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    width: 280px; height: 90px; border-radius: 50%;
    pointer-events: none; z-index: 4; opacity: 0;
    background: radial-gradient(ellipse at center, rgba(255,200,80,0.28) 0%, transparent 70%);
    filter: blur(10px);
    animation: topLightPulse 3s ease-in-out infinite;
    transition: opacity 0.5s;
}
#battle-top-light.active { opacity: 1; }
@keyframes topLightPulse {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.65; }
    50%       { transform: translateX(-50%) scaleX(1.18); opacity: 1; }
}

/* ===== 主界面 ===== */
#main-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: transparent; }

.main-bg {
    width: 100%; height: 100%;
    background: transparent;
    position: relative; overflow: hidden;
}

/* 顶部资源栏 - 重新布局 */
.main-top-bar {
    position: absolute; top: calc(60px + var(--game-safe-top, 0px)); left: 0; width: 100%; height: 48px;
    background: transparent;
    border-bottom: none;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 10px; z-index: 50;
    animation: slideDownIn 0.6s ease-out both;
}
.main-top-left {
    display: flex; align-items: center; gap: 6px;
}
.main-top-right {
    display: flex; align-items: center; gap: 4px;
    margin-right: 0px;
    margin-top: 0;
    position: relative; z-index: 50;
}
@keyframes slideDownIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.res-item {
    display: flex; align-items: center;
    background: rgba(0,20,50,0.85);
    border: 1px solid rgba(255,200,80,0.3);
    border-radius: 18px; padding: 3px 11px 3px 5px; gap: 5px;
    transition: var(--transition-smooth);
    animation: fadeScaleIn 0.5s ease-out both;
}
.res-item:hover {
    border-color: rgba(255,220,80,0.6);
    box-shadow: 0 0 12px rgba(255,200,80,0.3);
    transform: translateY(-1px);
}
.res-item img { width: 22px; height: 22px; }
.res-item span { color: #fff; font-size: 13px; font-weight: bold; }

/* 设置按钮 - 移到顶栏右侧 */
.settings-btn {
    width: 32px; height: 32px;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0.8;
    transition: opacity 0.2s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: auto;
}
.settings-btn:hover { opacity: 1; transform: rotate(60deg) scale(1.15); }
.settings-btn:active { transform: rotate(30deg) scale(0.9); }
.settings-btn img { width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(255,200,80,0.5)); }

/* 清档按钮 */
.reset-save-btn {
    width: 28px; height: 28px;
    min-width: 44px; min-height: 44px;
    cursor: pointer; opacity: 0.7;
    margin-right: 8px;
    transition: opacity 0.2s, transform 0.2s;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    font-size: 18px;
}
.reset-save-btn:hover { opacity: 1; transform: scale(1.15); }
.reset-save-btn:active { transform: scale(0.9); }
.reset-save-btn img { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(255,80,80,0.5)); }

/* 关卡标题区 */
.stage-title-area {
    position: absolute; top: 160px; left: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center;
    animation: slideUpIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
}
.stage-title-name {
    font-size: 28px; font-weight: bold; color: #fff;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8), 0 0 12px rgba(255,200,80,0.4);
    letter-spacing: 2px;
}
.stage-title-record {
    font-size: 14px; color: rgba(254,254,254,0.8);
    margin-top: 4px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* 地图预览区 */
.stage-map-area {
    position: absolute; top: 240px; left: 0; width: 100%;
    display: flex; justify-content: center; align-items: center;
    gap: 6px;
    animation: slideUpIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.25s both;
}
@keyframes slideUpIn {
    from { transform: translateY(60px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.stage-map-box {
    width: 260px; height: 230px; position: relative;
    border-radius: 18px; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    border: none;
    box-shadow: none;
    background: transparent;
    transition: var(--transition-smooth);
}
.stage-map-box:hover {
    border-color: transparent;
    box-shadow: none;
}
.stage-map-box img.preview-bg { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.preview-monsters {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 10px; padding: 18px;
}
.preview-monsters img {
    width: 50px; height: 50px; object-fit: contain;
    animation: monsterBounce 1.6s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
    transition: transform 0.2s;
}
.preview-monsters img:hover { transform: scale(1.2) rotate(5deg); }
.preview-monsters img:nth-child(2) { animation-delay: 0.32s; }
.preview-monsters img:nth-child(3) { animation-delay: 0.64s; }
.preview-monsters img:nth-child(4) { animation-delay: 0.96s; }

@keyframes monsterBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-9px) scale(1.05); }
}

/* 左右箭头 */
.stage-arrow {
    width: 40px; height: 40px; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: filter 0.2s;
    z-index: 2;
    animation: arrowPulse 2s ease-in-out infinite;
}
.stage-arrow img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(255,200,80,0.5)); }
.stage-arrow-left img {
    transform: rotate(180deg);
}
.stage-arrow:hover { filter: brightness(1.3); }
.stage-arrow:active { opacity: 0.6; }
@keyframes arrowPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* 关卡进度条 - 参考骷髅头+宝箱风格 */
.stage-dots-area {
    position: absolute; top: 490px; left: 0; width: 100%;
    display: flex; justify-content: center; align-items: center;
    padding: 0 24px;
    animation: slideUpIn 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.35s both;
}
.stage-progress-bar {
    display: flex; align-items: center; gap: 0;
    position: relative;
}
.stage-dot {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    position: relative; z-index: 2;
}
.stage-dot:hover { transform: scale(1.15); }
.stage-dot:active { transform: scale(0.95); }
.stage-dot-icon {
    width: 56px; height: 56px;
    display: flex; justify-content: center; align-items: center;
    position: relative;
    transition: var(--transition-smooth);
}
.stage-dot-icon img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
    transition: transform 0.3s ease, filter 0.3s ease;
}
/* 当前关卡状态 - 发光动画 */
.stage-dot.current .stage-dot-icon img {
    filter: drop-shadow(0 0 10px rgba(255,180,0,0.8)) drop-shadow(0 0 20px rgba(255,120,0,0.4));
    animation: currentStageGlow 2s ease-in-out infinite;
}
.stage-dot.current .stage-dot-icon {
    animation: currentStageBounce 2s ease-in-out infinite;
}
/* 锁定状态 */
.stage-dot.locked .stage-dot-icon img {
    filter: grayscale(0.7) brightness(0.5) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.stage-dot-label {
    font-size: 10px; color: rgba(255,255,255,0.9);
    font-weight: bold;
    text-shadow: none;
    white-space: nowrap;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stage-dot.locked .stage-dot-label { color: #ffffff; text-shadow: none; }
.stage-dot.current .stage-dot-label { color: #ffffff; text-shadow: none; }

/* 连接圆点 */
.stage-connector {
    display: flex; align-items: center; gap: 4px;
    padding: 0 4px;
    margin-bottom: 18px;
}
.stage-connector-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    transition: all 0.3s ease;
}
.stage-connector-dot.active {
    background-image: url('../assets/UI/stage_dot_active.png');
    background-size: contain;
    box-shadow: 0 0 6px rgba(255,200,80,0.6);
    animation: dotPulse 1.5s ease-in-out infinite;
}
.stage-connector-dot.inactive {
    background-image: url('../assets/UI/stage_dot.png');
    background-size: contain;
    opacity: 0.5;
}

@keyframes currentStageGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255,180,0,0.8)) drop-shadow(0 0 20px rgba(255,120,0,0.4)); }
    50% { filter: drop-shadow(0 0 16px rgba(255,200,0,1)) drop-shadow(0 0 30px rgba(255,150,0,0.6)); }
}
@keyframes currentStageBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes dotPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ★ 已通关未领奖状态 - 宝箱闪烁提示 */
.stage-dot.cleared .stage-dot-icon img {
    filter: drop-shadow(0 0 10px rgba(80,255,80,0.7)) drop-shadow(0 0 18px rgba(50,200,50,0.4));
    animation: clearedSkullGlow 1.5s ease-in-out infinite;
}
.stage-dot.cleared .stage-dot-icon {
    animation: clearedSkullBounce 1.2s ease-in-out infinite;
}
.stage-dot.cleared .stage-dot-label {
    color: #ffffff;
    text-shadow: none;
}
@keyframes clearedSkullGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(80,255,80,0.7)) drop-shadow(0 0 18px rgba(50,200,50,0.4)); }
    50% { filter: drop-shadow(0 0 18px rgba(100,255,100,1)) drop-shadow(0 0 28px rgba(80,255,80,0.6)); }
}
@keyframes clearedSkullBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.05); }
}

/* ★ 已领奖状态 */
.stage-dot.rewarded .stage-dot-icon img {
    filter: drop-shadow(0 2px 6px rgba(255,200,80,0.5)) brightness(0.85);
}
.stage-dot.rewarded .stage-dot-label {
    color: #ffffff;
}

/* ★ 感叹号提示标记（未领奖） */
.stage-dot-badge {
    position: absolute; top: -4px; right: -4px;
    width: 20px; height: 20px;
    background: linear-gradient(135deg, #ff4466, #ff2244);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 13px; font-weight: bold; color: #fff;
    box-shadow: 0 0 8px rgba(255,68,102,0.8), 0 2px 4px rgba(0,0,0,0.5);
    animation: badgePulse 1s ease-in-out infinite;
    z-index: 5;
    border: 1.5px solid rgba(255,255,255,0.4);
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,68,102,0.8); }
    50% { transform: scale(1.15); box-shadow: 0 0 14px rgba(255,68,102,1); }
}

/* ★ 对勾标记（已领奖） */
.stage-dot-check {
    position: absolute; bottom: -2px; right: -4px;
    width: 18px; height: 18px;
    background: linear-gradient(135deg, #4eff91, #2ecc71);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 11px; font-weight: bold; color: #fff;
    box-shadow: 0 0 6px rgba(46,204,113,0.6), 0 2px 3px rgba(0,0,0,0.4);
    z-index: 5;
    border: 1.5px solid rgba(255,255,255,0.3);
}

/* ★ 奖励领取弹窗动画 */
@keyframes rewardClaimBounce {
    0% { transform: translateX(-50%) translateY(10px) scale(0.5); opacity: 0; }
    60% { transform: translateX(-50%) translateY(-5px) scale(1.05); opacity: 1; }
    100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes rewardClaimFadeOut {
    0% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-20px) scale(0.9); opacity: 0; }
}
.reward-claimed-anim {
    border-color: rgba(80,255,80,0.6) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 20px rgba(80,255,80,0.3) !important;
}
.reward-claimed-anim .reward-preview-title {
    color: #4eff91 !important;
}
.reward-claim-item span {
    color: #FFD700 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-shadow: 0 0 6px rgba(255,215,0,0.5);
}

/* ★ 获得新卡牌弹窗动画 */
@keyframes newCardFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes newCardFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes newCardBounceIn {
    0% { opacity: 0; transform: scale(0.3) rotateY(90deg); }
    50% { opacity: 1; transform: scale(1.1) rotateY(-5deg); }
    70% { transform: scale(0.95) rotateY(2deg); }
    100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}
@keyframes newCardTitlePulse {
    0%, 100% { text-shadow: 0 0 15px rgba(255,215,0,0.8), 0 2px 4px rgba(0,0,0,0.8); transform: scale(1); }
    50% { text-shadow: 0 0 25px rgba(255,240,100,1), 0 0 40px rgba(255,200,60,0.6), 0 2px 4px rgba(0,0,0,0.8); transform: scale(1.05); }
}
@keyframes newCardHintBlink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* 奖励预览弹窗 */
.reward-preview-popup {
    position: absolute; top: 430px; left: 50%; transform: translateX(-50%);
    width: 260px; padding: 10px 14px;
    background: rgba(20,15,40,0.95);
    border: 1px solid rgba(255,200,80,0.4);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 12px rgba(255,200,80,0.15);
    z-index: 20;
    animation: rewardPopIn 0.25s ease-out both;
}
@keyframes rewardPopIn {
    from { transform: translateX(-50%) translateY(10px) scale(0.9); opacity: 0; }
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
.reward-preview-title {
    font-size: 13px; font-weight: bold; color: #FFD700;
    text-align: center; margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(255,200,80,0.5);
}
.reward-preview-items {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.reward-preview-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.reward-preview-item img {
    width: 36px; height: 36px; object-fit: contain;
    border-radius: 6px; border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
}
.reward-preview-item span {
    font-size: 10px; color: rgba(255,255,255,0.7);
}

/* ===== 进入游戏按钮 ===== */
.battle-btn-wrapper {
    position: absolute; top: 610px; left: 50%; transform: translateX(-50%);
    cursor: pointer;
    animation: battleBtnEnter 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.5s both;
}
@keyframes battleBtnEnter {
    from { transform: translateX(-50%) translateY(80px) scale(0.6); opacity: 0; }
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

.battle-btn {
    width: 213px; height: 92px; position: relative;
    display: flex; justify-content: center; align-items: center;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
    animation: battleBtnPulse 2.2s ease-in-out infinite;
    border-radius: 14px;
    overflow: hidden;
}
@keyframes battleBtnPulse {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(255,150,50,0.55)); }
    50%       { filter: drop-shadow(0 0 28px rgba(255,190,80,0.9)); }
}
.battle-btn:hover {
    transform: scale(1.08);
    animation: none;
    filter: drop-shadow(0 0 32px rgba(255,200,80,1));
}
.battle-btn:active { transform: scale(0.93); }
.battle-btn img { position: absolute; width: 100%; height: 100%; object-fit: fill; }
.battle-btn span {
    position: relative; z-index: 1;
    color: #fff; font-size: 24px; font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.65), 0 0 14px rgba(255,220,100,0.9);
    letter-spacing: 6px;
    animation: battleTextShimmer 3s ease-in-out infinite;
}
@keyframes battleTextShimmer {
    0%, 100% { text-shadow: 2px 2px 4px rgba(0,0,0,0.65), 0 0 14px rgba(255,220,100,0.9); }
    50%       { text-shadow: 2px 2px 4px rgba(0,0,0,0.65), 0 0 24px rgba(255,240,120,1), 0 0 40px rgba(255,200,80,0.5); }
}

/* 地图切换动画 */
@keyframes mapSwitch {
    0% { transform: scale(0.92); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== 底部导航 ===== */
.bottom-nav {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 57px;
    background: transparent;
    border-top: none;
    display: flex; justify-content: space-around; align-items: center;
    gap: 0;
    z-index: 5;
    backdrop-filter: none;
    animation: slideUpIn2 0.7s ease-out 0.4s both;
}
@keyframes slideUpIn2 {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.nav-item {
    width: 60px; height: 50px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; border-radius: 14px;
    transition: var(--transition-smooth);
    position: relative; gap: 2px;
    transform: translateY(0px);
}
.nav-item::after {
    display: none;
}
.nav-item:hover::after { display: none; }
.nav-item:hover {
    transform: scale(1.1) translateY(-2px);
    background: rgba(255,200,80,0.08);
}
.nav-item.active {
    background: transparent;
    border: none;
    transform: translateY(-8px) scale(1.15);
    box-shadow: none;
}
.nav-item.active::after { display: none; }
.nav-item img { width: 36px; height: 36px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.nav-item:hover img { filter: drop-shadow(0 0 8px rgba(255,200,80,0.7)); }
.nav-item.active img { filter: drop-shadow(0 0 10px rgba(255,200,80,0.8)); }
.nav-label {
    font-size: 11px; color: rgba(255,255,255,0.7);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.nav-item.active .nav-label { color: #FFD700; }

/* ===== 英雄选择界面 ===== */
#hero-select-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20; display: none;
    background: rgba(0,0,0,0);
}
#hero-select-screen.is-open { display: flex; animation: overlayFadeIn 0.35s ease-out forwards; }
@keyframes overlayFadeIn {
    from { background: rgba(0,0,0,0); }
    to { background: rgba(2,2,18,0.90); }
}

.hero-select-content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 212px;
    /* 毛玻璃底纹 */
    background:
        radial-gradient(ellipse 300px 300px at 50% 30%, rgba(0,100,255,0.06) 0%, transparent 100%),
        radial-gradient(ellipse 200px 200px at 80% 70%, rgba(150,0,255,0.05) 0%, transparent 100%);
}

.pick-banner {
    width: 265px; height: 52px; position: relative;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 32px;
    animation: bannerDropIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes bannerDropIn {
    from { transform: translateY(-40px) scale(0.7); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.pick-banner img { position: absolute; width: 100%; height: 100%; object-fit: fill; }
.pick-banner span {
    position: relative; z-index: 1; color: #fff; font-size: 22px; font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.85), 0 0 14px rgba(255,220,80,0.8);
    letter-spacing: 5px;
    transform: translateY(-10px);
    animation: textPulse 2.5s ease-in-out infinite;
}
@keyframes textPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

.hero-cards { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; padding: 0 16px; max-width: 385px; }

.hero-card {
    width: 108px; height: 168px;
    position: relative; border-radius: 14px; overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
    border: 2px solid rgba(0,150,255,0.25);
    box-shadow: 0 4px 18px rgba(0,0,0,0.55);
    animation: cardFlyIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}
.hero-card:nth-child(1) { animation-delay: 0.08s; }
.hero-card:nth-child(2) { animation-delay: 0.18s; }
.hero-card:nth-child(3) { animation-delay: 0.28s; }
@keyframes cardFlyIn {
    from { transform: translateY(50px) scale(0.75); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* 卡片扫光 */
.hero-card::before {
    content: '';
    position: absolute; top: -100%; left: -50%;
    width: 50%; height: 300%;
    background: linear-gradient(108deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
    transition: top 0.4s ease;
    z-index: 2; pointer-events: none;
}
.hero-card:hover::before { top: 100%; }

.hero-card:hover {
    transform: translateY(-9px) scale(1.05);
    box-shadow: 0 14px 32px rgba(0,0,0,0.65), 0 0 24px rgba(0,150,255,0.35);
    border-color: rgba(0,200,255,0.7);
}
.hero-card.selected {
    border-color: var(--clr-gold);
    box-shadow: var(--glow-gold), 0 0 40px rgba(255,180,0,0.3);
    transform: translateY(-10px) scale(1.05);
    animation: selectedPulse 1.5s ease-in-out infinite;
}
@keyframes selectedPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255,215,0,0.6), 0 0 40px rgba(255,180,0,0.3); }
    50% { box-shadow: 0 0 24px rgba(255,215,0,0.9), 0 0 60px rgba(255,200,0,0.5); }
}

.hero-card img.card-bg { position: absolute; width: 100%; height: 100%; object-fit: fill; }

.hero-card-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 5px; height: 100%;
}
.hero-card-dice {
    width: 36px; height: 36px; margin-top: 4px;
    filter: drop-shadow(0 2px 8px rgba(255,200,80,0.7));
    animation: diceFloat 2s ease-in-out infinite;
}
@keyframes diceFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(8deg); }
}
.hero-card-portrait {
    width: 66px; height: 66px; margin-top: 8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.45);
    box-shadow: 0 0 12px rgba(0,150,255,0.35);
    object-fit: cover;
    transition: transform 0.3s;
}
.hero-card:hover .hero-card-portrait { transform: scale(1.08); box-shadow: 0 0 18px rgba(0,200,255,0.5); }
.hero-card-name { color: #fff; font-size: 12px; font-weight: bold; margin-top: 7px; text-shadow: 1px 1px 2px #000; }
.hero-card-tag { color: rgba(255,255,255,0.75); font-size: 10px; margin-top: 2px; }

/* 开始按钮 */
.start-btn {
    margin-top: 32px;
    width: 185px; height: 52px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    animation: fadeScaleIn 0.6s ease-out 0.5s both;
}
.start-btn-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: fill; pointer-events: none;
}
.start-btn span {
    position: relative; z-index: 1;
    color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 5px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.start-btn:hover { transform: scale(1.08) translateY(-2px); filter: brightness(1.15) drop-shadow(0 6px 16px rgba(120,80,220,0.6)); }
.start-btn:active { transform: scale(0.94); filter: brightness(0.9); }

/* ===== 战斗界面 ===== */
#battle-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; display: none; }

.battle-hud { position: absolute; top: 0; left: 0; width: 100%; z-index: 30; padding-top: max(var(--game-safe-top, 0px), env(safe-area-inset-top, 0px)); transform: translateZ(0); }

/* 经验条 */
.exp-bar-container {
    width: 100%; height: 24px;
    background-image: url('../assets/UI/bar_exp_bg.png?v=20260514');
    background-size: 100% 100%; background-repeat: no-repeat;
    position: relative; overflow: visible;
}
.exp-bar-fill {
    position: absolute; top: 0; left: -16px;
    width: calc(100% + 16px); height: 100%;
    background-image: url('../assets/UI/bar_exp_fill.png?v=20260514');
    background-size: 100% 100%; background-repeat: no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.exp-text {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 11px; font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

/* 战斗信息栏 */
.battle-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 12px;
    background: rgba(0,0,20,0.7);
    border-bottom: 1px solid rgba(0,100,200,0.12);
    backdrop-filter: blur(3px);
}
.wave-info { color: #fff; font-size: 13px; font-weight: bold; }
.timer { color: var(--clr-gold); font-size: 13px; font-weight: bold; }
.gold-display { display: flex; align-items: center; gap: 4px; }
.gold-display img { width: 18px; height: 18px; }
.gold-display span { color: var(--clr-gold); font-size: 14px; font-weight: bold; }

/* ===== ★ 战斗界面：退出关卡按钮（波次信息栏下方、屏幕右侧） ===== */
#battle-exit-btn {
    position: absolute;
    top: calc(100% + 8px);      /* battle-hud 底部（即 battle-info-row 下方） */
    right: 8px;
    width: 34px; height: 34px;
    padding: 0; margin: 0;
    border: none; background: transparent;
    cursor: pointer;
    z-index: 34;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s cubic-bezier(0.34,1.56,0.64,1), filter 0.16s;
}
#battle-exit-btn img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
#battle-exit-btn:hover  { transform: scale(1.08); filter: brightness(1.12); }
#battle-exit-btn:active { transform: scale(0.93); }

/* ===== ★ 战斗界面：倍速按钮（进度条左下方，与右侧退出按钮对称）=====
   第4关（currentStage 索引 3，「水面鐧战」）开始才显示，由 JS 控制 display。
   尺寸/圆角与退出按钮保持一致，不额外占用美术资源。 */
#battle-speed-btn {
    position: absolute;
    top: calc(100% + 8px);      /* 与 #battle-exit-btn 同高 */
    left: 8px;
    width: 40px; height: 34px;
    box-sizing: border-box;
    padding: 0; margin: 0; border: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 20, 0.72);
    box-shadow: 0 2px 6px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(120,190,255,0.28);
    backdrop-filter: blur(3px);
    cursor: pointer;
    z-index: 34;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.16s, background 0.16s;
}
#battle-speed-btn span {
    color: #C2D0EA;
    font-size: 14px; font-weight: bold;
    letter-spacing: 0.3px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
    transition: color 0.16s;
}
#battle-speed-btn:hover  { transform: scale(1.06); }
#battle-speed-btn:active { transform: scale(0.93); }
/* 2倍速激活态：金色高亮 + 微光晕，一眼能看出当前处于加速 */
#battle-speed-btn.is-fast {
    background: rgba(60, 40, 0, 0.82);
    box-shadow: 0 2px 8px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,190,60,0.75), 0 0 10px rgba(255,180,0,0.35);
}
#battle-speed-btn.is-fast span { color: #FFC83C; }

/* ===== ★ 一键通关按钮（调试用，位于退出按钮下方）=====
   开关：global_config.oneKeyClearEnabled = false 时才显示（与击杀统计开关同一风格）
   底板沿用低调素材 assets/UI/btn_reroll_dark.png，不抢镜 */
#battle-onekey-btn {
    position: absolute;
    /* 退出按钮：top calc(100% + 8px)、高 34px → 本按钮紧跟其下方 6px */
    top: calc(100% + 48px);
    right: 8px;
    /* 尺寸比例 88:20 = 4.40，贴近底板图 320:69 = 4.64，胶囊形不失真 */
    width: 88px; height: 20px;
    box-sizing: border-box;
    padding: 0; margin: 0; border: none;
    display: flex; align-items: center; justify-content: center;
    background-image: url('../assets/UI/btn_reroll_dark.png?v=20260728');
    background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
    background-color: transparent;
    cursor: pointer;
    z-index: 34;
    opacity: 0.9;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s cubic-bezier(0.34,1.56,0.64,1), opacity 0.16s;
}
#battle-onekey-btn span {
    color: #C2D0EA;
    font-size: 11px; font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
}
#battle-onekey-btn:hover  { transform: scale(1.05); opacity: 1; }
#battle-onekey-btn:active { transform: scale(0.95); }
/* 点过之后瞬时置灰，避免连点 */
#battle-onekey-btn.is-used { opacity: 0.45; cursor: default; }
#battle-onekey-btn.is-used:hover  { transform: none; opacity: 0.45; }
#battle-onekey-btn.is-used:active { transform: none; }

/* 小屏适配 */
@media (max-height: 700px) {
    #battle-exit-btn { width: 30px; height: 30px; top: calc(100% + 6px); }
    /* 退出按钮变 30px 且 top 上提 2px → 本按钮跟随上提 */
    #battle-onekey-btn { top: calc(100% + 42px); width: 82px; height: 19px; }
    #battle-onekey-btn span { font-size: 10px; }
}

/* ===== ★ 退出关卡二次确认弹窗 =====
   美术资源（均为图片，无CSS绘制）：
     弹窗底板  assets/UI/panel_confirm_dark.png 深蓝紫哑光面板（新增，低调）
     确定按钮  assets/UI/btn_confirm_green.png  重用（缩小 + 降饱和）
     取消按钮  assets/UI/btn_cancel_red.png     重用（缩小 + 降饱和） */
#exit-stage-overlay {
    position: absolute;
    inset: 0;
    z-index: 320;               /* 高于战斗HUD，低于GM编辑器 */
    display: none;
    background: rgba(0,0,0,0.58);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
#exit-stage-overlay.active { display: flex; animation: exitStageFadeIn 0.2s ease-out; }
@keyframes exitStageFadeIn { from { opacity: 0; } to { opacity: 1; } }

#exit-stage-modal {
    /* 尺寸比例 280:163 = 1.718，与 panel_confirm_dark.png（560:327 = 1.713）对齐，不变形 */
    width: 280px; height: 163px;
    position: relative;
    box-sizing: border-box;
    background-image: url('../assets/UI/panel_confirm_dark.png?v=20260728');
    background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
    animation: exitStageModalIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes exitStageModalIn {
    from { opacity: 0; transform: scale(0.86) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 标题 */
.exit-stage-title {
    position: absolute;
    top: 15px; left: 0; width: 100%;
    color: #D6E0F4;
    font-size: 16px; font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* 正文 */
.exit-stage-msg {
    position: absolute;
    top: 47px; left: 0; width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    color: #B9C6DF;
    font-size: 13px; font-weight: bold; line-height: 1.6;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.exit-stage-sub {
    display: inline-block; margin-top: 5px;
    color: #B49096;
    font-size: 11px; font-weight: normal;
}

/* 按钮行 */
.exit-stage-btn-row {
    position: absolute;
    bottom: 15px; left: 0; width: 100%;
    display: flex; gap: 14px;
    justify-content: center;
    box-sizing: border-box;
}
.exit-stage-btn {
    /* 尺寸比例 96:34 = 2.82，与 btn_confirm_green/btn_cancel_red（512:183 = 2.80）对齐 */
    width: 96px; height: 34px;
    flex: 0 0 auto;
    padding: 0; border: none;
    background-color: transparent;
    background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    /* 降饱和降亮度，使绿/红按钮融入深色面板而不刺眼 */
    filter: saturate(0.72) brightness(0.86);
    transition: transform 0.16s cubic-bezier(0.34,1.56,0.64,1), filter 0.16s;
}
.exit-stage-btn span {
    display: block;
    color: #F0F4FC; font-size: 14px; font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    /* 按钮图下部有立体厤子，文字上提对齐视觉中心 */
    transform: translateY(-2px);
}
.exit-stage-btn:hover  { transform: scale(1.04); filter: saturate(0.85) brightness(0.96); }
.exit-stage-btn:active { transform: scale(0.96); }
.exit-stage-btn-confirm { background-image: url('../assets/UI/btn_confirm_green.png'); }
.exit-stage-btn-cancel  { background-image: url('../assets/UI/btn_cancel_red.png'); }

/* 血量条 */
.hp-bar-area { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 30; padding-bottom: max(var(--game-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)); transform: translateZ(0); }
.hp-bar-container {
    width: 100%; height: 26px;
    background-image: url('../assets/UI/bar_hp_bg.png?v=20260514');
    background-size: 100% 100%; background-repeat: no-repeat;
    position: relative; overflow: visible;

}
.hp-bar-fill {
    position: absolute; top: 5%; left: -3px;
    width: calc(100% + 9px); height: 90%;
    background-image: url('../assets/UI/bar_hp_fill.png?v=20260514');
    background-size: 100% 100%; background-repeat: no-repeat;
    clip-path: inset(0 0% 0 0);
    transition: clip-path 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hp-text {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 11px; font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

/* ===== 骰子区域 ===== */
.dice-area {
    width: 100%; height: 96px; position: relative;
    overflow: visible;
}


.dice-unit {
    position: absolute; top: 0; width: 72px;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 5px;
    transition: left 0.3s ease-out;
}

/* ★ 冷却进度圈：独立定位在骰子上方（英雄和骰子之间） */
.dice-cd-circle {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px;
    pointer-events: none;
    z-index: 6;
    display: none;
}
.dice-cd-circle canvas {
    width: 100%; height: 100%;
}

.dice-3d-wrap {
    width: 66px; height: 66px; position: relative;
    border-radius: 0; overflow: visible; background: transparent;
    border: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
    transform: translateY(0);
}
.dice-3d-wrap:hover {
    transform: scale(1.06);
    box-shadow: none;
}
.dice-3d-canvas { display: block; border-radius: 0; }

/* 骰子地面阴影 */
.dice-ground-shadow {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 12px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transition: width 0.3s, opacity 0.3s, bottom 0.3s;
}

.dice-3d-wrap.cooling {
    transform: translateY(0);
    filter: brightness(0.7);
}
.dice-3d-wrap.cooling .dice-ground-shadow {
    width: 50px; opacity: 0.7; bottom: -6px;
}
.dice-3d-wrap.rolling {
    animation: dice3dGroundRoll 0.15s ease-in-out infinite alternate;
    filter: brightness(1.1);
}
.dice-3d-wrap.rolling .dice-ground-shadow {
    width: 55px; opacity: 0.8; bottom: -8px;
    animation: dice3dShadowPulse 0.15s ease-in-out infinite alternate;
}
@keyframes dice3dGroundRoll {
    0%   { transform: translateY(0px) rotate(-2deg); }
    100% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes dice3dShadowPulse {
    0%   { width: 50px; opacity: 0.7; }
    100% { width: 58px; opacity: 0.5; }
}
/* 结果展示：骰子向上提起 */
.dice-3d-wrap.result {
    transform: translateY(-28px) scale(1.15);
    filter: brightness(1.2) drop-shadow(0 8px 12px rgba(0,0,0,0.5));
    animation: dice3dLiftShow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.dice-3d-wrap.result .dice-ground-shadow {
    width: 36px; opacity: 0.35; bottom: 18px;
}
@keyframes dice3dLiftShow {
    0%   { transform: translateY(0px) scale(1); filter: brightness(1); }
    50%  { transform: translateY(-32px) scale(1.2); filter: brightness(1.3); }
    100% { transform: translateY(-28px) scale(1.15); filter: brightness(1.2); }
}
/* 骰子落回地面 */
.dice-3d-wrap.dropping {
    animation: dice3dDrop 0.25s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
.dice-3d-wrap.dropping .dice-ground-shadow {
    width: 50px; opacity: 0.7; bottom: -6px;
}
@keyframes dice3dDrop {
    0%   { transform: translateY(-28px) scale(1.15); }
    70%  { transform: translateY(2px) scale(0.97); }
    100% { transform: translateY(0px) scale(1); }
}
.dice-cooldown-sweep {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 0; pointer-events: none; z-index: 2; display: none;
}
.dice-skill-label {
    position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
    text-align: center; font-size: 18px; font-weight: 900;
    color: var(--clr-gold);
    text-shadow: 1px 1px 2px #000, 0 0 6px rgba(255,215,0,0.7);
    z-index: 4; pointer-events: none;
    white-space: nowrap;
    opacity: 0; transition: opacity 0.3s;
}
.dice-3d-wrap.result .dice-skill-label {
    opacity: 1;
}
/* ===== ★ Lucky 时刻：骰子上方的金色字样 ===== */
.dice-lucky-badge {
    position: absolute;
    /* 骰子在 result 状态会上提 28px，这里再往上留出空间，避免遮住骰子 */
    top: -34px; left: 50%;
    transform: translateX(-50%) scale(0.4);
    text-align: center; white-space: nowrap;
    /* 字号：15px → 18px（1.2 倍）*/
    font-size: 18px; font-weight: 900; font-style: italic;
    letter-spacing: 0.6px;
    /* 金色渐变字（带回退：不支持 background-clip 时显示纯金色）*/
    color: #FFD54F;
    background: linear-gradient(180deg, #FFF6B0 0%, #FFD54F 45%, #FFA000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 8px rgba(255,190,60,0.9);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.95))
            drop-shadow(0 0 6px rgba(255,180,40,0.75));
    z-index: 30; pointer-events: none;
    opacity: 0;
}
/* 副标题：数量翻倍 / 时长翻倍——绿色字，与金色 LUCKY 形成区分 */
.dice-lucky-badge .dice-lucky-sub {
    display: block;
    /* 字号：9px → 11px（1.2 倍，四舍五入）*/
    font-size: 11px; font-weight: 800; font-style: normal;
    letter-spacing: 0;
    margin-top: -1px;
    color: #4CE66B;
    background: none;
    -webkit-text-fill-color: #4CE66B;
    /* 黑边 + 微弱绿光，保证在亮色背景上也能看清 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.95),
                 0 0 6px rgba(60,230,110,0.55);
}
/* 弹出 → 悬停 → 上飘淡出；全程只用 transform/opacity，不触发重排 */
.dice-lucky-badge.show {
    animation: diceLuckyPop 1.25s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes diceLuckyPop {
    0%   { opacity: 0; transform: translate(-50%, 6px)   scale(0.4); }
    18%  { opacity: 1; transform: translate(-50%, -4px)  scale(1.22); }
    32%  { opacity: 1; transform: translate(-50%, 0px)   scale(1.0); }
    70%  { opacity: 1; transform: translate(-50%, -2px)  scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -20px) scale(0.95); }
}

/* ===== ★ Lucky 数量翻倍：骰子上的大数字变化 =====
   流程：骰面原值（如 1）→ 放大到 2.5 倍时变成翻倍值（如 2）
         → 缩回正常大小停留 → 淡出，与骰面重现的金色数字合体。
   注：不能用 background-clip:text 做渐变金字 —— 配合斜体/放大时
   字形会被裁切盒切掉一部分，改用纯色 + text-shadow 黑边。
   全程只用 transform/opacity，走合成层，不触发重排。 */
.dice-lucky-num {
    position: absolute;
    /* 起点与终点都对齐骰面底部数字的位置，最后就在这里与它合体 */
    top: 70%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; pointer-events: none;
    z-index: 31;
    font-weight: 900; line-height: 1;
    opacity: 0;
    /* 缩放时以自身中心为基准 */
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}
/* 数字本体：金色粗体 + 黑边 + 金色外发光，压在骰面图标上也看得清 */
.dice-lucky-num .lk-new {
    font-size: 26px;
    font-style: normal;
    color: #FFD54F;
    /* 留一点内边距，避免描边/发光在放大时贴到盒子边缘 */
    padding: 0 3px;
    text-shadow:
        0 0 2px #000, 0 0 2px #000,
        1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
        0 2px 4px rgba(0,0,0,0.9),
        0 0 9px rgba(255,180,40,0.95);
}
/* 切成翻倍值的那一瞬间闪一下白光，强调「变大了」 */
.dice-lucky-num.lk-boom .lk-new {
    animation: lkNumBoomFlash 0.32s ease-out;
}
@keyframes lkNumBoomFlash {
    0%   { color: #FFFFFF; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px 1px 0 #000,
                                        1px -1px 0 #000, -1px -1px 0 #000,
                                        0 0 16px rgba(255,255,220,1); }
    100% { color: #FFD54F; }
}
.dice-lucky-num.show {
    animation: diceLuckyNumPop 1.2s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes diceLuckyNumPop {
    /* 骰面位置、正常大小起步（此时显示原值）*/
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    /* 冲到 2.5 倍并抬到骰子上方，JS 在此时把数字换成翻倍值 */
    9%   { opacity: 1; transform: translate(-50%, calc(-50% - 24px)) scale(2.5); }
    30%  { opacity: 1; transform: translate(-50%, calc(-50% - 24px)) scale(2.5); }
    /* 缩回正常大小并落回骰面数字位置 */
    50%  { opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1.05); }
    58%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    /* 停留，让玩家看清数值 */
    78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    /* 淡出合体：此时骰面数字已换成金色翻倍值 */
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

.dice-upgrade-arrived .dice-skill-label {
    opacity: 1 !important;
    bottom: -22px;
    overflow: visible;
}

/* ===== 骰子强化跳跃动画（使用实际骰子元素）===== */
.dice-upgrade-jumping {
    animation: diceUpgradeJumpBounce 0.45s ease-out !important;
}

@keyframes diceUpgradeJumpBounce {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    30% { transform: translateY(-20px) scale(1.25) rotate(-8deg); }
    60% { transform: translateY(-5px) scale(0.95) rotate(4deg); }
    100% { transform: translateY(-10px) scale(1.1) rotate(0deg); }
}

.dice-upgrade-arrived {
    animation: diceUpgradeGlow 0.8s ease-in-out infinite alternate !important;
}

@keyframes diceUpgradeGlow {
    from { transform: scale(1.05); opacity: 0.9; }
    to { transform: scale(1.15); opacity: 1; }
}

.dice-upgrade-returning {
    animation: diceUpgradeReturn 0.4s ease-in-out !important;
}

@keyframes diceUpgradeReturn {
    0% { transform: scale(1.1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ===== ★★★ 海克斯科技界面（超级强化版）★★★ ===== */
#hextech-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 45; display: none;
    background: rgba(0,0,0,0);
    animation: hextechFadeIn 0.42s ease-out forwards;
}
@keyframes hextechFadeIn {
    from { background: rgba(0,0,0,0); }
    to   { background: rgba(2,2,20,0.9); }
}

.hextech-content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 85px;
    /* 背景光效 */
    background:
        radial-gradient(ellipse 280px 200px at 50% 25%, rgba(0,150,255,0.07) 0%, transparent 100%),
        radial-gradient(ellipse 200px 300px at 20% 70%, rgba(100,0,200,0.05) 0%, transparent 100%);
}

.hextech-header {
    position: relative; width: 310px; height: 62px;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 44px;
    animation: bannerDropIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.hextech-title-bg { position: absolute; width: 130%; height: 130%; object-fit: contain; left: -15%; top: -15%; }
.hextech-title-text {
    position: relative; z-index: 1;
    font-size: 28px; font-weight: bold;
    color: #d0e8f0;
    top: -15px;
    text-shadow:
        0 0 12px rgba(0,200,255,0.9),
        0 0 28px rgba(0,180,255,0.5),
        2px 2px 4px rgba(0,0,0,0.9);
    letter-spacing: 7px;
    animation: hextechTitleGlow 2s ease-in-out infinite;
}
@keyframes hextechTitleGlow {
    0%, 100% { text-shadow: 0 0 12px rgba(0,200,255,0.9), 0 0 28px rgba(0,180,255,0.5), 2px 2px 4px rgba(0,0,0,0.9); }
    50%       { text-shadow: 0 0 22px rgba(0,220,255,1), 0 0 48px rgba(0,200,255,0.8), 2px 2px 4px rgba(0,0,0,0.9); }
}

/* position:relative —— 洗牌时的地面投影需要以容器为定位参照 */
.hextech-cards { display: flex; gap: 15px; justify-content: center; padding: 0 10px; position: relative; }

.hextech-card {
    width: 112px; height: 265px;
    position: relative; border-radius: 0; overflow: visible;
    cursor: pointer;
    transform: scale(1.15);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
    animation: hextechCardIn 0.55s ease-out backwards;
}
.hextech-card:nth-child(1) { animation-delay: 0.1s; }
.hextech-card:nth-child(2) { animation-delay: 0.24s; }
.hextech-card:nth-child(3) { animation-delay: 0.38s; }

@keyframes hextechCardIn {
    from { opacity: 0; transform: translateY(50px) scale(0.86) rotateX(15deg); }
    to   { opacity: 1; transform: translateY(0) scale(1.15) rotateX(0deg); }
}

.hextech-card:hover { transform: scale(1.15); }
.hextech-card:active { transform: scale(1.15); }

/* 稀有度样式 - 无边框无阴影 */
.hextech-silver {
    border: none;
    box-shadow: none;
}
.hextech-silver:hover {
    box-shadow: none;
}
.hextech-gold {
    border: none;
    box-shadow: none;
}
.hextech-gold:hover {
    box-shadow: none;
}
.hextech-prismatic {
    border: none;
    box-shadow: none;
    animation: hextechCardIn 0.55s ease-out backwards;
}
.hextech-prismatic:hover { box-shadow: none; }

.hextech-card-bg { position: absolute; top: -2.5%; left: 50%; transform: translateX(-50%); width: 125px; height: 105%; object-fit: fill; z-index: 0; }
.hextech-card-inner {
    position: relative; z-index: 1; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding: 13px 10px 13px 16px;
    box-sizing: border-box; overflow: hidden;
}

.hextech-rarity-label {
    /* ★ 小吉/中吉/大吉 文字放大一倍（10px → 20px）；
       字号变大后相应收紧下边距，避免把卡面描述文字挤到底部装饰下 */
    font-size: 20px; font-weight: bold;
    padding: 2px 12px; border-radius: 14px;
    margin-bottom: 3px; text-transform: uppercase; letter-spacing: 2px;
    position: relative; left: 0; top: -7px;   /* ★ 吉签文字整体上移 6px（-1px → -7px） */
    white-space: nowrap;
    line-height: 1.15;
}
.hextech-rarity-silver { color: #ccc; background: rgba(192,192,192,0.18); border: 1px solid rgba(192,192,192,0.38); }
.hextech-rarity-gold   { color: #FFD700; background: rgba(255,215,0,0.14); border: 1px solid rgba(255,215,0,0.38); top: -8px; }
.hextech-rarity-prismatic { color: #e0b0ff; background: rgba(200,100,255,0.14); border: 1px solid rgba(200,100,255,0.38); }

.hextech-icon-wrap {
    width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(0,200,255,0.5);
    box-shadow: 0 0 18px rgba(0,200,255,0.45);
    margin-bottom: 11px;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
.hextech-card:hover .hextech-icon-wrap {
    transform: scale(1.12) rotate(6deg);
    box-shadow: 0 0 28px rgba(0,220,255,0.7);
}
.hextech-icon { width: 100%; height: 100%; object-fit: contain; }

.hextech-rune-name {
    color: #fff; font-size: 14px; font-weight: bold;
    text-shadow: 1px 1px 3px #000; margin-bottom: 9px; text-align: center;
}
.hextech-rune-desc {
    color: #c8d8e8; font-size: 11px; line-height: 1.55;
    text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); flex: 1;
    position: relative; left: -1px;
}

.hextech-hint {
    color: rgba(255,255,255,0.45);
    font-size: 12px; margin-top: 32px; text-align: center;
    animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.45; transform: translateY(0); }
    50%       { opacity: 0.9;  transform: translateY(-2px); }
}

/* ===== ★ 土地赠福：庙里求签演出 ===== */
/* 签筒舞台：居中放签筒，抽中后整体淡出让位给卡片 */
.qian-stage {
    position: relative;
    width: 100%; height: 340px;
    display: flex; align-items: center; justify-content: center;
    overflow: visible;
    transition: opacity 0.42s ease, transform 0.42s ease;
}
.qian-stage.gone {
    opacity: 0;
    transform: scale(0.82) translateY(-18px);
    pointer-events: none;
    height: 0;                      /* 收高，避免占位把卡片顶下去 */
    margin-top: -12px;
    transition: opacity 0.34s ease, transform 0.34s ease,
                height 0.34s ease 0.1s, margin-top 0.34s ease 0.1s;
}

.qian-tube-wrap {
    position: relative;
    width: 190px; height: 291px;
    display: flex; align-items: flex-end; justify-content: center;
}
/* ★ 签筒抽签序列帧：6列×4行 = 24 帧的 sprite 图集
   素材来源 assets/actions/12（24张 256×356 原始帧合成）。
   帧内已包含完整演出：签筒摇晃 → 彩签升起 → 贯穿飞出，
   因此不再需要额外的独立飞签元素（.qian-fly-stick 已停用）。
   帧推进由 JS 改 background-position 驱动（多行网格用 CSS steps 不好表达）。 */
.qian-tube-seq {
    width: 190px; height: 291px;
    background-image: url('../hex_tech/assets/bg/qian_tube_shake_sheet_v2.webp');
    background-repeat: no-repeat;
    /* 6 列 4 行 → 总尺寸 = 6×190 × 4×291 */
    background-size: 1140px 1164px;
    background-position: 0 0;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}
/* 待机：极轻微的呼吸，提示可以求签 */
.qian-tube-wrap.idle { animation: qianIdle 2.6s ease-in-out infinite; }
@keyframes qianIdle {
    0%, 100% { transform: translateY(0)    scale(1); }
    50%      { transform: translateY(-3px) scale(1.012); }
}

/* ★ 摇筒已改为序列帧驱动，不再用 CSS 整体旋转（那样竹签无法独立摆动）。
   摇筒期间仅保留一点整体位移，增强“双手晃”的力量感。 */
.qian-tube-wrap.shaking { animation: qianShakeShift 1.5s ease-in-out forwards; }
@keyframes qianShakeShift {
    0%, 100% { transform: translate(0, 0); }
    12%  { transform: translate(-3px, -2px); }
    28%  { transform: translate(3px, -4px); }
    44%  { transform: translate(-4px, -3px); }
    60%  { transform: translate(4px, -5px); }
    76%  { transform: translate(-3px, -2px); }
    90%  { transform: translate(2px, -1px); }
}

/* 飞出的那支签：默认藏在筒口内
   ★ 位移幅度必须收敛在 .qian-stage 内，否则签会飞出屏幕顶部看不见。
   签高约 104px，起点签顶距 stage 顶约 90px，所以上飞上限取 -72px。 */
.qian-fly-stick {
    position: absolute;
    left: 50%;
    bottom: 62%;
    width: 24px;
    transform: translate(-50%, 0) rotate(0deg);
    transform-origin: 50% 100%;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55));
    z-index: 3;
    /* ★ 新序列帧（assets/actions/12）已包含彩签升起飞出的完整过程，
       再叠一根独立飞签会出现“两根签”。此元素保留（供辉光色逻辑引用）但不再显示。 */
    display: none;
}
/* 飞签：从筒口跃出 → 空中翻转 → 回落竖在筒口上方（全程不出 stage） */
.qian-fly-stick.fly { animation: qianFly 1.15s cubic-bezier(0.22,0.85,0.3,1) forwards; }
@keyframes qianFly {
    0%   { opacity: 0; transform: translate(-50%, 8px)   rotate(0deg)   scale(0.9); }
    14%  { opacity: 1; transform: translate(-50%, -14px) rotate(-7deg)  scale(1); }
    40%  { opacity: 1; transform: translate(-44%, -60px) rotate(-22deg) scale(1.06); }
    60%  { opacity: 1; transform: translate(-54%, -72px) rotate(9deg)   scale(1.08); }
    80%  { opacity: 1; transform: translate(-50%, -50px) rotate(-3deg)  scale(1.04); }
    100% { opacity: 1; transform: translate(-50%, -38px) rotate(0deg)   scale(1.03); }
}
/* ★ 签变卡时先把签淡出，避免跟着 stage 的退场 transform 飘出屏幕 */
.qian-fly-stick.faded {
    animation: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* ★ 三种签头各自的辉光色：签在界面上只有 26px 宽，
   光靠签头本身的颜色辨识度不够，用对应色外发光强化“小吉/中吉/大吉”的区分。 */
.qian-fly-stick {
    --qs-glow:  rgba(255,215,90,1);
    --qs-glow2: rgba(255,190,60,0.7);
}
.qian-fly-stick.qs-silver {
    --qs-glow:  rgba(235,245,255,1);
    --qs-glow2: rgba(175,205,240,0.8);
}
.qian-fly-stick.qs-gold {
    --qs-glow:  rgba(255,215,90,1);
    --qs-glow2: rgba(255,170,35,0.85);
}
.qian-fly-stick.qs-prismatic {
    --qs-glow:  rgba(228,150,255,1);
    --qs-glow2: rgba(140,200,255,0.85);
}
/* 签落定后的辉光闪亮（提示即将翻开）
   ★ 必须把 qianFly 一并写进来并保留 forwards：
   animation 是同一个属性，若只写 qianStickGlow 会直接覆盖掉 .fly 的动画，
   签会瞬间回到 opacity:0 的基础态而“凭空消失”。 */
.qian-fly-stick.fly.glow {
    animation: qianFly 1.15s cubic-bezier(0.22,0.85,0.3,1) forwards,
               qianStickGlow 0.55s ease-out 2;
}
@keyframes qianStickGlow {
    0%, 100% { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)); }
    50%      { filter: drop-shadow(0 0 14px var(--qs-glow))
                       drop-shadow(0 0 26px var(--qs-glow2))
                       brightness(1.25); }
}

/* 求签按钮上的提示：签筒阶段整体下移一点 */
#hextech-screen .hextech-hint { margin-top: 18px; }

/* 单抽卡片：居中、略大，从签的位置“展开” */
.hextech-cards.single-qian { justify-content: center; }
/* ★ 签筒原地淡出（不位移），给卡牌腾位置；节奏放缓后淡出略慢一点更柔和 */
.qian-tube-wrap.qian-tube-gone {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    transition: opacity 0.42s ease, transform 0.42s ease;
}
/* ★ 赠福卡就在签筒舞台中心（即签的位置）由小变大出现，
   而不是从下方的卡牌行里冒出来 */
.qian-stage .hextech-card.qian-reveal {
    position: absolute;
    left: 50%; top: 50%;
    margin: 0;
    z-index: 6;
    transform: translate(-50%, -50%) scale(1.15);
    animation: qianCardReveal 0.82s cubic-bezier(0.24, 1.32, 0.42, 1) forwards;
}
.hextech-card.qian-reveal {
    animation: qianCardRevealFlat 0.82s cubic-bezier(0.24, 1.32, 0.42, 1) forwards;
}
/* 存在 stage 时用带居中位移的版本（上方选择器更具体，优先生效）；
   拿不到 stage 的降级情况用不带位移的 flat 版，避免整张卡偏一半 */
@keyframes qianCardRevealFlat {
    0%   { opacity: 0; transform: scale(0.08) rotate(-12deg); }
    28%  { opacity: 1; transform: scale(0.82) rotate(5deg); }
    52%  { opacity: 1; transform: scale(1.34) rotate(-3deg); }
    76%  { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
    100% { opacity: 1; transform: scale(1.15) rotate(0deg); }
}
@keyframes qianCardReveal {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.08) rotate(-12deg); }
    28%  { opacity: 1; transform: translate(-50%, -50%) scale(0.82) rotate(5deg); }
    52%  { opacity: 1; transform: translate(-50%, -50%) scale(1.34) rotate(-3deg); }
    76%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(1.5deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(0deg); }
}
/* 单抽模式下不需要 hover 放大（不可选） */
.hextech-cards.single-qian .hextech-card:hover { transform: none; }

/* 全屏“点击任意处继续”提示 */
.qian-tap-hint {
    position: absolute;
    left: 0; right: 0; bottom: 26px;
    text-align: center;
    color: rgba(255,235,180,0.92);
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    animation: qianTapPulse 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 20;
}
@keyframes qianTapPulse {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-3px); }
}

/* ===== ★ 土地赠福：手动洗牌按钮 ===== */
/* 展示期结束后出现，玩家点击才开始翻牌+洗牌，不再自动进行 */
#hextech-shuffle-btn {
    display: none;
    margin: 14px auto 0;
    padding: 11px 44px;
    background: linear-gradient(180deg, #FFD54F, #E8A317);
    color: #3A2508;
    font-size: 17px; font-weight: bold;
    letter-spacing: 3px;
    border-radius: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-shadow: 0 4px 14px rgba(255,190,60,0.55),
                inset 0 1px 0 rgba(255,255,255,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
#hextech-shuffle-btn.show {
    display: block;
    animation: hexShuffleIn 0.34s cubic-bezier(0.34,1.56,0.64,1),
               hexShufflePulse 1.6s ease-in-out 0.34s infinite;
}
#hextech-shuffle-btn:active {
    transform: scale(0.94);
    box-shadow: 0 2px 8px rgba(255,190,60,0.45);
}
/* 点击后：禁用并淡出（避免重复点击） */
#hextech-shuffle-btn.spent {
    animation: none;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
}
@keyframes hexShuffleIn {
    from { opacity: 0; transform: translateY(10px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes hexShufflePulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(255,190,60,0.55),
                           inset 0 1px 0 rgba(255,255,255,0.6); }
    50%      { box-shadow: 0 4px 22px rgba(255,214,90,0.95),
                           inset 0 1px 0 rgba(255,255,255,0.75); }
}

/* ===== ★ 土地赠福：翻牌 / 洗牌流程 ===== */
/* 卡片作为 3D 舞台，内部 flip 容器承载正反两面 */
.hextech-card { perspective: 900px; }
.hextech-card-flip {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.45,0.05,0.35,1);
}
.hextech-card.is-flipped .hextech-card-flip { transform: rotateY(180deg); }
.hextech-face {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.hextech-face-back { transform: rotateY(180deg); }
.hextech-cardback-img {
    position: absolute; top: -2.5%; left: 50%; transform: translateX(-50%);
    width: 125px; height: 105%; object-fit: fill; z-index: 0;
}
/* 洗牌时的地面光斑：深色背景下黑色投影根本看不见，改用海克斯蓝的辉光作为接地参照，
   牌抬得越高，光斑越大越淡越虚 */
.hextech-card-shadow {
    position: absolute; bottom: -32px; left: -9px;
    width: 130px; height: 26px;
    pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse at center,
        rgba(165,225,255,0.92) 0%, rgba(80,165,245,0.44) 40%, rgba(40,110,200,0.14) 62%, rgba(0,0,0,0) 78%);
    will-change: transform, opacity, filter;
}
/* 展示期 / 洗牌期：不接受点击，也不给 hover 反馈 */
.hextech-cards.hextech-locked .hextech-card { cursor: default; }
.hextech-cards.hextech-locked .hextech-card:hover .hextech-icon-wrap {
    transform: none; box-shadow: 0 0 18px rgba(0,200,255,0.45);
}
/* 被选中的牌：置顶强调（需高于引导遮罩的 z-index:100） */
.hextech-card-chosen { z-index: 120 !important; }
/* 未被选中的牌：压暗淡出 */
.hextech-card-faded {
    transition: opacity 0.45s ease, filter 0.45s ease;
    opacity: 0.26; filter: grayscale(0.7) brightness(0.65);
}

/* ===== 强化卡界面 ===== */
#upgrade-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 40; display: none;
    background: rgba(2,2,18,0.90);
    opacity: 0;
    animation: upgradeOverlayIn 0.3s ease-out forwards;
}
@keyframes upgradeOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.upgrade-content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 230px;
    background:
        radial-gradient(ellipse 250px 180px at 50% 20%, rgba(255,200,0,0.05) 0%, transparent 100%);
}
.upgrade-banner {
    width: 265px; height: 52px; position: relative;
    display: flex; justify-content: center; align-items: center;
    margin-top: -50px;
    margin-bottom: 76px;
    animation: bannerDropIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}
.upgrade-banner img { position: absolute; width: 100%; height: 100%; object-fit: fill; }
.upgrade-banner span {
    position: relative; z-index: 1; color: var(--clr-gold);
    font-size: 20px; font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.85), 0 0 14px rgba(255,215,0,0.9);
    letter-spacing: 7px;
    top: -10px;
    animation: textPulse 2.5s ease-in-out infinite;
}

.upgrade-cards { display: flex; gap: 13px; justify-content: center; padding: 0 9px; }

.upgrade-empty-state {
    width: 290px; padding: 28px 20px; text-align: center;
    color: #f4e5c7; background: rgba(54, 37, 29, 0.95);
    border: 2px solid #b88b45; border-radius: 16px;
}
.upgrade-empty-title { font-size: 20px; font-weight: bold; }
.upgrade-empty-state p { margin: 14px 0 22px; font-size: 13px; line-height: 1.6; }
#upgrade-continue-btn {
    padding: 12px 30px; border: 1px solid #b47e32; border-radius: 9px;
    background: #f2cd77; color: #4d301b; font-size: 17px; font-weight: bold;
    cursor: pointer;
}
#upgrade-continue-btn:focus-visible { outline: 3px solid #fff0c6; outline-offset: 4px; }


.upgrade-card {
    width: 115px; height: 220px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    background: transparent;
    background-image: none;
    animation: cardFlyIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
    will-change: transform, opacity;
    contain: layout style;
}
.upgrade-card:nth-child(1) { animation-delay: 0.08s; }
.upgrade-card:nth-child(2) { animation-delay: 0.2s; }
.upgrade-card:nth-child(3) { animation-delay: 0.32s; }

/* 卡片扫光 - 去掉，因为容器无overflow:hidden */
.upgrade-card::before {
    display: none;
}
.upgrade-card:hover::before { }

.upgrade-card:hover {
    transform: translateY(-14px) scale(1.05);
}
.upgrade-card:active { transform: translateY(-7px) scale(0.97); }

/* ★ 质变卡金色光晕效果 */
.upgrade-card.upgrade-card-key {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 16px rgba(255, 180, 0, 0.3));
    animation: cardFlyIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both, keyCardGoldenGlow 2s ease-in-out infinite alternate;
}
.upgrade-card.upgrade-card-key:hover {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 1)) drop-shadow(0 0 28px rgba(255, 180, 0, 0.6));
}
@keyframes keyCardGoldenGlow {
    0% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 12px rgba(255, 180, 0, 0.2));
    }
    100% {
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 24px rgba(255, 180, 0, 0.5));
    }
}

.upgrade-card-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
/* ★ 选择强化界面：英雄立绘在卡牌顶部露出半身 */
.upgrade-card-hero-img {
    position: absolute;
    top: -58px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
/* ★ 联结卡双立绘：左侧英雄 */
.upgrade-card-hero-img-bond-left {
    left: 25% !important;
    width: 70px !important;
    z-index: 2 !important;
}
/* ★ 联结卡双立绘：右侧英雄 */
.upgrade-card-hero-img-bond-right {
    left: 75% !important;
    width: 70px !important;
    z-index: 2 !important;
}
.upgrade-card-inner { position: relative; z-index: 3; width: 100%; height: 100%; display: flex; flex-direction: column; }
.upgrade-top {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 11px 7px 7px; gap: 7px;
}
.upgrade-skill-top {
    flex: 0 0 auto; padding: 7px 7px 4px; gap: 4px;
}
.upgrade-mid {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 12px 7px 0; gap: 5px;
}
.upgrade-mini-portrait {
    width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid rgba(255,215,0,0.65);
    object-fit: cover; box-shadow: 0 0 10px rgba(255,215,0,0.4);
}
.upgrade-hero-portrait {
    max-width: 120%; max-height: 120%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
    transition: transform 0.3s, filter 0.3s;
}
.upgrade-card:hover .upgrade-hero-portrait { transform: scale(1.1); filter: drop-shadow(0 6px 18px rgba(255,215,0,0.5)); }
.upgrade-hero-name { color: #fff; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 3px #000; }
/* upgrade-join-icon removed */
.upgrade-faces-grid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 6px; width: 100%; }
.upgrade-face-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; flex-shrink: 1; }
.upgrade-face-name { color: #fff; font-size: 11px; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-align: center; max-width: 50px; line-height: 1.2; }
.upgrade-skill-desc { color: #fff; font-size: 11px; line-height: 1.4; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-align: center; }
/* ★ 技能名称标签（每个图标下方） */
.upgrade-skill-name-label {
    color: #FFD700; font-size: 10px; font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    text-align: center; margin-top: 1px;
    background: rgba(0,0,0,0.35); border-radius: 4px;
    padding: 1px 6px; display: inline-block;
    white-space: nowrap; max-width: 70px;
    overflow: hidden; text-overflow: ellipsis;
}
/* ★ 描述中的数字黄色高亮 */
.upgrade-desc-number {
    color: #FFD700; font-weight: bold;
}
.upgrade-face-icon {
    width: 35px; height: 35px; border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.22);
    object-fit: contain; background: rgba(0,0,0,0.2);
    box-shadow: 0 2px 7px rgba(0,0,0,0.45);
    transition: transform 0.2s, box-shadow 0.2s;
}
/* ★ 问题2：技能图标放大1.5倍 */
.upgrade-face-icon.upgrade-face-icon-large {
    width: 52px; height: 52px; border-radius: 10px;
}
.upgrade-card:hover .upgrade-face-icon {
    transform: scale(1.12);
    box-shadow: 0 0 8px rgba(255,215,0,0.4);
}

/* ★ 问题4：花朵图标行 */
.upgrade-flower-row {
    display: flex; justify-content: center; align-items: center;
    gap: 3px; margin-top: 2px;
}
.upgrade-flower-icon {
    width: 14px; height: 14px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.5);
    transition: filter 0.3s ease;
}
.upgrade-flower-icon.upgrade-flower-active {
    filter: grayscale(0%) brightness(1);
}
/* ===== ★ 选择强化：刷新按钮（中间卡牌正下方） =====
   美术资源（均为图片，无CSS绘制），低调不抢镜：
     底板  assets/UI/btn_reroll_dark.png  深蓝紫哑光胶囊（新增）
     图标  assets/UI/icon_refresh.png     浅蓝白循环箭头（新增）
   禁用态沿用同一底板，仅降不透明度，保持视觉统一 */
#upgrade-reroll-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;   /* 卡牌行也是居中，固定3张 → 此处居中即中间卡正下方 */
    margin-top: 16px;
    animation: rerollBtnIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
    animation-delay: 0.25s;
}
@keyframes rerollBtnIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.upgrade-reroll-btn {
    /* 尺寸比例 126:30 = 4.20，贴近 btn_reroll_dark.png（320:69 = 4.64），胶囊形不失真 */
    width: 126px; height: 30px;
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    background-image: url('../assets/UI/btn_reroll_dark.png?v=20260728');
    background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
    cursor: pointer;
    user-select: none; -webkit-tap-highlight-color: transparent;
    opacity: 0.92;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s;
}
.upgrade-reroll-btn:hover  { transform: scale(1.04); opacity: 1; }
.upgrade-reroll-btn:active { transform: scale(0.96); }

/* 循环箭头图标（图片资源） */
.upgrade-reroll-icon {
    width: 14px; height: 14px;
    flex: 0 0 auto;
    background-image: url('../assets/UI/icon_refresh.png?v=20260728b');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    opacity: 0.9;
}

.upgrade-reroll-text {
    color: #C2D0EA; font-size: 13px; font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
/* 剩余次数（纯文字，不用CSS画徽标底） */
.upgrade-reroll-count {
    color: #E4EBF8; font-size: 13px; font-weight: bold; line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* 点击时图标旋转一圈 */
.upgrade-reroll-btn.is-spinning .upgrade-reroll-icon { animation: rerollSpin 0.36s linear; }
@keyframes rerollSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 次数用尽：沍用同一底板，仅变暗（保留按钮不消失） */
.upgrade-reroll-btn.is-disabled {
    cursor: default;
    opacity: 0.5;
}
.upgrade-reroll-btn.is-disabled:hover  { transform: none; opacity: 0.5; }
.upgrade-reroll-btn.is-disabled:active { transform: none; }
.upgrade-reroll-btn.is-disabled .upgrade-reroll-icon { opacity: 0.55; }
.upgrade-reroll-btn.is-disabled .upgrade-reroll-text,
.upgrade-reroll-btn.is-disabled .upgrade-reroll-count { color: #96A2B8; }

.upgrade-bottom {
    flex: 1; padding: 0 9px 18px; text-align: center;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}

/* ★ 数值变化展示行 */
.upgrade-value-change {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; margin-top: 6px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(78,255,145,0.2);
    border-radius: 10px;
    animation: vcFadeIn 0.4s ease-out 0.6s both;
}
@keyframes vcFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.upgrade-vc-cur {
    color: rgba(255,255,255,0.9); font-size: 11px; font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.upgrade-vc-arrow {
    color: rgba(78,255,145,0.7); font-size: 10px;
    margin: 0 1px;
    animation: vcArrowPulse 1.5s ease-in-out infinite;
}
@keyframes vcArrowPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}
.upgrade-vc-next {
    color: #4eff91; font-size: 12px; font-weight: bold;
    text-shadow: 0 0 6px rgba(78,255,145,0.5), 1px 1px 2px rgba(0,0,0,0.8);
}
.upgrade-card-title { color: #fff; font-size: 13px; font-weight: bold; text-shadow: 1px 1px 2px #000; margin-bottom: 3px; }
.upgrade-type-label { color: #000; font-size: 10px; font-weight: bold; margin-bottom: 5px; text-shadow: none; }
/* upgrade-desc removed */
.upgrade-card.hero-type .upgrade-top { flex: 1; }
.upgrade-card.hero-type:hover, .upgrade-card.upgrade-card-hero:hover { filter: brightness(1.12) drop-shadow(0 0 14px rgba(255,215,0,0.7)) drop-shadow(0 0 28px rgba(255,180,0,0.35)); }

/* ★ 选择强化界面英雄卡：复用英雄选择界面样式 */
.upgrade-card.hero-type .hero-card-content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 5px; height: 100%; box-sizing: border-box;
    justify-content: center;
}
.upgrade-card.hero-type .hero-card-dice {
    width: 36px; height: 36px;
    filter: drop-shadow(0 2px 8px rgba(255,200,80,0.7));
    animation: diceFloat 2s ease-in-out infinite;
}
.upgrade-card.hero-type .hero-card-portrait {
    width: 66px; height: 66px; margin-top: 8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.45);
    object-fit: cover;
}
.upgrade-card.hero-type .hero-card-name {
    color: #fff; font-size: 13px; font-weight: bold;
    margin-top: 8px; text-shadow: 1px 1px 2px #000;
}
.upgrade-card.hero-type .upgrade-type-label {
    color: rgba(255,255,255,0.8); font-size: 10px;
    margin-top: 4px; background: rgba(0,0,0,0.3);
    padding: 2px 8px; border-radius: 8px;
}
/* 隐藏英雄卡顶部半身像 */
.upgrade-card.hero-type .upgrade-card-hero-img { display: none !important; }

/* ===== 四种卡片类型统一悬浮样式 ===== */
.upgrade-card-hero:hover,
.upgrade-card-bullet:hover,
.upgrade-card-dice:hover,
.upgrade-card-mechanism:hover {
    filter: brightness(1.12) drop-shadow(0 0 14px rgba(255,215,0,0.7)) drop-shadow(0 0 28px rgba(255,180,0,0.35));
}

/* ===== 结果界面 ===== */
#result-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 50; display: none;
    background: rgba(0,0,0,0);
    animation: overlayFadeIn 0.4s ease-out forwards;
}
.result-content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 22px;
    background:
        radial-gradient(ellipse 300px 300px at 50% 40%, rgba(0,30,60,0.3) 0%, transparent 100%);
}
.result-title {
    font-size: 40px; font-weight: bold;
    animation: resultPulse 1.6s ease-in-out infinite, resultEnter 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes resultEnter {
    from { transform: scale(0.3) translateY(-50px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.result-title.victory {
    color: var(--clr-gold);
    text-shadow: 0 0 24px rgba(255,215,0,0.9), 0 0 50px rgba(255,180,0,0.5);
}
.result-title.defeat {
    color: var(--clr-red);
    text-shadow: 0 0 24px rgba(255,68,102,0.9), 0 0 50px rgba(255,0,50,0.5);
}
@keyframes resultPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.07); }
}
.result-gold {
    display: flex; align-items: center; gap: 9px;
    color: var(--clr-gold); font-size: 22px; font-weight: bold;
    animation: fadeScaleIn 0.5s ease-out 0.3s both;
}
.result-gold img { width: 30px; height: 30px; }
.result-btn {
    width: 185px; height: 52px;
    background: linear-gradient(160deg, #7ad468, #4db83c);
    border: none; border-radius: 26px;
    color: #fff; font-size: 18px; font-weight: bold;
    cursor: pointer; letter-spacing: 5px;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 18px rgba(80,200,80,0.4);
    position: relative; overflow: hidden;
    animation: fadeScaleIn 0.6s ease-out 0.5s both;
}
.result-btn::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transition: left 0.4s ease;
}
.result-btn:hover::before { left: 150%; }
.result-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 26px rgba(100,220,100,0.55);
}

/* ===== 浮动伤害数字 ===== */
.damage-number {
    position: absolute; pointer-events: none;
    font-size: 21px; font-weight: 900;
    color: #FFF6E8;
    /* ★ 纯色字：不加描边、不加阴影发光 */
    letter-spacing: 0.5px;
    white-space: nowrap;
    will-change: transform, opacity;
    animation: floatUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 35;
}
.damage-number.crit  {
    font-size: 34px; color: #FFE24A;
    animation: floatUpCrit 0.9s cubic-bezier(0.18, 1.4, 0.4, 1) forwards;
}
.damage-number.normal { font-size: 20px; color: #FFF6E6; }
.damage-number.damage { color: #FFE0CC; }
.damage-number.heal  { color: var(--clr-green); }
.damage-number.gold  { color: var(--clr-gold); font-size: 16px; }
.damage-number.monster_hit { color: #ff7a55; font-size: 22px; }

@keyframes floatUp {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
    18%  { opacity: 1; transform: translate(-50%, -14px) scale(1.3); }
    34%  { opacity: 1; transform: translate(-50%, -20px) scale(1.02); }
    100% { opacity: 0; transform: translate(-50%, -52px) scale(0.72); }
}

/* ★ 暴击专用：弹得更夸张，带一下小回弹 */
@keyframes floatUpCrit {
    0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.5) rotate(-6deg); }
    16%  { opacity: 1; transform: translate(-50%, -18px) scale(1.62) rotate(3deg); }
    30%  { opacity: 1; transform: translate(-50%, -24px) scale(1.12) rotate(-1deg); }
    44%  { opacity: 1; transform: translate(-50%, -28px) scale(1.26) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -62px) scale(0.82); }
}

/* 升级横幅 */
.levelup-banner {
    position: absolute; top: 35%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: var(--clr-gold); font-size: 34px; font-weight: bold;
    text-align: center; pointer-events: none; z-index: 93;
    text-shadow: 0 0 12px rgba(255,215,0,1), 0 0 24px rgba(255,180,0,0.9), 2px 2px 4px rgba(0,0,0,0.9);
    opacity: 0; letter-spacing: 7px; white-space: nowrap;
}
.levelup-banner.active { animation: levelupBannerAnim 1.9s ease-out forwards; }
@keyframes levelupBannerAnim {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
    45%  { transform: translate(-50%, -50%) scale(1.06); }
    60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -62%) scale(1.12); }
}

/* ===== 通用动画 ===== */
@keyframes fadeScaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}


/* ===== 强化卡面槽技能类型标签 ===== */
.upgrade-face-type {
    color: #000;
    font-size: 8px;
    font-weight: bold;
    text-shadow: none;
    white-space: nowrap;
    margin-top: 1px;
}


/* ===== 通用UI背景图覆盖 ===== */
/*
 * 主界面图片资源清单（美术替换请保持文件名不变）：
 *   assets/背景/bg_main_ui.png           - 主界面背景
 *   assets/UI/bg_topbar.png              - 顶部资源栏背景
 *   assets/UI/bg_res_badge.png           - 资源胶囊背景（票券/宝石/金币）
 *   assets/UI/bg_stage_card.png          - 关卡卡片容器背景
 *   assets/UI/bg_progress_area.png       - 进度区域背景
 *   assets/UI/bg_bottomnav.png           - 底部导航栏背景
 *   assets/UI/bg_nav_icon_active.png     - 导航激活状态背景圆圈
 *   assets/UI/bg_nav_item.png            - 导航普通状态背景
 *   assets/UI/bg_settings_btn.png        - 设置按钮背景
 *   assets/UI/bg_modal.png               - 设置弹框背景
 */

/* 主背景 - 透明，使用game-container的共享背景 */
.main-bg {
    background: transparent !important;
    background-image: none !important;
}

/* 顶部资源栏 - 透明无蒙版 */
.main-top-bar {
    background-image: none !important;
    background-color: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
}

/* 资源胶囊（金币 / 宝石） */
.res-item {
    background-image: none !important;
    background-color: rgba(0,0,0,0.35) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
.res-item:hover {
    border-color: rgba(255,255,255,0.4) !important;
    box-shadow: 0 0 8px rgba(255,255,255,0.15) !important;
}

/* 地图预览容器 - 透明无框 */
.stage-map-box {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 底部导航 */
.bottom-nav {
    background-image: url('../assets/UI/Frame3.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-top: none !important;
    height: 57px !important;
    position: relative;
}
.bottom-nav::before { 
    content: '' !important;
    display: block !important;
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/UI/nav_overlay.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}
.bottom-nav > * {
    position: relative;
    z-index: 2;
}

/* 导航普通态 */
.nav-item {
    background-image: url('../assets/UI/nav_inactive_bg.png');
    background-size: 100% 100%; background-repeat: no-repeat;
    background-color: transparent;
}
.nav-item:hover {
    background-image: none;
    background-color: rgba(255,200,80,0.08) !important;
}

/* 导航激活态 */
.nav-item.active {
    background-image: url('../assets/UI/nav_active_bg.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-8px) scale(1.15) !important;
    z-index: 2;
}

/* ===== 设置弹窗（暂停游戏）===== */
#settings-overlay {
    position: absolute;
    inset: 0;
    z-index: 300;
    display: none;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
}
#settings-overlay.active { display: flex; }

#settings-modal {
    width: 320px;
    height: 420px;
    position: relative;
    background: url('../assets/UI/setting.png?v=20260514') center/contain no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 38px;
}

.settings-bg { display: none; } /* 交由容器背景图显示 */

.settings-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 22px 40px 22px;
    gap: 12px;
    pointer-events: auto;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(0,200,255,0.18);
    border-radius: 10px;
    padding: 10px 12px;
    color: rgba(255,255,255,0.95);
    font-size: 14px;
}

.settings-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.settings-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--clr-primary);
}

.settings-btn-row {
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.settings-action-btn {
    flex: 1;
    height: 42px;
    border-radius: 12px;
    border: 2px solid rgba(0,200,255,0.65);
    background: rgba(0,200,255,0.14);
    color: rgba(255,255,255,0.95);
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.settings-action-btn:active { transform: scale(0.98); }

.settings-toggle-btn {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: 2px solid rgba(0,200,255,0.5);
    background: rgba(0,200,255,0.14);
    color: rgba(255,255,255,0.95);
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.settings-toggle-btn:active { transform: scale(0.97); }


/* ★ 击杀统计面板（战斗界面右下角） */
.kill-count-panel {
    position: absolute;
    right: 8px; bottom: 160px;
    z-index: 30;
    display: flex; flex-direction: column; gap: 3px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 5px 8px;
    pointer-events: none;
    animation: kcFadeIn 0.5s ease-out both;
}
@keyframes kcFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.kc-row {
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.kc-icon {
    font-size: 11px; width: 16px; text-align: center;
    /* 固定宽度：emoji 字符实际字形宽于 16px 时不会把面板撑宽/溢出 */
    flex: 0 0 16px;
    overflow: hidden;
}
.kc-val {
    color: #4eff91; font-size: 12px; font-weight: bold;
    text-shadow: 0 0 4px rgba(78,255,145,0.4), 1px 1px 2px rgba(0,0,0,0.8);
    min-width: 18px; text-align: right;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* ★ 选择强化间隔统计（附在击杀统计面板下方，同一个开关控制） */
.kc-sep {
    height: 1px;
    margin: 2px 0;
    background: rgba(255,255,255,0.16);
}
.kc-val-upg {
    /* 与击杀数的绿色区分，用青蓝色表示时间类数据 */
    color: #5fd8ff;
    text-shadow: 0 0 4px rgba(95,216,255,0.4), 1px 1px 2px rgba(0,0,0,0.8);
    min-width: 44px;
    font-size: 11px;
}