/* ============================================================
   小彩虹 gz.css — 星星果园（v5，游戏化复习）专用样式
   9-05 抽离：原 index.html 内嵌（行 681-872），触发 main.py cache-busting （?v=20260814 → ?v=时间戳）
   解决：wb-base.css?v=20260831b 不匹配 cache-busting 替换模式，导致浏览器缓存永久命中老 CSS
   9-05 晚老王反馈"复习框固定宽度不随屏幕"：真凶 = 抽离时混入的孤立 <style> 开标签，
   把 .gz-wrap 拼成 `<style> .gz-wrap` 无效选择器 → 背景+min-height:100vh 整条失效。
   已删标签，恢复全屏自适应。
   ============================================================ */

        .gz-wrap{min-height:100vh;min-height:100dvh;background:linear-gradient(180deg,#E8F4FF 0%,#F4FAFF 40%,#FFF7EC 100%);
                 padding-bottom:26px;position:relative;overflow:hidden}
        /* 背景云朵：纯 CSS，不加载任何图片资源 */
        .gz-cloud{position:absolute;background:#fff;border-radius:100px;opacity:.55;pointer-events:none}
        .gz-cloud:before,.gz-cloud:after{content:'';position:absolute;background:#fff;border-radius:50%}
        .gz-cloud:before{width:60%;height:150%;left:8%;top:-60%}
        .gz-cloud:after{width:45%;height:120%;right:10%;top:-40%}
        .gz-c1{width:78px;height:26px;top:56px;left:-10px}
        .gz-c2{width:54px;height:19px;top:132px;right:14px;opacity:.42}
        .gz-c3{width:64px;height:22px;top:238px;left:22px;opacity:.34}

        /* ---------- 顶部 HUD ---------- */
        .gz-hud{display:flex;align-items:center;gap:9px;padding:12px 13px 6px;position:relative;z-index:2}
        .gz-ico{width:42px;height:42px;border-radius:14px;background:#fff;border:none;cursor:pointer;
                box-shadow:0 4px 0 #DCE6F0;display:flex;align-items:center;justify-content:center;
                font-size:19px;color:#3D3A4B;transition:transform .12s,box-shadow .12s;flex:0 0 auto}
        .gz-ico:active{transform:translateY(4px);box-shadow:0 0 0 #DCE6F0}
        /* 赞罐：5 赞 = 1 星，进度一眼可见（短期收集奖励） */
        .gz-jar{flex:1;background:#fff;border-radius:20px;padding:7px 12px;box-shadow:0 4px 0 #DCE6F0;
                display:flex;align-items:center;gap:8px;transition:transform .2s}
        .gz-jar.bump{animation:gzBump .5s cubic-bezier(.3,1.7,.5,1)}
        @keyframes gzBump{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
        .gz-jar .lab{font-size:13px;color:#8A97A8;font-weight:700;letter-spacing:.5px}
        .gz-dots{display:flex;gap:4px}
        .gz-dot{width:15px;height:15px;border-radius:50%;background:#EEF2F7;transition:all .3s}
        .gz-dot.on{background:linear-gradient(135deg,#FFD34E,#FFA726);transform:scale(1.12);
                   box-shadow:0 0 0 3px rgba(255,193,71,.22)}
        /* 9-05 深夜：老王反馈手机上看不清 → 计数字号 13→22、星星 16→22 */
        .gz-jar .cnt{font-size:22px;font-weight:900;color:#F5A623;margin-left:auto}
/* 9-05 晚：gz-star（⭐总数）已删 —— 顶栏已有同款，重复展示（老王拍板） */

        /* ---------- 标题 ---------- */
        .gz-title{text-align:center;padding:2px 16px 4px;position:relative;z-index:2}
        .gz-title h3{margin:0;font-size:21px;font-weight:900;color:#3D3A4B;letter-spacing:.5px}
        .gz-title p{margin:3px 0 0;font-size:13px;color:#8A97A8}

        /* ---------- 关卡地图 ---------- */
        .gz-map{margin:8px 14px 90px;position:relative;z-index:2}
        .gz-map svg{width:100%;height:auto;display:block}
        .gz-node{cursor:pointer;transition:transform .16s}
        .gz-node:active{transform:scale(.93)}
        .gz-node.lock{cursor:not-allowed;opacity:.8}
        .gz-pulse{animation:gzPulse 1.6s ease-in-out infinite}
        @keyframes gzPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.18;transform:scale(1.22)}}

        /* 9-05 晚：向导机器人（gz-buddy/gz-float/jump/tilt/spin）已删 —— 老王拍板不需要 */

        /* ---------- 答题卡 ---------- */
        .gz-stage{margin:10px 13px 0;background:#fff;border-radius:26px;padding:16px 15px 18px;
                  box-shadow:0 6px 0 #E4ECF4;position:relative;z-index:2}
        .gz-q{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
        .gz-q .t{font-size:17px;font-weight:900;color:#3D3A4B;text-align:center;line-height:1.4}
        .gz-spk{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#5BC87E,#34A96B);
                border:none;box-shadow:0 4px 0 #238A55;color:#fff;font-size:25px;cursor:pointer;
                display:flex;align-items:center;justify-content:center;flex:0 0 auto}
        .gz-spk:active{transform:translateY(4px);box-shadow:0 0 0 #238A55}
        .gz-spk.playing{animation:gzRadio 1s ease-out infinite}
        @keyframes gzRadio{0%{box-shadow:0 4px 0 #238A55,0 0 0 0 rgba(52,169,107,.5)}
                           100%{box-shadow:0 4px 0 #238A55,0 0 0 16px rgba(52,169,107,0)}}

        /* 题干大图区（老王：「水果的图片都没显示出来」） */
        .gz-scene{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:14px}
        .gz-scenebox{width:126px;height:126px;border-radius:24px;background:linear-gradient(150deg,#FFF6E5,#FFEDD2);
                     display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px #FFE3B8;
                     padding:11px}
        .gz-scenebox svg{width:100%;height:100%}
        .gz-scenebox .zi{font-size:70px;font-weight:900;color:#3D3A4B;line-height:1;
                         font-family:"Kaiti SC","STKaiti",serif}
        .gz-scenebox .em{font-size:62px;line-height:1}
        .gz-scenebox .letter{font-size:56px;font-weight:900;color:#5AA9E6;letter-spacing:-2px}
        .gz-scenebox .num{font-size:64px;font-weight:900;color:#FF8A5B}
        .gz-cap{font-size:12px;color:#A0ACBB;font-weight:700}

        /* 选项：大卡片（9-05 晚老王：选项太大一屏放不下 → min 76px 窄屏可容 3 列，卡高 104→88） */
            .gz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px}
        .gz-card{background:#fff;border:3px solid #EDF2F7;border-radius:18px;padding:7px 4px 8px;
                 box-shadow:0 4px 0 #E2E9F1;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .2s;
                 display:flex;flex-direction:column;align-items:center;gap:4px;min-height:88px}
        .gz-card:active{transform:translateY(5px);box-shadow:0 0 0 #E2E9F1}
        .gz-card .p{width:100%;height:48px;display:flex;align-items:center;justify-content:center}
        .gz-card .p svg{width:100%;height:100%;max-width:48px}
        .gz-card .zi{font-size:32px;font-weight:900;color:#3D3A4B;line-height:1;font-family:"Kaiti SC","STKaiti",serif}
        .gz-card .em{font-size:34px;line-height:1}
        .gz-card .letter{font-size:26px;font-weight:900;color:#5AA9E6}
        .gz-card .num{font-size:30px;font-weight:900;color:#FF8A5B}
        .gz-card .w{font-size:15px;font-weight:800;color:#3D3A4B;word-break:break-all;text-align:center;line-height:1.2}
        .gz-card .tx{font-size:13px;font-weight:800;color:#5A6675;line-height:1.2;text-align:center}
        .gz-card.ok{border-color:#3BC97A;background:#F0FDF4;box-shadow:0 5px 0 #B8E9C9;animation:gzPop .42s}
        .gz-card.no{border-color:#FF9A9A;background:#FFF5F5;animation:gzShake .4s}
        @keyframes gzPop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
        @keyframes gzShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
                           40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

        /* 玩法二：戳泡泡 */
        .gz-bubs{position:relative;height:250px;margin:2px 0 4px}  /* 9-05 泡泡槽位重排后加高 */
        .gz-bub{position:absolute;border-radius:50%;cursor:pointer;
                background:radial-gradient(circle at 32% 28%,#fff 0%,rgba(255,255,255,.72) 18%,rgba(255,255,255,.14) 42%,transparent 60%);
                box-shadow:inset 0 0 22px rgba(255,255,255,.85),0 5px 14px rgba(61,58,75,.13);
                display:flex;flex-direction:column;align-items:center;justify-content:center;
                transition:transform .14s}
        .gz-bub:active{transform:scale(.9)}
        .gz-bub svg{width:58%;height:58%}
        .gz-bub .em{font-size:32px}
        .gz-bub .zi{font-size:32px;font-weight:900;font-family:"Kaiti SC","STKaiti",serif}
        .gz-bub .letter{font-size:26px;font-weight:900;color:#2E7CB8}
        .gz-bub .tx{font-size:11px;font-weight:800;color:#3D3A4B;margin-top:2px;
                    background:rgba(255,255,255,.8);border-radius:8px;padding:1px 6px}
        .gz-bub.ok{box-shadow:inset 0 0 0 5px #3BC97A,0 5px 14px rgba(61,58,75,.13);animation:gzPop .42s}
        .gz-bub.no{animation:gzShake .4s}
        .gz-bub.gone{animation:gzBurst .34s forwards;pointer-events:none}
        @keyframes gzBurst{0%{transform:scale(1);opacity:1}100%{transform:scale(1.75);opacity:0}}

        /* 玩法三：翻翻乐 */
        .gz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
        .gz-flip{perspective:700px;height:120px}
        .gz-flip .in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
        .gz-flip.up .in{transform:rotateY(180deg)}
        .gz-flip .f,.gz-flip .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;
                display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
        .gz-flip .f{background:linear-gradient(150deg,#9B6DD6,#7E52BE);box-shadow:0 5px 0 #65409E;
                    color:#fff;font-size:30px}
        .gz-flip .b{transform:rotateY(180deg);background:#fff;border:3px solid #EDF2F7;box-shadow:0 5px 0 #E2E9F1}
        .gz-flip .b.ok{border-color:#3BC97A;background:#F0FDF4}
        .gz-flip .b svg{width:56px;height:56px}
        .gz-flip .b .zi{font-size:36px;font-weight:900;font-family:"Kaiti SC","STKaiti",serif}
        .gz-flip .b .em{font-size:36px}
        .gz-flip .b .tx{font-size:12px;font-weight:800;color:#5A6675;text-align:center;padding:0 3px}

        /* 玩法四：数一数 */
        .gz-count{text-align:center}
        .gz-ctr{display:inline-flex;align-items:center;gap:6px;background:#FFF6E5;border-radius:16px;
                padding:6px 15px;margin-bottom:11px;box-shadow:inset 0 0 0 2px #FFE3B8}
        .gz-ctr .n{font-size:26px;font-weight:900;color:#FF8A5B;min-width:26px}
        .gz-ctr .l{font-size:12px;font-weight:800;color:#B08A5A}
        .gz-items{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:13px}
        .gz-item{width:52px;height:52px;border-radius:14px;background:#FFF9F0;cursor:pointer;
                 box-shadow:0 3px 0 #F0E4D0;padding:5px;transition:transform .16s,opacity .3s}
        .gz-item svg{width:100%;height:100%}
        .gz-item:active{transform:scale(.88)}
        .gz-item.gone{opacity:0;transform:scale(.4) rotate(28deg);pointer-events:none}

        /* 底部操作条 */
        .gz-bar{display:flex;gap:10px;margin-top:14px;justify-content:center}
        .gz-btn{flex:1;padding:14px;border-radius:18px;border:none;font-size:16px;font-weight:900;
                cursor:pointer;transition:transform .12s,box-shadow .12s}
        .gz-btn:active{transform:translateY(4px);box-shadow:0 0 0 transparent}
        .gz-btn.pri{background:linear-gradient(135deg,#FF9F6B,#FF7B54);color:#fff;box-shadow:0 5px 0 #E4623C}
        .gz-btn.sec{background:#F2F6FA;color:#7A8798;box-shadow:0 5px 0 #DFE7EF}
        .gz-btn.back{flex:0 1 auto;padding:8px 16px;border-radius:14px;font-size:13px;color:#A8B4C2;background:none;box-shadow:none}
        .gz-fb{text-align:center;font-size:15px;font-weight:900;margin-top:11px;min-height:20px}
        .gz-fb.good{color:#2FA85F}
        .gz-fb.try{color:#E07A5F}

        /* ---------- 通关庆祝 ---------- */
        .gz-win{position:fixed;inset:0;background:rgba(61,58,75,.55);display:flex;align-items:center;
                justify-content:center;z-index:60;padding:22px}
        .gz-winbox{background:#fff;border-radius:28px;padding:26px 22px;text-align:center;max-width:330px;width:100%;
                   box-shadow:0 14px 40px rgba(0,0,0,.2);animation:gzPop .5s}
        .gz-winbox h2{margin:6px 0 6px;font-size:22px;font-weight:900;color:#3D3A4B}
        .gz-winbox p{margin:0 0 16px;font-size:14px;color:#8A97A8;line-height:1.5}
        .gz-zrow{display:flex;justify-content:center;gap:5px;margin:10px 0 14px}
        .gz-zrow span{font-size:26px;animation:gzPop .5s backwards}

        /* 撒花 */
        .gz-cf{position:fixed;top:-14px;width:9px;height:15px;border-radius:2px;z-index:70;pointer-events:none}
        @keyframes gzFall{to{transform:translateY(105vh) rotate(720deg);opacity:.15}}

        /* 赞 → 星 飞行特效 */
        .gz-fly{position:fixed;z-index:80;pointer-events:none;font-size:26px;
                transition:transform .85s cubic-bezier(.4,-.2,.5,1),opacity .85s}
        .gz-merge{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:90;
                  text-align:center;pointer-events:none}
        .gz-merge .big{font-size:74px;animation:gzMergeIn .7s cubic-bezier(.3,1.6,.5,1)}
        .gz-merge .tip{font-size:17px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35);margin-top:6px}
        @keyframes gzMergeIn{0%{transform:scale(0) rotate(-160deg);opacity:0}
                             60%{transform:scale(1.25) rotate(12deg);opacity:1}
                             100%{transform:scale(1) rotate(0)}}
/* ---- 重温关（9-05 深夜路由器版：讲/唱/做/画/找 + 家长确认） ---- */
.gz-revisit{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.gz-rev-sub{color:#6b7280;font-size:14px;text-align:center;max-width:88%}
.gz-rev-act{font-size:64px;line-height:1;background:#FFF7E6;border:2.5px solid #F5E3BC;border-radius:24px;
            padding:18px 34px;box-shadow:0 5px 0 #EAD9AE}
.gz-rev-btn{border:none;border-radius:999px;padding:12px 24px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#34c77b,#2ba35f);box-shadow:0 4px 0 #1f7f49;transition:transform .12s ease;min-width:0;max-width:100%;font-family:inherit}
.gz-rev-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1f7f49}
.gz-rev-hint{font-size:13px;color:#9AA7B5;font-weight:700}
.gz-rev-ask{font-size:17px;font-weight:900;color:#3D3A4B;text-align:center;line-height:1.5}
.gz-rev-row{display:flex;gap:12px;align-items:stretch}
.gz-rev-yes{border:none;border-radius:999px;padding:13px 18px;font-size:16px;font-weight:900;color:#fff;
            background:linear-gradient(135deg,#34c77b,#2ba35f);box-shadow:0 4px 0 #1f7f49;
            min-width:0;flex:1;max-width:170px;font-family:inherit;cursor:pointer;transition:transform .12s ease}
.gz-rev-yes:active{transform:translateY(3px);box-shadow:0 1px 0 #1f7f49}
.gz-rev-yes.wait{background:#C7D2DD;box-shadow:0 4px 0 #A9B7C6;cursor:default;font-size:15px;font-weight:700}
.gz-rev-no{border:none;border-radius:999px;padding:13px 16px;font-size:14px;font-weight:800;color:#5A6675;
           background:#fff;box-shadow:0 4px 0 #DCE6F0;font-family:inherit;cursor:pointer;transition:transform .12s ease;flex:1;max-width:130px}
.gz-rev-no:active{transform:translateY(3px);box-shadow:0 1px 0 #DCE6F0}

/* ---- L4b 动效（外部L批 9-17）：入场弹跳 + 泡泡漂浮 + 题干呼吸 ---- */
/* 入场：缩放弹入（backwards 保 delay 期间不可见），配 nth-child 错峰 */
@keyframes gzIn{0%{transform:scale(.55);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
.gz-opts .gz-card{animation:gzIn .38s cubic-bezier(.3,1.4,.5,1) backwards}
.gz-opts .gz-card:nth-child(2){animation-delay:.07s}
.gz-opts .gz-card:nth-child(3){animation-delay:.14s}
.gz-opts .gz-card:nth-child(4){animation-delay:.21s}
.gz-flip{animation:gzIn .38s cubic-bezier(.3,1.4,.5,1) backwards}
.gz-cards .gz-flip:nth-child(2){animation-delay:.06s}
.gz-cards .gz-flip:nth-child(3){animation-delay:.12s}
.gz-cards .gz-flip:nth-child(4){animation-delay:.18s}
.gz-cards .gz-flip:nth-child(5){animation-delay:.24s}
.gz-cards .gz-flip:nth-child(6){animation-delay:.30s}
.gz-item{animation:gzIn .34s cubic-bezier(.3,1.4,.5,1) backwards}
.gz-items .gz-item:nth-child(2){animation-delay:.06s}
.gz-items .gz-item:nth-child(3){animation-delay:.12s}
.gz-items .gz-item:nth-child(4){animation-delay:.18s}
.gz-items .gz-item:nth-child(5){animation-delay:.24s}
.gz-items .gz-item:nth-child(6){animation-delay:.30s}
.gz-items .gz-item:nth-child(7){animation-delay:.36s}
.gz-items .gz-item:nth-child(8){animation-delay:.42s}
/* 泡泡漂浮：用独立 translate 属性（不占 transform，:active 按压与 gone/ok/no 动画互不打架）；
   nth-child 负 delay 让各泡泡相位错开，像各自在飘 */
@keyframes gzFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.gz-bub{animation:gzIn .38s cubic-bezier(.3,1.4,.5,1) backwards,gzFloat 2.8s ease-in-out infinite;translate:0 0}
.gz-bubs .gz-bub:nth-child(2){animation-delay:0s,-.7s}
.gz-bubs .gz-bub:nth-child(3){animation-delay:.07s,-1.4s}
.gz-bubs .gz-bub:nth-child(4){animation-delay:.14s,-2.1s}
.gz-bubs .gz-bub:nth-child(5){animation-delay:.21s,-.35s}
.gz-bubs .gz-bub:nth-child(6){animation-delay:.28s,-1.05s}
/* 题干大图呼吸：轻微缩放起伏，画面「活」但不闹 */
@keyframes gzBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.gz-scenebox svg{animation:gzBreath 3.2s ease-in-out infinite}
/* 答对时卡片里的小图也跳一下（卡框已有 gzPop，图跟随更带感） */
.gz-card.ok .p svg,.gz-bub.ok svg{animation:gzPop .42s}