/* ============================================================
 * 皮卡渔塘 主样式表·body 段（2026-10-04 自 index.html 内联 <style> 抽取）
 * 抽取时按文档原顺序拼接，级联关系与抽取前完全一致；
 * 修改本文件后须递增 index.html 引用处 ?v= 版本号。 */

/* ==== 原块 #2  index.html 第 1168~1174 行 ==== */
    @keyframes lgShake { 0%,100%{transform:translateX(-50%) rotate(0)} 20%{transform:translateX(calc(-50% - 7px)) rotate(-2.5deg)} 40%{transform:translateX(calc(-50% + 7px)) rotate(2.5deg)} 60%{transform:translateX(calc(-50% - 5px)) rotate(-2deg)} 80%{transform:translateX(calc(-50% + 5px)) rotate(2deg)} }
    @keyframes lgRays { to { transform:translateX(-50%) rotate(360deg) } }
    @keyframes lgIdle { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.02)} }
    @keyframes lgTwinkle { 0%,100%{opacity:.2;transform:scale(.6)} 50%{opacity:1;transform:scale(1.15)} }
    @keyframes lgBubble { 0%{transform:translateY(0);opacity:0} 12%{opacity:.75} 100%{transform:translateY(-78vh);opacity:0} }

/* ==== 原块 #3  index.html 第 1175~1186 行 ==== */
    @keyframes lgShake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-2.5deg) translateX(-6px)} 40%{transform:rotate(2.5deg) translateX(6px)} 60%{transform:rotate(-2deg) translateX(-4px)} 80%{transform:rotate(2deg) translateX(4px)} }
    @keyframes lgRays { to { transform:rotate(360deg) } }
    @keyframes lgIdle { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
    @keyframes lgTwinkle { 0%,100%{opacity:.2;transform:scale(.6)} 50%{opacity:1;transform:scale(1.15)} }
    /* 龙宫幸运保底特效 */
    @keyframes lgPityBanner { 0%{opacity:0;transform:scale(.55) translateY(14px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
    @keyframes lgHaloSpin { to{transform:rotate(360deg)} }
    @keyframes lgPityBreath { from{opacity:.75;transform:scale(1)} to{opacity:1;transform:scale(1.05)} }
    @keyframes lgPityRise { 0%{opacity:0;transform:scale(.3) translateY(24px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
    @keyframes lgPitySpark { 0%{opacity:0;transform:translate(0,0) scale(.4)} 16%{opacity:1} 100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-90px)) scale(1.05)} }

/* ==== 原块 #4  index.html 第 1265~1360 行 ==== */
  /* ===== 巨齿鲨出场动画（风暴+深海+破水，约 11s，可跳过） ===== */
  #shark-cine { position:fixed; inset:0; z-index:9000; overflow:hidden; background:#050a14;
                opacity:0; transition:opacity .5s; }
  #shark-cine.sk-on { opacity:1; }
  #shark-cine.sk-out { opacity:0; transition:opacity .7s; }
  .sk-bg { position:absolute; inset:-2%; background-size:cover; background-position:center;
           opacity:0; transition:opacity .9s; }
  .sk-bg.show { opacity:1; }
  .sk-bg.dark { filter:brightness(.75) saturate(.85); }
  .sk-swirl { position:absolute; left:50%; top:62%; width:200px; height:200px; border-radius:50%;
              border:6px solid rgba(200,230,255,.35); border-top-color:transparent; border-bottom-color:rgba(140,190,230,.5);
              transform:translate(-50%,-50%) scale(0); opacity:0; animation:skSwirl 2.4s ease-out forwards; }
  @keyframes skSwirl { 0% { transform:translate(-50%,-50%) scale(0) rotate(0deg); opacity:0; }
                       30% { opacity:.9; } 100% { transform:translate(-50%,-50%) scale(1.6) rotate(540deg); opacity:0; } }
  .sk-shadow { position:absolute; top:50%; left:110%; width:min(120vw,1150px); transform:translateY(-50%);
               filter:brightness(.15) contrast(1.15); opacity:0; }
  .sk-shadow.go { animation:skPass 5s cubic-bezier(.4,.1,.6,.9) forwards; }
  @keyframes skPass { 0% { left:110%; opacity:0; } 12% { opacity:.96; } 50% { opacity:1; } 88% { opacity:.96; } 100% { left:-140%; opacity:0; } }
  .sk-dim { position:absolute; inset:0; background:rgba(0,5,12,.28); opacity:0; transition:opacity 1.2s; }
  .sk-dim.on { opacity:1; }
  .sk-breach { position:absolute; inset:-1%; background-size:cover; background-position:center;
               opacity:0; transform:scale(1.25); transition:none; }
  .sk-breach.show { animation:skBreach 1.2s cubic-bezier(.2,.9,.3,1) forwards; }
  @keyframes skBreach { 0% { opacity:0; transform:scale(1.3) translateY(30px); }
                        12% { opacity:1; transform:scale(1.02) translateY(-8px); }
                        20% { transform:scale(1.04) translateY(4px); }
                        30% { transform:scale(1.02) translateY(-2px); }
                        45% { transform:scale(1.01) translateY(0); }
                        100% { opacity:1; transform:scale(1) translateY(0); } }
  .sk-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:3; }
  .sk-flash.on { animation:skFlash .5s ease-out; }
  @keyframes skFlash { 0% { opacity:.95; } 100% { opacity:0; } }
  .sk-sink { transition:all 1.4s ease-in !important; }
  .sk-breach.sk-sinking { animation:none !important; transform:scale(.92) translateY(46vh); opacity:0; }
  .sk-title { position:absolute; left:0; right:0; top:11%; text-align:center; font-size:min(32px,6.6vw); font-weight:bold;
              color:#cfe6ff; text-shadow:0 0 20px rgba(120,180,255,.9), 0 3px 8px rgba(0,0,0,.6);
              letter-spacing:3px; opacity:0; transform:scale(.5); transition:all .5s cubic-bezier(.2,1.6,.4,1); z-index:2; }
  #shark-cine.sk-title-on .sk-title { opacity:1; transform:scale(1); }
  .sk-sub { position:absolute; left:0; right:0; bottom:7%; text-align:center; font-size:14px; color:#c8d8ee;
            text-shadow:0 1px 6px rgba(0,0,0,.8); opacity:0; transition:opacity .4s; z-index:2; }
  .sk-sub.on { opacity:1; }
  .sk-skip { position:absolute; right:16px; top:14px; font-size:13px; color:rgba(255,255,255,.65); cursor:pointer;
             border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:4px 14px; z-index:5; user-select:none; }
  .sk-skip:hover { color:#fff; border-color:#fff; }
  .sk-qte { position:absolute; left:50%; bottom:15%; transform:translateX(-50%); background:rgba(200,225,255,.94); color:#0d2a52;
            font-size:16px; font-weight:bold; padding:12px 26px; border-radius:40px;
            box-shadow:0 0 0 0 rgba(120,180,255,.7); opacity:0; pointer-events:none; white-space:nowrap; z-index:4; }
  #shark-cine.sk-qte-on .sk-qte { opacity:1; animation:skPulse .75s ease-out infinite; }
  @keyframes skPulse { 0% { box-shadow:0 0 0 0 rgba(120,180,255,.7); } 100% { box-shadow:0 0 0 26px rgba(120,180,255,0); } }
  .sk-shake { animation:skShake .45s ease-in-out; }
  @keyframes skShake { 0%,100% { transform:translate(0,0); } 20% { transform:translate(-7px,4px); } 40% { transform:translate(6px,-5px); }
                       60% { transform:translate(-5px,-3px); } 80% { transform:translate(4px,3px); } }
  .sk-shock { position:absolute; left:50%; top:55%; width:60px; height:60px; border-radius:50%;
              border:5px solid rgba(255,255,255,.75); transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none; z-index:2; }
  .sk-bg, .sk-breach, .sk-lunge, .sk-shock, .sk-flash2, .sk-black { will-change:transform,opacity; backface-visibility:hidden; }
  .sk-bg, .sk-breach, .sk-lunge, .sk-shock, .sk-flash2, .sk-black { will-change:transform,opacity; backface-visibility:hidden; }
  .sk-shock.go1 { animation:skShock 1s ease-out forwards; }
  .sk-shock.go2 { animation:skShock 1s ease-out .18s forwards; }
  .sk-shock.go3 { animation:skShock 1s ease-out .36s forwards; }
  @keyframes skShock { 0% { transform:translate(-50%,-50%) scale(0); opacity:.95; }
                       100% { transform:translate(-50%,-50%) scale(12); opacity:0; } }
  .sk-sil { position:absolute; top:56%; left:112%; height:min(44vh,380px); transform:translateY(-50%);
            opacity:0; filter:blur(4px) brightness(.9) saturate(.8); transition:filter .8s; }
  .sk-sil.go { animation:skApproach 3s ease-in-out forwards; }
  @keyframes skApproach { 0% { left:112%; opacity:0; filter:blur(7px) brightness(.75) saturate(.6); }
                          25% { opacity:.85; }
                          70% { filter:blur(2.5px) brightness(.85) saturate(.75); }
                          100% { left:26%; opacity:1; filter:blur(1px) brightness(1) saturate(.9); } }
  .sk-black { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:3; transition:opacity .12s; }
  .sk-black.on { opacity:1; }
  .sk-lunge { position:absolute; inset:-1%; background-size:cover; background-position:center;
              opacity:0; transform:scale(1.35); }
  .sk-lunge.show { animation:skLunge .9s cubic-bezier(.15,.9,.3,1) forwards; }
  @keyframes skLunge { 0% { opacity:0; transform:scale(1.38) translateY(14px); }
                       10% { opacity:1; transform:scale(1.05) translateY(-6px); }
                       22% { transform:scale(1.07) translateY(3px); }
                       38% { transform:scale(1.03) translateY(-1px); }
                       100% { opacity:1; transform:scale(1) translateY(0); } }
  .sk-rain span { position:absolute; top:-12%; width:1.5px; height:76px;
                  background:linear-gradient(rgba(170,205,240,0), rgba(170,205,240,.5)); animation:skRain linear infinite; }
  @keyframes skRain { to { transform:translateY(125vh); } }
  .sk-light { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 8%, rgba(225,240,255,.95), rgba(160,200,255,.35) 55%, transparent 80%);
              opacity:0; pointer-events:none; z-index:2; }
  .sk-light.on { animation:skLight .55s ease-out; }
  @keyframes skLight { 0% { opacity:0; } 10% { opacity:1; } 22% { opacity:.15; } 34% { opacity:.85; } 60% { opacity:0; } 100% { opacity:0; } }
  .sk-bub { position:absolute; bottom:-6%; border-radius:50%; border:1.5px solid rgba(170,215,255,.45);
            background:rgba(170,215,255,.1); animation:skBub linear infinite; pointer-events:none; }
  @keyframes skBub { 0% { transform:translateY(0); opacity:0; } 15% { opacity:.8; } 100% { transform:translateY(-115vh); opacity:0; } }
  .sk-bg.show { animation:skBgIn .9s ease-out forwards, skKen 13s ease-in-out forwards; }
  @keyframes skBgIn { from { opacity:0; } to { opacity:1; } }
  @keyframes skKen { 0% { transform:scale(1.03) translate(0,0); } 100% { transform:scale(1.16) translate(-2.5%, 1.5%); } }
  #shark-cine.sk-dive .sk-bg.show { animation:skBgIn .9s ease-out forwards, skDiveBg .7s ease-in forwards, skKen 8s ease-in-out infinite alternate; }
  @keyframes skDiveBg { 0% { transform:scale(1.03) translate(0,0); } 100% { transform:scale(1.3) translate(0,10%); } }
  @media (max-width:600px) { .sk-shadow { width:86vw; } .sk-title { font-size:6.6vw; } .sk-qte { font-size:14px; padding:10px 20px; } }

/* ==== 原块 #5  index.html 第 1386~1538 行 ==== */
  /* ====== 翻车鱼·深海洞穴出场动画（约13.5s）
     镜头潜入洞穴 → 洞底睡姿特写(Zzz) → 被香气弄醒(双态交叉淡化) → 慢悠悠S形游近 → 发现食物冲刺 → 定格登场
     与 index.html 美人鱼/巨齿鲨出场动画同架构，接入游戏时整段移植 ====== */
  #mo-cine { position:fixed; inset:0; z-index:9000; overflow:hidden; background:#050d1c;
             opacity:0; transition:opacity .8s; }
  #mo-cine.mo-on { opacity:1; }
  #mo-cine.mo-out { opacity:0 !important; transition:opacity .7s; }
  #mo-cine.hidden { display:none; }

  #mo-camera { position:absolute; inset:0; will-change:transform; transform-origin:50% 50%; }

  /* ---- 双层背景：洞穴 → 明亮海域（6.2~9.4s 随游动进度横向平移+淡化，像穿出洞口） ---- */
  #mo-bg1 { position:absolute; inset:-3% -14%; background:url("https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/fish/cine/mola_cave_bg.jpg") center/cover no-repeat;
            will-change:transform,filter; }
  #mo-bg2 { position:absolute; inset:-3% -14%; background:url("https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/fish/cine/mola_reef_bg.jpg") center/cover no-repeat;
            opacity:0; will-change:transform,opacity; }
  #mo-dim { position:absolute; inset:0; pointer-events:none; opacity:1; will-change:opacity;
            background:radial-gradient(ellipse at 42% 60%, rgba(2,8,20,.66), rgba(2,8,20,.34) 55%, transparent 82%); }

  /* ---- 氛围：光柱 / 星尘 / 气泡 / 海草 ---- */
  .mo-ray { position:absolute; top:-14%; width:120px; height:85%; pointer-events:none;
            background:linear-gradient(180deg, rgba(170,255,235,.15), rgba(190,215,255,.06) 62%, transparent);
            filter:blur(8px); animation:moRay 8s ease-in-out infinite alternate; }
  @keyframes moRay { from { opacity:.35; transform:rotate(11deg) translateX(0); } to { opacity:.85; transform:rotate(14deg) translateX(28px); } }
  .mo-dust { position:absolute; width:3px; height:3px; border-radius:50%; pointer-events:none;
             background:rgba(225,250,245,.65); box-shadow:0 0 6px rgba(190,255,235,.8); animation:moDust linear infinite; }
  @keyframes moDust { 0% { transform:translateY(0); opacity:0; } 18% { opacity:.7; } 82% { opacity:.4; } 100% { transform:translateY(-13vh); opacity:0; } }
  .mo-bub { position:absolute; bottom:-6%; border-radius:50%; pointer-events:none;
            border:1.5px solid rgba(215,245,255,.5); background:rgba(220,240,255,.08); animation:moBub linear infinite; }
  .mo-bub::after { content:''; position:absolute; left:20%; top:16%; width:30%; height:30%; border-radius:50%;
                   background:rgba(255,255,255,.8); }
  @keyframes moBub { 0% { transform:translateY(0); opacity:0; } 12% { opacity:.9; } 100% { transform:translateY(-118vh); opacity:0; } }
  #mo-cine.mo-diving .mo-bub { animation-duration:1.6s, 1.6s; }

  .mo-weed { position:absolute; bottom:-2%; width:24px; pointer-events:none; transform-origin:50% 100%;
             background:linear-gradient(180deg, rgba(90,210,190,.0), rgba(70,185,170,.32) 30%, rgba(40,120,125,.48));
             border-radius:50% 50% 8px 8px; filter:blur(1px);
             animation:moWeed 4.4s ease-in-out infinite alternate; }
  @keyframes moWeed { from { transform:rotate(-4deg); } to { transform:rotate(4.5deg); } }

  /* ---- 主角：睡/醒双态素材交叉淡化 ---- */
  #mo-rise { position:absolute; left:50%; top:47%; width:0; height:0; z-index:3; will-change:transform; }
  #mo-sway { position:absolute; left:0; top:0; will-change:transform; }
  .mo-body { position:absolute; left:0; top:0; width:min(58vh,410px); height:min(58vh,410px);
             transform:translate(-50%,-50%); }
  .mo-body img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
                 filter:drop-shadow(0 10px 26px rgba(120,200,255,.32)); will-change:opacity; }
  #mo-img-open  { opacity:0; transition:opacity .55s ease; }
  #mo-img-sleep { opacity:1; transition:opacity .55s ease; }
  #mo-cine.mo-awake #mo-img-open  { opacity:1; }
  #mo-cine.mo-awake #mo-img-sleep { opacity:0; }
  /* 睡觉呼吸起伏 / 醒后轻微漂浮（内层，不干扰 rAF 变换） */
  .mo-breath { position:absolute; inset:0; }
  #mo-cine.mo-sleeping .mo-breath { animation:moBreath 3.4s ease-in-out infinite; }
  @keyframes moBreath { 0%,100% { transform:scale(1) translateY(0); } 50% { transform:scale(1.028) translateY(-4px); } }
  #mo-cine.mo-awake .mo-breath { animation:moIdle 3.2s ease-in-out infinite; }
  @keyframes moIdle { 0%,100% { transform:scale(1) translateY(0); } 50% { transform:scale(1.014) translateY(-3px); } }
  /* 虹彩鳞光（醒后） */
  #mo-cine.mo-awake .mo-body img { animation:moGlow 2.8s ease-in-out infinite alternate; }
  @keyframes moGlow { from { filter:drop-shadow(0 10px 26px rgba(120,200,255,.32)) brightness(1); }
                      to { filter:drop-shadow(0 10px 30px rgba(200,170,255,.42)) brightness(1.06); } }
  /* 醒来瞬间的柔光爆发 */
  #mo-burst { position:absolute; left:50%; top:34%; width:150px; height:150px; border-radius:50%; pointer-events:none; z-index:4;
              background:radial-gradient(circle, rgba(240,255,250,.95), rgba(190,235,255,.45) 45%, transparent 72%);
              transform:translate(-50%,-50%) scale(0); opacity:0; }
  #mo-burst.go { animation:moBurst 1.1s ease-out forwards; }
  @keyframes moBurst { 0% { transform:translate(-50%,-50%) scale(.2); opacity:0; } 22% { opacity:1; }
                       100% { transform:translate(-50%,-50%) scale(2.6); opacity:0; } }
  #mo-cine.mo-awake .mo-body { animation:moPop .9s cubic-bezier(.3,1.5,.4,1); }
  @keyframes moPop { 0% { transform:translate(-50%,-50%) scale(1); } 38% { transform:translate(-50%,-52%) scale(1.05); }
                     100% { transform:translate(-50%,-50%) scale(1); } }

  /* ---- Zzz（睡觉时头顶飘） ---- */
  #mo-zzz { position:absolute; left:24%; top:26%; pointer-events:none; z-index:4; }
  #mo-zzz b { position:absolute; color:rgba(205,235,255,.9); text-shadow:0 0 8px rgba(160,220,255,.7);
              animation:moZzz 3s ease-out infinite; opacity:0; }
  #mo-zzz b:nth-child(1) { font-size:17px; animation-delay:0s; }
  #mo-zzz b:nth-child(2) { font-size:24px; animation-delay:1s; }
  #mo-zzz b:nth-child(3) { font-size:31px; animation-delay:2s; }
  @keyframes moZzz { 0% { transform:translate(0,0) rotate(-8deg); opacity:0; } 22% { opacity:.95; }
                     100% { transform:translate(46px,-86px) rotate(14deg); opacity:0; } }
  #mo-cine.mo-awake #mo-zzz { opacity:0; transition:opacity .4s; }

  /* ---- 哈欠泡（醒来瞬间嘴边冒出） ---- */
  #mo-yawn { position:absolute; left:30%; top:50%; width:26px; height:26px; border-radius:50%; pointer-events:none; z-index:4;
             border:2px solid rgba(220,245,255,.65); background:rgba(225,245,255,.12); opacity:0; }
  #mo-yawn::after { content:''; position:absolute; left:22%; top:18%; width:28%; height:28%; border-radius:50%; background:rgba(255,255,255,.85); }
  #mo-cine.mo-awake #mo-yawn { animation:moYawn 1.7s ease-out forwards; }
  @keyframes moYawn { 0% { transform:scale(.2); opacity:0; } 25% { opacity:.95; }
                      100% { transform:scale(1.7) translateY(-70px); opacity:0; } }

  /* ---- 鱼群跟随 / 前景掠鱼 ---- */
  .mo-fishfly { position:absolute; pointer-events:none; filter:blur(2px) brightness(.8); opacity:0; z-index:3; }
  #mo-cine.mo-diving .mo-fishfly { animation:moFishFly 1.7s ease-in-out forwards; }
  @keyframes moFishFly { 0% { transform:translateX(-30vw); opacity:0; } 15% { opacity:.85; }
                         100% { transform:translateX(135vw); opacity:0; } }
  #mo-school { position:absolute; pointer-events:none; will-change:transform; opacity:0; transition:opacity 1s; z-index:2; }

  /* ---- 食物光点 + 惊叹 ---- */
  #mo-food { position:absolute; left:73%; top:35%; width:0; height:0; z-index:3; opacity:0; transition:opacity .8s; pointer-events:none; }
  #mo-cine.mo-food-on #mo-food { opacity:1; }
  #mo-food i { position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%;
               background:radial-gradient(circle at 40% 36%, #fff, rgba(255,240,190,.9) 46%, rgba(255,210,140,.5) 72%, transparent);
               box-shadow:0 0 18px rgba(255,225,160,.95), 0 0 44px rgba(255,200,120,.55);
               animation:moFoodPulse 1.1s ease-in-out infinite; }
  @keyframes moFoodPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.55); } }
  #mo-excl { position:absolute; left:71.5%; top:24%; z-index:5; font-size:44px; font-weight:bold; color:#ffd76e; pointer-events:none;
             text-shadow:0 0 14px rgba(255,190,80,.9), 0 2px 6px rgba(30,20,5,.7);
             transform:scale(0); opacity:0; }
  #mo-cine.mo-excl #mo-excl { animation:moExcl 1.5s cubic-bezier(.25,1.6,.4,1) forwards; }
  @keyframes moExcl { 0% { transform:scale(0) rotate(-18deg); opacity:0; } 30% { transform:scale(1.25) rotate(4deg); opacity:1; }
                      55% { transform:scale(.95) rotate(0deg); } 80% { opacity:1; } 100% { transform:scale(1); opacity:.9; } }

  /* ---- 粒子 ---- */
  .mo-star { position:absolute; pointer-events:none; color:#d9f7e8; z-index:5;
             text-shadow:0 0 8px rgba(180,255,220,.95), 0 0 16px rgba(190,215,255,.6);
             animation:moStar 2.8s ease-out forwards; }
  @keyframes moStar { 0% { transform:translate(0,0) scale(0) rotate(0deg); opacity:0; }
                      18% { opacity:1; transform:translate(var(--dx,0),var(--dy,-14px)) scale(1.15) rotate(140deg); }
                      100% { transform:translate(calc(var(--dx,0)*1.9),calc(var(--dy,-14px)*2.5)) scale(.25) rotate(320deg); opacity:0; } }
  /* 光粒（发现食物时的汇聚/爆发） */
  .mo-spec { position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:4;
             background:radial-gradient(circle at 38% 34%, #fff, rgba(215,255,240,.9) 50%, rgba(185,220,255,.5));
             box-shadow:0 0 9px rgba(210,250,235,.95); will-change:transform,opacity; }

  /* ---- 定格：光环 / 高光 / 标题 ---- */
  #mo-ring { position:absolute; left:50%; top:45%; width:min(58vh,400px); height:min(58vh,400px); z-index:3; pointer-events:none;
             transform:translate(-50%,-50%) scale(.5); opacity:0; border-radius:50%;
             border:3px solid rgba(205,255,235,.55); box-shadow:0 0 22px rgba(170,255,225,.4), inset 0 0 26px rgba(185,215,255,.32); }
  #mo-cine.mo-ring-on #mo-ring { animation:moRing 1.3s cubic-bezier(.25,1.3,.4,1) forwards, moRingPulse 2.6s ease-in-out 1.3s infinite; }
  @keyframes moRing { 0% { transform:translate(-50%,-50%) scale(.5); opacity:0; } 55% { opacity:.95; }
                      100% { transform:translate(-50%,-50%) scale(1); opacity:.8; } }
  @keyframes moRingPulse { 0%,100% { box-shadow:0 0 22px rgba(170,255,225,.4), inset 0 0 26px rgba(185,215,255,.32); }
                           50% { box-shadow:0 0 34px rgba(190,255,230,.65), inset 0 0 34px rgba(185,215,255,.5); } }
  #mo-finale { position:absolute; inset:0; pointer-events:none; z-index:5; opacity:0;
               background:radial-gradient(ellipse at 50% 44%, rgba(244,255,251,.5), rgba(215,240,255,.2) 42%, transparent 72%); }
  #mo-finale.go { animation:moFinale 1.5s ease-out forwards; }
  @keyframes moFinale { 0% { opacity:0; } 16% { opacity:1; } 100% { opacity:0; } }
  .mo-title { position:absolute; left:0; right:0; top:8%; text-align:center; z-index:6;
              font-size:min(40px,8.4vw); font-weight:bold; letter-spacing:8px;
              background:linear-gradient(100deg, #b5f0d9 8%, #c9c0ff 34%, #a8e0ff 62%, #d5ffe9 92%);
              -webkit-background-clip:text; background-clip:text; color:transparent;
              filter:drop-shadow(0 0 16px rgba(170,255,225,.55)) drop-shadow(0 2px 5px rgba(20,40,80,.65));
              opacity:0; transform:scale(.62) translateY(12px); transition:all .7s cubic-bezier(.25,1.5,.4,1); }
  #mo-cine.mo-title-on .mo-title { opacity:1; transform:scale(1) translateY(0); }
  .mo-sub { position:absolute; left:0; right:0; bottom:5.5%; text-align:center; z-index:6; font-size:13.5px; color:#dff7ec;
            text-shadow:0 1px 8px rgba(10,30,60,.85); letter-spacing:2px; opacity:0; transition:opacity .5s; }
  .mo-sub.on { opacity:1; }
  .mo-skip { position:absolute; right:16px; top:14px; font-size:13px; color:rgba(235,250,245,.7); cursor:pointer;
             border:1px solid rgba(235,250,245,.4); border-radius:20px; padding:4px 14px; z-index:7; user-select:none; }
  .mo-skip:hover { color:#fff; border-color:#fff; }

/* ==== 原块 #6  index.html 第 1579~1778 行 ==== */

  /* ====== 珍珠公主·深海龙宫出场动画（约10.5s）
     镜头潜入龙宫 → 珊瑚机关点亮 → 珍珠爆开花 → 光粒聚合成形 → S形游近 → 悬停定格
     与 index.html 巨齿鲨出场动画同架构，接入游戏时整段移植 ====== */
  #mm-cine { position:fixed; inset:0; z-index:9000; overflow:hidden; background:#050d1c;
             opacity:0; transition:opacity .8s; }
  #mm-cine.mm-on { opacity:1; }
  #mm-cine.mm-out { opacity:0 !important; transition:opacity .7s; }
  #mm-cine.hidden { display:none; }

  #mm-camera { position:absolute; inset:0; will-change:transform; transform-origin:50% 50%; }

  /* ---- 远景：龙宫背景（初始偏暗，后半段"窗格点亮"整体变亮） ---- */
  #mm-bg { position:absolute; inset:-3%; background:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/fish/cine/palace_bg.jpg) center/cover no-repeat;
           filter:brightness(.72) saturate(.88); transition:filter 2s; will-change:filter; }
  #mm-cine.mm-bright #mm-bg { filter:brightness(1.14) saturate(1.12); }
  #mm-dim { position:absolute; inset:0; pointer-events:none; opacity:1; transition:opacity 2.2s;
            background:radial-gradient(ellipse at 50% 62%, rgba(2,8,20,.62), rgba(2,8,20,.30) 55%, transparent 82%); }
  #mm-cine.mm-bright #mm-dim { opacity:0; }

  /* ---- 氛围：光柱 / 星尘 / 前景气泡 ---- */
  .mm-ray { position:absolute; top:-14%; width:130px; height:85%; pointer-events:none;
            background:linear-gradient(180deg, rgba(180,220,255,.16), rgba(255,200,235,.06) 62%, transparent);
            filter:blur(8px); animation:mmRay 8s ease-in-out infinite alternate; }
  @keyframes mmRay { from { opacity:.4; transform:rotate(12deg) translateX(0); } to { opacity:.9; transform:rotate(15deg) translateX(30px); } }
  .mm-dust { position:absolute; width:3px; height:3px; border-radius:50%; pointer-events:none;
             background:rgba(255,235,250,.7); box-shadow:0 0 6px rgba(255,220,245,.85); animation:mmDust linear infinite; }
  @keyframes mmDust { 0% { transform:translateY(0); opacity:0; } 18% { opacity:.75; } 82% { opacity:.45; } 100% { transform:translateY(-14vh); opacity:0; } }
  .mm-bub { position:absolute; bottom:-6%; border-radius:50%; pointer-events:none;
            border:1.5px solid rgba(220,242,255,.5); background:rgba(220,240,255,.08); animation:mmBub linear infinite; }
  .mm-bub::after { content:''; position:absolute; left:20%; top:16%; width:30%; height:30%; border-radius:50%;
                   background:rgba(255,255,255,.8); }
  @keyframes mmBub { 0% { transform:translateY(0); opacity:0; } 12% { opacity:.9; } 100% { transform:translateY(-118vh); opacity:0; } }
  /* 潜入段加速气泡（表现镜头前游） */
  #mm-cine.mm-diving .mm-bub { animation-duration:1.6s, 1.6s; }

  /* ---- 中景：海草 / 水母 / 鱼群 ---- */
  .mm-weed { position:absolute; bottom:-2%; width:26px; pointer-events:none; transform-origin:50% 100%;
             background:linear-gradient(180deg, rgba(80,200,190,.0), rgba(70,180,175,.34) 30%, rgba(40,120,130,.5));
             border-radius:50% 50% 8px 8px; filter:blur(1px);
             animation:mmWeed 4.2s ease-in-out infinite alternate; }
  @keyframes mmWeed { from { transform:rotate(-4deg); } to { transform:rotate(4.5deg); } }
  #mm-cine.mm-shock .mm-weed { animation:mmWeedBend .9s ease-out; }
  @keyframes mmWeedBend { 0% { transform:rotate(0); } 28% { transform:rotate(-16deg) scaleY(.94); } 62% { transform:rotate(9deg); } 100% { transform:rotate(0); } }

  .mm-jelly { position:absolute; pointer-events:none; opacity:.75; transition:left 1.8s ease, top 1.8s ease, opacity 1.2s; z-index:2; }
  .mm-jelly .jd { position:relative; width:100%; padding-bottom:78%;
                  background:radial-gradient(circle at 42% 34%, rgba(255,255,255,.95), rgba(170,215,255,.75) 34%, rgba(190,150,255,.5) 68%, rgba(150,190,255,.28));
                  border-radius:52% 52% 44% 44%; box-shadow:0 0 18px rgba(170,210,255,.5), inset -6px -8px 16px rgba(120,90,220,.35);
                  animation:mmJelly 2.6s ease-in-out infinite; }
  @keyframes mmJelly { 0%,100% { transform:scale(1); } 50% { transform:scale(1.09,.9); } }
  .mm-jelly .jt { position:absolute; left:18%; right:18%; top:66%; height:44%; pointer-events:none; }
  .mm-jelly .jt i { position:absolute; top:0; width:3px; height:100%; border-radius:3px;
                    background:linear-gradient(180deg, rgba(190,220,255,.65), transparent);
                    transform-origin:top; animation:mmTent 2.2s ease-in-out infinite alternate; }
  @keyframes mmTent { from { transform:rotate(-9deg); } to { transform:rotate(9deg); } }
  #mm-cine.mm-shock .mm-jelly .jd { animation:mmJellyShrink .55s ease-out; }
  @keyframes mmJellyShrink { 0% { transform:scale(1); } 35% { transform:scale(.72,.6); filter:brightness(1.7); } 100% { transform:scale(1); } }
  #mm-cine.mm-shock .mm-jelly { opacity:1; }
  #mm-cine.mm-bright .mm-jelly { opacity:.92; filter:brightness(1.25); }

  .mm-fish { position:absolute; pointer-events:none; will-change:transform; z-index:2; }
  /* 前景掠过的小鱼（潜入段） */
  .mm-fishfly { position:absolute; pointer-events:none; filter:blur(2px) brightness(.8); opacity:0; z-index:3; }
  #mm-cine.mm-diving .mm-fishfly { animation:mmFishFly 1.7s ease-in-out forwards; }
  @keyframes mmFishFly { 0% { transform:translateX(-30vw) scaleX(1); opacity:0; } 15% { opacity:.85; }
                         100% { transform:translateX(135vw) scaleX(1); opacity:0; } }

  /* ---- 珊瑚机关 + 珍珠 ---- */
  #mm-coral { position:absolute; left:50%; bottom:2.5%; width:min(46vh,330px); height:min(46vh,330px); z-index:2;
              transform:translateX(-50%); will-change:transform,filter; }
  #mm-coral img { width:100%; height:100%; object-fit:contain; filter:brightness(.66) saturate(.85);
                  transition:filter 1.6s; will-change:filter; }
  #mm-coral.mm-lit img { filter:brightness(1.05) saturate(1.1); }
  /* 光脉从根部向顶端流动（点亮方式） */
  #mm-sweep { position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; pointer-events:none;
              -webkit-mask-image:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/fish/cine/coral_pearl.png); mask-image:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/fish/cine/coral_pearl.png);
              -webkit-mask-size:100% 100%; mask-size:100% 100%; opacity:0; }
  #mm-sweep.go { animation:mmSweep 1.5s ease-in-out forwards; }
  @keyframes mmSweep { 0% { opacity:0; transform:translateY(36%); } 18% { opacity:1; }
                       100% { opacity:0; transform:translateY(-30%); } }
  #mm-sweep i { position:absolute; left:0; right:0; height:26%;
                background:linear-gradient(180deg, transparent, rgba(255,225,250,.75) 45%, rgba(190,225,255,.7) 60%, transparent);
                mix-blend-mode:screen; }
  /* 珍珠光核（覆盖在珊瑚图珍珠位置的光球） */
  #mm-pearl { position:absolute; left:50%; top:16%; width:15%; aspect-ratio:1; border-radius:50%; pointer-events:none;
              transform:translate(-50%,-50%) scale(.55); opacity:0;
              background:radial-gradient(circle at 40% 36%, #fff, rgba(255,225,250,.9) 42%, rgba(185,215,255,.55) 70%, transparent);
              box-shadow:0 0 24px rgba(255,235,252,.9), 0 0 60px rgba(185,215,255,.5); }
  #mm-pearl.pulse { animation:mmPearlPulse .55s ease-in-out 2; }
  @keyframes mmPearlPulse { 0%,100% { transform:translate(-50%,-50%) scale(.55); } 50% { transform:translate(-50%,-50%) scale(.72); } }
  #mm-pearl.boom { animation:mmPearlBoom .8s ease-out forwards; }
  @keyframes mmPearlBoom { 0% { opacity:.95; transform:translate(-50%,-50%) scale(.6); }
                           30% { opacity:1; transform:translate(-50%,-50%) scale(1.5); }
                           100% { opacity:0; transform:translate(-50%,-50%) scale(3.4); } }
  /* 珍珠释放的水波（穿过场景） */
  .mm-shockwave { position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; z-index:3;
                  border:2px solid rgba(200,235,255,.55); box-shadow:0 0 18px rgba(200,235,255,.35);
                  transform:translate(-50%,-50%) scale(0); opacity:0; }
  .mm-shockwave.go { animation:mmShockwave 1.6s ease-out forwards; }
  @keyframes mmShockwave { 0% { transform:translate(-50%,-50%) scale(.05); opacity:.9; }
                           100% { transform:translate(-50%,-50%) scale(2.8); opacity:0; } }

  /* ---- 光粒聚合 + 人鱼具象化 ---- */
  .mm-spec { position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:4;
             background:radial-gradient(circle at 38% 34%, #fff, rgba(255,215,245,.9) 50%, rgba(180,215,255,.5));
             box-shadow:0 0 9px rgba(255,225,250,.95); will-change:transform,opacity; }
  #mm-rise { position:absolute; left:50%; top:47%; width:0; height:0; z-index:3; will-change:transform; }
  #mm-sway { position:absolute; left:0; top:0; will-change:transform; }
  .mm-body { position:absolute; left:0; top:0; width:min(64vh,430px); height:min(64vh,430px);
             transform:translate(-50%,-52%); visibility:hidden; } /* 光粒凝成前不可见 */
  .mm-body.mm-ghost, .mm-body.mm-solid { visibility:visible; }
  .mm-body img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
                 filter:drop-shadow(0 10px 26px rgba(90,160,255,.3)); will-change:opacity,filter,clip-path; }
  #mm-img-open { opacity:0; transition:opacity .9s ease; }
  #mm-cine.mm-awake #mm-img-open { opacity:1; }
  #mm-img-sleep { opacity:1; transition:opacity .9s ease; }
  #mm-cine.mm-awake #mm-img-sleep { opacity:0; }
  #mm-cine.mm-blink #mm-img-open { opacity:0 !important; transition:opacity .1s; }
  #mm-cine.mm-blink #mm-img-sleep { opacity:1 !important; transition:opacity .1s; }
  /* 具象化：半透明珍珠粒子态 → 实体化 */
  .mm-body.mm-ghost #mm-img-sleep { opacity:.42; filter:brightness(1.8) saturate(.6) blur(3px);
                                    transition:opacity .5s, filter .5s; }
  .mm-body.mm-ghost.mm-forming #mm-img-sleep { animation:mmForm 1.7s ease-out forwards; }
  @keyframes mmForm { 0% { clip-path:inset(100% 0 0 0); } 100% { clip-path:inset(0% 0 0 0); } }
  .mm-body.mm-solid #mm-img-sleep { opacity:1; filter:brightness(1) saturate(1) blur(0);
                                    transition:opacity .9s ease, filter .9s ease; }
  .mm-body.mm-glowing img { animation:mmGlow 2.6s ease-in-out infinite alternate; }
  @keyframes mmGlow { from { filter:drop-shadow(0 10px 26px rgba(90,160,255,.32)) brightness(1); }
                      to { filter:drop-shadow(0 10px 30px rgba(255,170,225,.42)) brightness(1.05); } }
  /* 虹彩鳞光 */
  .mm-body.mm-sheen img { animation:mmSheen 4.2s ease-in-out infinite; }
  @keyframes mmSheen { 0%,100% { filter:drop-shadow(0 10px 26px rgba(90,160,255,.32)) brightness(1) saturate(1) hue-rotate(0deg); }
                       33% { filter:drop-shadow(0 10px 30px rgba(255,170,225,.45)) brightness(1.09) saturate(1.18) hue-rotate(-8deg); }
                       66% { filter:drop-shadow(0 10px 30px rgba(150,235,220,.42)) brightness(1.09) saturate(1.15) hue-rotate(7deg); } }
  /* 睁眼柔光 */
  #mm-burst { position:absolute; left:50%; top:34%; width:150px; height:150px; border-radius:50%; pointer-events:none; z-index:4;
              background:radial-gradient(circle, rgba(255,240,250,.95), rgba(255,200,240,.45) 45%, transparent 72%);
              transform:translate(-50%,-50%) scale(0); opacity:0; }
  #mm-burst.go { animation:mmBurst 1.1s ease-out forwards; }
  @keyframes mmBurst { 0% { transform:translate(-50%,-50%) scale(.2); opacity:0; } 22% { opacity:1; }
                       100% { transform:translate(-50%,-50%) scale(2.6); opacity:0; } }
  #mm-cine.mm-awake .mm-body { animation:mmPop .9s cubic-bezier(.3,1.5,.4,1); }
  @keyframes mmPop { 0% { transform:translate(-50%,-52%) scale(1); } 38% { transform:translate(-50%,-54%) scale(1.05); }
                     100% { transform:translate(-50%,-52%) scale(1); } }

  /* ---- 粒子 ---- */
  .mm-star { position:absolute; pointer-events:none; color:#ffe9a8; z-index:5;
             text-shadow:0 0 8px rgba(255,220,140,.95), 0 0 16px rgba(255,190,220,.6);
             animation:mmStar 2.8s ease-out forwards; }
  @keyframes mmStar { 0% { transform:translate(0,0) scale(0) rotate(0deg); opacity:0; }
                      18% { opacity:1; transform:translate(var(--dx,0),var(--dy,-14px)) scale(1.15) rotate(140deg); }
                      100% { transform:translate(calc(var(--dx,0)*1.9),calc(var(--dy,-14px)*2.5)) scale(.25) rotate(320deg); opacity:0; } }
  .mm-heart { position:absolute; pointer-events:none; z-index:5; filter:drop-shadow(0 0 6px rgba(255,150,200,.8));
              animation:mmHeart 3.2s ease-out forwards; }
  @keyframes mmHeart { 0% { transform:translate(0,0) scale(.3); opacity:0; } 16% { opacity:.95; }
                       100% { transform:translate(var(--dx,0),-90px) scale(1.05); opacity:0; } }
  #mm-orbit { position:absolute; left:50%; top:47%; width:min(66vh,450px); height:min(66vh,450px); z-index:4;
              transform:translate(-50%,-50%); opacity:0; transition:opacity 1s; pointer-events:none;
              animation:mmOrbit 3s linear infinite; }
  #mm-cine.mm-orbit-on #mm-orbit { opacity:1; }
  @keyframes mmOrbit { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
  .mm-orb { position:absolute; width:9px; height:9px; border-radius:50%; background:rgba(255,230,250,.95);
            box-shadow:0 0 10px rgba(255,200,240,.95), 0 0 18px rgba(160,220,255,.7); }

  /* ---- 拱门符印点亮 ---- */
  .mm-seal { position:absolute; width:11px; height:11px; z-index:2; pointer-events:none;
             transform:translate(-50%,-50%) rotate(45deg) scale(.3); opacity:0; border-radius:2.5px;
             background:rgba(210,240,255,.95); box-shadow:0 0 12px rgba(160,220,255,.95);
             transition:all .45s cubic-bezier(.3,1.5,.4,1); }
  .mm-seal.on { opacity:1; transform:translate(-50%,-50%) rotate(45deg) scale(1); }

  /* ---- 定格：光环 / 高光 / 标题 ---- */
  #mm-ring { position:absolute; left:50%; top:47%; width:min(58vh,400px); height:min(58vh,400px); z-index:3; pointer-events:none;
             transform:translate(-50%,-50%) scale(.5); opacity:0; border-radius:50%;
             border:3px solid rgba(255,214,242,.55); box-shadow:0 0 22px rgba(255,190,235,.4), inset 0 0 26px rgba(170,215,255,.32); }
  #mm-cine.mm-ring-on #mm-ring { animation:mmRing 1.3s cubic-bezier(.25,1.3,.4,1) forwards, mmRingPulse 2.6s ease-in-out 1.3s infinite; }
  @keyframes mmRing { 0% { transform:translate(-50%,-50%) scale(.5); opacity:0; } 55% { opacity:.95; }
                      100% { transform:translate(-50%,-50%) scale(1); opacity:.8; } }
  @keyframes mmRingPulse { 0%,100% { box-shadow:0 0 22px rgba(255,190,235,.4), inset 0 0 26px rgba(170,215,255,.32); }
                           50% { box-shadow:0 0 34px rgba(255,190,235,.65), inset 0 0 34px rgba(170,215,255,.5); } }
  #mm-finale { position:absolute; inset:0; pointer-events:none; z-index:5; opacity:0;
               background:radial-gradient(ellipse at 50% 44%, rgba(255,244,252,.5), rgba(255,215,240,.2) 42%, transparent 72%); }
  #mm-finale.go { animation:mmFinale 1.5s ease-out forwards; }
  @keyframes mmFinale { 0% { opacity:0; } 16% { opacity:1; } 100% { opacity:0; } }
  .mm-title { position:absolute; left:0; right:0; top:8%; text-align:center; z-index:6;
              font-size:min(40px,8.4vw); font-weight:bold; letter-spacing:8px;
              background:linear-gradient(100deg, #ffc7e2 8%, #e6c8ff 34%, #a8e6ff 62%, #ffd9f0 92%);
              -webkit-background-clip:text; background-clip:text; color:transparent;
              filter:drop-shadow(0 0 16px rgba(255,190,235,.55)) drop-shadow(0 2px 5px rgba(20,40,80,.65));
              opacity:0; transform:scale(.62) translateY(12px); transition:all .7s cubic-bezier(.25,1.5,.4,1); }
  #mm-cine.mm-title-on .mm-title { opacity:1; transform:scale(1) translateY(0); }
  .mm-sub { position:absolute; left:0; right:0; bottom:5.5%; text-align:center; z-index:6; font-size:13.5px; color:#ffe3f2;
            text-shadow:0 1px 8px rgba(10,30,60,.85); letter-spacing:2px; opacity:0; transition:opacity .5s; }
  .mm-sub.on { opacity:1; }
  .mm-skip { position:absolute; right:16px; top:14px; font-size:13px; color:rgba(255,235,248,.7); cursor:pointer;
             border:1px solid rgba(255,235,248,.4); border-radius:20px; padding:4px 14px; z-index:7; user-select:none; }
  .mm-skip:hover { color:#fff; border-color:#fff; }

/* ==== 原块 #7  index.html 第 1820~1830 行 ==== */
  /* 动画层补充：水母本体/海草/符印/鱼 由 JS 生成，这里只放容器样式占位 */
  #mm-jellies, #mm-weeds, #mm-seals, #mm-bubbles, #mm-dusts, #mm-fishflies, #mm-school, #mm-stars, #mm-hearts { position:absolute; inset:0; pointer-events:none; }
  #mm-brighten { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.8s;
                 background:radial-gradient(ellipse at 50% 46%, rgba(255,215,245,.16), rgba(160,200,255,.10) 50%, transparent 78%); }
  #mm-cine.mm-bright #mm-brighten { opacity:1; }
  #mm-aura { position:absolute; left:50%; top:47%; width:min(76vh,520px); height:min(76vh,520px); pointer-events:none; z-index:2;
             transform:translate(-50%,-50%); border-radius:50%; opacity:0; transition:opacity 1.6s;
             background:radial-gradient(circle, rgba(255,205,240,.26), rgba(160,200,255,.14) 46%, transparent 70%); }
  #mm-cine.mm-bright #mm-aura { opacity:1; }

/* ==== 原块 #8  index.html 第 1882~2076 行 ==== */
  /* ---- 探险：海底遗迹画风（青灰石+鎏金，与百宝箱木质同美术体系） ---- */
  #exp .ex-head { background:linear-gradient(180deg,#5f7d6c,#435c4d); border-bottom:3px solid #2e4036;
    padding:10px 14px; display:flex; align-items:center; position:sticky; top:0; z-index:10; }
  #exp .ex-head-map { flex:none; font-size:11px; color:#ffe9c8; background:rgba(0,0,0,.28);
    border:1px solid rgba(255,233,200,.4); border-radius:999px; padding:3px 10px; margin-right:9px;
    white-space:nowrap; max-width:96px; overflow:hidden; text-overflow:ellipsis; }
  #exp .ex-head-ico { width:30px; height:30px; margin-right:9px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
  #exp .ex-head b { flex:1; color:#ffe9c8; font-size:15px; letter-spacing:2px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
  #exp .ex-body { background:#f2ead4; padding:12px; min-height:280px; }
  #exp .ex-empty { padding:60px 0; text-align:center; color:#a1887f; font-size:13px; }
  #exp .ex-map { position:relative; border-radius:10px; overflow:hidden; border:2px solid #8a7a55; box-shadow:0 3px 10px rgba(90,74,44,.25); }
  #exp .ex-map-img { width:100%; display:block; aspect-ratio:2/1; object-fit:cover; }
  #exp .ex-map-mask { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(16,34,28,.85)); }
  #exp .ex-map-txt { position:absolute; left:12px; right:70px; bottom:9px; color:#fff8e0; line-height:1.5; }
  #exp .ex-map-txt b { display:block; font-size:17px; letter-spacing:2px; text-shadow:0 2px 4px rgba(0,0,0,.65); }
  #exp .ex-map-txt span { font-size:11px; opacity:.88; }
  #exp .ex-map-dur { position:absolute; top:8px; right:8px; background:rgba(20,40,34,.74); color:#ffe082;
    font-size:11px; padding:3px 9px; border-radius:12px; border:1px solid rgba(255,224,130,.45); }
  #exp .ex-slots { margin-top:8px; font-size:11.5px; color:#7a6a4d; text-align:right; }
  #exp .ex-slots b { color:#2e7d32; }
  #exp .ex-slot-tip { margin-left:8px; color:#a9927a; }
  #exp .ex-sec { font-size:13px; font-weight:bold; color:#6d4c2f; margin:12px 0 8px; }
  #exp .ex-fishes { display:flex; gap:10px; }
  #exp .ex-fish { flex:1; background:#fff; border:2px solid #cbbd97; border-radius:12px; padding:10px 8px 9px;
    text-align:center; cursor:pointer; transition:.12s; position:relative; }
  #exp .ex-fish:hover { transform:translateY(-2px); }
  #exp .ex-fish.on { border-color:#e6a23c; box-shadow:0 0 0 2px rgba(230,162,60,.35), 0 4px 10px rgba(90,74,44,.25); }
  #exp .ex-fish.on::after { content:'✓'; position:absolute; top:-7px; right:-7px; width:20px; height:20px;
    background:linear-gradient(180deg,#ffca6b,#f5a623); color:#5d3a00; font-size:12px; font-weight:bold;
    border-radius:50%; line-height:20px; border:2px solid #fff; }
  #exp .ex-fish.dis { opacity:.45; cursor:not-allowed; }
  #exp .ex-fish img { width:74px; height:56px; object-fit:contain; }
  #exp .ex-fish b { display:block; font-size:13px; color:#4e3418; margin-top:3px; }
  #exp .ex-fish-n { display:block; font-size:11px; color:#2e7d32; margin-top:2px; }
  #exp .ex-fish-m { display:block; font-size:11px; color:#a1662f; font-weight:bold; margin-top:1px; }
  #exp .ex-formula { margin:11px 2px 12px; font-size:11.5px; color:#8a7a55; line-height:1.7;
    background:#faf6ea; border:1px dashed #d5c49c; border-radius:9px; padding:7px 10px; }
  #exp .ex-formula b { color:#e65100; }
  /* 探险追加：派遣数量步进行（ex- 追加，只增不改） */
  #exp .ex-nrow { display:flex; align-items:center; gap:8px; margin:11px 2px 0;
    font-size:13px; font-weight:bold; color:#5d4a2b; }
  #exp .ex-nbtn { width:30px; height:26px; border:1.5px solid #c9a86a; border-radius:8px;
    background:linear-gradient(180deg,#fdf7e7,#f3e7c8); color:#7a5b23; font-size:15px; font-weight:bold;
    line-height:1; cursor:pointer; padding:0; }
  #exp .ex-nbtn:active { background:#ecdcb4; }
  #exp .ex-nmult { margin-left:auto; font-size:11.5px; font-weight:normal; color:#8a7a55; }
  #exp .ex-nmult b { color:#e65100; }
  #exp .ex-btn { display:block; width:100%; border:none; border-radius:11px; padding:11px 0; font-size:14px;
    font-weight:bold; letter-spacing:2px; cursor:pointer; transition:.12s;
    background:linear-gradient(180deg,#ffca6b,#f5a623); color:#fff8e8; text-shadow:0 1px 0 rgba(140,80,0,.55);
    box-shadow:0 3px 0 #4e3418; }
  #exp .ex-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #4e3418; }
  #exp .ex-btn:disabled { background:linear-gradient(180deg,#d9d2bd,#bdb49a); color:#8f8875;
    text-shadow:none; box-shadow:0 3px 0 #8a8272; cursor:not-allowed; }
  #exp .ex-run { background:#fff; border:2px solid #cbbd97; border-radius:12px; padding:12px; margin-top:10px; text-align:center; }
  #exp .ex-run-fish img { width:96px; height:72px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(90,74,44,.35)); }
  #exp .ex-run-tag { display:block; font-size:12.5px; font-weight:bold; color:#4e3418; margin-top:2px; }
  #exp .ex-run-st { font-size:12px; color:#7a6a4d; margin:7px 0 8px; }
  #exp .ex-bar { height:14px; background:#ddd4b8; border-radius:8px; overflow:hidden; border:1px solid #c2b48c; position:relative; }
  #exp .ex-bar i { display:block; height:100%; border-radius:8px;
    background:linear-gradient(90deg,#3f9d7f,#7bd3b6); box-shadow:inset 0 -3px 5px rgba(0,0,0,.15);
    transition:width .8s linear; }
  /* 进度条内嵌剩余时间（ex- 追加，只增不改）：条内居中小字，随倒计时刷新 */
  #exp .ex-bar-t { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:9.5px; font-weight:bold; color:#fff; letter-spacing:1px; white-space:nowrap;
    text-shadow:0 1px 2px rgba(23,52,42,.85); pointer-events:none; font-variant-numeric:tabular-nums; }
  #exp .ex-time { font-size:15px; font-weight:bold; color:#4e3418; margin:8px 0 2px; font-variant-numeric:tabular-nums; }
  #exp .ex-mult { font-size:11.5px; color:#8a7a55; margin-bottom:10px; }
  #exp .ex-mult b { color:#e65100; }
  #exp .ex-run .ex-btn { margin-top:6px; }
  /* 多探险队并列（ex- 追加，只增不改） */
  #exp .ex-run-cap { display:flex; align-items:center; gap:7px; font-size:12px; padding:0 2px; margin-bottom:8px; }
  #exp .ex-run-no { background:#6d4c2f; color:#ffe9c8; border-radius:4px; padding:2px 7px; font-size:10.5px;
    letter-spacing:1px; flex:none; }
  #exp .ex-run-cap img { width:34px; height:22px; object-fit:cover; border-radius:4px; border:1px solid #cbbd97; }
  #exp .ex-run-map { color:#6d4c2f; font-weight:bold; }
  #exp .ex-run-done { margin-left:auto; font-size:11px; color:#2e7d32; font-weight:bold; }
  #exp .ex-fulltip { font-size:12px; color:#a9927a; text-align:center; padding:12px 0 2px; }
  #exp .ex-done-wrap { position:relative; border-radius:10px; overflow:hidden; min-height:300px; }
  #exp .ex-done-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(2px) brightness(.55); transform:scale(1.05); }
  #exp .ex-done { position:relative; padding:18px 14px 16px; text-align:center; }
  #exp .ex-done-t { font-size:18px; font-weight:bold; letter-spacing:3px; color:#ffe9c8; text-shadow:0 2px 5px rgba(0,0,0,.7); }
  #exp .ex-done-sub { font-size:11.5px; color:#cfe3cf; margin:4px 0 12px; }
  #exp .ex-rws { display:flex; flex-direction:column; gap:8px; max-width:330px; margin:0 auto 14px; }
  #exp .ex-rw { background:rgba(255,252,244,.96); border:1.5px solid #d5c49c; border-radius:11px; padding:8px 12px;
    display:flex; align-items:center; gap:10px; text-align:left; }
  #exp .ex-rw img { width:44px; height:36px; object-fit:contain; flex:none; }
  #exp .ex-rw .info { font-size:13px; color:#4e3418; line-height:1.5; }
  #exp .ex-rw .sub { font-size:11px; color:#8a7a55; }
  #exp .ex-rw .gold { color:#e65100; }
  /* ---- 探险追加：一键领取条（只增不改） ---- */
  #exp .ex-claimall { margin:2px 0 10px; text-align:center; }
  #exp .ex-claimall .ex-btn { width:100%; }
  /* ---- 探险追加：战利品逐行弹入（轻量翻牌感，只增不改） ---- */
  @keyframes exRwPop { from { opacity:0; transform:translateY(16px) scale(.82); } to { opacity:1; transform:none; } }
  #exp .ex-rw { animation: exRwPop .45s cubic-bezier(.2,.8,.3,1.25) backwards; }
  /* ---- 探险追加：地图横幅上的"掉落一览"入口（exd- 体系，只增不改） ---- */
  #exp .ex-map-drop { position:absolute; right:8px; bottom:8px; background:rgba(20,40,34,.78);
    border:1px solid #a8c3a8; color:#ffe082; font-size:11.5px; padding:4px 11px; border-radius:8px; cursor:pointer;
    letter-spacing:1px; text-shadow:0 1px 2px rgba(0,0,0,.5); }
  #exp .ex-map-drop:active { transform:translateY(1px); }
  /* ---- 掉落一览弹层：遗迹石板 + 羊皮卷（exd- 前缀独立模块） ---- */
  #ex-drops .exd-panel { width:min(96%,520px); max-height:84vh; display:flex; flex-direction:column;
    background:#f2ead4; border:3px solid #5f7d6c; border-radius:14px; overflow:hidden;
    box-shadow:0 0 0 2px #2e4036, 0 14px 34px rgba(16,30,24,.5); }
  #ex-drops .exd-top { position:relative; height:96px; flex:none; overflow:hidden; }
  #ex-drops .exd-top img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  #ex-drops .exd-top-mask { position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(16,34,28,.08) 30%,rgba(16,34,28,.82)); }
  #ex-drops .exd-top-t { position:absolute; left:14px; bottom:9px; color:#ffe9c8; font-size:15.5px;
    letter-spacing:2px; text-shadow:0 2px 4px rgba(0,0,0,.7); }
  #ex-drops .exd-x { position:absolute; top:7px; right:7px; width:26px; height:26px; border-radius:50%;
    border:1px solid rgba(255,233,200,.55); background:rgba(16,34,28,.66); color:#ffe9c8; font-size:15px;
    line-height:1; cursor:pointer; }
  #ex-drops .exd-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #ex-drops .exd-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:12px; }
  #ex-drops .exd-card { position:relative; background:#fffdf6; border:2px solid #cbbd97; border-radius:11px;
    padding:10px 8px 9px; text-align:center; box-shadow:0 2px 6px rgba(90,74,44,.14); }
  #ex-drops .exd-card.gold { border-color:#d9a441; background:linear-gradient(180deg,#fff8e2,#ffefc0); }
  #ex-drops .exd-card.treas { border-color:#b39d6e; background:linear-gradient(180deg,#fffdf4,#f7eed6); }
  #ex-drops .exd-img { height:62px; display:flex; align-items:center; justify-content:center; }
  #ex-drops .exd-img img { max-width:78px; max-height:58px; object-fit:contain;
    filter:drop-shadow(0 3px 4px rgba(90,74,44,.3)); }
  #ex-drops .exd-img.exd-noimg::before { content:'—'; color:#c2b48c; font-size:20px; }
  #ex-drops .exd-card b { display:block; font-size:12.5px; color:#4e3418; margin-top:5px; line-height:1.35; }
  #ex-drops .exd-pct { position:absolute; top:6px; right:6px; background:#6d4c2f; color:#ffe9c8;
    border-radius:4px; padding:1.5px 6px; font-size:10.5px; font-style:normal; font-weight:bold; }
  #ex-drops .exd-pct.must { background:#2e7d32; }
  #ex-drops .exd-n { display:block; font-size:11px; color:#8a7a55; margin-top:2px; font-variant-numeric:tabular-nums; }
  #ex-drops .exd-n .exd-mult { color:#e65100; }
  #ex-drops .exd-sub { display:block; font-size:10.5px; color:#a9927a; margin-top:1px; }
  #ex-drops .exd-empty { grid-column:1/-1; padding:40px 0; text-align:center; color:#a1887f; font-size:13px; }
  #ex-drops .exd-note { font-size:11px; color:#8a7a55; line-height:1.7; padding:0 14px 13px; text-align:center; }
  @media (min-width:480px) { #ex-drops .exd-grid { grid-template-columns:repeat(3,1fr); gap:11px; } }
  /* ---- 探险日志弹层（expl- 前缀，遗迹战报风） ---- */
  #exp-log .expl-panel { width:min(94%,430px); max-height:82vh; display:flex; flex-direction:column;
    background:linear-gradient(180deg,#33452f,#22301f); border:3px solid #8a6d3b; border-radius:18px;
    box-shadow:0 0 0 2px #2e4036, 0 14px 40px rgba(0,0,0,.55); position:relative; overflow:hidden; }
  #exp-log .exd-x { position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:50%;
    border:1px solid rgba(255,233,200,.55); background:rgba(16,34,28,.66); color:#ffe9c8; font-size:15px;
    line-height:1; cursor:pointer; z-index:2; }
  #exp-log .expl-top { flex:none; text-align:center; padding:14px 40px 10px;
    background:linear-gradient(180deg,rgba(0,0,0,.28),transparent); }
  #exp-log .expl-top b { color:#ffe9c8; font-size:15.5px; letter-spacing:5px; text-shadow:0 2px 4px rgba(0,0,0,.5); }
  #exp-log .expl-stats { display:flex; gap:8px; justify-content:center; margin-top:8px; }
  #exp-log .expl-stat { font-size:11px; color:#c8d8c4; background:rgba(255,233,200,.07);
    border:1px solid rgba(201,162,75,.5); border-radius:999px; padding:3px 13px; }
  #exp-log .expl-stat b { color:#ffd54f; font-size:12.5px; font-variant-numeric:tabular-nums; }
  #exp-log .exd-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    position:relative; padding:6px 0 12px; }
  /* 左侧时间轴金线 */
  #exp-log .exd-scroll::before { content:''; position:absolute; left:26px; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg,rgba(201,162,75,.55),rgba(201,162,75,.15)); }
  /* 出发：细行 + 绿色节点 */
  #exp-log .expl-go { display:flex; align-items:center; gap:6px; padding:8px 14px 8px 0; margin-left:38px;
    font-size:11.5px; position:relative; }
  #exp-log .expl-go i { position:absolute; left:-16px; width:9px; height:9px; border-radius:50%;
    background:#7ba05b; box-shadow:0 0 7px rgba(123,160,91,.9); }
  #exp-log .expl-go .fx { color:#e6e8d8; font-weight:bold; white-space:nowrap; }
  #exp-log .expl-go .fm { flex:1; color:#94a289; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #exp-log .expl-go .ft { color:#79876f; font-size:10.5px; white-space:nowrap; }
  /* 归来：羊皮卷战报卡 + 金色节点 */
  #exp-log .expl-back { margin:6px 12px 12px 40px; background:linear-gradient(180deg,#f9f1dd,#f0e3c5);
    border:1px solid #c9a24b; border-radius:4px 12px 12px 12px; padding:10px 12px 9px;
    box-shadow:0 3px 12px rgba(0,0,0,.4); position:relative; }
  #exp-log .expl-back::before { content:''; position:absolute; left:-18px; top:16px; width:10px; height:10px;
    border-radius:50%; background:#c9a24b; box-shadow:0 0 9px rgba(212,175,55,.95); }
  #exp-log .expl-back .hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
  #exp-log .expl-back .hd b { font-size:12.5px; color:#7a5b1e; letter-spacing:2px; }
  #exp-log .expl-back .hd b::before { content:''; display:inline-block; width:14px; height:10px; margin-right:5px;
    background:linear-gradient(45deg,transparent 42%,#c9a24b 42%,#c9a24b 58%,transparent 58%); }
  #exp-log .expl-back .hd span { font-size:10.5px; color:#a9927a; }
  #exp-log .expl-back .loots { display:flex; flex-wrap:wrap; gap:6px; }
  #exp-log .expl-back .expl-loot { display:flex; align-items:center; gap:5px; background:#fffaf0;
    border:1px solid #ddcea8; border-radius:9px; padding:3px 8px 3px 4px; font-size:11px; color:#4e3418; }
  #exp-log .expl-back .expl-loot img { width:26px; height:26px; object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(90,74,44,.25)); }
  #exp-log .expl-back .expl-loot b { color:#8e24aa; font-variant-numeric:tabular-nums; }
  #exp-log .expl-back .gold-line { display:flex; align-items:center; gap:6px; margin-top:8px; padding-top:7px;
    border-top:1px dashed #d3c39a; }
  #exp-log .expl-back .gold-line img { width:20px; height:20px; object-fit:contain; }
  #exp-log .expl-back .gold-line b { color:#e65100; font-size:15px; font-variant-numeric:tabular-nums; }
  #exp-log .expl-back .gold-line span { font-size:10.5px; color:#a9927a; }
  #exp-log .expl-empty { padding:46px 0; text-align:center; color:#a1887f; font-size:13px; }
  /* 探险面板头部的"探险日志"入口按钮（遗迹石绿风，替代默认灰按钮） */
  #exp .ex-logbtn { border:1px solid rgba(255,233,200,.5); background:linear-gradient(180deg,#5d7a52,#435c3c);
    color:#ffe9c8; font-size:11px; letter-spacing:1.5px; padding:6px 12px; border-radius:999px; cursor:pointer;
    text-shadow:0 1px 2px rgba(0,0,0,.4); margin-right:10px; }
  #exp .ex-logbtn:active { transform:scale(.95); }
  /* 探险音效静音开关（ex- 追加，只增不改）：头部小圆钮，状态持久化 localStorage */
  #exp .ex-sndbtn { flex:none; width:30px; height:30px; border-radius:50%; cursor:pointer; margin-right:8px;
    border:1px solid rgba(255,233,200,.5); background:rgba(16,34,28,.35); font-size:13px; line-height:1; padding:0; }
  #exp .ex-sndbtn:active { transform:scale(.92); }

/* ==== 原块 #9  index.html 第 2096~2143 行 ==== */
  .mail-row { display:flex; align-items:center; gap:6px; padding:8px 8px; border-bottom:1px dashed #dcc99f;
              cursor:pointer; border-radius:8px; transition:.1s; }
  .mail-row:hover { background:#efe2c2; }
  .mail-row.sel { background:#fff3cd; box-shadow:inset 0 0 0 1.5px #d4a843; }
  .mail-dot { width:8px; height:8px; border-radius:50%; flex:none; }
  .mail-rt { flex:1; overflow:hidden; text-align:left; }
  .mail-rt .t { font-size:12px; font-weight:bold; color:#5d4037; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-rt .s { font-size:10px; color:#a1887f; }
  .mail-attag { flex:none; font-size:14px; }
  .mail-del { flex:none; width:18px; height:18px; line-height:16px; text-align:center; font-size:11px; color:#c9b68f;
              border:1px solid #dcc99f; border-radius:50%; background:#fff; cursor:pointer; transition:.1s; user-select:none; }
  .mail-del:hover { color:#fff; background:#e53935; border-color:#e53935; }
  .mail-empty { text-align:center; color:#b7a97f; font-size:13px; padding:30px 0; }
  .pk-title { font-size:15px; font-weight:bold; color:#6d4c2f; letter-spacing:1px; line-height:1.4; }
  .pk-from { display:flex; align-items:center; gap:7px; font-size:11px; color:#a1887f; margin-top:6px; }
  .pk-from .ava-img { width:28px; height:28px; border-radius:50%; border:2px solid #fff;
                      box-shadow:0 1px 5px rgba(0,0,0,.18); object-fit:cover; background:#e3f2fd; }
  .at-box { flex:none; flex-direction:column; text-align:center; gap:5px; padding:9px 5px 7px; }
  .at-box > div { width:100%; }
  .at-box > div b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px !important; }
  .at-box.got { opacity:.55; }
  .at-box img { width:46px; height:46px; object-fit:contain; background:#f7f2e4; border-radius:8px; padding:3px; }
  .pk-body { font-size:13px; color:#5d4037; line-height:2; white-space:pre-wrap; text-align:left; }
  .pk-line { border:none; border-top:2px dashed #e0cfa8; margin:10px 0; }
  .pk-attach { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
  @media (max-width:600px) {
    #mailbox .card { height:min(76vh,520px); }
    #mail-list { width:40% !important; min-width:118px !important; padding:4px !important; }
    .mail-row { padding:6px 4px; }
    .mail-rt .t { font-size:11px; }
    .mail-rt .s { font-size:9px; }
    .pk-attach { grid-template-columns:repeat(2, 1fr) !important; }
    .at-box img { width:38px; height:38px; }
    .at-box > div b { font-size:10px !important; }
  }
              border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
              font-size:26px; color:rgba(184,147,90,.4); transform:rotate(-14deg); pointer-events:none; }
  .at-box { background:#fff; border:1.5px solid #e0cfa8; border-radius:10px; padding:8px 12px;
            display:flex; align-items:center; gap:8px; min-width:104px; box-shadow:0 1px 4px rgba(141,110,99,.12); }
  .pk-claim { width:100%; border:none; border-radius:22px; padding:11px; font-size:14px; font-weight:bold; letter-spacing:3px;
              color:#fff; background:linear-gradient(180deg,#ffb74d,#f57c00); cursor:pointer;
              box-shadow:0 3px 0 #e65100, 0 5px 10px rgba(230,81,0,.35); transition:.1s; }
  .pk-claim:active { transform:translateY(2px); box-shadow:0 1px 0 #e65100; }
  .pk-claimed { width:100%; text-align:center; border-radius:22px; padding:11px; font-size:13px; font-weight:bold;
                color:#9e9e9e; background:#efebe4; }
  .mail-back { font-size:14px; color:#6d4c2f; cursor:pointer; font-weight:bold; margin-bottom:8px; }

/* ==== 原块 #10  index.html 第 2161~2211 行 ==== */
  .rk-card { width:min(94%,470px); padding:0; overflow:hidden; background:#f2fbff; }
  .rk-hero { position:relative; }
  .rk-banner { display:block; width:100%; height:150px; object-fit:cover; }
  .rk-hero-in { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
                background:linear-gradient(180deg, rgba(3,34,66,.30), rgba(3,34,66,.04) 62%); }
  .rk-logo { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(2,40,80,.45)); }
  .rk-t1 { font-size:26px; font-weight:bold; letter-spacing:8px; color:#fff;
           text-shadow:0 2px 0 #1d6fa5, 0 5px 14px rgba(2,40,80,.6); padding-left:8px; }
  .rk-t2 { font-size:11px; color:#e3f6ff; letter-spacing:2px; text-shadow:0 1px 4px rgba(2,40,80,.65); }
  .rk-x { position:absolute; top:8px; right:8px; width:28px; height:28px; border:none; border-radius:50%;
          background:rgba(2,40,80,.38); color:#fff; font-size:13px; cursor:pointer; transition:.12s; }
  .rk-x:hover { background:rgba(2,40,80,.6); }
  .rk-rules { font-size:10.5px; color:#2f6f96; background:linear-gradient(90deg,#d9f1ff,#ecf9ff,#d9f1ff);
              border-top:1px solid #c2e7fa; border-bottom:1px solid #c2e7fa; padding:6px 10px; text-align:center; letter-spacing:.5px; }
  .rk-list { height:min(46vh,420px); overflow-y:auto; padding:10px 12px 6px; }
  .rk-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:12px; background:#fff;
            border:1.5px solid #d3ecfa; margin-bottom:8px; box-shadow:0 1px 4px rgba(80,160,210,.10); transition:transform .12s, box-shadow .12s; }
  .rk-row:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(80,160,210,.20); }
  .rk-row.me { border-color:#3fa9e0; background:linear-gradient(90deg,#e6f6ff,#fff);
               box-shadow:0 2px 8px rgba(63,169,224,.28); }
  .rk-badge { flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
              font-weight:bold; font-size:13px; color:#fff; background:linear-gradient(180deg,#90c9e8,#5aa7cc);
              box-shadow:inset 0 -2px 0 rgba(0,0,0,.15); }
  .rk-badge.g1 { background:linear-gradient(180deg,#ffe082,#f9a825); box-shadow:inset 0 -2px 0 #d38707, 0 0 10px rgba(255,193,7,.55); }
  .rk-badge.g2 { background:linear-gradient(180deg,#e0e7ee,#9fb2c2); box-shadow:inset 0 -2px 0 #78909c; }
  .rk-badge.g3 { background:linear-gradient(180deg,#ffcc9d,#e0885a); box-shadow:inset 0 -2px 0 #b5651d; }
  .rk-ava { flex:none; width:36px; height:36px; border-radius:50%; border:2px solid #cdeafd; background:#e3f2fd; object-fit:cover; }
  .rk-main { flex:1; min-width:0; }
  .rk-nm { display:block; font-size:13px; font-weight:bold; color:#0d47a1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rk-sub { display:block; font-size:10px; color:#64a5c4; margin-top:1px; }
  .rk-time { flex:none; font-size:16px; font-weight:bold; color:#0277bd; font-variant-numeric:tabular-nums; }
  .rk-row.g1 .rk-time { color:#c28a0a; }
  .rk-empty { text-align:center; padding:34px 0 26px; color:#5a9cc0; font-size:12.5px; line-height:2; }
  .rk-empty img { width:74px; opacity:.55; margin-bottom:6px; }
  .rk-mine { flex:none; display:flex; align-items:center; gap:10px; padding:9px 14px;
             background:linear-gradient(90deg,#0e86c5,#1197dd); color:#fff; }
  .rk-mine .lb { font-size:10px; opacity:.88; }
  .rk-mine .vv { font-size:15px; font-weight:bold; font-variant-numeric:tabular-nums; }
  @media (max-width:600px) {
    .rk-card { width:96vw; }
    .rk-banner { height:118px; }
    .rk-t1 { font-size:22px; letter-spacing:6px; }
    .rk-logo { width:44px; height:44px; }
    .rk-list { height:min(48vh,380px); padding:8px 8px 4px; }
    .rk-row { padding:6px 8px; gap:8px; }
    .rk-ava { width:30px; height:30px; }
    .rk-time { font-size:14px; }
    .rk-mine { padding:8px 12px; gap:8px; }
  }

/* ==== 原块 #11  index.html 第 2230~2373 行 ==== */
  .task-row { display:flex; align-items:center; gap:8px; padding:9px 8px; border:1.5px solid transparent; border-bottom:1px dashed #dcc99f;
              cursor:pointer; border-radius:10px; transition:.12s; }
  .task-row:hover { background:#efe2c2; }
  .task-row.sel { background:#fff3cd; border-color:#d4a843; box-shadow:0 2px 6px rgba(180,140,60,.18); }
  .task-st { flex:none; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px;
             background:#efe6d0; border:1.5px solid #dcc99f; }
  .task-st.s-acc { background:#e3f0ff; border-color:#90caf9; }
  .task-st.s-done { background:#ffedd5; border-color:#fb923c; animation:tkGlow 1.2s infinite alternate; }
  .task-st.s-claim { background:#eeeeee; border-color:#cfcabc; filter:grayscale(.6); }
  @keyframes tkGlow { from { box-shadow:0 0 0 rgba(251,146,60,.0); } to { box-shadow:0 0 8px rgba(251,146,60,.8); } }
  .task-rt { flex:1; overflow:hidden; text-align:left; }
  .task-rt .t { font-size:12px; font-weight:bold; color:#5d4037; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .task-rt .s { font-size:10px; color:#a1887f; margin-top:2px; }
  .task-empty { text-align:center; color:#b7a97f; font-size:13px; padding:36px 10px; line-height:2; }
  /* 详情：羊皮纸悬赏卡 */
  .tk-bounty { background:linear-gradient(160deg,#fffaf0,#f7edd8); border:2px solid #d9bd85; border-radius:14px;
               padding:14px; box-shadow:0 3px 10px rgba(141,110,99,.14); position:relative; overflow:hidden; }
  .tk-bounty::before { content:''; position:absolute; top:0; left:0; right:0; height:5px;
               background:repeating-linear-gradient(90deg,#c8a45e 0 14px,#b8935a 14px 28px); }
  .tk-tag { display:inline-block; font-size:10px; font-weight:bold; color:#fff; background:linear-gradient(135deg,#ff7043,#e64a19);
            border-radius:8px; padding:2px 9px; letter-spacing:1px; box-shadow:0 1px 3px rgba(230,74,25,.4); }
  .tk-req { display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid #e6d6ae; border-radius:12px; padding:10px 12px; margin-top:12px; }
  .tk-req img { width:58px; height:44px; object-fit:contain; background:#f7f2e4; border-radius:8px; padding:3px; }
  .tk-bar { height:14px; background:#efe6d0; border-radius:8px; overflow:hidden; border:1px solid #dcc99f; margin-top:6px; }
  .tk-bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb74d,#f57c00); border-radius:8px; transition:width .5s;
              box-shadow:inset 0 -3px 0 rgba(230,81,0,.35); }
  .tk-rw { display:flex; align-items:center; gap:7px; background:#fff; border:1.5px solid #f0c14b; border-radius:10px; padding:7px 11px;
           font-size:12px; font-weight:bold; color:#6d4c2f; box-shadow:0 1px 4px rgba(240,193,75,.25); }
  .tk-btn { width:100%; border:none; border-radius:22px; padding:11px; font-size:14px; font-weight:bold; letter-spacing:3px;
            color:#fff; cursor:pointer; transition:.1s; }
  .tk-btn:active { transform:translateY(2px); }
  .tk-btn.acc { background:linear-gradient(180deg,#66bb6a,#43a047); box-shadow:0 3px 0 #2e7d32, 0 5px 10px rgba(46,125,50,.35); }
  .tk-btn.acc:active { box-shadow:0 1px 0 #2e7d32; }
  .tk-btn.claim { background:linear-gradient(180deg,#ffb74d,#f57c00); box-shadow:0 3px 0 #e65100, 0 5px 10px rgba(230,81,0,.35); }
  .tk-btn.claim:active { box-shadow:0 1px 0 #e65100; }
  .tk-btn.dis { background:#efebe4; color:#9e9e9e; cursor:default; box-shadow:none; }
  .tk-back { display:none; align-items:center; gap:4px; font-size:12.5px; font-weight:bold; color:#7a4a1f; width:fit-content;
             background:linear-gradient(180deg,#ffe9c8,#f3ddb5); border:1.5px solid #d9bd85; border-radius:18px;
             padding:7px 16px 7px 12px; margin-bottom:10px; cursor:pointer; user-select:none;
             box-shadow:0 2px 0 #c9a35e, 0 3px 7px rgba(141,110,99,.22); transition:.1s; }
  .tk-back:active { transform:translateY(2px); box-shadow:0 0 0 #c9a35e; }
  @media (max-width:480px){ .tk-back { display:inline-flex; } }
  /* ===== 图鉴馆（百宝箱木质风） ===== */
  .bk-frame { border-radius:12px; overflow:hidden; box-shadow:0 3px 12px rgba(141,110,99,.18); margin-bottom:12px; flex:none; } /* flex:none：移动端#panel为flex滚动容器，防被压缩后overflow:hidden裁掉内容 */
  .bk-head { background:linear-gradient(180deg,#a1662f,#8d5322); padding:9px 14px; display:flex; align-items:center; }
  .bk-body { background:#f5ecd8; border:1.5px solid #b8935a; border-top:none; padding:10px; }
  .bk-subtabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
  .bk-subtab { flex:1; min-width:96px; text-align:center; cursor:pointer; user-select:none; font-size:12px; font-weight:bold; color:#7a5c33;
               background:#fff; border:1.5px solid #dcc99f; border-radius:20px; padding:7px 6px; transition:.12s; box-shadow:0 1px 3px rgba(141,110,99,.12); }
  .bk-subtab:hover { background:#fff8e8; }
  .bk-subtab.on { color:#fff; background:linear-gradient(180deg,#ffb74d,#f57c00); border-color:#f57c00; box-shadow:0 2px 6px rgba(230,81,0,.35); }
  .bk-intro { background:#fdf8ec; border:1.5px solid #e0cfa8; border-radius:12px; padding:10px 12px; margin-bottom:10px; }
  .bk-rewards { margin-top:8px; display:flex; flex-direction:column; gap:14px; }
  /* 里程碑行（参考图鉴卡牌风）：左=标题+进度条+数字，右=奖励图标(角标数量)+领取 */
  .bk-ms { display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #e6d6ae; border-radius:14px; padding:12px 14px; box-shadow:0 1px 5px rgba(141,110,99,.10); }
  .bk-ms.ready { border-color:#fb923c; box-shadow:0 0 10px rgba(251,146,60,.35); background:linear-gradient(90deg,#fff8ed,#fff3e0); }
  .bk-ms.done { opacity:.55; }
  .bk-ms-left { flex:1; min-width:0; }
  .bk-ms-title { font-size:12.5px; font-weight:bold; color:#5d4037; }
  .bk-ms-left .tk-bar { margin:7px 0 4px; }
  .bk-ms-num { font-size:10.5px; color:#a1887f; }
  .bk-ms-right { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; flex:none; width:96px; }
  .bk-ricon { position:relative; width:42px; height:42px; background:#faf5e6; border:1.5px solid #ecdcb4; border-radius:10px;
              display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
  .bk-ricon i, .bk-ricon b { font-size:20px; font-style:normal; }
  .bk-ricon img { max-width:30px; max-height:30px; object-fit:contain; }
  .bk-ricon em { position:absolute; bottom:-5px; right:-5px; background:#f57c00; color:#fff; font-size:9px; font-style:normal;
                 font-weight:bold; border-radius:7px; padding:1px 5px; border:1.5px solid #fff; white-space:nowrap; z-index:1; }
  /* 领取按钮：独占右栏一行（图标多时也不会被挤） */
  .bk-ms .bk-btn.claim { flex-basis:100%; padding:6px 0; font-size:12px; text-align:center; }
  .bk-claimed { font-size:20px; }
  /* 顶部「下一目标」卡 */
  .bk-cur { display:flex; align-items:center; gap:12px; background:linear-gradient(90deg,#fff3d9,#ffeec4);
            border:2px solid #f0c14b; border-radius:12px; padding:11px 12px; margin-bottom:14px; }
  .bk-cur-icons { display:flex; gap:4px; flex:none; }
  .bk-cur-txt { flex:1; font-size:12.5px; color:#6d4c2f; font-weight:bold; }
  .bk-cur-txt span { display:block; font-size:11px; color:#a1887f; margin-top:3px; font-weight:normal; }
  .bk-prog { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .bk-btn { border:none; border-radius:16px; padding:7px 16px; font-size:12px; font-weight:bold; letter-spacing:1px; cursor:pointer; transition:.1s; }
  .bk-btn.claim { color:#fff; background:linear-gradient(180deg,#ffb74d,#f57c00); box-shadow:0 2px 0 #e65100, 0 3px 7px rgba(230,81,0,.3); }
  .bk-btn.claim:active { transform:translateY(2px); box-shadow:0 0 0 #e65100; }
  .bk-btn.dis { background:#efebe4; color:#9e9e9e; cursor:default; }
  .bk-gift { position:relative; border:none; border-radius:18px; padding:8px 16px; font-size:12.5px; font-weight:bold; letter-spacing:1px;
             color:#fff; cursor:pointer; background:linear-gradient(180deg,#ffb74d,#f57c00);
             box-shadow:0 2px 0 #e65100, 0 3px 8px rgba(230,81,0,.3); transition:.1s; flex:none; }
  .bk-gift:active { transform:translateY(2px); box-shadow:0 0 0 #e65100; }
  .bk-gift.hot { animation:bkGiftGlow 1.2s infinite alternate; }
  @keyframes bkGiftGlow { from { box-shadow:0 2px 0 #e65100, 0 3px 8px rgba(230,81,0,.3); } to { box-shadow:0 2px 0 #e65100, 0 0 16px rgba(255,183,77,.95); } }
  .bk-gift-dot { position:absolute; top:-8px; right:-8px; min-width:19px; height:19px; background:#ff3b30; border:2px solid #fff;
                 border-radius:10px; color:#fff; font-size:10px; font-weight:bold; line-height:15px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.3); }
  /* ===== 全站滚动条美化（木色圆润细滑块，游戏风） ===== */
  *::-webkit-scrollbar { width:9px; height:9px; }
  *::-webkit-scrollbar-track { background:rgba(184,147,90,.12); border-radius:8px; }
  *::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#cfa96a,#a9824a); border-radius:8px; border:2px solid rgba(245,236,216,.9); }
  *::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#b8935a,#8d6a3a); }
  *::-webkit-scrollbar-corner { background:transparent; }
  * { scrollbar-width:thin; scrollbar-color:#b8935a rgba(184,147,90,.12); } /* Firefox */
  /* 弹层列表移动端滚动修复：触摸顺滑 + 防滚动穿透 + flex 子项可收缩 */
  #bk-rewards-body, #bk-detail, .bk-body { -webkit-overflow-scrolling:touch; }
  #bk-rewards-body { overscroll-behavior:contain; min-height:0; }
  #bk-rewards .card { max-height:min(82vh,560px); }
  /* ===== 图鉴卡片（参考图鉴卡牌风：米黄卡面+品质色框+星级，大卡） ===== */
  .bk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:12px; }
  .bk-card2 { position:relative; min-width:0; background:linear-gradient(160deg,#fffdf6,#f7edd8); border:2px solid #d9bd85;
              border-radius:14px; padding:12px 8px 9px; text-align:center; cursor:pointer; user-select:none; transition:.12s; } /* min-width:0：防 nowrap 长名把 1fr 列撑爆后被 .bk-frame overflow:hidden 裁掉右列（2026-11-11 图鉴展示不全修复） */
  .bk-card2:hover { transform:translateY(-3px); box-shadow:0 5px 12px rgba(141,110,99,.28); }
  .bk-card2.locked { background:linear-gradient(160deg,#f1ecdf,#e8e0cd); }
  .bk-card2.locked:hover { transform:none; box-shadow:none; }
  .bk-card2 .bimg { height:68px; display:flex; align-items:center; justify-content:center; }
  .bk-card2 .bimg img { max-width:92%; max-height:68px; object-fit:contain; }
  .bk-card2 .bnm { font-size:13px; font-weight:bold; color:#5d4037; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width:600px) {
    .bk-body { padding:8px 6px; }
    .bk-subtabs { gap:4px; margin-bottom:8px; }
    .bk-subtab { min-width:0; flex:1; padding:6px 2px; font-size:11px; border-radius:16px; letter-spacing:0; }
    .bk-grid { grid-template-columns:repeat(3, 1fr); gap:8px; }
    .bk-card2 { padding:9px 5px 7px; border-radius:11px; }
    .bk-card2 .bimg { height:56px; }
    .bk-card2 .bimg img { max-height:56px; }
    .bk-card2 .bnm { font-size:11.5px; }
    .bk-intro { padding:8px 9px; }
    .bk-gift { padding:7px 11px; font-size:11.5px; }
    /* 里程碑卡：上行=档位标签+按钮（按钮右），下行=奖励chips铺满 */
    .bk-rewards { gap:16px; }
    .bk-ms { padding:12px 12px; gap:8px; }
    .bk-cur { margin-bottom:16px; }
    .bk-ms-title { font-size:12px; }
    .bk-ms-right { width:84px; }
    .bk-ricon { width:38px; height:38px; }
    .bk-ricon i, .bk-ricon b { font-size:18px; }
    .bk-ricon img { max-width:26px; max-height:26px; }
    .bk-ms .bk-btn.claim { padding:6px 0; font-size:11.5px; }
    .bk-dbig img { width:92px; height:72px; }
  }
  .bk-card2 .bstar { font-size:10px; letter-spacing:2px; margin-top:2px; line-height:1; }
  @media (max-width:600px) {
    #taskpage .card { height:min(76vh,540px); }
    #task-list { width:42% !important; min-width:122px !important; padding:5px !important; }
    .task-row { padding:7px 5px; }
    .task-rt .t { font-size:11px; }
    .task-rt .s { font-size:9px; }
  }

/* ==== 原块 #12  index.html 第 2395~2403 行 ==== */
  .bk-dbig { text-align:center; padding:6px 0 2px; }
  .bk-dbig img { width:110px; height:86px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(109,76,47,.3)); }
  .bk-drow { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:#5d4037;
             padding:7px 2px; border-bottom:1px dashed #e0cfa8; }
  .bk-drow b { flex:none; color:#8a7a55; font-weight:normal; }
  .bk-ddesc { font-size:12.5px; color:#7a6248; line-height:1.9; background:#fff;
              border:1.5px dashed #e0cfa8; border-radius:10px; padding:9px 12px; margin-top:10px; }

/* ==== 原块 #13  index.html 第 2404~2413 行 ==== */
  .thub-app { position:relative; text-align:center; cursor:pointer; user-select:none; transition:transform .12s;
              background:#fff; border:1.5px solid #e0cfa8; border-radius:14px; padding:14px 8px 10px;
              box-shadow:0 2px 8px rgba(141,110,99,.14); }
  .thub-app:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(141,110,99,.25); }
  .thub-app:active { transform:scale(.94); }
  .thub-icon { width:74px; height:74px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
  .thub-icon img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(141,110,99,.3)); }
  .thub-name { margin-top:8px; font-size:12px; font-weight:bold; color:#6d4c2f; }

/* ==== 原块 #14  index.html 第 10606~10611 行 ==== */
.yg-vbg, .yg-vvideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.yg-vbg { filter:blur(28px) brightness(.55) saturate(1.15); transform:scale(1.12); } /* 底层：放大铺满+高斯模糊，消黑边 */
.yg-vvideo { position:relative; object-fit:contain; background:transparent; }        /* 默认完整画面居中 */
@media (orientation: portrait) { .yg-vvideo { object-fit:cover; } } /* 手机竖屏：竖版视频本就居中构图，cover 满屏仅裁两侧水母装饰区(~11%)，不碰海豚 */

/* ==== 原块 #15  index.html 第 10662~10667 行 ==== */
.bl-vbg, .bl-vvideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bl-vbg { filter:blur(28px) brightness(.55) saturate(1.15); transform:scale(1.12); } /* 底层：放大铺满+高斯模糊，消黑边 */
.bl-vvideo { position:relative; object-fit:contain; background:transparent; }        /* 默认完整画面居中 */
@media (orientation: portrait) { .bl-vvideo { object-fit:contain; } } /* 手机竖屏：contain 完整展示竖版场景（上下露出区由模糊 bg 垫底，满屏无黑边），cover 会裁掉两侧场景 */

/* ==== 原块 #16  index.html 第 10752~10944 行 ==== */
  /* ---- 交易行：木质市集风（素材：assets/trade/，与百宝箱同画风） ---- */
  .tr-head { flex:none; height:56px; display:flex; align-items:center; gap:9px; padding:0 12px;
    background:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/trade/trade_wood.jpg) center/cover; border-bottom:3px solid #4e3418; }
  .tr-headcoin { width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
  .tr-title { flex:1; color:#ffe9c8; font-size:17px; letter-spacing:5px; font-weight:bold;
    text-shadow:0 2px 0 rgba(42,28,10,.85), 0 3px 5px rgba(0,0,0,.35); }
  .tr-gold { flex:none; display:flex; align-items:center; gap:4px; background:rgba(0,0,0,.32);
    border:1.5px solid #c9a25e; border-radius:999px; padding:3px 10px 3px 6px; color:#ffe9c8; font-size:12px; font-weight:bold; }
  .tr-gold img { width:16px; height:16px; object-fit:contain; }
  .tr-close { flex:none; width:30px; height:30px; min-height:0; border-radius:50%; border:2px solid #c9a25e;
    background:rgba(0,0,0,.32); color:#ffe9c8; font-size:14px; font-weight:bold; cursor:pointer; }
  .tr-close:active { transform:scale(.92); }
  .tr-tabsbar { flex:none; display:flex; gap:8px; padding:10px 10px 0; background:#f5ecd8; }
  .tr-tab { display:flex; align-items:center; gap:6px; padding:8px 16px; border:2px solid #d8c9a4; border-bottom:none;
    border-radius:12px 12px 0 0; background:#eaddbd; color:#8a6d3b; font-size:13px; font-weight:bold; cursor:pointer; user-select:none; }
  .tr-tab img { width:22px; height:22px; object-fit:contain; }
  .tr-tab.on { background:#fffdf5; color:#5d4037; border-color:#b98a4a; box-shadow:0 -2px 6px rgba(160,120,40,.14); }
  .tr-chip { display:inline-flex; align-items:center; gap:3px; padding:4px 11px; border-radius:999px; background:#f4ecd8;
    border:1.5px solid #d8c9a4; font-size:12px; font-weight:bold; color:#7a5c3a; cursor:pointer; user-select:none; }
  .tr-chip:active { transform:scale(.96); }
  .tr-chip.on { background:#fff3cd; border-color:#d4a843; color:#8a5a00; }
  .tr-chipico { width:15px; height:15px; object-fit:contain; }
  /* 市场行情子 tab：售卖 / 拍卖 */
  .tr-mtabs { display:flex; gap:8px; margin:2px 0 8px; width:100%; }
  .tr-mtab { flex:1; text-align:center; padding:7px 0; border-radius:10px; background:#f4ecd8; border:1.5px solid #d8c9a4;
    font-size:13px; font-weight:bold; color:#7a5c3a; cursor:pointer; user-select:none; }
  .tr-mtab:active { transform:scale(.97); }
  .tr-mtab.on { background:linear-gradient(180deg,#ffe9b0,#ffd97a); border-color:#c9982f; color:#6b4a00; box-shadow:0 2px 5px rgba(201,152,47,.35); }
  /* 官方（神秘渔夫）徽章 */
  .tr-official { display:inline-block; font-size:9px; font-weight:bold; color:#fff; background:linear-gradient(135deg,#ff9f43,#f57c00); border-radius:999px; padding:1px 7px; vertical-align:middle; letter-spacing:1px; }
  .tr-select { padding:5px 8px; border:1.5px solid #d8c9a4; border-radius:8px; background:#fffdf5; font-size:12px; color:#5d4037; outline:none; }
  .tr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; }
  .tr-card { background:#fffdf5; border:1.5px solid #e0cfa8; border-radius:12px; padding:10px 8px 8px; cursor:pointer; position:relative; transition:.12s; }
  .tr-card:hover { border-color:#d4a843; box-shadow:0 3px 10px rgba(160,120,40,.18); transform:translateY(-2px); }
  .tr-ico { height:58px; display:flex; align-items:center; justify-content:center; margin-bottom:5px; }
  .tr-icoemoji { font-size:30px; line-height:1; width:50px; height:50px; display:flex; align-items:center; justify-content:center;
    background:#f8eed4; border:1.5px solid #e0cfa8; border-radius:12px; }
  .tr-icoemoji.big { font-size:42px; width:86px; height:86px; border-radius:16px; }
  .tr-icoimg { width:50px; height:50px; object-fit:contain; }
  .tr-icoimg.big { width:86px; height:86px; }
  .tr-name { font-size:12px; font-weight:bold; color:#5d4037; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
  .tr-meta { font-size:10px; color:#a1887f; text-align:center; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tr-cap { font-size:10px; color:#8a6d3b; text-align:center; margin-top:3px; }
  .tr-price { text-align:center; font-size:13px; font-weight:bold; color:#b8860b; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:2px; }
  .tr-pricecoin { width:14px; height:14px; object-fit:contain; }
  .tr-unit { font-style:normal; font-size:9px; color:#a1887f; font-weight:normal; margin-left:2px; }
  .tr-bidinfo { font-size:10px; color:#7a5c3a; text-align:center; margin-top:1px; }
  .tr-tag { position:absolute; top:5px; left:5px; font-size:9px; padding:1px 6px; border-radius:999px; background:#fde8d0; color:#b3541e; font-weight:bold; z-index:1; }
  .tr-taggiant { background:#ffd6a0; color:#a04700; }
  .tr-left { position:absolute; top:5px; right:5px; font-size:9px; padding:1px 6px; border-radius:999px; background:#e8f5e9; color:#2e7d32; font-weight:bold; z-index:1; }
  .tr-left.warn { background:#fdecea; color:#c0392b; }
  .tr-empty { text-align:center; color:#b7a97f; font-size:13px; padding:30px 0; }
  .tr-emptyimg { display:block; width:min(62%,250px); margin:0 auto 4px; }
  .tr-sec { font-size:12px; font-weight:bold; color:#6d4c2f; letter-spacing:1px; margin:14px 0 8px; display:flex; align-items:center; gap:5px; }
  .tr-secico { width:17px; height:17px; object-fit:contain; }
  .tr-bids { display:flex; flex-direction:column; gap:6px; }
  .tr-bidrow, .tr-histrow { display:flex; align-items:center; gap:9px; background:#fffdf5; border:1.5px solid #e0cfa8; border-radius:10px; padding:7px 10px; cursor:pointer; }
  .tr-bidrow:active { background:#fff3cd; }
  .tr-bico { flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
  .tr-bico .tr-icoemoji { font-size:20px; width:32px; height:32px; border-radius:9px; }
  .tr-bico .tr-icoimg { width:32px; height:32px; }
  .tr-bmain { flex:1; min-width:0; }
  .tr-bmain b { display:block; font-size:12px; color:#5d4037; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tr-bmain i { display:block; font-size:10px; color:#a1887f; font-style:normal; margin-top:1px; }
  .tr-btime { flex:none; font-size:10px; color:#c9b68f; }
  .tr-hist { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
  .tr-mhead { flex:none; height:48px; display:flex; align-items:center; padding:0 14px;
    background:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/trade/trade_wood.jpg) center/cover; border-bottom:2px solid #4e3418; }
  .tr-mhead b { flex:1; color:#ffe9c8; font-size:15px; letter-spacing:2px; text-shadow:0 2px 0 rgba(42,28,10,.85); }
  .tr-mhead .btn.gray { background:rgba(0,0,0,.32); border-color:#c9a25e; color:#ffe9c8; }
  .tr-mbody { flex:1; min-height:0; overflow-y:auto; background:#f5ecd8; padding:14px 14px 16px; }
  .tr-dtop { display:flex; align-items:center; gap:12px; background:#fffdf5; border:1.5px solid #e0cfa8; border-radius:12px; padding:12px; }
  .tr-dname { font-size:15px; font-weight:bold; color:#5d4037; }
  .tr-dmeta { font-size:11px; color:#a1887f; margin-top:3px; }
  .tr-pricelist { background:#fffdf5; border:1.5px solid #e0cfa8; border-radius:12px; padding:10px 12px; margin-top:10px; }
  .tr-pricelist > div { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
  .tr-pricelist i { font-style:normal; font-size:12px; color:#a1887f; }
  .tr-pricelist b { font-size:14px; color:#b8860b; }
  .tr-pricelist .tr-buyout b { font-size:16px; color:#d35400; }
  .tr-bidline { display:flex; gap:8px; margin-top:12px; }
  .tr-input { flex:1; min-width:0; padding:9px 10px; border:1.5px solid #d8c9a4; border-radius:9px; background:#fffdf5; font-size:14px; color:#5d4037; outline:none; }
  .tr-input:focus { border-color:#d4a843; }
  .tr-note { font-size:10px; color:#a1887f; line-height:1.7; margin-top:8px; }
  .tr-frow { display:flex; align-items:center; gap:10px; margin-top:10px; }
  .tr-frow i { flex:none; font-style:normal; font-size:12px; font-weight:bold; color:#7a5c3a; width:52px; }
  .tr-preview { background:#fff3cd; border:1px dashed #d4a843; border-radius:9px; padding:8px 10px; font-size:11px; color:#7a5c3a; line-height:1.8; margin-top:12px; }
  .tr-pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
  .tr-bico2 { width:18px; height:18px; object-fit:contain; vertical-align:-4px; margin-right:5px; }
  .btn .tr-bico2 { margin-right:0; }
  .tr-rules { flex:none; background:#efe2c2; border-top:2px solid #d8c9a4; padding:6px 10px; font-size:10px; color:#a1887f; line-height:1.7; cursor:pointer; user-select:none; }
  /* 规则默认折叠为一行头（2026-11-11：加悬赏细则后规则块在手机上占 200px+，把 #tr-list 压得只剩两三百像素，卡片看似被裁） */
  .tr-rules-head { display:flex; align-items:center; gap:6px; font-size:11px; color:#8a6d3b; font-weight:bold; }
  .tr-rules-head i { font-style:normal; font-weight:normal; color:#b0906d; }
  .tr-rules #tr-rules-arrow::before { content:'▾ 展开细则（成交税/禁售/悬赏）'; }
  .tr-rules-txt { display:none; margin-top:4px; }
  .tr-rules.open .tr-rules-txt { display:block; }
  .tr-rules.open #tr-rules-arrow::before { content:'▴ 收起细则'; color:#8a6d3b; }
  @media (max-width:600px) {
    .tr-head { height:50px; } .tr-headcoin { width:24px; height:24px; }
    .tr-title { font-size:15px; letter-spacing:3px; }
    .tr-tab { padding:7px 10px; font-size:12px; } .tr-tab img { width:18px; height:18px; }
    .tr-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .tr-pgrid { grid-template-columns:repeat(2,1fr); }
    .tr-ico { height:48px; } .tr-icoemoji { font-size:26px; width:42px; height:42px; } .tr-icoimg { width:42px; height:42px; }
    .tr-price { font-size:12px; }
    #tradehouse .card { height:min(88vh,620px); }
  }
  /* ---- 交易行 v4：上架选择器（分类计数/搜索/稀有度分组/快捷定价） ---- */
  .tr-pickbar { flex:none; background:#f5ecd8; padding:10px 12px 9px; border-bottom:1.5px solid #e0d3ae; }
  .tr-picktabs { display:flex; gap:6px; }
  .tr-ptab { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:7px 2px;
    border:2px solid #d8c9a4; border-radius:10px; background:#efe2c2; color:#7a5c3a;
    font-size:12px; font-weight:bold; cursor:pointer; user-select:none; }
  .tr-ptab img { width:16px; height:16px; object-fit:contain; }
  .tr-ptab.on { background:#fffdf5; border-color:#b98a4a; color:#5d4037; box-shadow:0 2px 5px rgba(160,120,40,.15); }
  .tr-ptab.none { opacity:.45; }
  .tr-ptab:active { transform:scale(.97); }
  .tr-pcnt { font-style:normal; font-size:10px; background:#cbb17e; color:#fff; border-radius:999px; padding:0 5px; min-width:15px; text-align:center; line-height:15px; }
  .tr-ptab.on .tr-pcnt { background:#b3541e; }
  .tr-pickrow2 { display:flex; gap:8px; margin-top:8px; align-items:center; }
  .tr-pickrow2 .tr-input { padding:7px 10px; font-size:12px; }
  .tr-quota { flex:none; font-size:10px; color:#a1887f; white-space:nowrap; }
  .tr-quota b { color:#b3541e; }
  .tr-pghead { font-size:12px; font-weight:bold; letter-spacing:1px; margin:12px 2px 7px; display:flex; align-items:center; gap:6px; }
  .tr-pghead:first-child { margin-top:2px; }
  .tr-pghead i { font-style:normal; font-size:10px; color:#b7a97f; font-weight:normal; }
  .tr-pgstars { font-size:10px; letter-spacing:1px; }
  .tr-pcard { margin-top:4px; }
  .tr-qtybadge { position:absolute; top:-7px; right:-5px; font-style:normal; font-size:11px; font-weight:bold;
    background:linear-gradient(180deg,#ffca6b,#f5a623); color:#5d4037; border:2px solid #f5ecd8;
    border-radius:999px; padding:1px 7px; box-shadow:0 2px 4px rgba(160,120,40,.35); z-index:2; }
  .tr-cappill { font-size:9px; color:#8a6d3b; background:#f4ecd8; border:1px solid #e0cfa8; border-radius:999px; padding:1px 8px; margin:4px auto 0; width:max-content; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tr-modesel { display:flex; align-items:center; gap:12px; background:#fffdf5; border:2px solid #e0cfa8; border-radius:14px;
    padding:12px 14px; margin-top:12px; cursor:pointer; transition:.12s; box-shadow:0 2px 0 #d8c9a4; }
  .tr-modesel:active { transform:translateY(2px); box-shadow:none; }
  .tr-modesel:hover { border-color:#d4a843; background:#fff8e2; }
  .tr-modeico { flex:none; width:46px; height:46px; background:#f4ecd8; border:1.5px solid #e0cfa8; border-radius:12px;
    display:flex; align-items:center; justify-content:center; }
  .tr-modeico img { width:30px; height:30px; object-fit:contain; }
  .tr-mmode { flex:1; min-width:0; text-align:left; }
  .tr-mmode b { display:block; font-size:14px; color:#5d4037; letter-spacing:1px; }
  .tr-mmode i { display:block; font-style:normal; font-size:11px; color:#a1887f; margin-top:3px; line-height:1.55; }
  .tr-sec2 { font-size:12px; font-weight:bold; color:#7a5c3a; margin:12px 2px 8px; padding-left:6px; border-left:3px solid #d4a843; }
  .tr-sec2.auc { border-left-color:#e0862f; color:#a06018; }
  .tr-card-auc { border-color:#eecfa0; background:linear-gradient(180deg,#fffaf0,#fdf3df); }
  @media (max-width:600px) {
    .tr-ptab { font-size:11px; padding:6px 1px; gap:3px; } .tr-picktabs { gap:4px; }
    .tr-pcnt { min-width:13px; line-height:13px; font-size:9px; }
    .tr-quota { display:none; }
    .tr-pghead { margin-top:10px; }
  }
  /* ---- 交易行 v4b：移动端 tab 防挤压换行 ---- */
  .tr-ptab { white-space:nowrap; }
  @media (max-width:600px) {
    .tr-ptab { padding:6px 0; font-size:10.5px; letter-spacing:-0.2px; }
    .tr-ptab img { width:14px; height:14px; }
    .tr-picktabs { gap:3px; }
    .tr-pcnt { padding:0 4px; min-width:12px; line-height:12px; font-size:9px; }
  }
  /* ---- 交易行 v7：专属确认弹窗（木纹头+纸面+价格明细） ---- */
  .tr-cf { width:min(86%,340px); border-radius:16px; overflow:hidden; border:3px solid #4e3418;
    background:#f9f1dd; box-shadow:0 16px 42px rgba(20,12,4,.5), 0 0 0 2px rgba(201,162,94,.35) inset;
    animation:trcfPop .24s cubic-bezier(.34,1.56,.64,1); }
  @keyframes trcfPop { from { transform:scale(.76); opacity:0; } }
  .tr-cf-head { height:46px; display:flex; align-items:center; justify-content:center; gap:8px;
    background:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/trade/trade_wood.jpg) center/cover; border-bottom:2.5px solid #4e3418; }
  .tr-cf-hico { width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
  .tr-cf-title { color:#ffe9c8; font-size:15px; font-weight:bold; letter-spacing:3px;
    text-shadow:0 2px 0 rgba(42,28,10,.85), 0 3px 5px rgba(0,0,0,.35); }
  .tr-cf-body { padding:14px 14px 10px; }
  .tr-cf-item { display:flex; align-items:center; gap:10px; background:#fffdf5; border:1.5px solid #e0cfa8;
    border-radius:12px; padding:8px 10px; }
  .tr-cf-ico { width:46px; height:46px; object-fit:contain; flex:none; }
  .tr-cf-icoem { width:46px; height:46px; flex:none; display:flex; align-items:center; justify-content:center;
    font-size:26px; background:#f8eed4; border:1.5px solid #e0cfa8; border-radius:10px; }
  .tr-cf-name { font-size:13px; font-weight:bold; color:#5d4037; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tr-cf-sub { font-size:10px; color:#a1887f; margin-top:2px; }
  .tr-cf-rows { margin-top:9px; }
  .tr-cf-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#8a6d3b; padding:2.5px 4px; }
  .tr-cf-row b { color:#5d4037; }
  .tr-cf-total { margin-top:6px; border-top:2px dashed #d8c9a4; padding:8px 4px 2px;
    display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:bold; color:#5d4037; }
  .tr-cf-gold { display:flex; align-items:center; gap:3px; font-size:17px; color:#e65100; }
  .tr-cf-note { margin-top:9px; font-size:11px; color:#a1887f; line-height:1.65; background:#f1e7cd;
    border-radius:8px; padding:6px 10px; }
  .tr-cf-btns { display:flex; gap:10px; padding:2px 14px 14px; }
  .tr-cf-btn { flex:1; min-height:0; border:2px solid #4e3418; border-radius:11px; padding:10px 0; font-size:14px;
    font-weight:bold; letter-spacing:3px; cursor:pointer; color:#7a5c3a;
    background:linear-gradient(180deg,#eaddbd,#d5c49c); box-shadow:0 3px 0 #4e3418; transition:.12s; }
  .tr-cf-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #4e3418; }
  .tr-cf-ok { color:#fff8e8; text-shadow:0 1px 0 rgba(140,80,0,.55);
    background:linear-gradient(180deg,#ffca6b,#f5a623); }
  /* ---- 交易行 v8：行内错误提示（红字+抖动，替代全局 toast） ---- */
  .tr-biderr { min-height:16px; margin-top:5px; font-size:11px; font-weight:bold; color:#d84315;
    text-align:left; line-height:1.5; }
  .tr-biderr:empty { margin-top:0; }
  .shake { animation:trShake .35s; }
  @keyframes trShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }

/* ==================== 暗夜龙葵·幽冥果园出场动画（暗夜龙葵 #122，约12s；素材走 COS） ====================
   分镜：潜入幽渊 → 古藤果实点亮 → 炸裂漩涡 → 双瞳凝形 → 认亲游近 → 定格 ==================== */
/* ====== 暗夜龙葵·幽冥果园出场动画（约12s）
     分镜：潜入幽渊 → 古藤果实逐颗点亮 → 顶果炸裂成漩涡 → 双瞳先亮·龙影凝形
           → 认亲 S 形游近 → 定格光环 + 标题
     与美人鱼出场动画同架构（rAF 镜头时间轴 + WebAudio 合成音效），定稿后接入 index.html ====== */
  #lk-cine { position:fixed; inset:0; z-index:9000; overflow:hidden; background:#0a0616;
             opacity:0; transition:opacity .8s; }
  #lk-cine.lk-on { opacity:1; }
  #lk-cine.lk-out { opacity:0 !important; transition:opacity .7s; }
  #lk-cine.hidden { display:none; }

  #lk-camera { position:absolute; inset:0; will-change:transform; transform-origin:50% 50%; }

  /* ---- 远景：幽冥果园背景（ImageGen 实景图；明暗变化全走 dim 覆层的 opacity——
        全屏 filter 过渡会逐帧重绘整屏，是卡顿大头，禁用） ---- */
  #lk-bg { position:absolute; inset:-3%; background:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/fish/cine/longkui_bg.jpg) center/cover no-repeat; }
  #lk-dim { position:absolute; inset:0; pointer-events:none; opacity:1; transition:opacity 2.2s; will-change:opacity;
            background:radial-gradient(ellipse at 50% 58%, rgba(6,3,14,.62), rgba(6,3,14,.38) 55%, rgba(6,3,14,.14) 82%); }
  #lk-cine.lk-bright #lk-dim { opacity:0; }

  /* ---- 氛围：紫光柱 / 萤尘 / 气泡 ---- */
  .lk-ray { position:absolute; top:-14%; width:120px; height:85%; pointer-events:none; will-change:transform,opacity;
            background:linear-gradient(180deg, rgba(190,140,255,.14), rgba(120,80,220,.05) 62%, transparent);
            filter:blur(9px); animation:lkRay 9s ease-in-out infinite alternate; }
  @keyframes lkRay { from { opacity:.35; transform:rotate(11deg) translateX(0); } to { opacity:.8; transform:rotate(14deg) translateX(26px); } }
  .lk-dust { position:absolute; width:3px; height:3px; border-radius:50%; pointer-events:none; will-change:transform,opacity;
             background:rgba(226,190,255,.65); box-shadow:0 0 6px rgba(200,140,255,.8); animation:lkDust linear infinite; }
  @keyframes lkDust { 0% { transform:translateY(0); opacity:0; } 18% { opacity:.7; } 82% { opacity:.4; } 100% { transform:translateY(-13vh); opacity:0; } }
  .lk-bub { position:absolute; bottom:-6%; border-radius:50%; pointer-events:none; will-change:transform,opacity;
            border:1.5px solid rgba(216,190,255,.42); background:rgba(200,170,255,.07); animation:lkBub linear infinite; }
  .lk-bub::after { content:''; position:absolute; left:20%; top:16%; width:30%; height:30%; border-radius:50%;
                   background:rgba(255,255,255,.75); }
  @keyframes lkBub { 0% { transform:translateY(0); opacity:0; } 12% { opacity:.85; } 100% { transform:translateY(-118vh); opacity:0; } }
  #lk-cine.lk-diving .lk-bub { animation-duration:1.5s, 1.5s; }

  /* ---- 中景：暗影幽兰草 / 萤火 ---- */
  .lk-weed { position:absolute; bottom:-2%; width:20px; pointer-events:none; transform-origin:50% 100%; will-change:transform;
             background:linear-gradient(180deg, rgba(140,80,220,0), rgba(110,60,190,.3) 30%, rgba(70,36,130,.46));
             border-radius:50% 50% 8px 8px; filter:blur(1px);
             animation:lkWeed 4.6s ease-in-out infinite alternate; }
  @keyframes lkWeed { from { transform:rotate(-3.5deg); } to { transform:rotate(4deg); } }
  #lk-cine.lk-shock .lk-weed { animation:lkWeedBend .9s ease-out; }
  @keyframes lkWeedBend { 0% { transform:rotate(0); } 28% { transform:rotate(-14deg) scaleY(.95); } 62% { transform:rotate(8deg); } 100% { transform:rotate(0); } }
  .lk-firefly { position:absolute; width:5px; height:5px; border-radius:50%; pointer-events:none; will-change:transform,opacity;
                background:#d9a6ff; box-shadow:0 0 9px 3px rgba(190,120,255,.65);
                animation:lkFirefly 7s ease-in-out infinite alternate; }
  @keyframes lkFirefly { 0% { transform:translate(0,0); opacity:.25; } 35% { opacity:.95; } 70% { transform:translate(4vw,-6vh); opacity:.4; } 100% { transform:translate(-3vw,-10vh); opacity:.8; } }

  /* ---- 龙葵古藤（A2 机关）：ImageGen 实景藤图 + 点亮果实贴片像素级对位 ---- */
  #lk-vine { position:absolute; left:50%; top:3%; width:min(52vh,360px); aspect-ratio:647/854;
             transform:translateX(-50%); z-index:2; pointer-events:none;
             opacity:0; transition:opacity 1.4s; }
  #lk-vine.on { opacity:1; }
  #lk-vine.out { opacity:0 !important; transition:opacity .9s; }
  #lk-vine img.vineart { width:100%; height:100%; display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
  .lk-fruitlit { position:absolute; opacity:0; transform:scale(.35); transform-origin:50% 60%;
                 transition:opacity .4s, transform .45s cubic-bezier(.3,1.4,.5,1); pointer-events:none; }
  .lk-fruitlit.lit { opacity:1; transform:scale(1); animation:lkFruitPulse 1.6s ease-in-out infinite; }
  /* 脉冲只动 transform/opacity（合成器），filter 逐帧重绘会卡 */
  @keyframes lkFruitPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.055); opacity:.93; } }
  .lk-fruitlit.quake { animation:lkQuake .14s linear infinite; }
  @keyframes lkQuake { 0% { transform:translate(0,0) scale(1) } 25% { transform:translate(2px,-1px) scale(1) } 50% { transform:translate(-2px,1px) scale(1) } 75% { transform:translate(1px,2px) scale(1) } 100% { transform:translate(0,0) scale(1) } }
  .lk-fruitlit.boom { animation:lkFruitBoom .6s ease-out forwards; }
  /* 爆果不做 filter 动画（辉光大图逐帧重算滤镜卡顿），亮闪交给冲击波+星尘 */
  @keyframes lkFruitBoom { 0% { transform:scale(1.35); opacity:1; }
                           100% { transform:scale(.2); opacity:0; } }

  /* ---- 暗流漩涡（A3）：外层 wrap 负责 JS 收缩，内层负责旋转 ---- */
  #lk-vortex-wrap { position:absolute; left:50%; top:44%; width:min(70vh,460px); height:min(70vh,460px);
                    transform:translate(-50%,-50%); pointer-events:none; z-index:3; will-change:transform; }
  #lk-vortex { position:absolute; inset:0; opacity:0;
               border-radius:50%;
               background:conic-gradient(from 0deg, transparent, rgba(170,95,255,.5), transparent 20%,
                 rgba(110,50,200,.42), transparent 44%, rgba(225,145,255,.55), transparent 66%, rgba(140,60,235,.46), transparent);
               -webkit-mask:radial-gradient(circle, transparent 22%, #000 32%, #000 56%, transparent 68%);
               mask:radial-gradient(circle, transparent 22%, #000 32%, #000 56%, transparent 68%);
               filter:blur(1px); transition:opacity .8s; }
  #lk-vortex.on { opacity:1; animation:lkSpin 1.6s linear infinite; }
  #lk-vortex::after { content:''; position:absolute; inset:18%; border-radius:50%;
                      background:radial-gradient(circle, rgba(200,130,255,.28), transparent 70%); }
  @keyframes lkSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  .lk-spiral { position:absolute; border-radius:50%; pointer-events:none; z-index:3;
               background:radial-gradient(circle, rgba(226,170,255,.95), rgba(150,80,255,.4) 60%, transparent);
               box-shadow:0 0 8px 2px rgba(180,100,255,.5); }

  /* ---- 冲击波 ---- */
  .lk-shockwave { position:absolute; border-radius:50%; pointer-events:none; z-index:8; will-change:transform,opacity;
                  border:3px solid rgba(216,150,255,.8); box-shadow:0 0 24px rgba(190,110,255,.6), inset 0 0 24px rgba(190,110,255,.4);
                  animation:lkShock 1.15s ease-out forwards; }
  @keyframes lkShock { 0% { transform:scale(.3); opacity:1; } 100% { transform:scale(9); opacity:0; } }

  /* ---- 主角：暗夜龙葵 ---- */
  #lk-rise { position:absolute; left:50%; top:50%; z-index:5; pointer-events:none;
             transform:translate(-50%,-50%); will-change:transform; }
  #lk-sway { will-change:transform; }
  .lk-body { position:relative; width:min(46vh,320px); height:min(46vh,320px); }
  .lk-body img { width:100%; height:100%; display:block; opacity:0; transition:opacity .5s;
                 filter:drop-shadow(0 0 22px rgba(150,70,255,.35)); }
  .lk-body.lk-ghost img { opacity:.55; }
  .lk-body.lk-solid img { opacity:1; }
  /* 尾→首显形：自下而上 clip 展开（尾巴在下方）
     显形期强制去掉 drop-shadow：filter+clip 动画叠加会每帧重算阴影，卡顿大头；实体化后再上辉光 */
  .lk-body.lk-forming img { animation:lkForm 1.5s cubic-bezier(.4,.1,.3,1) forwards; filter:none !important; }
  @keyframes lkForm { from { clip-path:inset(100% 0 0 0); opacity:.55; } to { clip-path:inset(0 0 0 0); opacity:.9; } }
  .lk-body.lk-forming.lk-solid img { opacity:1; }
  /* 凝形完成周身流光 */
  .lk-body.lk-sheen img { animation:lkSheen 1.4s ease-in-out; }
  @keyframes lkSheen { 0% { filter:drop-shadow(0 0 22px rgba(150,70,255,.35)) brightness(1); }
                       45% { filter:drop-shadow(0 0 34px rgba(220,140,255,.75)) brightness(1.45); }
                       100% { filter:drop-shadow(0 0 22px rgba(150,70,255,.35)) brightness(1); } }
  .lk-body.lk-glowing img { filter:drop-shadow(0 0 30px rgba(190,110,255,.55)); }
  /* 双瞳光点（凝形前暗中亮起 / 眨眼闪光） */
  .lk-eyeglow { position:absolute; width:9%; height:7%; border-radius:50%; pointer-events:none; z-index:6;
                background:radial-gradient(circle, #f4d9ff 12%, #c56bff 45%, rgba(140,60,255,.5) 75%, transparent);
                box-shadow:0 0 14px 5px rgba(190,100,255,.85), 0 0 30px 10px rgba(140,60,255,.4);
                opacity:0; transition:opacity .4s; }
  .lk-eyeglow.on { opacity:1; animation:lkEyePulse 1.1s ease-in-out infinite; }
  @keyframes lkEyePulse { 0%,100% { transform:scale(1); opacity:.85; } 50% { transform:scale(1.28); opacity:1; } }
  .lk-eyeglow.fade { opacity:0 !important; transition:opacity .6s; animation:none; }
  .lk-eyeglow.flash { animation:lkEyeFlash .34s ease-out 2; }
  @keyframes lkEyeFlash { 0%,100% { transform:scale(1); } 50% { transform:scale(1.7); filter:brightness(2.2); } }
  /* 撞镜光爆 */
  #lk-burst { position:absolute; left:50%; top:38%; width:70px; height:70px; margin:-35px 0 0 -35px;
              border-radius:50%; pointer-events:none; opacity:0;
              background:radial-gradient(circle, rgba(244,214,255,.95), rgba(190,110,255,.5) 42%, transparent 70%); }
  #lk-burst.go { animation:lkBurst .8s ease-out; }
  @keyframes lkBurst { 0% { transform:scale(.2); opacity:0; } 22% { transform:scale(1.35); opacity:1; } 100% { transform:scale(2.4); opacity:0; } }

  /* ---- 卫星龙葵果（跟随巡游） ---- */
  #lk-sat { position:absolute; left:50%; top:50%; z-index:4; pointer-events:none; opacity:0; transition:opacity 1s;
            transform:translate(-50%,-50%); will-change:transform; }
  #lk-sat.on { opacity:1; }
  .lk-satfruit { position:absolute; width:26px; height:26px; border-radius:50%;
                 background:radial-gradient(circle at 36% 32%, #8a4fd0 15%, #4a1f70 55%, #241040 100%);
                 box-shadow:0 0 12px 4px rgba(196,110,255,.55); }

  /* ---- 光粒 ---- */
  .lk-spec { position:absolute; border-radius:50%; pointer-events:none; z-index:7;
             background:radial-gradient(circle, rgba(238,196,255,.98), rgba(160,90,255,.5) 62%, transparent);
             box-shadow:0 0 8px 2px rgba(190,110,255,.55); }
  .lk-star { position:absolute; pointer-events:none; z-index:7; color:#e2bcff;
             text-shadow:0 0 10px rgba(200,130,255,.9); animation:lkStar 1.5s ease-out forwards; }
  @keyframes lkStar { 0% { transform:translate(0,0) scale(.4); opacity:0; } 18% { opacity:1; }
                      100% { transform:translate(var(--dx), var(--dy)) scale(1); opacity:0; } }
  .lk-heart { position:absolute; pointer-events:none; z-index:7; animation:lkHeart 2.6s ease-out forwards; }
  @keyframes lkHeart { 0% { transform:translate(0,0) scale(.5); opacity:0; } 16% { opacity:.95; }
                       100% { transform:translate(var(--dx), -90px) scale(1.15); opacity:0; } }

  /* ---- 光环（A6 定格） ---- */
  #lk-orbit { position:absolute; left:50%; top:50%; width:min(58vh,400px); height:min(58vh,400px);
              transform:translate(-50%,-50%); pointer-events:none; z-index:4; opacity:0; transition:opacity 1.4s; }
  #lk-cine.lk-orbit-on #lk-orbit { opacity:1; animation:lkSpin2 7s linear infinite; }
  @keyframes lkSpin2 { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
  .lk-orb { position:absolute; width:11px; height:11px; border-radius:50%;
            background:radial-gradient(circle, #f0ccff, rgba(170,90,255,.55) 68%, transparent);
            box-shadow:0 0 12px 3px rgba(196,110,255,.6); }

  /* ---- 收束/落幅（渐变写成静态背景，只动画 opacity——keyframes 里动画 background 会整屏重绘且原写法无效） ---- */
  #lk-finale { position:absolute; inset:0; pointer-events:none; z-index:9; opacity:0;
               background:radial-gradient(circle at 50% 46%, rgba(238,206,255,.55), rgba(190,110,255,.22) 34%, transparent 62%); }
  #lk-finale.go { animation:lkFinale 1.6s ease-out forwards; }
  @keyframes lkFinale { 0% { opacity:0; } 24% { opacity:1; } 100% { opacity:0; } }

  .lk-title { position:absolute; left:0; right:0; top:9.5%; text-align:center; z-index:20; pointer-events:none;
              font-size:min(7.4vh,34px); font-weight:700; letter-spacing:6px; color:#f2e4ff;
              text-shadow:0 0 18px rgba(180,90,255,.9), 0 2px 10px rgba(0,0,0,.6);
              opacity:0; transform:translateY(14px); transition:all .9s cubic-bezier(.2,.7,.3,1); }
  .lk-sub { position:absolute; left:0; right:0; bottom:7.5%; text-align:center; z-index:20; pointer-events:none;
            font-size:min(3.6vh,16.5px); color:#d9c2f5; letter-spacing:1.5px;
            text-shadow:0 1px 8px rgba(20,6,40,.9), 0 0 16px rgba(140,70,230,.55);
            opacity:0; transform:translateY(8px); transition:all .55s ease; }
  .lk-title.on, .lk-sub.on { opacity:1; transform:translateY(0); }

  #lk-skip { position:absolute; right:16px; top:14px; z-index:30; pointer-events:auto; cursor:pointer;
             color:rgba(226,200,255,.6); background:rgba(30,12,52,.45); border:1px solid rgba(180,120,255,.3);
             border-radius:16px; padding:5px 14px; font-size:13px; letter-spacing:2px; user-select:none; }
  #lk-skip:hover { color:#fff; border-color:rgba(210,150,255,.7); }