/* ==========================================================================
   《数灵守卫战：守卫兔子与青蛙》- 保卫萝卜（Carrot Fantasy）风格超萌设计系统
   特点：明亮阳光草坪色、厚边立体果冻按钮、木牌悬挂、气泡弹出交互、小黑板
   ========================================================================== */

:root {
    /* 保卫萝卜经典明亮色调 */
    --c-bg-sky: #70a1ff;
    --c-grass: #2ed573;
    --c-grass-light: #7bed9f;
    --c-carrot-orange: #ff793f;
    --c-carrot-deep: #e15f41;
    --c-banana-yellow: #fed330;
    --c-banana-shadow: #f7b731;
    --c-watermelon-pink: #ff4757;
    --c-wood-brown: #795548;
    --c-wood-deep: #4e342e;
    --c-wood-light: #a1887f;
    --c-slate-chalkboard: #2c3e50;
    
    --font-bubble: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-bubble);
}

html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

body {
    background: linear-gradient(180deg, #74b9ff 0%, #a8e6cf 40%, #1dd1a1 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    overflow-x: hidden;
    color: #2d3436;
}

#game-app {
    width: 100%;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ================= 1. 顶部原木横梁 HUD (纯正、无重影车祸) ================= */
.carrot-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #936746 0%, #6d4c41 50%, #543932 100%);
    border: 4px solid #3e2723;
    border-radius: 24px;
    padding: 10px 24px;
    box-shadow: 
        0 6px 0 #2d1810,
        0 14px 28px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -3px 0 rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 20;
    min-height: 68px;
}

.hud-left-group, .hud-right-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 金币与爱心胶囊药丸 (纯正果冻质感) */
.hud-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 3.5px solid #4e342e;
    border-radius: 30px;
    padding: 6px 18px;
    box-shadow: 
        0 4px 0 #3e2723,
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 900;
}

.hud-pill-gold {
    background: #fff9e6;
    border-color: #b7791f;
    color: #d48806;
    box-shadow: 0 4px 0 #8c5b14;
}

.hud-pill-lives {
    background: #fff0f3;
    border-color: #c0392b;
    color: #e84118;
    box-shadow: 0 4px 0 #8c2525;
}

.hud-val-text {
    font-size: 22px;
    font-weight: 900;
}

/* 保卫萝卜水银波次进度条 */
.syringe-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 440px;
    justify-content: center;
}

.syringe-tube {
    flex: 1;
    height: 22px;
    background: rgba(0, 0, 0, 0.35);
    border: 3.5px solid #3e2723;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.5), 0 2px 0 rgba(255, 255, 255, 0.2);
}

.syringe-fluid {
    height: 100%;
    width: 10%;
    background: linear-gradient(180deg, #2ed573 0%, #10ac84 100%);
    box-shadow: 0 0 12px #2ed573, inset 0 2px 0 rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-pill-wave-capsule {
    background: linear-gradient(180deg, #ff9f43 0%, #ee5253 100%);
    border: 3.5px solid #3e2723;
    border-radius: 30px;
    padding: 5px 16px;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    box-shadow: 0 4px 0 #3e2723;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 连击跳动勋章 */
.combo-badge {
    display: none;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #fff;
    border: 3px solid #b33939;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 4px 0 #8c2525;
    animation: jellyHop 0.8s infinite alternate ease-in-out;
}

.combo-badge.active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@keyframes jellyHop {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.08) translateY(-4px); }
}

/* 木桩旋钮按钮 */
.btn-jelly-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fffa65 0%, #ffaf40 100%);
    border: 3px solid #4e342e;
    box-shadow: 
        0 4px 0 #4e342e,
        inset 0 2px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-jelly-circle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #4e342e;
}

.btn-jelly-circle:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #4e342e;
}

/* 胶囊果冻药丸按钮 (网格开关等) */
.btn-jelly-pill {
    padding: 6px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, #1dd1a1 0%, #10ac84 100%);
    border: 3px solid #0652dd;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 
        0 4px 0 #0652dd,
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-jelly-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #0652dd;
}

.btn-jelly-pill:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #0652dd;
}

.btn-jelly-pill-level {
    background: linear-gradient(180deg, #ff9f43 0%, #ee5253 100%);
    border: 3px solid #b33939;
    box-shadow: 0 4px 0 #8c2525, inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.btn-jelly-pill-level:hover {
    box-shadow: 0 6px 0 #8c2525;
}

.btn-jelly-pill-level:active {
    box-shadow: 0 1px 0 #8c2525;
}

/* 关卡挑选芯片组 */
.level-chip-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 16px 0;
}

.level-chip-btn {
    padding: 8px 18px;
    border-radius: 20px;
    background: #f1f2f6;
    border: 2.5px solid #ced6e0;
    color: #2f3542;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}

.level-chip-btn:hover {
    background: #dfe4ea;
    transform: translateY(-1px);
}

.level-chip-btn.selected {
    background: linear-gradient(180deg, #00d2d3 0%, #0984e3 100%);
    border-color: #0652dd;
    color: #fff;
    box-shadow: 0 4px 0 #0652dd;
}

/* ================= 2. 游戏主体分栏 (iPad 无论是横屏还是竖屏，始终保持左画布、右键盘并排！) ================= */
.main-stage {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 340px);
    gap: 12px;
    align-items: start;
    margin-top: 10px;
}

/* 仅在手机小屏幕 (宽 <= 680px) 下才纵向折叠 */
@media (max-width: 680px) {
    .main-stage {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 14px;
    }
}

/* 战区外壳 */
.battlefield-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.canvas-container {
    position: relative;
    width: 100%;
    aspect-ratio: 960 / 560;
    border-radius: 24px;
    border: 6px solid #4e342e;
    overflow: hidden;
    box-shadow: 
        0 8px 0 #3e2723,
        0 16px 36px rgba(0, 0, 0, 0.3);
    background: #55efc4;
}

canvas#battleCanvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    touch-action: none; /* 彻底阻止 iPad 上拖拽画布引起的网页弹性回弹与视口缩放 */
}

/* 波次备战挂牌 */
.wave-banner {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 3px solid #4e342e;
    border-radius: 30px;
    padding: 6px 18px;
    box-shadow: 0 5px 0 #4e342e;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 800;
    z-index: 10;
}

.btn-carrot-start {
    background: linear-gradient(180deg, #ff9f43 0%, #ee5253 100%);
    border: 2px solid #b33939;
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    padding: 5px 14px;
    border-radius: 20px;
    box-shadow: 0 3px 0 #8c2525;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.btn-carrot-start:hover {
    transform: scale(1.05);
}

.btn-carrot-start:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #8c2525;
}

/* ================= 3. 保卫萝卜经典【就地弹出气泡建塔菜单】 ================= */
.bubble-picker {
    position: absolute;
    z-index: 30;
    display: none;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    animation: bubblePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bubble-picker.active {
    display: flex;
}

@keyframes bubblePop {
    from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* 环绕基座的圆形气泡群 */
.bubble-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 460px;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 3.5px solid #4e342e;
    border-radius: 36px;
    padding: 8px 14px;
    box-shadow: 0 6px 0 #4e342e, 0 10px 25px rgba(0, 0, 0, 0.25);
}

.tower-bubble-btn {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    position: relative;
    padding: 0;
    transition: transform 0.12s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tower-bubble-btn:hover {
    transform: translateY(-4px) scale(1.12);
}

.tower-bubble-btn:active {
    transform: translateY(2px) scale(0.96);
}

.tower-bubble-btn.disabled {
    opacity: 0.45;
    filter: grayscale(0.85);
    cursor: not-allowed;
    transform: none !important;
}

.bubble-tower-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.bubble-cost {
    position: absolute;
    bottom: -3px;
    background: #ff4757;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1.5px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

/* 升级与出售悬浮气泡 */
.tower-manage-bubbles {
    position: absolute;
    z-index: 30;
    display: none;
    transform: translate(-50%, -50%);
    gap: 12px;
    animation: bubblePop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tower-manage-bubbles.active {
    display: flex;
}

.manage-bubble-btn {
    border: 3.5px solid #4e342e;
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 0 #4e342e;
    transition: transform 0.1s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-upgrade-bubble {
    background: linear-gradient(180deg, #2ed573 0%, #10ac84 100%);
    color: #fff;
}

.btn-upgrade-bubble:hover {
    transform: translateY(-2px);
}

.btn-sell-bubble {
    background: linear-gradient(180deg, #ff7675 0%, #d63031 100%);
    color: #fff;
}

.btn-sell-bubble:hover {
    transform: translateY(-2px);
}

/* ================= 4. 右侧：保卫萝卜风【森林小黑板算术法阵】 ================= */
.chalkboard-card {
    background: #34495e;
    border: 7px solid #8d6e63;
    border-radius: 24px;
    box-shadow: 
        0 6px 0 #5d4037,
        0 12px 26px rgba(0, 0, 0, 0.35),
        inset 0 0 25px rgba(0, 0, 0, 0.5);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 锁定怪物弱点时的警报集火呼吸光环 */
.chalkboard-card.targeting-enemy {
    border-color: #ff4757;
    animation: chalkboardTargetPulse 1.2s ease-in-out infinite alternate;
}

@keyframes chalkboardTargetPulse {
    from {
        box-shadow: 
            0 8px 0 #b33939,
            0 0 20px rgba(255, 71, 87, 0.65),
            inset 0 0 30px rgba(255, 71, 87, 0.25);
    }
    to {
        box-shadow: 
            0 8px 0 #b33939,
            0 0 35px rgba(255, 71, 87, 0.95),
            inset 0 0 45px rgba(255, 71, 87, 0.45);
    }
}

/* 小动物探头助教 */
.chalkboard-mascots {
    position: absolute;
    top: -38px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.mascot-peep {
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.mascot-emoji {
    font-size: 32px;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
    animation: peepBounce 2s infinite alternate ease-in-out;
}

.frog-peep .mascot-emoji {
    animation-delay: 1s;
}

@keyframes peepBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

.mascot-talk {
    background: #fff;
    border: 2px solid #4e342e;
    border-radius: 14px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 800;
    color: #2d3436;
    box-shadow: 0 2px 0 #4e342e;
    white-space: nowrap;
}

/* 黑板内部题板 */
.blackboard-inner {
    background: #2c3e50;
    border: 2.5px dashed rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 8px 10px;
    text-align: center;
    color: #fff;
}

.bb-hint {
    font-size: 12px;
    color: #f1c40f;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.bb-formula {
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* 答案输入行 (iPad 专属防键盘弹出、防文本选择) */
.bb-answer-box {
    display: flex;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.bb-input {
    flex: 1;
    min-width: 0;
    width: 0;
    box-sizing: border-box;
    background: #ffffff;
    border: 3px solid #4e342e;
    border-radius: 14px;
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    color: #2d3436;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.1);
    outline: none;
    cursor: default;
    caret-color: transparent; /* 彻底隐去光标，杜绝 iOS Safari 闪烁光标与放大镜 */
    user-select: none;
    -webkit-user-select: none;
}

.bb-input:focus {
    border-color: #ff9f43;
    box-shadow: 0 0 10px rgba(255, 159, 67, 0.5);
}

.bb-btn-confirm {
    flex-shrink: 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, #ff9f43 0%, #ee5253 100%);
    border: 3px solid #4e342e;
    border-radius: 14px;
    padding: 0 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 0 #4e342e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.bb-btn-confirm:hover {
    transform: translateY(-1px);
}

.bb-btn-confirm:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #4e342e;
}

/* 反馈气泡 */
.bb-feedback {
    min-height: 18px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    color: #f1c40f;
}

.bb-feedback.correct {
    color: #2ecc71;
}

.bb-feedback.wrong {
    color: #ff7675;
}

/* 彩色饼干/果冻虚拟大按键 (触屏 0 延迟响应与大触控区域) */
.cookie-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.cookie-key {
    background: linear-gradient(180deg, #ffffff 0%, #f1f2f6 100%);
    border: 2.5px solid #4e342e;
    border-radius: 12px;
    padding: 8px 0;
    font-size: 20px;
    font-weight: 900;
    color: #2f3542;
    cursor: pointer;
    box-shadow: 0 3px 0 #4e342e;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.cookie-key:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 #4e342e;
}

.cookie-key:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #4e342e;
    background: #fed330;
}

.cookie-key-action {
    background: linear-gradient(180deg, #dfe4ea 0%, #ced6e0 100%);
    font-size: 14px;
    color: #57606f;
}

/* 底部提示卡片 */
.bb-tips-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 11px;
    color: #dfe4ea;
    line-height: 1.35;
    font-weight: 600;
}

/* ================= 5. 保卫萝卜风格模态弹窗 ================= */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.carrot-modal-card {
    background: #fff;
    border: 8px solid #8d6e63;
    border-radius: 32px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30px 24px;
    box-shadow: 
        0 10px 0 #5d4037,
        0 24px 50px rgba(0, 0, 0, 0.4);
    text-align: center;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.show .carrot-modal-card {
    transform: scale(1);
}

.modal-badge-title {
    display: inline-block;
    background: linear-gradient(180deg, #ff9f43 0%, #ee5253 100%);
    border: 4px solid #4e342e;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    padding: 6px 24px;
    border-radius: 30px;
    box-shadow: 0 5px 0 #4e342e;
    margin-top: -50px;
    margin-bottom: 16px;
}

.modal-desc {
    font-size: 15px;
    color: #636e72;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 20px;
}

/* 难度选择果冻卡 */
.diff-jelly-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.diff-jelly-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border: 3.5px solid #4e342e;
    border-radius: 18px;
    padding: 12px 18px;
    cursor: pointer;
    box-shadow: 0 4px 0 #4e342e;
    transition: transform 0.12s ease;
    text-align: left;
}

.diff-jelly-card:hover {
    transform: translateY(-2px);
    background: #fff;
}

.diff-jelly-card.selected {
    background: #fff9e6;
    border-color: #ff9f43;
    box-shadow: 0 4px 0 #d48806;
}

.diff-title {
    font-size: 16px;
    font-weight: 900;
    color: #2d3436;
}

.diff-sub {
    font-size: 12px;
    color: #747d8c;
    font-weight: 700;
    margin-top: 2px;
}

.btn-big-carrot {
    width: 100%;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, #2ed573 0%, #10ac84 100%);
    border: 4px solid #4e342e;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 0 #4e342e;
    transition: transform 0.1s ease;
}

.btn-big-carrot:hover {
    transform: translateY(-2px);
}

.btn-big-carrot:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #4e342e;
}

/* 战报统计 */
.stats-wood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.wood-box {
    background: #fff9e6;
    border: 3px solid #4e342e;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 3px 0 #4e342e;
}

.wood-label {
    font-size: 12px;
    color: #747d8c;
    font-weight: 700;
}

.wood-val {
    font-size: 22px;
    font-weight: 900;
    color: #ff793f;
    margin-top: 2px;
}

/* ================= 6. 第一章 12 关卡选择弹窗面板 ================= */
.level-modal-card {
    max-width: 720px !important;
    padding: 30px 24px 24px 24px !important;
}

.btn-close-modal {
    position: absolute;
    top: 14px;
    right: 18px;
    background: #ff4757;
    color: #fff;
    border: 3px solid #4e342e;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 3px 0 #4e342e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
}

.btn-close-modal:hover {
    transform: scale(1.1);
}

.btn-close-modal:active {
    transform: translateY(2px);
}

.level-select-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px 4px 12px 4px;
}

.level-grid-item {
    background: #f8f9fa;
    border: 3.5px solid #4e342e;
    border-radius: 18px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 0 #4e342e;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    text-align: center;
    position: relative;
}

.level-grid-item:hover {
    transform: translateY(-3px) scale(1.03);
    background: #fff;
    box-shadow: 0 6px 0 #4e342e;
}

.level-grid-item.active {
    background: #fff9e6;
    border-color: #ff9f43;
    box-shadow: 0 4px 0 #d48806;
}

.level-grid-num {
    font-size: 13px;
    font-weight: 900;
    color: #0984e3;
    margin-bottom: 2px;
}

.level-grid-name {
    font-size: 14px;
    font-weight: 900;
    color: #2d3436;
    line-height: 1.25;
    margin-bottom: 6px;
}

.level-grid-waves {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #2ed573;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1.5px solid #10ac84;
}

.level-grid-item.boss-level .level-grid-waves {
    background: #ff4757;
    border-color: #c0392b;
}

/* 起始弹窗中的关卡快捷卡片 */
.level-current-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff9e6;
    border: 3.5px solid #4e342e;
    border-radius: 18px;
    padding: 10px 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 0 #4e342e;
}

.level-current-title {
    font-size: 15px;
    font-weight: 900;
    color: #2d3436;
}

.btn-change-level {
    background: linear-gradient(180deg, #00d2d3 0%, #0984e3 100%);
    border: 2.5px solid #4e342e;
    color: #fff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 3px 0 #4e342e;
    transition: transform 0.1s ease;
}

.btn-change-level:hover {
    transform: translateY(-2px);
}

/* ==========================================================
   地图可视化编辑器 (In-Game Level Editor) 样式系统
   ========================================================== */

/* 顶部 HUD 编辑入口按钮 (支持紧凑圆形与药丸形) */
.btn-jelly-editor, .btn-jelly-editor-circle {
    background: linear-gradient(180deg, #fdcb6e 0%, #e17055 100%) !important;
    border-color: #4e342e !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.btn-jelly-editor.active, .btn-jelly-editor-circle.active {
    background: linear-gradient(180deg, #ff7675 0%, #d63031 100%) !important;
    animation: editorPulse 1.6s infinite alternate ease-in-out;
}

@keyframes editorPulse {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.04); filter: brightness(1.12); }
}

/* 画布正下方专属编辑控制台 (独立底栏，100% 不遮挡任何画布网格与路线) */
.editor-toolbar {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: none; /* 平时完全隐藏，不占空间 */
    align-items: center;
    gap: 10px;
    background: #2d3436;
    border: 4px solid #4e342e;
    border-radius: 20px;
    padding: 10px 16px;
    box-shadow: 0 6px 0 #1e272e, 0 10px 24px rgba(0, 0, 0, 0.35);
    user-select: none;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 4px;
    z-index: 50;
}

.editor-toolbar.active {
    display: flex;
    animation: slideDownEditor 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideDownEditor {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.editor-tool-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editor-label {
    font-size: 12px;
    font-weight: 900;
    color: #fffa65;
    white-space: nowrap;
    margin-right: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.editor-sep {
    width: 2px;
    height: 24px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 1px;
    margin: 0 2px;
}

/* 编辑器小药丸按钮 */
.editor-pill-btn {
    background: #34495e;
    border: 2px solid #7f8c8d;
    border-radius: 16px;
    color: #ecf0f1;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 11px;
    cursor: pointer;
    box-shadow: 0 2px 0 #1e272e;
    transition: all 0.12s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.editor-pill-btn:hover {
    background: #4b6584;
    border-color: #f1c40f;
    transform: translateY(-1.5px);
    color: #fff;
}

.editor-pill-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* 激活工具状态 */
.editor-pill-btn.active {
    background: linear-gradient(180deg, #f39c12 0%, #d35400 100%);
    border-color: #f1c40f;
    color: #fff;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.7);
    font-weight: 900;
}

/* 特色动作按钮色彩 */
.btn-save-action {
    background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
    border-color: #1abc9c;
    color: #fff;
}
.btn-save-action:hover {
    background: linear-gradient(180deg, #27ae60 0%, #2ecc71 100%);
}

.btn-sync-action {
    background: linear-gradient(180deg, #00cec9 0%, #0984e3 100%);
    border-color: #81ecec;
    color: #fff;
}
.btn-sync-action:hover {
    background: linear-gradient(180deg, #0984e3 0%, #00cec9 100%);
}

.btn-export-action {
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    border-color: #74b9ff;
    color: #fff;
}
.btn-export-action:hover {
    background: linear-gradient(180deg, #2980b9 0%, #3498db 100%);
}

.btn-danger-action {
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border-color: #ff7675;
    color: #fff;
}
.btn-danger-action:hover {
    background: linear-gradient(180deg, #c0392b 0%, #e74c3c 100%);
}

.btn-play-action {
    background: linear-gradient(180deg, #9b59b6 0%, #8e44ad 100%);
    border-color: #a29bfe;
    color: #fff;
}
.btn-play-action:hover {
    background: linear-gradient(180deg, #8e44ad 0%, #9b59b6 100%);
}

/* 编辑器气泡悬浮提示 (Toast) */
.editor-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    background: rgba(45, 52, 54, 0.95);
    backdrop-filter: blur(6px);
    color: #fffa65;
    border: 2px solid #f1c40f;
    border-radius: 20px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
    z-index: 1000;
}

.editor-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 导出代码弹窗专属样式 */
.export-modal-card {
    max-width: 680px;
    width: 90%;
}

.export-code-box {
    width: 100%;
    height: 240px;
    background: #1e272e;
    color: #00d2d3;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px;
    border-radius: 12px;
    border: 3px solid #4e342e;
    box-sizing: border-box;
    resize: none;
    margin: 12px 0;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* 武器选择多选框布局 */
.towers-modal-card {
    max-width: 520px;
    width: 90%;
}

.towers-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.tower-chk-label {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    border: 3px solid #4e342e;
    border-radius: 16px;
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: 0 3px 0 #4e342e;
    transition: transform 0.1s ease, background 0.1s ease;
    font-weight: 800;
    font-size: 14px;
    color: #2d3436;
    user-select: none;
}

.tower-chk-label:hover {
    background: #fff;
    transform: translateY(-2px);
}

.tower-chk-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2ed573;
}

.tower-chk-label .chk-emoji {
    font-size: 22px;
}

/* ==========================================================================
   小朋友用户档案与心算难度定制体系样式 (保卫萝卜萌系风格)
   ========================================================================== */

/* 顶部 HUD 小朋友名片胶囊 */
.btn-jelly-user {
    background: linear-gradient(180deg, #fff275 0%, #ff9f1a 100%);
    border: 2px solid #4a2c10;
    box-shadow: 0 3px 0 #4a2c10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-jelly-user:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #4a2c10;
}

.btn-jelly-user:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #4a2c10;
}

.btn-jelly-user .user-avatar-emoji {
    font-size: 20px;
    line-height: 1;
}

.btn-jelly-user .user-name-text {
    font-size: 15px;
    font-weight: 900;
    color: #3b1d03;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-jelly-user .hud-gear-icon {
    font-size: 13px;
    opacity: 0.85;
}

/* 开始弹窗中的出战档案展示卡 */
.start-kid-card {
    background: #fff;
    border: 3px solid #573d1c;
    border-radius: 18px;
    padding: 10px 16px;
    margin: 10px 0 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 0 #573d1c;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.start-kid-card:hover {
    background: #fffbe6;
    transform: translateY(-2px);
}

.start-kid-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.start-kid-avatar {
    font-size: 30px;
    background: #ffeaa7;
    border-radius: 50%;
    padding: 3px 6px;
    border: 2px solid #573d1c;
    line-height: 1.2;
}

.start-kid-meta {
    text-align: left;
}

.start-kid-name {
    font-size: 15px;
    font-weight: 900;
    color: #2d3436;
}

.start-kid-diff {
    font-size: 12px;
    font-weight: 800;
    color: #e67e22;
    margin-top: 2px;
}

.btn-kid-edit-gear {
    background: linear-gradient(180deg, #fdcb6e 0%, #e17055 100%);
    border: 2px solid #573d1c;
    border-radius: 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 12px;
    cursor: pointer;
    box-shadow: 0 2px 0 #573d1c;
}

/* 档案与心算难度模态弹窗 */
.profile-modal-card {
    max-width: 580px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
}

.profile-kid-card {
    background: #fff8e7;
    border: 3px solid #573d1c;
    border-radius: 18px;
    padding: 12px 16px;
    margin-bottom: 12px;
    text-align: left;
    box-shadow: 0 3px 0 #573d1c;
}

.profile-row-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-label {
    font-size: 14px;
    font-weight: 900;
    color: #4a2c10;
    min-width: 95px;
}

.profile-name-input {
    background: #fff;
    border: 2px solid #573d1c;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 800;
    color: #2d3436;
    width: 170px;
    outline: none;
    transition: border-color 0.2s;
}

.profile-name-input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 0 3px rgba(0, 206, 201, 0.2);
}

.avatar-select-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.avatar-chip {
    font-size: 24px;
    padding: 5px 8px;
    border: 2px solid #573d1c;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
    user-select: none;
}

.avatar-chip:hover {
    transform: scale(1.1);
}

.avatar-chip.selected {
    background: #fdcb6e;
    transform: scale(1.15);
    box-shadow: 0 0 0 3px #e17055;
}

/* 选项卡切换 */
.profile-tab-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.profile-tab-btn {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #573d1c;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 900;
    background: #dfe6e9;
    color: #636e72;
    cursor: pointer;
    transition: all 0.15s ease;
}

.profile-tab-btn.active {
    background: linear-gradient(180deg, #ffeaa7 0%, #fdcb6e 100%);
    color: #2d3436;
    border-color: #573d1c;
    box-shadow: 0 3px 0 #573d1c;
}

.setting-block {
    background: #fdfdfd;
    border: 2px dashed #b2bec3;
    border-radius: 16px;
    padding: 10px 14px;
    margin-bottom: 10px;
    text-align: left;
}

.setting-title {
    font-size: 13px;
    font-weight: 900;
    color: #2d3436;
    margin-bottom: 8px;
}

/* 运算类型选择 */
.ops-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.op-checkbox-label {
    display: block;
    cursor: pointer;
    user-select: none;
}

.op-checkbox-label input {
    display: none;
}

.op-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 2px solid #573d1c;
    border-radius: 14px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 900;
    color: #2d3436;
    box-shadow: 0 2px 0 #573d1c;
    transition: all 0.12s ease;
}

.op-symbol {
    font-size: 18px;
}

.op-checkbox-label input:checked + .op-box {
    background: linear-gradient(180deg, #dff9fb 0%, #c7ecee 100%);
    border-color: #0984e3;
    box-shadow: 0 0 0 2px #0984e3;
    color: #0984e3;
    transform: translateY(-2px);
}

/* 数值范围单选 */
.ranges-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.range-chip {
    padding: 6px 14px;
    border: 2px solid #573d1c;
    border-radius: 14px;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    color: #2d3436;
    cursor: pointer;
    box-shadow: 0 2px 0 #573d1c;
    transition: all 0.12s ease;
    user-select: none;
}

.range-chip:hover {
    transform: translateY(-1px);
}

.range-chip.selected {
    background: linear-gradient(180deg, #55efc4 0%, #00b894 100%);
    color: #fff;
    border-color: #008f68;
    box-shadow: 0 3px 0 #008f68;
}

/* 启发选项 */
.extra-toggles-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toggle-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #b2bec3;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
    color: #2d3436;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s;
}

.toggle-option-label input {
    width: 17px;
    height: 17px;
    accent-color: #0984e3;
    cursor: pointer;
}

.toggle-option-label:hover {
    border-color: #573d1c;
}

/* 预设卡片 */
.preset-grade-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preset-card-item {
    background: #fff;
    border: 2px solid #573d1c;
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 3px 0 #573d1c;
    text-align: left;
    transition: all 0.12s ease;
}

.preset-card-item:hover {
    background: #fffbe6;
    transform: translateY(-2px);
}

.preset-card-item.selected {
    background: linear-gradient(180deg, #fff5d7 0%, #ffeaa7 100%);
    border-color: #e17055;
    box-shadow: 0 0 0 2px #e17055;
}

.preset-card-title {
    font-size: 15px;
    font-weight: 900;
    color: #2d3436;
}

.preset-card-desc {
    font-size: 12px;
    font-weight: 700;
    color: #636e72;
    margin-top: 2px;
}

/* 确保档案弹窗在所有界面之上 (z-index 220, 高于开始弹窗与选关弹窗) */
#userProfileModal {
    z-index: 220 !important;
}

#userProfileModal.show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 小朋友列表与快捷切换栏 */
.kid-profiles-bar-wrapper {
    background: #f1f2f6;
    border: 2px solid #573d1c;
    border-radius: 18px;
    padding: 10px 14px;
    margin-bottom: 12px;
    text-align: left;
}

.kid-profiles-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.kid-bar-title {
    font-size: 13px;
    font-weight: 900;
    color: #2d3436;
}

.btn-add-kid-pill {
    background: linear-gradient(180deg, #55efc4 0%, #00b894 100%);
    border: 2px solid #008f68;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 12px;
    cursor: pointer;
    box-shadow: 0 2px 0 #008f68;
    transition: all 0.12s ease;
}

.btn-add-kid-pill:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 3px 0 #008f68;
}

.kid-profiles-chips-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kid-profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 2px solid #b2bec3;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 900;
    color: #2d3436;
    cursor: pointer;
    box-shadow: 0 2px 0 #b2bec3;
    transition: all 0.12s ease;
    user-select: none;
}

.kid-profile-tab:hover {
    border-color: #573d1c;
    transform: translateY(-1px);
}

.kid-profile-tab.active {
    background: linear-gradient(180deg, #fff5d7 0%, #ffeaa7 100%);
    border-color: #e17055;
    color: #d63031;
    box-shadow: 0 0 0 2px #e17055, 0 3px 0 #b33939;
    transform: scale(1.04);
}

.kid-tab-avatar {
    font-size: 18px;
}

.kid-tab-diff {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1.5px dashed #ffeaa7;
}

.profile-edit-mode-tag {
    font-size: 13px;
    font-weight: 900;
    color: #d63031;
}

.btn-del-kid {
    background: #ff7675;
    border: 1.5px solid #d63031;
    border-radius: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    cursor: pointer;
    box-shadow: 0 2px 0 #b33939;
    transition: all 0.1s ease;
}

.btn-del-kid:hover {
    background: #d63031;
}

/* 黑板底部小朋友档案与难度记录栏 (在下面清晰记录，严格单行不折行) */
.bb-kid-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fffbe6;
    border: 2px solid #573d1c;
    border-radius: 12px;
    padding: 4px 8px;
    margin-top: 6px;
    box-shadow: 0 2px 0 #573d1c;
    cursor: pointer;
    transition: transform 0.12s ease;
    flex-wrap: nowrap;
    overflow: hidden;
}

.bb-kid-footer:hover {
    transform: translateY(-1px);
    background: #fff7cc;
}

.bb-kid-footer-info {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.bb-kid-avatar-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.bb-kid-name-text {
    font-size: 12px;
    font-weight: 900;
    color: #4a2c10;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
    flex-shrink: 0;
}

.bb-kid-diff-tag {
    background: linear-gradient(180deg, #ffeaa7 0%, #fdcb6e 100%);
    border: 1px solid #d68910;
    border-radius: 6px;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 900;
    color: #783800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    display: inline-block;
}

.bb-kid-footer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bb-sync-badge {
    background: #e6fdf6;
    border: 1px solid #00b894;
    border-radius: 6px;
    color: #008f68;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    white-space: nowrap;
}

.btn-bb-kid-gear {
    background: linear-gradient(180deg, #74b9ff 0%, #0984e3 100%);
    border: 1.5px solid #0652dd;
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 0 #0652dd;
}

/* 弹窗底部服务端持久化提示 */
.profile-sync-footer-hint {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #008f68;
    background: #eafaf1;
    border: 1px dashed #2ecc71;
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================= 6. 保卫萝卜原生两级选关系统（大关书本 + 小关卡片） ================= */
.level-select-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 20, 30, 0.88);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.level-select-modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.level-select-container {
    width: 960px;
    max-width: 95vw;
    height: 600px;
    max-height: 94vh;
    background: #1e374b url('../assets/official/select/theme_bg.png') center center / cover no-repeat;
    border: 6px solid #4e342e;
    border-radius: 28px;
    box-shadow: 
        0 10px 0 #3e2723,
        0 20px 50px rgba(0, 0, 0, 0.7);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.level-view-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 24px;
    position: relative;
}

/* 顶部通用导航栏 */
.select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    z-index: 10;
}

.btn-select-nav {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.1s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-select-nav img {
    height: 48px;
    width: auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

.btn-select-nav:hover {
    transform: translateY(-2px);
}

.btn-select-nav:active {
    transform: translateY(2px);
}

.select-title-banner {
    background: linear-gradient(180deg, #ff9f43 0%, #ee5253 100%);
    border: 3.5px solid #4e342e;
    border-radius: 24px;
    padding: 5px 28px;
    box-shadow: 0 4px 0 #4e342e;
}

.select-title-text {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,0.4);
    letter-spacing: 1px;
}

.select-header-placeholder {
    width: 48px;
}

.stage-wave-badge {
    background: linear-gradient(180deg, #2ed573 0%, #10ac84 100%);
    border: 2.5px solid #0652dd;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    padding: 6px 14px;
    box-shadow: 0 3px 0 #0652dd;
}

/* 1. 大关主题翻书区 */
.theme-book-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    position: relative;
}

.btn-carousel-arrow {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-carousel-arrow img {
    width: 68px;
    height: 68px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.55));
    transition: transform 0.15s ease;
}

.btn-carousel-arrow:hover img {
    transform: scale(1.12);
}

.btn-carousel-arrow:active img {
    transform: scale(0.92);
}

.theme-book-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.theme-book-card {
    position: relative;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.theme-book-card:hover {
    transform: translateY(-8px) scale(1.03);
}

.theme-book-cover {
    max-height: 410px;
    width: auto;
    max-width: 490px;
    object-fit: contain;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,0.65));
}

.theme-bookmark-ribbon {
    position: absolute;
    bottom: 4px;
    right: 75px;
    background: linear-gradient(180deg, #ff4757 0%, #e84118 100%);
    border: 2px solid #fff;
    border-top: none;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    padding: 4px 10px 10px 10px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.theme-lock-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.82);
    color: #fed330;
    font-size: 20px;
    font-weight: 900;
    padding: 12px 28px;
    border-radius: 28px;
    border: 3px solid #fed330;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
}

.theme-dots-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.2s;
}

.theme-dot.active {
    background: #fff;
    transform: scale(1.35);
    box-shadow: 0 0 10px #fff;
}

/* 2. 小关卡片 3D 轮播区（原生卡片式画廊，无需多余侧边箭头） */
.stage-carousel-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* 隐藏小关轮播中多余的浮动左右箭头按钮，完全还原原生小关卡片式画廊流 */
.stage-carousel-stage .btn-carousel-arrow {
    display: none !important;
}

.stage-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    perspective: 1200px;
}

.stage-card-spacer {
    width: 80px;
    height: 1px;
    flex-shrink: 0;
    pointer-events: none;
}

.stage-card-item {
    position: relative;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.stage-card-item img {
    max-height: 275px;
    max-width: 385px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55));
}

.stage-card-current {
    transform: scale(1.06);
    z-index: 10;
    opacity: 1;
}

.stage-card-prev, .stage-card-next {
    transform: scale(0.82);
    opacity: 0.5;
}

.stage-card-prev:hover, .stage-card-next:hover {
    opacity: 0.85;
    transform: scale(0.88);
}

.stage-trophy-badge {
    position: absolute;
    bottom: -10px;
    right: 12px;
    z-index: 12;
}

.trophy-carrot-img {
    width: 76px !important;
    height: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)) !important;
    animation: trophyGlow 1.6s infinite alternate ease-in-out;
}

@keyframes trophyGlow {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-4px) scale(1.06); }
}

/* 小关底部阵容与开始按钮 */
.stage-select-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 24px 8px 24px;
}

.stage-towers-preview {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: 32px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.stage-tower-icon-wrapper {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage-tower-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
}

.btn-start-stage-giant {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-start-stage-giant img {
    height: 64px;
    width: auto;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
}

.btn-start-stage-giant:hover {
    transform: scale(1.06) translateY(-2px);
}

.btn-start-stage-giant:active {
    transform: scale(0.96) translateY(2px);
}

/* ========================================================
   小朋友答题成绩记录、战报弹窗与错题攻坚本样式
   ======================================================== */

/* HUD 战报按钮 */
.btn-jelly-records {
    background: linear-gradient(180deg, #9b59b6 0%, #8e44ad 100%);
    border: 3px solid #572a72;
    box-shadow: 0 4px 0 #3d1c52, inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.btn-jelly-records:hover {
    box-shadow: 0 6px 0 #3d1c52;
}
.btn-jelly-records:active {
    box-shadow: 0 1px 0 #3d1c52;
}

/* 结算弹窗中的详细战报按钮 */
.btn-detail-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(180deg, #6c5ce7 0%, #583ec7 100%);
    border: 3px solid #3c2bb0;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #302196;
    transition: all 0.15s ease;
    touch-action: manipulation;
}
.btn-detail-report:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #302196;
    background: linear-gradient(180deg, #7d6ef0 0%, #6146d6 100%);
}
.btn-detail-report:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #302196;
}

/* 档案编辑卡片右上角的战报按钮 */
.btn-profile-view-records-pill {
    padding: 4px 10px;
    background: #eef2ff;
    border: 2px solid #818cf8;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-profile-view-records-pill:hover {
    background: #e0e7ff;
    transform: scale(1.04);
}

/* 战报模态弹窗卡片本体 */
.score-report-modal-card {
    max-width: 680px;
    width: 92%;
    padding: 24px 20px 20px;
    background: #fdfbf7;
}

/* 小朋友切换选择条 */
.records-kid-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.kid-select-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #ffffff;
    border: 3px solid #e0d5c1;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    color: #5d4037;
    cursor: pointer;
    box-shadow: 0 3px 0 #d7ccc8;
    transition: all 0.15s ease;
}
.kid-select-chip:hover {
    transform: translateY(-2px);
    border-color: #ff9f43;
}
.kid-select-chip.active {
    background: #fff3e0;
    border-color: #ff9f43;
    color: #e65100;
    box-shadow: 0 3px 0 #f57c00;
}
.kid-select-chip .chip-avatar {
    font-size: 18px;
}

/* 学习指标四宫格 */
.learning-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.learning-metric-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 3px solid #ebd9c8;
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: 0 3px 0 #d7ccc8;
    text-align: left;
}

.learning-metric-card .metric-icon {
    font-size: 26px;
    flex-shrink: 0;
}

.learning-metric-card .metric-info {
    display: flex;
    flex-direction: column;
}

.learning-metric-card .metric-val {
    font-size: 20px;
    font-weight: 900;
    color: #2d3436;
    line-height: 1.1;
}

.learning-metric-card .metric-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #8c7b75;
    margin-top: 2px;
}

.learning-metric-card.metric-accuracy .metric-val {
    color: #10ac84;
}
.learning-metric-card.metric-combo .metric-val {
    color: #ee5253;
}

/* 战报选项卡与红点气泡 */
.records-tab-header {
    margin-bottom: 14px;
}

.mistakes-count-badge {
    display: inline-block;
    background: #ee5253;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
}

/* 战报内容区域容器 */
.records-tab-view {
    max-height: 380px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    margin-bottom: 14px;
}

/* 战局明细卡片 */
.records-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-record-card {
    background: #ffffff;
    border: 3px solid #ebd9c8;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 3px 0 #ded3c5;
    text-align: left;
    transition: all 0.15s ease;
}
.history-record-card:hover {
    border-color: #ff9f43;
}

.record-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.record-level-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 900;
    color: #3e2723;
}

.record-time-text {
    font-size: 12px;
    color: #8c7b75;
    font-weight: 600;
}

.record-result-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
}
.record-result-badge.victory {
    background: #e6fdf6;
    color: #008f68;
    border: 1.5px solid #2ecc71;
}
.record-result-badge.defeat {
    background: #fff0f0;
    color: #d63031;
    border: 1.5px solid #ff7675;
}

/* 对局指标栏 */
.record-metrics-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fdf8f4;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #5d4037;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.record-metrics-strip span strong {
    font-weight: 900;
    color: #2d3436;
}

.record-toggle-details-btn {
    background: #f1f2f6;
    border: 2px solid #ced6e0;
    border-radius: 10px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 800;
    color: #57606f;
    cursor: pointer;
    transition: all 0.12s ease;
}
.record-toggle-details-btn:hover {
    background: #e4e7eb;
    color: #2f3542;
}

/* 展开后的题目明细气泡瀑布流 */
.record-questions-drawer {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px dashed #ebd9c8;
}
.record-questions-drawer.open {
    display: block;
}

.questions-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.question-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.question-chip.correct {
    background: #e8f8f5;
    border: 2px solid #a3e4d7;
    color: #0e6251;
}
.question-chip.wrong {
    background: #fdedec;
    border: 2px solid #f5b7b1;
    color: #78281f;
}
.question-chip .chip-wrong-mark {
    color: #e74c3c;
    margin-left: 2px;
}
.question-chip .chip-correct-val {
    color: #27ae60;
    font-weight: 900;
}

/* 错题攻坚本容器 */
.mistakes-book-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mistake-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 3px solid #ffcccc;
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 3px 0 #ffdcdc;
    text-align: left;
}

.mistake-formula-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mistake-formula-title {
    font-size: 18px;
    font-weight: 900;
    color: #2c3e50;
    letter-spacing: 0.5px;
}

.mistake-meta-info {
    font-size: 11px;
    color: #95a5a6;
    font-weight: 600;
}

.mistake-answer-compare {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compare-badge {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.compare-badge.kid-answer {
    background: #fde8e8;
    color: #c0392b;
    border: 2px solid #f8b4b4;
}

.compare-badge.right-answer {
    background: #def7ec;
    color: #03543f;
    border: 2px solid #84e1bc;
}

.compare-badge .sub-label {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.8;
}

/* 空白占位状态 */
.records-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #8c7b75;
}
.records-empty-state .empty-emoji {
    font-size: 48px;
    margin-bottom: 12px;
}
.records-empty-state .empty-title {
    font-size: 17px;
    font-weight: 900;
    color: #5d4037;
    margin-bottom: 6px;
}
.records-empty-state .empty-tip {
    font-size: 13px;
    color: #a1887f;
}

/* 底部操作栏 */
.records-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 2px solid #ebd9c8;
}

.btn-clear-kid-history {
    background: #f5f6fa;
    border: 2px solid #dcdde1;
    border-radius: 14px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #718093;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-clear-kid-history:hover {
    background: #ffeaa7;
    border-color: #fdcb6e;
    color: #d63031;
}

/* ==========================================================
   iPad 与平板电脑专属响应式布局 (768px ~ 1100px 横竖屏自适应)
   1. 彻底解决顶部 HUD 按钮掉行折行问题，保持极简精致单行排列
   2. 彻底解决右侧计算器下方设置栏被挤成两排的问题，保持单行整齐
   ========================================================== */
@media (max-width: 1100px) {
    .carrot-hud {
        padding: 6px 14px;
        gap: 8px;
        min-height: 56px;
        flex-wrap: nowrap;
    }

    .hud-left-group, .hud-right-group {
        gap: 8px;
        flex-shrink: 0;
    }

    .btn-jelly-pill {
        padding: 4px 10px;
        font-size: 12px;
    }

    .btn-jelly-circle {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .hud-pill {
        padding: 3px 10px;
        gap: 5px;
        font-size: 13px;
    }

    .hud-val-text {
        font-size: 17px;
    }

    .syringe-progress-wrapper {
        flex: 0 1 260px;
        min-width: 110px;
        gap: 8px;
    }

    .syringe-tube {
        height: 18px;
    }

    .hud-pill-wave-capsule {
        padding: 3px 10px;
        font-size: 13px;
    }

    .combo-badge {
        padding: 2px 7px;
        font-size: 12px;
    }

    .main-stage {
        grid-template-columns: 1fr minmax(260px, 320px);
        gap: 10px;
    }

    .chalkboard-card {
        padding: 8px 10px;
        gap: 6px;
        border-width: 5px;
    }

    .cookie-key {
        font-size: 18px;
        padding: 7px 0;
    }
}

@media (max-width: 840px) {
    .carrot-hud {
        padding: 4px 10px;
        gap: 6px;
        min-height: 50px;
        flex-wrap: nowrap;
    }

    .hud-left-group, .hud-right-group {
        gap: 5px;
        flex-shrink: 0;
    }

    .btn-jelly-pill {
        padding: 3px 8px;
        font-size: 11px;
    }

    .btn-jelly-circle {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .hud-pill {
        padding: 2px 7px;
        gap: 3px;
        font-size: 12px;
    }

    .hud-val-text {
        font-size: 14px;
    }

    .user-name-text {
        max-width: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .syringe-progress-wrapper {
        flex: 0 1 160px;
        min-width: 80px;
        gap: 5px;
    }

    .syringe-tube {
        height: 16px;
    }

    .hud-pill-wave-capsule {
        padding: 2px 8px;
        font-size: 11px;
    }

    .combo-badge {
        display: none;
    }

    .main-stage {
        grid-template-columns: 1fr minmax(240px, 290px);
        gap: 8px;
    }

    .chalkboard-card {
        padding: 6px 8px;
        gap: 5px;
        border-width: 4px;
    }

    .bb-tips-card {
        display: none; /* 移动端及iPad竖屏省出高度，黑板更清爽 */
    }

    .cookie-key {
        font-size: 16px;
        padding: 5px 0;
    }
}

/* 响应式微调 (移动设备及小屏幕) */
@media (max-width: 600px) {
    .learning-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .record-metrics-strip {
        gap: 8px;
        font-size: 12px;
    }
    .mistake-item-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .mistake-answer-compare {
        align-self: flex-end;
    }
}