/* ══════════════════════════════════════════════════════════════════════
   1. 全屏背景：晴空渐变基底 + 独立矢量动态云朵图层
   ══════════════════════════════════════════════════════════════════════ */
.game-play-modal-overlay {
    background: radial-gradient(circle at 50% 25%, #8dbad6 0%, #6193b2 55%, #416e8d 100%) !important;
    background-color: #6193b2 !important;
    padding: 1.8rem 1.6rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* 独立云朵容器层：置于卡片与 HUD 下方 (z-index: 1)，全透传无阻碍 */
.game-clouds-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* 单片云朵元素：自然飘逸浮动微动效 */
.game-cloud-item {
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: center center;
    animation: cloudGentleFloat 12s ease-in-out infinite alternate;
}

@keyframes cloudGentleFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(4px, -3px) scale(1.02);
    }
    100% {
        transform: translate(-3px, 2px) scale(0.99);
    }
}

/* 全屏微震屏动效 */
.game-screen-shake {
    animation: screenShakeAnim 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes screenShakeAnim {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-4px, 4px) rotate(-0.5deg); }
    40% { transform: translate(4px, -3px) rotate(0.5deg); }
    60% { transform: translate(-3px, -2px) rotate(-0.3deg); }
    80% { transform: translate(3px, 2px) rotate(0.3deg); }
}

/* 特效 Canvas 覆盖层 */
.game-fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 45;
}

/* ══════════════════════════════════════════════════════════════════════
   2. 顶部导航行：阳光高光立体悬浮标题 (完全无框) 与手绘图标按钮
   ══════════════════════════════════════════════════════════════════════ */
.game-top-bar {
    width: 100%;
    max-width: 680px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.4rem;
    margin-bottom: 1.2rem;
    flex-shrink: 0;
    z-index: 10;
    position: relative;
}

/* 顶部导航行左侧按钮组 */
.game-top-bar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

/* 顶部音效控制按钮 */
.game-top-icon-btn.is-muted {
    background: rgba(254, 226, 226, 0.92) !important;
    border-color: #EF4444 !important;
    color: #EF4444 !important;
}

.game-audio-icon {
    font-size: 1.8rem;
    line-height: 1;
    display: inline-block;
}

.game-top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* ★ 核心：完全无框、通透悬浮的标题居中区域 ★ */
.game-top-title-area {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    pointer-events: none;
    z-index: 5;
}

/* ★ 标题字体：纯白天光到蜜杏金立体渐变 + 柔和双层空间投影 (无边框、不沉闷、极具高级感) ★ */
.game-current-title {
    font-size: var(--font-size-xl2);
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    position: relative !important;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
    
    /* 阳光透亮白金双色渐变字 */
    background: linear-gradient(180deg, #FFFFFF 15%, #FFFBEB 60%, #FDE68A 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* 立体阴影：底层深蓝氛围阴影 + 顶层微光反衬，无论蓝天还是云朵都能清晰显现 */
    filter: drop-shadow(0 1.5px 0 rgba(245, 158, 11, 0.4))
            drop-shadow(0 3px 8px rgba(15, 23, 42, 0.32))
            drop-shadow(0 0 16px rgba(254, 240, 138, 0.35)) !important;
    user-select: none;
    -webkit-user-select: none;
}

@keyframes titleFloatGlow {
    0% {
        transform: translateY(0);
        filter: drop-shadow(0 1.5px 0 rgba(245, 158, 11, 0.4))
                drop-shadow(0 3px 8px rgba(15, 23, 42, 0.32))
                drop-shadow(0 0 14px rgba(254, 240, 138, 0.3));
    }
    100% {
        transform: translateY(-2px);
        filter: drop-shadow(0 2px 0 rgba(245, 158, 11, 0.5))
                drop-shadow(0 5px 12px rgba(15, 23, 42, 0.28))
                drop-shadow(0 0 20px rgba(254, 240, 138, 0.55));
    }
}

/* ★ 关卡便签：精致通透的毛玻璃蜜糖胶囊 (精致小巧，不抢标题焦点) ★ */
.game-current-level {
    color: #78350F !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 800 !important;
    background: rgba(254, 243, 199, 0.82) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(245, 158, 11, 0.55) !important;
    padding: 0.1rem 0.65rem !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    user-select: none;
    -webkit-user-select: none;
}

/* 暂停与图标按钮保持一致手绘风格 */
.game-pause-icon {
    font-size: 2rem;
    line-height: 1;
    display: inline-block;
    transition: transform 0.15s ease;
}

.game-top-icon-btn {
    background: rgba(255, 252, 248, 0.92);
    border: 2px solid #C48456;
    border-radius: 16px;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    color: #3D2B1F;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 0 rgba(196, 132, 86, 0.22), 0 4px 10px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    box-sizing: border-box;
}

.game-top-icon-btn:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: #D97706;
    background: #FFFDF9;
}

.game-top-icon-btn:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 1px 0 rgba(196, 132, 86, 0.22);
}

.game-top-icon-btn img {
    object-fit: contain;
    pointer-events: none;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   3. HUD 状态面板：绝对等宽手绘胶囊 + 零折行动态缩放 + 隐形占位生命值
   ══════════════════════════════════════════════════════════════════════ */
.game-hud-row {
    width: 100%;
    max-width: 680px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* 核心：flex: 1 1 0 配合 width: 0 严格等分宽度，绝不因内容变长而挤压他栏 */
.game-hud-stat {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    background: rgba(255, 252, 248, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid #C48456;
    border-radius: 16px;
    padding: 0.55rem 0.45rem;
    box-shadow: 
        0 3px 0 rgba(196, 132, 86, 0.2),
        0 6px 12px rgba(45, 30, 20, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    overflow: hidden;
}

.game-hud-label {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.game-hud-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: #2D1B12;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

#gameScoreVal, #typingScoreVal {
    color: #D97706 !important;
}

.game-combo-highlight {
    color: #DB2777 !important;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-combo-pop {
    animation: comboPopAnim 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes comboPopAnim {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35) rotate(-4deg); color: #EF4444; }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── 倒计时数值 3 阶紧迫变色 ── */
#gameTimerVal.timer-safe {
    color: #10B981 !important;
}

#gameTimerVal.timer-warning {
    color: #F59E0B !important;
}

#gameTimerVal.timer-urgent {
    color: #EF4444 !important;
    display: inline-block;
    animation: timerUrgentHeartbeat 0.6s ease-in-out infinite alternate;
}

@keyframes timerUrgentHeartbeat {
    from { transform: scale(1); filter: brightness(1); }
    to   { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6)); }
}

/* ── 生命值红心容器与隐形占位机制 ── */
.game-hud-hp-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    min-width: 0;
}

.game-hp-heart {
    display: inline-block;
    color: #EF4444 !important;
    font-size: 1.6rem;
    line-height: 1;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 扣血时使用 visibility: hidden 保留物理宽度，防止布局跳动抖动 */
.game-hp-heart.is-lost {
    visibility: hidden !important;
    pointer-events: none !important;
}



/* ══════════════════════════════════════════════════════════════════════
   4. 倒计时进度条：手绘纸感轨道 + 紧迫感呼吸发光
   ══════════════════════════════════════════════════════════════════════ */
.game-timer-progress-track {
    width: 100%;
    max-width: 680px;
    height: 13px;
    background: rgba(255, 252, 248, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid #C48456;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(196, 132, 86, 0.15);
    position: relative;
    z-index: 2;
    padding: 1px;
    box-sizing: border-box;
}

.game-timer-progress-fill {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    /* 移除 width 0.3s linear，完全由 JS 60FPS 主循环直接刷新，消除延迟和卡顿 */
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* 进度条 3 阶变色 */
.game-timer-progress-fill.fill-safe {
    background: linear-gradient(90deg, #34D399 0%, #10B981 100%) !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.45) !important;
}

.game-timer-progress-fill.fill-warning {
    background: linear-gradient(90deg, #FBBF24 0%, #F59E0B 100%) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

.game-timer-progress-fill.fill-urgent {
    background: linear-gradient(90deg, #F87171 0%, #EF4444 100%) !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.8) !important;
    animation: timerBarPulse 0.5s infinite alternate;
}

@keyframes timerBarPulse {
    from { opacity: 0.85; filter: brightness(1); }
    to   { opacity: 1;    filter: brightness(1.2); }
}






/* ══════════════════════════════════════════════════════════════════════
   欢乐今消：3D 萌宠卡片与自适应棋盘 
   ══════════════════════════════════════════════════════════════════════ */

/* ── 5. 网格棋盘容器：居中呼吸布局与 3D 透视视窗 ── */
.game-board-container {
    width: 100%;
    max-width: 660px;
    flex: 1;
    min-height: 0;
    display: grid;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    /* 核心：卡片居中并保持良好呼吸间隔 */
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    padding: 0.6rem 0.8rem;
    perspective: 1000px; /* 开启 3D 翻转透视 */
}

/* ── 各阶段卡片字号、五官尺寸与间距智能自适应 ── */
/* 2x2 关卡 (新手热身) */
.game-board-container.grid-2x2 {
    grid-template-columns: repeat(2, minmax(0, 220px));
    grid-template-rows: repeat(2, minmax(0, 155px));
    gap: 1.4rem 1.6rem;
}
.game-board-container.grid-2x2 .game-card-text { font-size: 1.85rem; }
.game-board-container.grid-2x2 .game-match-card.is-zh .game-card-text { font-size: 1.7rem; }
.game-board-container.grid-2x2 .card-face-zone { height: 48px; transform: scale(1.08); }

/* 2x3 关卡 (进阶挑战) */
.game-board-container.grid-2x3 {
    grid-template-columns: repeat(2, minmax(0, 205px));
    grid-template-rows: repeat(3, minmax(0, 140px));
    gap: 1.0rem 1.2rem;
}
.game-board-container.grid-2x3 .game-card-text { font-size: 1.85rem; }
.game-board-container.grid-2x3 .game-match-card.is-zh .game-card-text { font-size: 1.7rem; }
.game-board-container.grid-2x3 .card-face-zone { height: 44px; transform: scale(1.0); }

/* 2x4 关卡 (熟练速配) */
.game-board-container.grid-2x4 {
    grid-template-columns: repeat(2, minmax(0, 190px));
    grid-template-rows: repeat(4, minmax(0, 125px));
    gap: 0.8rem 1.0rem;
}
.game-board-container.grid-2x4 .game-card-text { font-size: 1.85rem; }
.game-board-container.grid-2x4 .game-match-card.is-zh .game-card-text { font-size: 1.7rem; }
.game-board-container.grid-2x4 .card-face-zone { height: 38px; transform: scale(0.92); }

/* 3x4 关卡 (终极满盘挑战，完美容纳 12 张大卡片) */
.game-board-container.grid-3x4 {
    grid-template-columns: repeat(3, minmax(0, 165px));
    grid-template-rows: repeat(4, minmax(0, 115px));
    gap: 0.75rem 0.85rem;
}
.game-board-container.grid-3x4 .game-card-text { font-size: 1.85rem; }
.game-board-container.grid-3x4 .game-match-card.is-zh .game-card-text { font-size: 1.7rem; }
.game-board-container.grid-3x4 .card-face-zone { height: 34px; transform: scale(0.85); }
.game-board-container.grid-3x4 .card-ears-wrap { top: -12px !important; }

/* ══════════════════════════════════════════════════════════════════════
   6. 萌宠卡片核心骨架 (单体独立眨眼与高透光轻奢毛玻璃)
   ══════════════════════════════════════════════════════════════════════ */
.game-match-card {
    width: 100%;
    height: 100%;
    max-width: 230px;
    max-height: 160px;
    aspect-ratio: 1.44 / 1;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform-style: preserve-3d;
    box-sizing: border-box;
    opacity: 0;
    overflow: visible;
}

/* 卡片主体：通透轻奢毛玻璃果冻质感 */
.card-main-body {
    position: absolute;
    inset: 0;
    background: var(--card-glass-bg) !important;
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    border: 3px solid var(--animal-stroke);
    border-radius: 26px;
    box-shadow: 
        0 5px 0 var(--animal-shadow),
        0 10px 22px rgba(15, 23, 42, 0.12),
        inset 0 2px 4px rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 10px;
    z-index: 2;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), 
                border-color 0.18s ease, 
                box-shadow 0.18s ease, 
                background 0.18s ease;
    overflow: visible;
    box-sizing: border-box;
}

/* 顶部耳朵包装 */
.card-ears-wrap {
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 18px;
    pointer-events: none;
    z-index: 1;
}

.card-ear {
    display: block;
    position: relative;
    background: var(--card-glass-bg) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 3px solid var(--animal-stroke);
    border-bottom: none !important;
    box-sizing: border-box;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

/* ── 五官区域（上半部） ── */
.card-face-zone {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    flex-shrink: 0;
    height: 44px;
    position: relative;
    transform-origin: center top;
}

/* ── 文字居中区域 ── */
.card-text-zone {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
}

.game-card-text {
    font-size: 1.48rem;
    font-weight: 600;
    color: #1E293B !important;
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.9) !important;
    word-break: break-word;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.game-match-card.is-zh .game-card-text {
    font-size: 1.28rem;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   7 款萌宠专属：中英高雅透光双底色体系
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 🐱 橘猫 (Cat) ── */
.animal-cat {
    --animal-stroke: #D97706;
    --animal-shadow: rgba(180, 83, 9, 0.28);
    --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(254, 243, 199, 0.44) 100%);
}
.animal-cat.is-en { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(254, 243, 199, 0.46) 100%); }
.animal-cat.is-zh { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(224, 238, 250, 0.46) 100%); }
.animal-cat .card-ear { width: 24px; height: 19px; border-radius: 8px 8px 0 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.animal-cat .card-ear.left  { transform: rotate(-14deg); }
.animal-cat .card-ear.right { transform: rotate(14deg); }
.animal-cat .card-ear::after {
    content: ''; position: absolute; inset: 3px 3px 0; background: #FCA5A5; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.cat-eyes-wrap { display: flex; align-items: center; justify-content: center; gap: 36px; width: 100%; }
.cat-eye { width: 13px; height: 14px; background: #1E293B; border-radius: 50% 50% 45% 45%; position: relative; }
.cat-eye::after { content: ''; position: absolute; top: 2px; left: 2px; width: 4.5px; height: 4.5px; background: #FFF; border-radius: 50%; }
.cat-center-group { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: -3px; }
.cat-nose { width: 7px; height: 5px; background: #F43F5E; border-radius: 50% 50% 40% 40%; }
.cat-mouth { width: 16px; height: 6px; border-bottom: 2px solid #78350F; border-radius: 0 0 8px 8px; margin-top: -1px; }
.cat-whisker-l, .cat-whisker-r {
    position: absolute; top: 1px; width: 16px; height: 9px; display: flex; flex-direction: column; justify-content: space-between;
}
.cat-whisker-l { left: -40px; transform: rotate(-5deg); }
.cat-whisker-r { right: -40px; transform: scaleX(-1) rotate(-5deg); }
.cat-w-line { width: 100%; height: 1.8px; background: #B45309; border-radius: 2px; opacity: 0.85; }

/* ── ② 🐰 萌兔 (Rabbit) ── */
.animal-rabbit {
    --animal-stroke: #DB2777;
    --animal-shadow: rgba(157, 23, 77, 0.28);
}
.animal-rabbit.is-en { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(252, 231, 243, 0.46) 100%); }
.animal-rabbit.is-zh { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(254, 243, 222, 0.46) 100%); }
.animal-rabbit .card-ears-wrap { top: -22px; }
.animal-rabbit .card-ear { width: 19px; height: 30px; border-radius: 12px 12px 0 0; }
.animal-rabbit .card-ear.left  { transform: rotate(-8deg); }
.animal-rabbit .card-ear.right { transform: rotate(8deg); }
.animal-rabbit .card-ear::after {
    content: ''; position: absolute; inset: 3px 3px 0; background: #FFFFFF; border-radius: 8px 8px 0 0;
}
.rabbit-eyes-wrap { display: flex; align-items: center; justify-content: center; gap: 32px; width: 100%; }
.rabbit-eye { width: 14px; height: 16px; background: #831843; border-radius: 50%; position: relative; }
.rabbit-eye::after { content: ''; position: absolute; top: 2px; left: 2px; width: 5px; height: 5px; background: #FFF; border-radius: 50%; }
.rabbit-eye::before { content: ''; position: absolute; bottom: 2.5px; right: 2.5px; width: 2.5px; height: 2.5px; background: #FFF; border-radius: 50%; }
.rabbit-snout { position: relative; width: 7px; height: 6px; background: #FB7185; clip-path: polygon(50% 100%, 0% 20%, 100% 20%); margin-top: -3px; }
.rabbit-blush-wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 54px; margin-top: -4px; width: 100%; }
.rabbit-blush { width: 14px; height: 6px; background: #F472B6; border-radius: 50%; opacity: 0.75; }

/* ── ③ 🐻 焦糖小熊 (Bear) ── */
.animal-bear {
    --animal-stroke: #C2410C;
    --animal-shadow: rgba(124, 45, 18, 0.28);
}
.animal-bear.is-en { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 237, 213, 0.46) 100%); }
.animal-bear.is-zh { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(230, 244, 234, 0.46) 100%); }
.animal-bear .card-ear { width: 28px; height: 19px; border-radius: 16px 16px 0 0; }
.animal-bear .card-ear.left  { transform: rotate(-12deg); }
.animal-bear .card-ear.right { transform: rotate(12deg); }
.animal-bear .card-ear::after {
    content: ''; position: absolute; inset: 3px 4px 0; background: #FFEDD5; border-radius: 10px 10px 0 0;
}
.bear-face-container { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.bear-eyes-wrap { display: flex; align-items: center; justify-content: center; gap: 42px; width: 100%; margin-top: 2px; z-index: 2; }
.bear-eye { width: 10px; height: 10px; background: #431407; border-radius: 50%; position: relative; }
.bear-eye::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 3px; height: 3px; background: #FFF; border-radius: 50%; }
.bear-muzzle-oval {
    width: 44px; height: 25px; background: rgba(255, 237, 213, 0.85); border: 2px solid #C2410C; border-radius: 22px; margin-top: -6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.bear-big-nose { width: 12px; height: 8px; background: #431407; border-radius: 6px 6px 4px 4px; }
.bear-mouth-line { width: 10px; height: 4px; border-bottom: 2px solid #431407; border-radius: 0 0 6px 6px; }

/* ── ④ 🐥 阳光小鸡 (Chick) ── */
.animal-chick {
    --animal-stroke: #EA580C;
    --animal-shadow: rgba(154, 52, 18, 0.28);
}
.animal-chick.is-en { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(254, 243, 199, 0.46) 100%); }
.animal-chick.is-zh { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(204, 251, 241, 0.46) 100%); }
.animal-chick .card-ears-wrap { justify-content: center; gap: 4px; padding: 0; top: -16px; }
.animal-chick .card-ear { width: 9px; height: 19px; border-radius: 10px; }
.animal-chick .card-ear.left  { transform: rotate(-20deg); }
.animal-chick .card-ear.right { transform: rotate(20deg); }
.chick-eyes-wrap { display: flex; align-items: center; justify-content: center; gap: 32px; width: 100%; }
.chick-eye { width: 11px; height: 12px; background: #7C2D12; border-radius: 50%; position: relative; }
.chick-eye::after { content: ''; position: absolute; top: 2px; left: 2px; width: 3.5px; height: 3.5px; background: #FFF; border-radius: 50%; }
.chick-beak {
    width: 16px; height: 13px; background: #EA580C; clip-path: polygon(50% 100%, 0% 0%, 100% 0%); border-radius: 0 0 4px 4px;
    margin-top: -3px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); border: 1px solid #C2410C;
}

/* ── ⑤ 🐼 芝麻熊猫 (Panda) ── */
.animal-panda {
    --animal-stroke: #2563EB;
    --animal-shadow: rgba(30, 58, 138, 0.28);
}
.animal-panda.is-en { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.70) 0%, rgba(226, 237, 248, 0.48) 100%); }
.animal-panda.is-zh { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.70) 0%, rgba(238, 233, 254, 0.48) 100%); }
.animal-panda .card-ear {
    width: 26px; height: 18px; background: #0F172A !important; border-color: #0F172A !important; border-radius: 14px 14px 0 0;
}
.panda-eyes-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; }
.panda-eye-patch {
    width: 20px; height: 25px; background: #0F172A; border-radius: 50% 50% 45% 45%; display: flex; align-items: center; justify-content: center;
}
.panda-eye-patch.left  { transform: rotate(18deg); }
.panda-eye-patch.right { transform: rotate(-18deg); }
.panda-inner-eye { width: 8px; height: 9px; background: #FFFFFF; border-radius: 50%; position: relative; }
.panda-inner-eye::after { content: ''; position: absolute; top: 2px; left: 2px; width: 4px; height: 5px; background: #0F172A; border-radius: 50%; }
.panda-snout-wrap { display: flex; flex-direction: column; align-items: center; margin-top: -6px; }
.panda-nose { width: 9px; height: 6px; background: #0F172A; border-radius: 4px; }

/* ── ⑥ 🦊 灵动红狐 (Fox) ── */
.animal-fox {
    --animal-stroke: #DC2626;
    --animal-shadow: rgba(127, 29, 29, 0.28);
}
.animal-fox.is-en { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(254, 226, 226, 0.46) 100%); }
.animal-fox.is-zh { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(254, 240, 218, 0.46) 100%); }
.animal-fox .card-ear {
    width: 25px; height: 24px; border-radius: 6px 6px 0 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); top: -4px;
}
.animal-fox .card-ear.left  { transform: rotate(-14deg); }
.animal-fox .card-ear.right { transform: rotate(14deg); }
.animal-fox .card-ear::after {
    content: ''; position: absolute; top: 0; left: 20%; width: 60%; height: 40%; background: #FFFFFF; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.fox-face-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.fox-eyes-wrap { display: flex; align-items: center; justify-content: center; gap: 34px; width: 100%; }
.fox-eye { width: 14px; height: 10px; background: #7F1D1D; border-radius: 0 10px 0 10px; position: relative; }
.fox-eye.right { border-radius: 10px 0 10px 0; }
.fox-eye::after { content: ''; position: absolute; top: 2px; left: 3px; width: 4px; height: 4px; background: #FFF; border-radius: 50%; }
.fox-cheek-fur-l, .fox-cheek-fur-r {
    position: absolute; top: 10px; width: 22px; height: 16px; background: rgba(255, 255, 255, 0.85); border-radius: 50% 0 50% 0;
}
.fox-cheek-fur-l { left: 16px; transform: rotate(-25deg); }
.fox-cheek-fur-r { right: 16px; transform: rotate(25deg) scaleX(-1); }
.fox-nose { width: 8px; height: 6px; background: #1E293B; border-radius: 3px 3px 5px 5px; margin-top: -3px; z-index: 2; }

/* ── ⑦ 🐷 粉嘟小猪 (Pig) ── */
.animal-pig {
    --animal-stroke: #E11D48;
    --animal-shadow: rgba(159, 18, 57, 0.28);
}
.animal-pig.is-en { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 228, 230, 0.46) 100%); }
.animal-pig.is-zh { --card-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.65) 0%, rgba(224, 238, 250, 0.46) 100%); }
.animal-pig .card-ear { width: 22px; height: 18px; border-radius: 4px 14px 0 0; }
.animal-pig .card-ear.left  { transform: rotate(-25deg); }
.animal-pig .card-ear.right { transform: rotate(25deg) scaleX(-1); }
.pig-face-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; }
.pig-eyes-row { display: flex; align-items: center; justify-content: center; gap: 36px; width: 100%; }
.pig-eye { width: 11px; height: 11px; background: #881337; border-radius: 50%; position: relative; }
.pig-eye::after { content: ''; position: absolute; top: 2px; left: 2px; width: 3.5px; height: 3.5px; background: #FFF; border-radius: 50%; }
.pig-big-snout {
    width: 38px; height: 22px; background: rgba(253, 164, 175, 0.9); border: 2.2px solid #E11D48; border-radius: 12px; margin-top: -6px;
    display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.pig-nostril { width: 5.5px; height: 8px; background: #9F1239; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════════════════
   4 大动态微表情与 3D 动画系统 (仅在触发时生效)
   ══════════════════════════════════════════════════════════════════════ */

/* 1. ★ 单只动物独立眨眼动画 (由 JS 随机挑选 1 只调度，其他卡片绝对不眨) */
@keyframes singleBlink {
    0%, 100% { transform: scaleY(1); }
    45%, 55% { transform: scaleY(0.1); }
}

.game-match-card.is-blinking .cat-eye,
.game-match-card.is-blinking .rabbit-eye,
.game-match-card.is-blinking .bear-eye,
.game-match-card.is-blinking .chick-eye,
.game-match-card.is-blinking .panda-inner-eye,
.game-match-card.is-blinking .fox-eye,
.game-match-card.is-blinking .pig-eye {
    animation: singleBlink 0.32s ease-in-out !important;
}

/* 入场飘落 */
@keyframes paperDropIn {
    0%   { opacity: 0; transform: translateY(-120px) scale(0.85); }
    70%  { opacity: 1; transform: translateY(4px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.game-match-card.paper-dropping {
    animation: paperDropIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes paperIdleFloat {
    0%, 100% { transform: var(--base-rot, rotate(0deg)) translateY(0); }
    50%      { transform: var(--base-rot, rotate(0deg)) translateY(-2px); }
}

.game-match-card.paper-idle {
    animation: paperIdleFloat 3.6s ease-in-out infinite;
}

/* 2. 选中态：^ ^ 笑眼弯弯 + 金色手办高光光环 */
.game-match-card.selected,
.game-match-card.state-selected {
    z-index: 10;
}

.game-match-card.selected .card-main-body,
.game-match-card.selected .card-ear,
.game-match-card.state-selected .card-main-body,
.game-match-card.state-selected .card-ear {
    border-color: #F59E0B !important;
    background: rgba(255, 254, 245, 0.88) !important;
    box-shadow: 0 0 0 3.5px #FBBF24, 0 12px 28px rgba(245, 158, 11, 0.45) !important;
}

.game-match-card.selected .cat-eye,
.game-match-card.selected .rabbit-eye,
.game-match-card.selected .bear-eye,
.game-match-card.selected .chick-eye,
.game-match-card.selected .panda-inner-eye,
.game-match-card.selected .fox-eye,
.game-match-card.selected .pig-eye,
.game-match-card.state-selected .cat-eye,
.game-match-card.state-selected .rabbit-eye,
.game-match-card.state-selected .bear-eye,
.game-match-card.state-selected .chick-eye,
.game-match-card.state-selected .panda-inner-eye,
.game-match-card.state-selected .fox-eye,
.game-match-card.state-selected .pig-eye {
    height: 4px !important;
    border-radius: 50% 50% 0 0 !important;
    border-top: 3.5px solid #1E293B !important;
    background: transparent !important;
    animation: none !important;
}

.game-match-card.selected .cat-eye::after,
.game-match-card.selected .rabbit-eye::after,
.game-match-card.selected .rabbit-eye::before,
.game-match-card.selected .bear-eye::after,
.game-match-card.selected .chick-eye::after,
.game-match-card.selected .panda-inner-eye::after,
.game-match-card.selected .fox-eye::after,
.game-match-card.selected .pig-eye::after,
.game-match-card.state-selected .cat-eye::after,
.game-match-card.state-selected .rabbit-eye::after,
.game-match-card.state-selected .rabbit-eye::before,
.game-match-card.state-selected .bear-eye::after,
.game-match-card.state-selected .chick-eye::after,
.game-match-card.state-selected .panda-inner-eye::after,
.game-match-card.state-selected .fox-eye::after,
.game-match-card.state-selected .pig-eye::after {
    display: none !important;
}

/* 3. 消除态：3D 晶透立体垂直翻转淡出消失 */
@keyframes card3DFlipDisappear {
    0% {
        transform: perspective(800px) rotateY(0deg) scale(1);
        opacity: 1;
        filter: brightness(1);
    }
    45% {
        transform: perspective(800px) rotateY(90deg) scale(1.08);
        opacity: 0.9;
        filter: brightness(1.6) drop-shadow(0 0 20px #34D399);
    }
    100% {
        transform: perspective(800px) rotateY(180deg) scale(0.2);
        opacity: 0;
        filter: brightness(2);
    }
}

.game-match-card.matched,
.game-match-card.state-matched {
    animation: card3DFlipDisappear 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none;
}

.game-match-card.matched .card-main-body,
.game-match-card.matched .card-ear,
.game-match-card.state-matched .card-main-body,
.game-match-card.state-matched .card-ear {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 4px #34D399, 0 12px 30px rgba(16, 185, 129, 0.6) !important;
}

/* 4. 错误态：可爱抖动 + >_< 闭眼与全动物嘴角联动 */
@keyframes cardCuteShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.game-match-card.shake,
.game-match-card.state-wrong {
    animation: cardCuteShake 0.4s ease-in-out both;
}

.game-match-card.shake .card-main-body,
.game-match-card.shake .card-ear,
.game-match-card.state-wrong .card-main-body,
.game-match-card.state-wrong .card-ear {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3.5px #FCA5A5, 0 8px 18px rgba(239, 68, 68, 0.35) !important;
}

.game-match-card.shake .cat-eye,
.game-match-card.shake .rabbit-eye,
.game-match-card.shake .bear-eye,
.game-match-card.shake .chick-eye,
.game-match-card.shake .panda-inner-eye,
.game-match-card.shake .fox-eye,
.game-match-card.shake .pig-eye,
.game-match-card.state-wrong .cat-eye,
.game-match-card.state-wrong .rabbit-eye,
.game-match-card.state-wrong .bear-eye,
.game-match-card.state-wrong .chick-eye,
.game-match-card.state-wrong .panda-inner-eye,
.game-match-card.state-wrong .fox-eye,
.game-match-card.state-wrong .pig-eye {
    background: transparent !important;
    border-radius: 0 !important;
    animation: none !important;
    position: relative;
}

.game-match-card.shake .cat-eye::after,
.game-match-card.shake .rabbit-eye::after,
.game-match-card.shake .bear-eye::after,
.game-match-card.shake .chick-eye::after,
.game-match-card.shake .panda-inner-eye::after,
.game-match-card.shake .fox-eye::after,
.game-match-card.shake .pig-eye::after,
.game-match-card.state-wrong .cat-eye::after,
.game-match-card.state-wrong .rabbit-eye::after,
.game-match-card.state-wrong .bear-eye::after,
.game-match-card.state-wrong .chick-eye::after,
.game-match-card.state-wrong .panda-inner-eye::after,
.game-match-card.state-wrong .fox-eye::after,
.game-match-card.state-wrong .pig-eye::after {
    display: none !important;
}

/* 🐱 橘猫 >_< 闭眼 + 撇嘴 */
.game-match-card.shake .cat-eyes-wrap .cat-eye:first-child::before,
.game-match-card.state-wrong .cat-eyes-wrap .cat-eye:first-child::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px;
    border-top: 2.8px solid #78350F; border-right: 2.8px solid #78350F;
    transform: rotate(45deg); border-radius: 1.5px;
}
.game-match-card.shake .cat-eyes-wrap .cat-eye:last-child::before,
.game-match-card.state-wrong .cat-eyes-wrap .cat-eye:last-child::before {
    content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px;
    border-top: 2.8px solid #78350F; border-left: 2.8px solid #78350F;
    transform: rotate(-45deg); border-radius: 1.5px;
}
.game-match-card.shake .cat-mouth,
.game-match-card.state-wrong .cat-mouth {
    border-bottom: none !important; border-top: 2.5px solid #78350F !important;
    border-radius: 8px 8px 0 0 !important; width: 14px !important; height: 5px !important; margin-top: 2px !important;
}
.game-match-card.shake .cat-whisker-l,
.game-match-card.state-wrong .cat-whisker-l { transform: rotate(10deg) !important; }
.game-match-card.shake .cat-whisker-r,
.game-match-card.state-wrong .cat-whisker-r { transform: scaleX(-1) rotate(10deg) !important; }

/* 🐰 萌兔 >_< 闭眼 + 腮红上浮 */
.game-match-card.shake .rabbit-eyes-wrap .rabbit-eye:first-child::before,
.game-match-card.state-wrong .rabbit-eyes-wrap .rabbit-eye:first-child::before {
    content: '' !important; display: block !important; position: absolute !important;
    top: 2px !important; left: 2px !important; width: 10px !important; height: 10px !important;
    border-top: 3px solid #831843 !important; border-right: 3px solid #831843 !important;
    transform: rotate(45deg) !important; border-radius: 1.5px !important;
}
.game-match-card.shake .rabbit-eyes-wrap .rabbit-eye:last-child::before,
.game-match-card.state-wrong .rabbit-eyes-wrap .rabbit-eye:last-child::before {
    content: '' !important; display: block !important; position: absolute !important;
    top: 2px !important; right: 2px !important; width: 10px !important; height: 10px !important;
    border-top: 3px solid #831843 !important; border-left: 3px solid #831843 !important;
    transform: rotate(-45deg) !important; border-radius: 1.5px !important;
}
.game-match-card.shake .rabbit-blush,
.game-match-card.state-wrong .rabbit-blush { opacity: 0.9 !important; transform: translateY(-1px); }

/* 🐻 焦糖熊 >_< 闭眼 + 吻部撇嘴 */
.game-match-card.shake .bear-eyes-wrap .bear-eye:first-child::before,
.game-match-card.state-wrong .bear-eyes-wrap .bear-eye:first-child::before {
    content: ''; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px;
    border-top: 2.6px solid #431407; border-right: 2.6px solid #431407; transform: rotate(45deg); border-radius: 1.5px;
}
.game-match-card.shake .bear-eyes-wrap .bear-eye:last-child::before,
.game-match-card.state-wrong .bear-eyes-wrap .bear-eye:last-child::before {
    content: ''; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px;
    border-top: 2.6px solid #431407; border-left: 2.6px solid #431407; transform: rotate(-45deg); border-radius: 1.5px;
}
.game-match-card.shake .bear-mouth-line,
.game-match-card.state-wrong .bear-mouth-line {
    border-bottom: none !important; border-top: 2.2px solid #431407 !important;
    border-radius: 6px 6px 0 0 !important; width: 13px !important; margin-top: 2px !important;
}

/* 🐥 阳光小鸡 >_< 闭眼 + 尖嘴下缩 */
.game-match-card.shake .chick-eyes-wrap .chick-eye:first-child::before,
.game-match-card.state-wrong .chick-eyes-wrap .chick-eye:first-child::before {
    content: ''; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px;
    border-top: 2.8px solid #7C2D12; border-right: 2.8px solid #7C2D12; transform: rotate(45deg); border-radius: 1.5px;
}
.game-match-card.shake .chick-eyes-wrap .chick-eye:last-child::before,
.game-match-card.state-wrong .chick-eyes-wrap .chick-eye:last-child::before {
    content: ''; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px;
    border-top: 2.8px solid #7C2D12; border-left: 2.8px solid #7C2D12; transform: rotate(-45deg); border-radius: 1.5px;
}
.game-match-card.shake .chick-beak,
.game-match-card.state-wrong .chick-beak { transform: scale(0.85, 0.75) translateY(2px) !important; }

/* 🐼 芝麻熊猫 >_< 纯白眯眼 + 委屈嘴角 */
.game-match-card.shake .panda-eye-patch.left .panda-inner-eye::before,
.game-match-card.state-wrong .panda-eye-patch.left .panda-inner-eye::before {
    content: ''; position: absolute; top: 1px; left: 1px; width: 6px; height: 6px;
    border-top: 2.2px solid #FFFFFF; border-right: 2.2px solid #FFFFFF; transform: rotate(45deg); border-radius: 1px;
}
.game-match-card.shake .panda-eye-patch.right .panda-inner-eye::before,
.game-match-card.state-wrong .panda-eye-patch.right .panda-inner-eye::before {
    content: ''; position: absolute; top: 1px; right: 1px; width: 6px; height: 6px;
    border-top: 2.2px solid #FFFFFF; border-left: 2.2px solid #FFFFFF; transform: rotate(-45deg); border-radius: 1px;
}
.game-match-card.shake .panda-snout-wrap::after,
.game-match-card.state-wrong .panda-snout-wrap::after {
    content: ''; width: 12px; height: 4px; border-top: 2px solid #0F172A; border-radius: 6px 6px 0 0; margin-top: 2px;
}

/* 🦊 灵动红狐 >_< 锐利红眼 + 紧抿嘴 */
.game-match-card.shake .fox-eye.left::before,
.game-match-card.state-wrong .fox-eye.left::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px;
    border-top: 2.8px solid #7F1D1D; border-right: 2.8px solid #7F1D1D; transform: rotate(45deg); border-radius: 1.5px;
}
.game-match-card.shake .fox-eye.right::before,
.game-match-card.state-wrong .fox-eye.right::before {
    content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px;
    border-top: 2.8px solid #7F1D1D; border-left: 2.8px solid #7F1D1D; transform: rotate(-45deg); border-radius: 1.5px;
}
.game-match-card.shake .fox-face-wrap::after,
.game-match-card.state-wrong .fox-face-wrap::after {
    content: ''; width: 12px; height: 4px; border-top: 2px solid #7F1D1D; border-radius: 6px 6px 0 0; margin-top: 1px; z-index: 2;
}

/* 🐷 粉嘟小猪 >_< 闭眼 + 猪鼻微瘪 */
.game-match-card.shake .pig-eyes-row .pig-eye:first-child::before,
.game-match-card.state-wrong .pig-eyes-row .pig-eye:first-child::before {
    content: ''; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px;
    border-top: 2.8px solid #881337; border-right: 2.8px solid #881337; transform: rotate(45deg); border-radius: 1.5px;
}
.game-match-card.shake .pig-eyes-row .pig-eye:last-child::before,
.game-match-card.state-wrong .pig-eyes-row .pig-eye:last-child::before {
    content: ''; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px;
    border-top: 2.8px solid #881337; border-left: 2.8px solid #881337; transform: rotate(-45deg); border-radius: 1.5px;
}
.game-match-card.shake .pig-big-snout,
.game-match-card.state-wrong .pig-big-snout { transform: scale(0.94); }
.game-match-card.shake .pig-face-wrap::after,
.game-match-card.state-wrong .pig-face-wrap::after {
    content: ''; width: 14px; height: 4px; border-top: 2.2px solid #881337; border-radius: 6px 6px 0 0; margin-top: 2px;
}





/* ══════════════════════════════════════════════════════════════════════
   结算弹层 & 错词复盘面板（商业级智能高度自适应版）
   ══════════════════════════════════════════════════════════════════════ */
.game-settle-overlay {
    box-sizing: border-box !important;
    padding: 1.5rem 1rem !important;
}

.game-settle-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 2px solid rgba(251, 191, 36, 0.45);
    border-radius: 2.2rem;
    padding: 1.8rem 1.6rem 1.4rem 1.6rem;
    width: 95%;
    max-width: 640px;
    /* 核心自适应：取消定死高度，由内容自由撑开，最高可占满屏幕 92% */
    height: auto;
    max-height: 92%;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 40px rgba(251, 191, 36, 0.18), inset 0 0 20px rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: settlePopupIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 60;
}

@keyframes settlePopupIn {
    from { opacity: 0; transform: scale(0.8) translateY(30px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 顶部评级与标题行（防挤压） */
.game-settle-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 1rem;
    width: 100%;
    flex-shrink: 0;
}

.game-rank-badge {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #FFF 0%, #FDE047 40%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 16px rgba(251, 191, 36, 0.7));
    letter-spacing: 1px;
    flex-shrink: 0;
}

.game-settle-header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.game-settle-title {
    font-size: var(--font-size-xl2);
    font-weight: 900;
    color: #F8FAFC;
    margin: 0;
    line-height: 1.2;
}

.game-settle-subtitle {
    font-size: var(--font-size-xs);
    color: #94A3B8;
    margin-top: 0.2rem;
}

/* 战绩数据胶囊三列横排（防挤压） */
.game-settle-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    width: 100%;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.game-settle-stat-capsule {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.1rem;
    padding: 0.55rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-settle-stat-label {
    font-size: var(--font-size-xs);
    color: #94A3B8;
    font-weight: 600;
    margin-bottom: 0.2rem;
    white-space: nowrap;
}

.game-settle-stat-val {
    font-size: var(--font-size-xl);
    font-weight: 900;
    color: #FDE047;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* 错词复盘容器（弹性伸缩，解除 380px 固定限制） */
.game-review-box {
    width: 100%;
    /* 核心：flex: 1 1 auto 配合 min-height: 0，随错词数量自由扩展高度 */
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    background: rgba(0, 0, 0, 0.28);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.4rem;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 1.1rem;
    overflow: hidden;
}

.game-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}

.game-review-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #F87171;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.game-review-playall-btn {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #FBBF24;
    border-radius: 2rem;
    padding: 0.3rem 0.9rem;
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.game-review-playall-btn:hover {
    background: rgba(245, 158, 11, 0.3);
}

.game-review-playall-btn.playing {
    background: #DC2626 !important;
    color: #FFF !important;
    border-color: #EF4444 !important;
}

/* 错词列表滚动区（高度随卡片自动撑大，超高时内部丝滑滑动） */
.game-review-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-right: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.game-review-list::-webkit-scrollbar {
    width: 5px;
}
.game-review-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

/* 0 错词完美通关占位（自然紧凑） */
.game-review-perfect {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.6rem 0;
    gap: 0.6rem;
    color: #34D399;
}

.game-review-perfect-icon {
    font-size: 3.2rem;
    line-height: 1;
    filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.6));
    animation: pulseSelected 2s infinite ease-in-out;
}

.game-review-perfect-text {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: #6EE7B7;
    letter-spacing: 0.5px;
}

.game-review-perfect-sub {
    font-size: var(--font-size-xs);
    color: #94A3B8;
}

/* 底部操作按钮（防挤压，紧贴底部） */
.game-settle-footer {
    display: flex;
    flex-direction: row;
    gap: 0.9rem;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
}

.game-settle-btn-again {
    flex: 1.3;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    font-size: var(--font-size-base);
    font-weight: 800;
    border: none;
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.game-settle-btn-again:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

.game-settle-btn-menu {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #CBD5E1;
    font-size: var(--font-size-base);
    font-weight: 700;
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.game-settle-btn-menu:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFF;
    border-color: rgba(255, 255, 255, 0.35);
}

/* 游戏列表中 VIP 与试玩标签 */
.game-badge-tag {
    font-size: var(--font-size-xs);
    padding: 0.2rem 0.6rem;
    border-radius: 0.6rem;
    font-weight: 700;
    margin-left: 0.6rem;
    vertical-align: middle;
}

.game-badge-tag.trial {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.game-badge-tag.vip-only {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.game-item-locked {
    opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════════════
   Typing Shooter Game (极速神射手专属样式：手绘云朵手账风与人体工学键盘)
   ══════════════════════════════════════════════════════════════════════ */

.typing-game-play-overlay {
    user-select: none;
    -webkit-user-select: none;
}

/* 打字 HUD 与欢乐今消完全对齐 */
#typingScoreVal {
    color: #D97706 !important;
}

/* 游戏下落主舞台：通透硫酸纸视窗，云朵在底层自然浮动 */
.typing-playfield {
    width: 100%;
    max-width: 680px;
    flex: 1;
    min-height: 0;
    position: relative;
    background: rgba(255, 252, 248, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid #C48456;
    border-radius: 1.8rem;
    overflow: hidden;
    margin-bottom: 0.9rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(45, 30, 20, 0.1);
    z-index: 2;
}

/* 危险触底激光警戒线：暖杏手绘警示感 */
.typing-danger-line {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.85) 15%, rgba(239, 68, 68, 0.85) 85%, transparent 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
    pointer-events: none;
    z-index: 5;
    animation: dangerLineGlow 1s infinite alternate;
}

@keyframes dangerLineGlow {
    from { opacity: 0.7; filter: brightness(1); }
    to { opacity: 1; filter: brightness(1.3); }
}

/* ── 下落单词手绘便签卡片 ── */
.falling-word-card {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 250, 244, 0.88) !important;
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    border: 2px solid #C48456;
    border-radius: 1.4rem;
    padding: 0.55rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 0 rgba(196, 132, 86, 0.22), 0 8px 18px rgba(30, 41, 59, 0.12);
    transform: translate(-50%, 0);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}

/* 锁定中的便签卡片：金黄马克笔高亮 */
.falling-word-card.is-targeted {
    border-color: #D97706 !important;
    background: rgba(254, 243, 199, 0.95) !important;
    box-shadow: 0 0 0 3px #FBBF24, 0 8px 24px rgba(217, 119, 6, 0.35) !important;
    z-index: 20;
    transform: translate(-50%, 0) scale(1.06);
}

/* 单词字符排版 */
.falling-word-letters {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xl2);
    font-weight: 900;
    letter-spacing: 1.2px;
    line-height: 1.2;
}

.falling-word-letters .letter {
    color: #64748B;
    transition: color 0.1s ease, transform 0.1s ease;
}

/* 已敲对的字母：清新抹茶绿 */
.falling-word-letters .letter.typed {
    color: #059669 !important;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
}

/* 当前光标字母：亮橙色 */
.falling-word-letters .letter.current-cursor {
    color: #D97706 !important;
    text-shadow: 0 0 8px rgba(217, 119, 6, 0.45);
    text-decoration: underline;
    animation: cursorBlink 0.6s infinite alternate;
}

/* 缺失字母占位符 */
.falling-word-letters .letter.blank-hidden {
    color: #E11D48 !important;
    font-weight: 900;
    display: inline-block;
    min-width: 0.8em;
    text-align: center;
}

.falling-word-letters .letter.blank-hidden.typed {
    color: #059669 !important;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
}

@keyframes cursorBlink {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* 中文释义提示：手账深褐墨水色 */
.falling-word-trans {
    font-size: var(--font-size-lg);
    color: var(--brand-blue);
    font-weight: 700;
    margin-top: 0.25rem;
}

/* 单词爆炸消除动画 */
.falling-word-card.destroyed {
    animation: blastDestroy 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes blastDestroy {
    0% { transform: translate(-50%, 0) scale(1.06); filter: brightness(1.5); }
    50% { transform: translate(-50%, -15px) scale(1.3); }
    100% { transform: translate(-50%, -25px) scale(0); opacity: 0; }
}

/* ── 触屏虚拟 QWERTY 键盘（高舒适度大按键 + 正统 QWERTY 布局） ── */
.typing-virtual-keyboard {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: rgba(255, 252, 248, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid #C48456;
    border-radius: 1.8rem;
    padding: 0.9rem 0.6rem;
    box-shadow: 0 4px 0 rgba(196, 132, 86, 0.22), 0 8px 24px rgba(45, 30, 20, 0.12);
    flex-shrink: 0;
    z-index: 10;
    box-sizing: border-box;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
}

.keyboard-row-mid {
    padding: 0 3.2%;
}

.keyboard-row-bot {
    padding: 0 0;
}

.keyboard-spacer {
    flex: 0.55;
    pointer-events: none;
}

/* 按键增高至 56px，触控面积更大更舒适 */
.key-btn {
    flex: 1;
    height: 80px;
    background: #FFFDF9;
    border: 1.5px solid #C48456;
    border-radius: 0.85rem;
    color: #2D1B12;
    font-size: var(--font-size-base);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(196, 132, 86, 0.2), 0 2px 5px rgba(0, 0, 0, 0.04);
    transition: transform 0.08s ease, background 0.1s, border-color 0.1s, box-shadow 0.1s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.key-btn:active, .key-btn.is-pressed {
    transform: translateY(2px) scale(0.96);
    background: #FDE68A !important;
    border-color: #D97706 !important;
    color: #78350F !important;
    box-shadow: 0 1px 0 rgba(196, 132, 86, 0.2) !important;
}

/* DEL 键收纳于右下角，微紧凑柔红设计 */
.key-btn.key-btn-del {
    flex: 1.35;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: #B91C1C !important;
    background: rgba(254, 226, 226, 0.85) !important;
    border-color: #F87171 !important;
    box-shadow: 0 3px 0 rgba(239, 68, 68, 0.22) !important;
}

.key-btn.key-btn-del:active, .key-btn.key-btn-del.is-pressed {
    background: #FCA5A5 !important;
    color: #7F1D1D !important;
}




/* ══════════════════════════════════════════════════════════════════════
   Vocab Snake Eater Game (贪食单词蛇：手账云朵手绘风 + 舒适大人体工学手柄)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 顶部目标中文线索与全息能量卡槽 HUD（居中纯净排版） ── */
.snake-target-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 单词字母卡槽 */
.standard-spell-letters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.standard-spell-char {
    min-width: 2.2rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 900;
    color: #64748B;
    background: #FFFDF9;
    border: 1.5px solid #C48456;
    border-radius: 0.7rem;
    box-shadow: 0 2px 0 rgba(196, 132, 86, 0.2);
    box-sizing: border-box;
    padding: 0 0.3rem;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.standard-spell-char.solved {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    border-color: #047857 !important;
    box-shadow: 0 2px 0 rgba(4, 120, 87, 0.4), 0 0 10px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-2px);
}

.standard-spell-char.next-target {
    color: #B45309 !important;
    border-color: #D97706 !important;
    background: #FEF3C7 !important;
    box-shadow: 0 0 0 2.5px #FBBF24, 0 3px 8px rgba(217, 119, 6, 0.25) !important;
    animation: nextCharPulse 0.9s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nextCharPulse {
    from { transform: scale(0.96); box-shadow: 0 0 0 2px #FBBF24, 0 2px 4px rgba(217, 119, 6, 0.2); }
    to   { transform: scale(1.06); box-shadow: 0 0 0 3.5px #F59E0B, 0 4px 12px rgba(217, 119, 6, 0.45); }
}

/* ── 贪食蛇主舞台容器：通透手账硫酸纸视窗，底层云朵自然透光 ── */
.snake-playfield-wrap {
    width: 100%;
    max-width: 680px;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: rgba(255, 252, 248, 0.32);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid #C48456;
    border-radius: 1.8rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(45, 30, 20, 0.12);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    touch-action: none;
    box-sizing: border-box;
    z-index: 2;
}

.snake-game-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    touch-action: none;
}

/* ── 底部三栏一体化街机面板 ── */
.snake-bottom-arcade-panel {
    width: 100%;
    max-width: 680px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
    padding: 0.2rem 0.2rem 0.3rem 0.2rem;
    flex-shrink: 0;
    box-sizing: border-box;
    z-index: 2;
}

/* 两侧仪表盘列 */
.snake-side-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: center;
}

.snake-side-dashboard.left-dash {
    align-items: flex-start;
}

.snake-side-dashboard.right-dash {
    align-items: flex-end;
}

.snake-dash-card {
    background: rgba(255, 252, 248, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid #C48456;
    border-radius: 16px;
    box-shadow: 0 3px 0 rgba(196, 132, 86, 0.2), 0 4px 10px rgba(45, 30, 20, 0.06);
    box-sizing: border-box;
}

/* 左侧：得分与连击 */
.snake-side-dashboard.left-dash .snake-dash-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    min-width: 105px;
}

.snake-side-dashboard.left-dash .snake-dash-label {
    margin-bottom: 0;
    white-space: nowrap;
}

/* 右侧：生命值 */
.snake-side-dashboard.right-dash .snake-dash-card.hp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    min-width: 105px;
}

.snake-side-dashboard.right-dash .snake-dash-label {
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.snake-dash-label {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
}

.snake-dash-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: #2D1B12;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#snakeScoreVal {
    color: #D97706 !important;
}

.snake-combo-glow {
    color: #DB2777 !important;
}

.hp-hearts {
    color: #EF4444 !important;
    font-size: 1.5rem !important;
    line-height: 1;
}

/* ── 中间 D-Pad 十字方向大按键控制台（触控区域明显扩大） ── */
.snake-dpad-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    touch-action: manipulation;
}

.snake-dpad-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.snake-dpad-center {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(196, 132, 86, 0.12);
    border: 1.5px solid rgba(196, 132, 86, 0.3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.snake-dpad-center::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C48456;
    box-shadow: 0 0 6px rgba(196, 132, 86, 0.5);
}

/* ★ 按键尺寸增大：宽度 78px，高度 54px，触控大幅优化 ★ */
.snake-dpad-btn {
    width: 100px;
    height: 75px;
    background: #FFFDF9;
    border: 2px solid #C48456;
    border-radius: 1.1rem;
    color: #2D1B12;
    font-size: 1.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3.5px 0 rgba(196, 132, 86, 0.22), 0 3px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.08s ease, background 0.1s, border-color 0.1s, box-shadow 0.1s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

.snake-dpad-btn:active, .snake-dpad-btn.is-pressed {
    transform: translateY(2px) scale(0.95);
    background: #FDE68A !important;
    border-color: #D97706 !important;
    color: #78350F !important;
    box-shadow: 0 1.5px 0 rgba(196, 132, 86, 0.22) !important;
}

/* ── 游戏设置子分类区块样式 ── */
.game-settings-subgroup {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.game-settings-subgroup-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: #93C5FD;
    letter-spacing: 0.5px;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.2rem;
}

/* 子分类标题行：左侧标题 + 右侧「导入更多」按钮（窄屏自动折行） */
.game-settings-subgroup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.2rem;
}

/* 标题行内的标题：下边框与间距交由标题行统一管理，避免出现双重分割线 */
.game-settings-subgroup-header .game-settings-subgroup-title {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.game-settings-import-more-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 0.5rem 1.2rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: #A5B4FC;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 0.9rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.game-settings-import-more-btn:hover {
    color: #E0E7FF;
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.6);
}

.game-settings-import-more-btn:active {
    background: rgba(99, 102, 241, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════
   1. 游戏选择列表自适应与空间充分利用（对标 #categoryList 规范）
   ══════════════════════════════════════════════════════════════════════ */
#gameListContainer {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 680px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.4rem 0.2rem 2rem 0.2rem !important;
    box-sizing: border-box !important;
}

#gameListContainer .scene-list-button {
    flex-shrink: 0 !important;
    min-height: 100px !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1.2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#gameListContainer .scene-list-button:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Bridge Builder Game (按需包裹内容货架 + 弹性全景物理视窗)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 目标中文句子 HUD ── */
.standard-target-hud {
    width: 100%;
    max-width: 680px;
    background: rgba(255, 252, 248, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid #C48456;
    border-radius: 1.2rem;
    padding: 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 3px 0 rgba(196, 132, 86, 0.2), 0 4px 12px rgba(45, 30, 20, 0.06);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    min-height: 68px;
}

.standard-target-zh {
    font-size: var(--font-size-xl2);
    font-weight: 600;
    color: var(--brand-blue);
    line-height: 1.25;
    text-align: center;
    letter-spacing: 0.2px;
    word-break: break-word;
	margin-bottom: 0.5rem;
}

/* 已铺设/待铺设英文句子槽位预览 */
.bridge-sentence-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    min-height: 1.8rem;
}

.standard-slot-item {
    font-size: var(--font-size-xl);
    font-weight: 500;
    padding: 0rem 0.5rem;
    border-radius: 0.5rem;
    background: #FFFDF9;
    border: 1.5px dashed #C48456;
    color: var(--gray-500);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.standard-slot-item.placed {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    border: 1.5px solid #047857 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 0 rgba(4, 120, 87, 0.35), 0 0 8px rgba(16, 185, 129, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   游戏四：造桥勇士（100% 还原原版手绘温润纸感风格）
   ══════════════════════════════════════════════════════════════ */

/* ── 2. 悬崖峡谷主视窗：★ 纯弹性剩余空间，随货架展开自由让出高度 ★ ── */
.bridge-playfield-wrap {
    width: 100%;
    max-width: 680px;
    flex: 1 1 0 !important; /* 🌟 纯弹性吸纳：优先让货架完整展开，绝不限制货架 */
    height: auto !important;
    min-height: 100px;
    position: relative;
    background: rgba(255, 252, 248, 0.35);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid #C48456;
    border-radius: 1.6rem;
    overflow: hidden;
    margin-bottom: 0.55rem;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(45, 30, 20, 0.12);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
    z-index: 2;
    touch-action: none;
}

.bridge-game-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    touch-action: none;
}

/* ── 3. 底部木板货架：★ 按需完整撑开，严禁出现任何滚动条 ★ ── */
.bridge-dock {
    width: 100%;
    max-width: 680px;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important; /* 🌟 彻底移除高度上限 */
    background: rgba(255, 252, 248, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid #C48456;
    border-radius: 1.5rem;
    padding: 0.65rem;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(54px, auto) !important;
    align-items: stretch !important;
    gap: 0.55rem 0.65rem;
    box-shadow: 0 4px 0 rgba(196, 132, 86, 0.22), 0 6px 18px rgba(45, 30, 20, 0.08);
    box-sizing: border-box;
    z-index: 10;
    overflow: visible !important;
    overflow-y: hidden !important; /* 🌟 坚决禁止出现滚动条 */
}

/* 木板词块按钮 */
.bridge-plank-btn {
    background: #FFFDF9;
    border: 2px solid var(--plank-stroke, #C48456);
    border-radius: 1.1rem;
    min-height: 54px !important;
    height: 100% !important;
    padding: 0.4rem 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3.5px 0 var(--plank-shadow, rgba(196, 132, 86, 0.22)), 0 2px 6px rgba(0,0,0,0.04);
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, border-color 0.15s, opacity 0.2s;
    position: relative;
    box-sizing: border-box;
    overflow: hidden !important;
}

.bridge-plank-btn .plank-text {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--font-size-xl, 2.15rem);
    font-weight: 700 !important;
    color: #2D1B12;
    line-height: 1.16 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 2px;
    box-sizing: border-box;
    pointer-events: none;
}

.bridge-plank-btn:active {
    transform: translateY(2px) scale(0.97);
    background: #FEF3C7 !important;
    border-color: #D97706 !important;
    box-shadow: 0 1px 0 var(--plank-shadow, rgba(196, 132, 86, 0.22)) !important;
}

.bridge-plank-btn.is-placed {
    opacity: 0.2;
    pointer-events: none;
    filter: grayscale(80%);
    transform: scale(0.95);
    box-shadow: none !important;
}

.bridge-plank-btn.shake-error {
    animation: plankShakeAnim 0.35s ease-in-out both;
    border-color: #EF4444 !important;
    background: rgba(254, 226, 226, 0.9) !important;
    box-shadow: 0 0 0 3px #FCA5A5, 0 4px 8px rgba(239, 68, 68, 0.25) !important;
}

@keyframes plankShakeAnim {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px) rotate(-2deg); }
    40%, 80% { transform: translateX(6px) rotate(2deg); }
}

/* ══════════════════════════════════════════════════════════════════════
   Jelly Devourer Game (吞噬啫喱专属样式：手绘纸感与自适应物理视窗)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 词库慢速轮播跑马灯（GPU 零负载优化版） ── */
.blob-marquee-wrap {
    width: 100%;
    max-width: 680px;
    background: rgb(241 227 208 / 96%);
    border: 2px solid #C48456;
    border-radius: 14px;
    padding: 0.45rem 0.8rem;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    box-shadow: 0 3px 0 rgba(196, 132, 86, 0.2), 0 4px 10px rgba(45, 30, 20, 0.06);
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    overflow: hidden;
    contain: paint;
}

/* 纯 CSS 两侧边缘淡化遮罩，替代昂贵的 -webkit-mask-image */
.blob-marquee-wrap::before,
.blob-marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 6;
}

.blob-marquee-wrap::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 252, 248, 0.98) 10%, rgba(255, 252, 248, 0) 100%);
}

.blob-marquee-wrap::after {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 252, 248, 0.98) 10%, rgba(255, 252, 248, 0) 100%);
}

.blob-marquee-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.blob-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2.8rem;
    white-space: nowrap;
    will-change: transform;
}

@keyframes blobMarqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.blob-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--font-size-lg);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}

.blob-marquee-item:active {
    transform: scale(0.96);
}

/* 🌟 滚动到跑马灯正中央时：平滑放大聚焦 + 暖金高光 */
.blob-marquee-item.is-center-active {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 8px rgba(217, 119, 6, 0.35));
}

.blob-marquee-item.is-center-active .blob-marquee-word {
    color: #D97706 !important;
    text-shadow: 0 0 10px rgba(217, 119, 6, 0.3);
}

.blob-marquee-item.is-center-active .blob-marquee-trans {
    background: #FEF3C7 !important;
    color: #78350F !important;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.25);
}

.blob-marquee-word {
    font-weight: 800;
    color: #2D1B12;
    letter-spacing: 0.3px;
}

.blob-marquee-trans {
    font-weight: 500;
    color: #508BBD;
    background: rgba(226, 237, 248, 0.85);
    padding: 0.1rem 0.55rem;
    border-radius: 6px;
}

/* ── 2. 主物理视窗（高质感直绘底色，消除模糊层） ── */
.blob-playfield-wrap {
    width: 100%;
    max-width: 680px;
    flex: 1 1 0 !important;
    min-height: 220px;
    position: relative;
    background: linear-gradient(180deg, #D4ECF9 0%, #BFE1F4 45%, #9DCFEA 100%);
    border: 2px solid #C48456;
    border-radius: 1.8rem;
    overflow: hidden;
    margin-bottom: 0.55rem;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(45, 30, 20, 0.12);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
    z-index: 2;
    touch-action: none;
    cursor: crosshair;
}

.blob-game-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    touch-action: none;
}

/* ── 3. HUD「下一个」果冻预览微型画布 ── */
.blob-next-preview-canvas {
    width: 28px !important;
    height: 28px !important;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* ── 4. 底部操控栏（复用全站统一手绘纸感大按键样式） ── */
.blob-bottom-controls {
    width: 100%;
    max-width: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem 0.9rem;
    padding: 0.1rem 0.2rem 0.3rem;
    flex-shrink: 0;
    box-sizing: border-box;
    z-index: 5;
}

.blob-ctrl-btn {
    background: #FFFDF9;
    border: 2px solid #C48456;
    border-radius: 14px;
    padding: 0.45rem 1.25rem;
    font-size: var(--font-size-base, 1.4rem);
    font-weight: 400;
    color: #2D1B12;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(196, 132, 86, 0.22), 0 3px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.08s ease, background 0.1s, border-color 0.1s, box-shadow 0.1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

.blob-guide-tip {
    font-size: var(--font-size-xs, 1.2rem);
    font-weight: 600;
    color: #FFFDF9;
    text-shadow: 0 1px 2px rgba(45, 30, 20, 0.5);
    width: 100%;
    text-align: center;
    letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════════════════════════════════
   吞噬啫喱双 HUD 胶囊：两端向中间靠拢（保持原有固定宽度，不横向拉伸）
   ══════════════════════════════════════════════════════════════════════ */
#blobGamePlayModal .game-hud-row {
    justify-content: center !important;
    gap: 1.6rem !important;
}

#blobGamePlayModal .game-hud-stat {
    flex: 0 1 210px !important;
    width: 210px !important;
    max-width: 220px !important;
}




/* ===== 全屏游戏 iframe 容器统一规范（与 Directions_and_Positions 完全一致，同高同宽无多余留白） ===== */
#directionsGamePlayModal,
#questionFormsGamePlayModal,
#phrasalVerbsGamePlayModal,
#conjunctionStoriesGamePlayModal {
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    background: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: inherit;
}
#directionsGamePlayModal > iframe,
#questionFormsGamePlayModal > iframe,
#phrasalVerbsGamePlayModal > iframe,
#conjunctionStoriesGamePlayModal > iframe {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}