/* 基础重置 */
/* 站酷快乐体：专为儿童设计的圆趣中文字体（国内镜像CDN，离线时自动回退到幼圆） */
@import url('https://fonts.loli.net/css2?family=ZCOOL+KuaiLe&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Comic Sans MS', '幼圆', 'Microsoft YaHei', sans-serif;
    user-select: none; /* 防止小朋友误触选中文本 */
}

body {
    background-color: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

#app {
    width: 100%;
    max-width: 600px;
    height: 100%;
    max-height: 900px;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.screen.active {
    display: flex;
}
.hidden { display: none !important; }

/* 首页：封面 / 播放键 / 徽章墙 三段整体垂直居中，间距均匀分布，
   避免"封面贴顶 + 徽章贴底"造成的中部空洞 */
#start-screen {
    justify-content: center;
    gap: clamp(14px, 3vh, 28px);
    padding: 3vh 0 16px;
}

/* 首页超大视觉 */
.title-visual {
    text-align: center;
    margin-bottom: 0; /* 段间距交给 #start-screen 的 gap 统一控制 */
}
/* ===== 封面舞台：图片 + 文字浮层 ===== */
.cover-stage {
    position: relative;
    width: 96%;
    max-width: 440px;
    margin: 0 auto;
}
.cover-frame {
    position: relative;
    border-radius: 26px;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    overflow: hidden;
    /* 作为容器，让标题/副标题的 cqw 尺寸跟随封面宽度（各屏观感一致） */
    container-type: inline-size;
    /* 封面整体轻微浮动呼吸，让静态画面先“活”起来 */
    animation: coverFloat 6.5s ease-in-out infinite;
}
@keyframes coverFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(-0.5deg); }
}
/* ===== 分层动画封面：背景 + 流动彩虹 + 9 只星宝精灵 + 星屑 ===== */
.cover-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(180deg, #a9c8ff 0%, #ffd9ea 100%);
}
.cover-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* 彩虹流动光：用遮罩把近竖直的亮条纹约束在「光柱」内，条纹沿光柱往下跑，
   叠在烘焙好的柔和光瀑上，形成"光顺着流瀑往下淌"的效果。
   条纹倾角 100° ≈ 顺着竖直光柱方向；背景位移取 5 个周期(180px)保证无缝循环。 */
.rainbow-flow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(100deg,
        rgba(255,255,255,0) 0px,    rgba(255,255,255,0) 22px,
        rgba(255,255,255,0.6) 22px, rgba(255,255,255,0.6) 30px,
        rgba(255,255,255,0) 30px,    rgba(255,255,255,0) 36px);
    -webkit-mask-image: url(定妆照/covers/rainbow_flow_mask.webp?v=3);
            mask-image: url(定妆照/covers/rainbow_flow_mask.webp?v=3);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0.45;
    animation: rainbowRun 4.2s linear infinite, rainbowGlow 5s ease-in-out infinite;
}
@keyframes rainbowRun {
    from { background-position: 0 0; }
    to   { background-position: 0 -180px; } /* 5×36px，无缝下滑 */
}
@keyframes rainbowGlow {
    0%, 100% { filter: blur(1.2px) brightness(1); }
    50%      { filter: blur(3px)  brightness(1.35); }
}

/* 9 只星宝精灵：定位沿彩虹流瀑错落，每只独立动画 */
.star-sprite {
    position: absolute;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.star-sprite img {
    width: 100%;
    display: block;
    transform-origin: 50% 62%;
    filter: drop-shadow(0 6px 9px rgba(60, 40, 90, 0.28));
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
/* 站位：left/top 是精灵的「中心点」（父级有 translate(-50%,-50%)）。
   四排交错排布（2-3-3-1），排距约 19–20.5%（场景高），纵向本来就彼此贴合。
   尺寸：02朵朵/03闪闪/05亮亮/06光光/08乐乐/09虎虎 各 ×1.15（09 略收 ×1.12），
   01狸狸/04泡泡/07心心 保持原尺寸，形成大小层次。
   【本轮：向中间收拢】左右两列各 3 只向中列靠拢，行内边距由 11–17% 收到 ~0.5%，
   整组从占宽 95% 收到约 79%，形成参考图那种「紧凑星宝团」。
   中间列（04泡泡 / 07心心 / 09虎虎）位置不动，作为收拢的基准轴。
   极限探测（0.5 / 0.0 / -0.5 / -1.0% 逐档光栅化）：+0.5% 是「静止零遮挡」的最后一档，
   再紧（≤0%）静止时角色像素就开始真的压住彼此。
   静止姿态 9 只真实 alpha 交集 = 0；动画峰值仅 ≤6px 圆角擦边，无裁切越界。 */
.s1 { left: 61.8%; top: 32.5%; width: 24.8%; z-index: 2; }  /* 狸狸 · 顶排右（← 内收 8.2%） */
.s2 { left: 37.2%; top: 30.5%; width: 28.4%; z-index: 3; }  /* 朵朵 · 顶排左（→ 内收 8.2%） */
.s3 { left: 25.5%; top: 51.5%; width: 27.3%; z-index: 4; }  /* 闪闪 · 二排左（→ 内收 11%） */
.s4 { left: 49.5%; top: 51.5%; width: 23.9%; z-index: 5; }  /* 泡泡 · 二排中（基准轴，不动） */
.s5 { left: 70.0%; top: 51.5%; width: 28.2%; z-index: 6; }  /* 亮亮 · 二排右（← 内收 10.5%） */
.s6 { left: 26.1%; top: 72%;   width: 27.4%; z-index: 7; }  /* 光光 · 三排左（→ 内收 5.1%） */
.s7 { left: 51%;   top: 70.5%; width: 24.4%; z-index: 8; }  /* 心心 · 三排中（基准轴，不动） */
.s8 { left: 77.5%; top: 73%;   width: 29.1%; z-index: 9; }  /* 乐乐 · 三排右（← 内收 5.5%） */
.s9 { left: 48%;   top: 89.5%; width: 27.8%; z-index: 10; } /* 虎虎 · 底排（城堡前）（基准轴，不动） */

/* 每只星宝一种动作 */
.s1 img { animation-name: spBob;       animation-duration: 3.2s; }
.s2 img { animation-name: spSway;      animation-duration: 3.6s; animation-delay: -0.6s; }
.s3 img { animation-name: spHop;       animation-duration: 2.8s; animation-delay: -1.1s; }
.s4 img { animation-name: spFloat;     animation-duration: 4.6s; animation-delay: -0.3s; }
.s5 img { animation-name: spFlap;      animation-duration: 2.4s; animation-delay: -0.9s; }
.s6 img { animation-name: spSwayGlow;  animation-duration: 3.4s; animation-delay: -1.5s; }
.s7 img { animation-name: spBeat;      animation-duration: 2.2s; animation-delay: -0.5s; }
.s8 img { animation-name: spTwirl;     animation-duration: 3.8s; animation-delay: -1.2s; }
.s9 img { animation-name: spBob2;      animation-duration: 3.6s; animation-delay: -0.8s; }

@keyframes spBob   { 0%,100% { transform: translateY(0) rotate(-2deg); }        50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes spBob2  { 0%,100% { transform: translateY(0) rotate(1.5deg) scale(1); } 50% { transform: translateY(-7px) rotate(-1.5deg) scale(1.02); } }
@keyframes spSway  { 0%,100% { transform: translateX(-4px) rotate(-4deg); }     50% { transform: translateX(4px) rotate(4deg); } }
@keyframes spHop   { 0%,100% { transform: translateY(0) scaleY(1); }  28% { transform: translateY(-15px) scaleY(1.04); } 46% { transform: translateY(0) scaleY(0.94); } 62% { transform: translateY(-3px) scaleY(1); } }
@keyframes spFloat { 0%,100% { transform: translateY(-6px) rotate(-2deg); }     50% { transform: translateY(6px) rotate(2deg); } }
@keyframes spFlap  { 0%,100% { transform: scaleX(1) rotate(0deg); }   25% { transform: scaleX(0.96) rotate(-2deg); } 75% { transform: scaleX(1.04) rotate(2deg); } }
@keyframes spSwayGlow {
    0%,100% { transform: rotate(-3deg) translateY(0);   filter: drop-shadow(0 6px 9px rgba(60,40,90,.28)) drop-shadow(0 0 0 rgba(255,240,180,0)); }
    50%     { transform: rotate(3deg) translateY(-6px); filter: drop-shadow(0 6px 9px rgba(60,40,90,.28)) drop-shadow(0 0 13px rgba(255,240,180,0.95)); }
}
@keyframes spBeat  { 0%,100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.05); } }
@keyframes spTwirl { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* 封面内中部氛围装饰：星屑 / 泡泡 / 柔光点 */
.cover-sparks { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.cover-sparks span { position: absolute; line-height: 1; will-change: transform, opacity; }

/* 星屑：一闪一闪并轻轻上浮旋转 */
.cover-sparks .sp-star {
    font-size: 1.05rem;
    filter: drop-shadow(0 1px 4px rgba(255,255,255,0.95));
    opacity: 0.9;
    animation: coverSpark 5.5s ease-in-out infinite;
}
@keyframes coverSpark {
    0%, 100% { transform: translateY(0) scale(0.8) rotate(0deg);     opacity: 0.4; }
    50%      { transform: translateY(-13px) scale(1.25) rotate(22deg); opacity: 1; }
}
/* 泡泡：缓缓上浮 + 轻微左右漂移 */
.cover-sparks .sp-bub {
    font-size: 1rem;
    filter: drop-shadow(0 2px 4px rgba(180,210,255,0.7));
    opacity: 0.85;
    animation: coverBubble 7s ease-in-out infinite;
}
@keyframes coverBubble {
    0%, 100% { transform: translateY(4px)  translateX(0)     scale(0.9); opacity: 0.5; }
    50%      { transform: translateY(-11px) translateX(6px)  scale(1.12); opacity: 0.95; }
}
/* 柔光点：纯装饰的暖色光晕，呼吸式明暗 */
.cover-sparks .sp-orb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255,250,220,0.95) 0%, rgba(255,224,170,0.55) 42%, rgba(255,214,150,0) 72%);
    animation: coverOrb 6s ease-in-out infinite;
}
@keyframes coverOrb {
    0%, 100% { transform: scale(0.7); opacity: 0.35; }
    50%      { transform: scale(1.25); opacity: 0.85; }
}
/* 文字浮层：叠在封面顶部天空处 */
.cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8cqw 10px 0; /* 用 cqw 跟随封面宽度；顶部留白对齐成片标题 */
    text-align: center;
    pointer-events: none; /* 不遮挡封面的点击 */
}
/* 标题字体：内嵌「幼圆」(SIMYOU) 子集，确保与封面成片（PIL 版）的圆体字完全一致，
   不依赖各设备是否装了幼圆 */
@font-face {
    font-family: 'QMXB-Title';
    src: url('fonts/title-subset.ttf') format('truetype');
    font-display: swap;
}
/* 标题改为预渲染 PNG（定妆照/cover_title.webp）：
   幼圆字体 + 饱和玫瑰粉填充 + 干净白描边 + 柔光，全部烤进图里，
   跨浏览器/设备显示一致，避免 CSS text-stroke/paint-order 渲染差异 */
.cover-title {
    display: block;
    width: 56cqw;          /* 跟随封面宽度，约成片标题占比 */
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    /* 图内已含柔光，这里仅补极淡投影增加层次 */
    filter: drop-shadow(0 0.06em 0.18em rgba(150, 70, 120, 0.22));
}
/* 副标题：粉色圆角小标签，取色自成片（底 #FFD6E7 / 字 #FF6A9E） */
.cover-subtitle {
    display: inline-block;
    margin-top: 10px;      /* 回退 */
    margin-top: 1.6cqw;
    background: #ffe6f0;   /* 更浅更柔和的粉底 */
    color: #d65caa;        /* 粉色 + 一点点紫（玫紫/树莓粉），在浅粉胶囊底上仍清晰 */
    font-family: 'QMXB-Title', '幼圆', 'Microsoft YaHei', sans-serif;
    font-size: 0.9rem;     /* 回退 */
    font-size: 5.2cqw;
    font-weight: bold;     /* 让字看起来更实 */
    letter-spacing: 0.16em;
    line-height: 1.1;
    padding: 0.25em 0.8em 0.25em 0.96em; 
    border-radius: 999px;
    border: 2px solid #ffffff; /* 增加一圈纯白描边，符合可爱贴纸感 */
    box-shadow: 0 4px 8px rgba(255,107,129,0.25);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}
.huge-emoji {
    font-size: 6rem;
    text-shadow: 0 10px 20px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}
/* 说明：旧版 .title-visual h1 / .subtitle 规则已废弃并移除，
   它们的选择器优先级高于 .cover-title，会把新标题样式压掉 */

/* ===== 中部/整体氛围装饰：漂浮的星星、泡泡、亮片 ===== */
.ambient-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 6; /* 浮在封面与按钮之上，像散落的亮片 */
}
.ambient-layer .float-item {
    position: absolute;
    bottom: -8%;
    font-size: 1.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(255,255,255,0.85));
    opacity: 0;
    animation: floatUp linear infinite;
    will-change: transform, opacity;
}
.ambient-layer .float-item.bubble {
    font-size: 1.1rem;
    filter: drop-shadow(0 2px 3px rgba(180,210,255,0.6));
}
@keyframes floatUp {
    0%   { transform: translateY(0) translateX(0) scale(0.6) rotate(0deg);   opacity: 0; }
    12%  { opacity: 0.95; }
    50%  { transform: translateY(-46vh) translateX(14px) scale(1) rotate(12deg); }
    88%  { opacity: 0.9; }
    100% { transform: translateY(-94vh) translateX(-10px) scale(1.1) rotate(-10deg); opacity: 0; }
}

/* ===== 徽章墙（首页 + 通关页共用） ===== */
.badge-wall-box {
    /* 随后两段一起垂直居中，不再被 margin-top:auto 顶到屏幕最底 */
    width: 99%;
    margin: 0 auto;
    background: rgba(255,255,255,0.85);
    border: 2px solid rgba(255,209,220,0.9);
    border-radius: 24px;
    padding: 9px 7px 11px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.badge-wall-title {
    font-weight: bold;
    color: #ff6b81;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
/* 一排布局：9 个徽章横向排成单行，槽位随面板宽度伸缩 */
.badge-wall {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(3px, 1vw, 6px);
}
.badge-slot {
    /* 宽度按 9 列骨架计算，9 个占满一排（压缩间距让圆圈尽可能大） */
    flex: 0 0 calc((100% - 8 * clamp(3px, 1vw, 6px)) / 9);
    max-width: 92px;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ffe3b0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.badge-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 透明底徽章图的金币占比每张不同，用 JS 写入的 --badge-zoom 把 9 枚归一成一样大 */
    transform: scale(var(--badge-zoom, 1));
}
/* 未收集：柔和虚线空位 */
.badge-slot.empty {
    background: #f6f7fa;
    border: 2px dashed #d5d9e2;
    color: #c3c9d6;
    font-size: 1rem;
    font-weight: bold;
}
@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* 通关庆祝页 */
.complete-box {
    gap: 14px;
}
.complete-title {
    font-family: 'ZCOOL KuaiLe', '幼圆', 'Microsoft YaHei', sans-serif;
    color: #ffb400;
    font-size: 2.6rem;
    text-shadow: 3px 3px 0 #fff, 0 6px 14px rgba(0,0,0,0.15);
    letter-spacing: 4px;
}
.complete-box .badge-wall .badge-slot {
    max-width: 84px; /* 庆祝页的圈圈允许更大 */
}

/* 图标按钮通用样式 */
.icon-btn {
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.icon-btn:active {
    transform: scale(0.9) !important;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.play-btn {
    width: 112px;
    height: 112px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    margin: 0 auto;
}
/* 播放三角：纯 CSS 白色三角，避免系统 emoji 自带蓝紫色与粉彩主题冲突 */
.play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 21px 0 21px 32px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 7px; /* 让三角在圆内视觉居中 */
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
}

/* 游戏界面 */
#game-screen { justify-content: flex-start; }
.level-indicator {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 2.2rem;
    letter-spacing: 5px;
    border-bottom: 3px solid #eee;
    /* 站酷快乐体 + 彩虹渐变文字（双层背景：白底条 + 渐变字） */
    font-family: 'ZCOOL KuaiLe', '幼圆', 'Microsoft YaHei', sans-serif;
    background-image: linear-gradient(90deg, #ff6b81, #ffa751, #42b883, #5d6fe0), linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95));
    -webkit-background-clip: text, border-box;
    background-clip: text, border-box;
    -webkit-text-fill-color: transparent;
    color: #ff6b81; /* 不支持渐变文字的浏览器回退色 */
}

/* 视频区域：固定 3:4 竖屏画幅（与 AI 出片规格一致）。
   宽度铺满、高度按 3:4 反推，因此容器比例 = 视频比例，contain 后正好铺满、不留黑边。
   max-height:100% 仅作矮屏（横屏手机/小窗）兜底，避免视频超出可用高度。 */
.video-container {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 100%;
    align-self: center;
    background: #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}
/* 视频本体铺满 3:4 容器（contain 兜底，尺寸不为 3:4 的素材也不会被裁切） */
#main-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    position: relative;   /* 作为字幕绝对定位的参考框 */
}
/* 字幕兜底：视频失败/无视频时替代 TTS，确保微信内能"看懂"旁白（TTS 在微信里常哑） */
.video-caption {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    width: 88%;
    max-height: 32%;
    overflow: hidden;
    font-family: 'ZCOOL KuaiLe', '幼圆', 'Microsoft YaHei', sans-serif;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 10px 16px;
    border-radius: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    display: none; /* 默认隐藏，仅在 fallback / 无视频时由 JS 显示 */
}
/* 互动选项区：高度由内容（卡片）自动撑开，紧贴底部，尽量少遮挡视频 */
#options-container {
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.95);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#options-container:not(.hidden) { transform: translateY(0); }

/* 视觉引导手指：绝对定位，不占据选项面板的布局高度（面板只包住卡片） */
.guide-icon {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: -1.5rem; /* 近似水平居中（emoji 宽约等于 3rem 字号） */
    font-size: 3rem;
    z-index: 20;
    opacity: 0; /* 默认不出现 */
    pointer-events: none;
    /* 飞行偏移由 JS 写入的 CSS 变量驱动 */
    transform: translate(var(--fly-x, 0), var(--fly-y, 0));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
}
/* 悬停卡片时：手指出现在放大后的卡片正上方，不压住卡片 */
.guide-icon.pointing {
    opacity: 1;
    transform: translate(var(--fly-x, 0), var(--fly-y, 0)) scale(1.25);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25));
}

/* 超大魔法卡片 */
.cards {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: center;
    padding: 0 10px;
}
.magic-card {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: white;
    border: 4px solid #ffd1dc;
    border-radius: 20px;
    padding: 0 0 12px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s, border-color 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.magic-card:active {
    transform: scale(0.9);
    border-color: #ff6b81;
}

/* ===== 悬停动画：卡片升起 + 发光 ===== */
.magic-card:hover {
    transform: translateY(-12px) scale(1.06);
    box-shadow: 0 18px 30px rgba(0,0,0,0.22);
    z-index: 5;
}
/* 悬停时图标摇摆，标签变色 */
.magic-card:hover .card-icon { animation: wiggle 0.6s ease-in-out infinite; }
.magic-card:hover .card-label { color: #ff6b81; }
@keyframes wiggle {
    0%, 100% { transform: rotate(-6deg) scale(1.1); }
    50% { transform: rotate(6deg) scale(1.1); }
}

/* ===== 卡片主题配色（渐变背景+描边） ===== */
.theme-brave {  /* 勇敢大声卡：热情红橙 */
    background: linear-gradient(160deg, #fff5f0 0%, #ffe3d6 60%, #ffc9b3 100%);
    border-color: #ff9a76;
}
.theme-shield {  /* 召唤/求助法宝卡：守护蓝 */
    background: linear-gradient(160deg, #f0f7ff 0%, #d9ecff 60%, #bcdcff 100%);
    border-color: #6db3f2;
}
.theme-idea {  /* 转脑筋/好主意卡：闪亮黄 */
    background: linear-gradient(160deg, #fffdf0 0%, #fff3c4 60%, #ffe79a 100%);
    border-color: #ffce45;
}
.theme-deal {  /* 超级谈判卡：和平绿 */
    background: linear-gradient(160deg, #f0fff4 0%, #d4f5dd 60%, #b0ecc2 100%);
    border-color: #55c983;
}
.theme-happy {  /* 快乐转移卡：开心粉 */
    background: linear-gradient(160deg, #fff0f7 0%, #ffd9ec 60%, #ffbee0 100%);
    border-color: #ff8dc7;
}
.theme-calm {  /* 深呼吸暂停卡：宁静青 */
    background: linear-gradient(160deg, #f0fbff 0%, #d6f6f2 60%, #b8ece7 100%);
    border-color: #43c6ac;
}
.theme-safe {  /* 安全距离卡：安全紫青 */
    background: linear-gradient(160deg, #f4f0ff 0%, #e0d9ff 60%, #c9bcff 100%);
    border-color: #8c6ff0;
}
.theme-rule {  /* 规则法宝卡：庄重靛蓝 */
    background: linear-gradient(160deg, #f0f2ff 0%, #dbe0ff 60%, #c0c9ff 100%);
    border-color: #5d6fe0;
}

/* ===== 卡片上的闪光装饰（叠加在星宝图片上方） ===== */
.card-sparkle {
    position: absolute;
    z-index: 2;
    font-size: 1.2rem;
    filter: drop-shadow(0 1px 2px rgba(255,255,255,0.9));
    opacity: 0.7;
    animation: twinkle 1.8s ease-in-out infinite;
    pointer-events: none;
}
.card-sparkle.s1 { top: 8px; left: 10px; }
.card-sparkle.s2 { top: 12px; right: 12px; animation-delay: 0.9s; }
@keyframes twinkle {
    0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.4; }
    50% { transform: scale(1.25) rotate(20deg); opacity: 1; }
}

.card-icon {
    width: 100%;
    aspect-ratio: 1 / 1; /* 图片铺满整个占位区 */
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-label {
    font-size: 1rem;
    color: #888;
    font-weight: bold;
}

/* 结算弹窗 */
.overlay { background: rgba(0,0,0,0.8); z-index: 100; }
.badge-box {
    background: linear-gradient(160deg, #fff7fb 0%, #fff0f6 55%, #f3f0ff 100%);
    width: 88%;
    max-width: 460px;
    border-radius: 44px;
    padding: 36px 26px 30px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(120, 60, 120, 0.45);
    border: 6px solid #ffd1dc;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.celebrate { font-size: 3rem; margin-bottom: -20px; z-index: 10;}
#badge-icon {
    font-size: 8rem; /* 占据巨大画幅的奖励 */
    margin: 10px 0;
    text-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
#badge-icon .badge-img {
    width: 10rem;
    height: 10rem;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
    /* 与徽章墙用同一套归一缩放，保证同一枚徽章在结算弹窗里大小比例一致 */
    transform: scale(var(--badge-zoom, 1));
}
#badge-name {
    font-family: 'ZCOOL KuaiLe', '幼圆', 'Microsoft YaHei', sans-serif;
    font-size: 2.6rem;
    color: #ff6b81;
    letter-spacing: 3px;
    margin-bottom: 14px;
    text-shadow: 0 3px 0 #fff, 0 6px 12px rgba(255, 107, 129, 0.25);
}
/* 徽章说明消息框：展示该星宝对应的情商小道理 */
.badge-desc {
    font-family: 'ZCOOL KuaiLe', '幼圆', 'Microsoft YaHei', sans-serif;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #7a5a86;
    background: rgba(255, 255, 255, 0.7);
    border: 3px dashed #ffc2d6;
    border-radius: 24px;
    padding: 14px 20px;
    margin: 0 0 26px;
    max-width: 92%;
}

.btn-group-horizontal {
    display: flex;
    gap: 30px;
    width: 100%;
    justify-content: center;
}
.btn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.btn-label {
    font-family: 'ZCOOL KuaiLe', '幼圆', 'Microsoft YaHei', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: #ff6b81;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 4px 16px;
    box-shadow: 0 3px 8px rgba(255, 107, 129, 0.25);
    white-space: nowrap;
}
.btn-group-horizontal .icon-btn {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
}
.primary-btn { background: linear-gradient(135deg, #ff9a9e, #fecfef); }
.secondary-btn { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }

/* 自定义悬浮提示：替代原生 title（字号太小且无法美化），更大更可爱 */
.icon-btn[data-tip] { position: relative; }
.icon-btn[data-tip]::before {
    /* 小三角 */
    content: '';
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #ff8fb1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 200;
}
.icon-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    transform-origin: bottom center;
    background: linear-gradient(135deg, #ff8fb1, #ffb86c);
    color: #fff;
    font-family: 'ZCOOL KuaiLe', '幼圆', 'Microsoft YaHei', sans-serif;
    font-size: 1.7rem;
    letter-spacing: 2px;
    white-space: nowrap;
    padding: 10px 24px;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 200;
}
.icon-btn[data-tip]:hover::before,
.icon-btn[data-tip]:focus::before,
.icon-btn[data-tip]:active::before { opacity: 1; }
.icon-btn[data-tip]:hover::after,
.icon-btn[data-tip]:focus::after,
.icon-btn[data-tip]:active::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* 动画库 */
.pulse-anim { animation: pulse 1.5s infinite; }
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 129, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255, 107, 129, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 129, 0); }
}

/* ===== 移动端竖屏适配（手机）：触摸友好、字号与间距优化 ===== */
@media (max-width: 600px) {
    body { align-items: stretch; }
    #app {
        max-width: 100%;
        max-height: none;
        height: 100vh;
        height: 100dvh;          /* 规避移动端地址栏导致的高度跳动 */
        border-radius: 0;
        box-shadow: none;
    }
    .level-indicator { font-size: 1.5rem; letter-spacing: 3px; padding: 10px; }
    .huge-emoji { font-size: 4.5rem; }
    .video-caption { font-size: 1.05rem; padding: 8px 12px; width: 92%; }
    #options-container { padding: 12px 10px; }
    .cards { gap: 10px; }
    .magic-card { border-width: 3px; border-radius: 16px; padding-bottom: 8px; }
    .card-label { font-size: 0.9rem; }
    .guide-icon { font-size: 2.4rem; margin-left: -1.2rem; }
    .card-sparkle { font-size: 1rem; }
    .btn-group-horizontal { gap: 16px; }
    .btn-label { font-size: 1.15rem; padding: 3px 12px; letter-spacing: 1px; }
    .btn-group-horizontal .icon-btn { width: 66px; height: 66px; font-size: 2rem; }
    .play-btn { width: 96px; height: 96px; }
    .badge-desc { font-size: 1.15rem; padding: 12px 14px; line-height: 1.5; }
    #badge-name { font-size: 2rem; letter-spacing: 2px; }
    .badge-wall-title { font-size: 0.85rem; }
    .complete-title { font-size: 2rem; letter-spacing: 2px; }
    .cover-subtitle { font-size: 4.4cqw; }
    /* 手机无 hover：隐藏自定义 tooltip，避免 active 时大提示遮挡 */
    .icon-btn[data-tip]::before,
    .icon-btn[data-tip]::after { display: none; }
}

.bounce-down { animation: bounceDown 1s infinite; }
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

.tada-anim { animation: tada 1s; }
@keyframes tada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}