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

/* ==== 原块 #1  index.html 第 17~916 行 ==== */
  * { margin:0; padding:0; box-sizing:border-box; font-family:"Microsoft YaHei","PingFang SC",sans-serif;
      -webkit-tap-highlight-color: transparent; } /* 触屏点按高亮关闭：安卓 WebView 默认 rgba(0,0,0,.18) 黑块，部分机型 touch 结束后残留成页签上「卡死阴影」（2026-10-31 商店页签案例，颜色采样实测精确匹配 .18） */
  body { background:linear-gradient(135deg,#e3f6e8 0%,#fdf6d8 60%,#fff3cd 100%); min-height:100vh; color:#2d3a2e; }

  /* ===== 顶栏 ===== */
  #topbar { display:flex; flex-direction:column; gap:8px; padding:10px 18px;
            background:linear-gradient(#ffe082,#ffc933); border-bottom:4px solid #d8a437;
            box-shadow:0 3px 0 #c08b2d, 0 6px 14px rgba(0,0,0,.12); position:sticky; top:0; z-index:10; }
  .tb-main { display:flex; align-items:center; gap:10px; }
  .tb-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .mchip { display:inline-flex; align-items:center; gap:5px; }
  .mchip i { font-style:normal; font-size:15px; }
  .mchip b { font-weight:bold; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mchip em { font-style:normal; font-size:12px; color:#8a7a55; }
  #hud-player .pl { display:inline-flex; align-items:center; gap:5px; }
  #topbar .logo { font-size:24px; font-weight:bold; color:#e65100; letter-spacing:2px;
                  text-shadow:0 2px 0 #fff8e1, 0 3px 2px rgba(0,0,0,.15); }
  .chip { display:inline-flex; align-items:center; gap:5px; background:#fffef5; border:2px solid #d8a437;
          border-radius:20px; padding:4px 12px; font-size:14px; font-weight:bold; cursor:default;
          box-shadow:0 2px 0 rgba(184,134,11,.25); }
  .chip.click { cursor:pointer; transition:.15s; }
  .chip.click:hover { border-color:#4caf50; background:#f1f8e9; }
  .chip small { color:#8a7a55; font-weight:normal; }
  .spacer { flex:1; }
  .btn { border:none; border-radius:10px; padding:7px 16px; font-size:14px;
         font-weight:bold; cursor:pointer; transition:.15s; color:#fff; background:linear-gradient(180deg,#81c784,#4caf50);
         box-shadow:0 2px 0 rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.08); }
  .btn:hover { filter:brightness(1.06); box-shadow:0 3px 0 rgba(0,0,0,.16), 0 5px 12px rgba(0,0,0,.12); }
  .btn:active { transform:scale(.96); box-shadow:0 1px 0 rgba(0,0,0,.16); }
  .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
  .btn.blue { background:linear-gradient(180deg,#4fc3f7,#1e88e5); } .btn.orange { background:linear-gradient(180deg,#ffb74d,#f57c00); }
  .btn.gray { background:linear-gradient(180deg,#b0bec5,#78909c); }
  .btn.red { background:linear-gradient(180deg,#ef5350,#e53935); } .btn.purple { background:linear-gradient(180deg,#ba68c8,#8e24aa); }
  .btn.big { font-size:18px; padding:12px 34px; border-radius:12px; }
  .btn.sm { font-size:12px; padding:4px 10px; border-radius:8px; }

  /* ===== 主区域（上：钓鱼场景；下：功能面板） ===== */
  #main { display:flex; flex-direction:column; gap:14px; padding:14px; max-width:1180px; margin:0 auto; }
  #scene-wrap { width:100%; position:relative; }
  #pond { width:100%; display:block; border-radius:22px; border:8px solid #a1743f;
          box-shadow:0 0 0 3px #8d6136 inset, 0 8px 0 rgba(130,90,50,.35), 0 12px 24px rgba(0,0,0,.18); cursor:pointer; }
  #cast-tip { text-align:center; font-size:13px; color:#8a7a55; margin-top:6px; }

  /* ===== 拉杆小游戏 ===== */
  #hook-game { position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
               background:rgba(255,253,245,.97); border:3px solid #ff9800; border-radius:14px;
               padding:18px 22px; width:min(92%,460px); box-shadow:0 8px 30px rgba(0,0,0,.3); text-align:center; z-index:5; }
  #hook-game h3 { color:#e65100; margin-bottom:4px; font-size:18px; }
  #hook-game .hint { font-size:12px; color:#8a7a55; margin-bottom:12px; }
  #track { position:relative; height:34px; background:linear-gradient(#e0e0e0,#c9c9c9);
           border-radius:17px; overflow:hidden; border:2px solid #999; }
  #zone { position:absolute; top:0; height:100%; background:linear-gradient(90deg,#a5d6a7,#66bb6a,#a5d6a7);
          border-left:2px solid #2e7d32; border-right:2px solid #2e7d32; }
  #needle { position:absolute; top:-3px; width:6px; height:40px; background:#e53935; border-radius:3px;
            box-shadow:0 0 6px rgba(229,57,53,.8); margin-left:-3px; }
  #tug-game { position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
              background:rgba(255,243,224,.97); border:3px solid #e53935; border-radius:14px;
              padding:18px 22px; width:min(92%,460px); box-shadow:0 8px 30px rgba(0,0,0,.35);
              text-align:center; z-index:5; cursor:pointer; user-select:none; }
  #tug-game h3 { color:#c62828; margin-bottom:4px; font-size:18px; }
  #tug-game .hint { font-size:12px; color:#8a7a55; margin-bottom:10px; }
  #tug-bar { position:relative; height:40px; background:#37474f; border-radius:20px; overflow:hidden; border:3px solid #90a4ae; }
  #tug-fill { position:absolute; left:0; top:0; bottom:0; width:50%;
              background:linear-gradient(90deg,#ff8a80,#e53935,#ff5252); transition:width .06s linear; }
  #tug-timer { height:6px; background:#eee; border-radius:3px; margin-top:10px; overflow:hidden; }
  #tug-timer i { display:block; height:100%; background:#ff9800; border-radius:3px; }
  #tug-count { margin-top:8px; font-size:18px; font-weight:bold; color:#e65100; }
  #hook-timer { height:6px; background:#eee; border-radius:3px; margin-top:10px; overflow:hidden; }
  #hook-timer i { display:block; height:100%; background:#e53935; border-radius:3px; }

  /* ===== 功能面板（场景下方） ===== */
  #side { width:100%; background:#fffdf5; border:4px solid #c98a3d; border-radius:18px;
          overflow:hidden; box-shadow:0 6px 0 rgba(160,110,50,.3), 0 8px 18px rgba(0,0,0,.12); }
  #tabs { display:flex; border-bottom:3px solid #c98a3d; background:linear-gradient(#ffe0b2,#ffcc80); }
  #tabs div { flex:1; text-align:center; padding:9px 1px; cursor:pointer; font-size:12px; font-weight:bold;
              color:#8d6e63; background:transparent; transition:.15s; user-select:none; border-bottom:4px solid transparent; }
  #tabs div:hover { color:#e65100; }
  #tabs div.on { background:#fffdf5; color:#e65100; border-bottom:4px solid #ff9800; border-radius:8px 8px 0 0; }
  #panel { padding:12px; max-height:560px; overflow-y:auto; }
  .item { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px dashed #e4d9bd; font-size:13px; }
  .item .info { flex:1; }
  .item .nm { font-weight:bold; }
  .item .sub { color:#999; font-size:12px; }
  .fico { display:inline-flex; width:42px; justify-content:center; flex:none; }
  .fico img { width:40px; height:27px; object-fit:contain; }
  .r1{color:#43a047} .r2{color:#1e88e5} .r3{color:#8e24aa} .r4{color:#f9a825} .r5{color:#e53935}
  .q1{color:#78909c} .q2{color:#43a047} .q3{color:#1e88e5} .q4{color:#8e24aa} .q5{color:#f9a825} .q6{color:#e53935}
  .tag.q1{background:#eceff1;color:#546e7a;border:1px solid #b0bec5}.tag.q2{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}.tag.q3{background:#e3f2fd;color:#1565c0;border:1px solid #90caf9}
  .tag.q4{background:#f3e5f5;color:#6a1b9a;border:1px solid #ce93d8}.tag.q5{background:#fff8e1;color:#b28a00;border:1px solid #ffe082}
  /* 红色绝版：保留流光动画 */
  .tag.q6{background:linear-gradient(135deg,#e53935,#ff8a80);color:#fff;border:1px solid #ff8a80;
    box-shadow:0 0 6px rgba(229,57,53,.7); animation:glow 1.6s infinite alternate;}
  @keyframes glow { from{box-shadow:0 0 3px rgba(229,57,53,.5)} to{box-shadow:0 0 10px rgba(229,57,53,.95)} }
  .tag { font-size:11px; padding:1px 8px; border-radius:999px; font-weight:bold; }
  .t1{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
  .t2{background:#e3f2fd;color:#1565c0;border:1px solid #90caf9}
  .t3{background:#f3e5f5;color:#6a1b9a;border:1px solid #ce93d8}
  .t4{background:#fff8e1;color:#b28a00;border:1px solid #ffe082}
  .t5{background:#ffebee;color:#c62828;border:1px solid #ef9a9a}
  /* 炫彩（rarity 6）：彩虹渐变 + 流光 */
  .t6{background:linear-gradient(135deg,#e91e63,#9c27b0,#2196f3,#00bfa5,#ffb300);color:#fff;border:none;
      box-shadow:0 0 6px rgba(233,30,99,.5); animation:t6glow 1.6s infinite alternate;}
  @keyframes t6glow { from{box-shadow:0 0 3px rgba(233,30,99,.4)} to{box-shadow:0 0 10px rgba(33,150,243,.85)} }
  .r6 { background:linear-gradient(90deg,#e91e63,#9c27b0,#2196f3,#00bfa5,#ff9800); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .empty { text-align:center; color:#b7a97f; padding:30px 0; font-size:14px; }
  .shoprow { display:flex; align-items:center; gap:8px; padding:10px 6px; border-bottom:1px dashed #e4d9bd; }
  .shoprow .ico2 { font-size:26px; width:34px; text-align:center; flex:none; }
  .shoprow .info { flex:1; }
  .shoprow .desc { font-size:12px; color:#8a7a55; margin-top:2px; }
  .gold { color:#e65100; font-weight:bold; }
  input[type=checkbox]{ width:16px; height:16px; accent-color:#4caf50; }

  /* ===== 弹层通用 ===== */
  .overlay { position:fixed; inset:0; background:rgba(30,40,25,.55); display:flex; align-items:center;
             justify-content:center; z-index:100; }
  /* 确认框 / 结果弹层必须盖在全屏功能页（水族馆/养殖场/签到页）之上 */
  #result { z-index:300; }
  #game-confirm { z-index:9750; } /* 全局二次确认：高于所有模块弹层(9100~9700，2026-10-19 修正被出售弹层盖住)，低于 toast(99999) */

  /* ===== 排行榜大厅：PC 端竖版窄容器 + 金棕滚动条 ===== */
  #rank-body { width:100%; max-width:430px; margin:0 auto; }
  #rank-body ::-webkit-scrollbar { width:8px; }
  #rank-body ::-webkit-scrollbar-track { background:rgba(0,0,0,.3); border-radius:4px; }
  #rank-body ::-webkit-scrollbar-thumb { background:linear-gradient(#c9a25e,#8a6d3b); border-radius:4px; }
  #rank-body ::-webkit-scrollbar-thumb:hover { background:linear-gradient(#e0bd7c,#a3834b); }
  #rank-wrap { box-shadow:0 0 46px rgba(0,0,0,.65), 0 0 18px rgba(244,185,66,.18); }
  .hidden { display:none !important; }
  .card { background:#fffdf5; border-radius:22px; padding:28px 34px; width:min(92%,400px);
          box-shadow:0 12px 44px rgba(0,0,0,.35); text-align:center; border:4px solid #ffca28;
          max-height:86vh; overflow-y:auto; }
  .card h2 { color:#2e7d32; margin-bottom:16px; }
  .field { margin-bottom:12px; text-align:left; }
  .field label { font-size:13px; color:#8a7a55; display:block; margin-bottom:4px; }
  .field input { width:100%; padding:9px 12px; border:1.5px solid #d8c9a3; border-radius:8px; font-size:15px; }
  .field input:focus { outline:none; border-color:#4caf50; }
  .switch { font-size:13px; color:#8a7a55; margin-top:14px; }
  .switch a { color:#2196f3; cursor:pointer; }
  .err { color:#e53935; font-size:13px; min-height:18px; margin:4px 0; }

  /* 鱼饵选择器 */
  #bait-pick .baitrow { display:flex; align-items:center; gap:10px; padding:10px; border:2px solid transparent;
                        border-radius:10px; cursor:pointer; text-align:left; transition:.15s; }
  #bait-pick .baitrow:hover { background:#f1f8e9; }
  #bait-pick .baitrow.sel { border-color:#4caf50; background:#e8f5e9; }
  #bait-pick .baitrow.none { opacity:.4; cursor:not-allowed; }
  #bait-pick .bico { font-size:28px; width:36px; text-align:center; }
  #bait-pick .cnt { font-weight:bold; color:#e65100; }

  /* 结果弹窗 */
  #result-card .fish-big { height:110px; display:flex; align-items:center; justify-content:center; margin:6px 0; animation:pop .5s; }
  #result-card .fish-big img { max-height:105px; max-width:160px; }
  #result-card .fish-big img.fish-xl { max-height:152px; max-width:224px; } /* 金鳌：Q版竖团子构图，默认档显小（2026-10-04 用户反馈） */
  #result-card .fish-big.fish-big-xl { height:158px; } /* 金鳌：容器同步放宽，避免大图压标题 */
  #result-card .fish-big span { font-size:64px; }
  @keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }
  #result-card .stars { letter-spacing:3px; font-size:20px; }
  #toast { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:rgba(40,50,35,.9);
           color:#fff; padding:10px 22px; border-radius:22px; font-size:14px; z-index:99999;
           opacity:0; transition:.3s; pointer-events:none; }
  #toast.show { opacity:1; }
  .sec-title { font-size:13px; color:#8a7a55; font-weight:bold; margin:10px 0 4px; }
  /* 龙宫大保险（9宫格摸金） */
  #lg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:420px; margin:0 auto; }
  .lg-cell { height:104px; border-radius:12px; background:linear-gradient(#232c52,#1a2340); border:2px solid #3a4a7a;
             display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
             transition:transform .15s, box-shadow .2s, border-color .2s, opacity .3s; position:relative; }
  .lg-cell .mark { font-size:24px; color:#4a5a8a; }
  .lg-cell .sub { font-size:10px; color:#3d4c78; }
  .lg-cell.spin { animation:lgspin .76s ease-in-out; z-index:1; }
  @keyframes lgspin { 0% { transform:rotate(0deg) scale(1) } 50% { transform:rotate(360deg) scale(.35) } 100% { transform:rotate(720deg) scale(1) } }
  .lg-cell.open { border-color:#ffb300; background:#1c2444; cursor:default; }
  .lg-cell.open img { width:54px; height:44px; object-fit:contain; animation:lgpop .4s cubic-bezier(.2,1.4,.4,1); }
  .lg-cell.open .nm { font-size:10px; color:#cfd8ff; max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lg-cell.open.q6 { box-shadow:0 0 16px rgba(229,57,53,.85) inset, 0 0 10px rgba(229,57,53,.5); }
  .lg-cell.open.q5 { box-shadow:0 0 14px rgba(249,168,37,.8) inset; }
  .lgmode { transition: transform .15s, box-shadow .15s; }
  .lgmode:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.6); }
  /* ===== 炫彩鳄鱼出场动画（8~10s 叙事：水下接近→咬钩→破水→天空庆祝） ===== */
  #croc-cine { position:fixed; inset:0; z-index:9000; overflow:hidden; background:#04101f;
               opacity:0; transition:opacity .5s; }
  #croc-cine.cc-on { opacity:1; }
  #croc-cine.cc-out { opacity:0; transition:opacity .6s; }
  .cc-bg { position:absolute; inset:-2%; background-size:cover; background-position:center; }
  .cc-water { background-image:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/rank/croc_cine_water.jpg?v=2); opacity:1; transition:opacity .9s; }
  /* 底部加一层深蓝渐变压住素材自带的浅色沙地带 */
  .cc-water::after { content:''; position:absolute; left:0; right:0; bottom:0; height:26%;
                     background:linear-gradient(rgba(10,40,90,0), rgba(8,32,72,.85)); }
  .cc-sky { background-image:url(https://fish-assets-1439471359.cos.ap-shanghai.myqcloud.com/assets/rank/croc_cine_sky.jpg?v=6); opacity:0; transition:opacity .9s; }
  /* 底部海面用天空色柔和雾化（起点全透明无硬边界），让构图下半部纯净 */
  .cc-sky::after { content:''; position:absolute; left:0; right:0; bottom:0; height:46%;
                   background:linear-gradient(rgba(100,185,242,0) 0%, rgba(100,185,242,.45) 45%, rgba(100,185,242,.92) 100%); }
  #croc-cine.cc-air .cc-water { opacity:0; }
  #croc-cine.cc-air .cc-sky { opacity:1; }
  .cc-line { position:absolute; left:50%; top:0; width:2px; height:41%;
             background:linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.9)); transform:translateX(-50%); }
  .cc-hookfish { position:absolute; left:50%; top:38%; width:min(130px,22vw); transform:translateX(-50%);
                 animation:ccSway 2.2s ease-in-out infinite; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
  .cc-hookfish .cc-fish { position:absolute; left:50%; top:0; width:42%; transform:translateX(-50%);
                          transform-origin:50% 0;
                          animation:ccStruggle .45s ease-in-out infinite;
                          filter:drop-shadow(0 2px 8px rgba(255,120,40,.45)) drop-shadow(0 0 14px rgba(255,200,80,.35)); }
  @keyframes ccStruggle { 0%,100% { transform:translateX(-50%) rotate(-12deg); } 50% { transform:translateX(-50%) rotate(12deg); } }
  @keyframes ccSway { 0%,100% { transform:translateX(-50%) rotate(-5deg); } 50% { transform:translateX(-50%) rotate(5deg); } }
  /* 破水后收线：钓线和钩一起离开画面 */
  #croc-cine.cc-air .cc-line, #croc-cine.cc-air .cc-hookfish { opacity:0; transform:translateX(-50%) translateY(-40px); transition:opacity .6s, transform .6s; }
  .cc-croc { position:absolute; bottom:16%; left:-28%; width:min(300px,52vw); transform:scaleX(-1);
             filter:drop-shadow(0 8px 18px rgba(0,20,40,.5)); transition:left 1.6s cubic-bezier(.25,.8,.35,1), bottom .8s, transform .5s; }
  .cc-croc.cc-in { left:8%; animation:ccBob 2s ease-in-out infinite; }
  @keyframes ccBob { 0%,100% { margin-top:0; } 50% { margin-top:-12px; } }
  #croc-cine.cc-near .cc-croc { left:50%; bottom:30%; transform:translateX(-50%) scaleX(-1) rotate(-22deg) scale(1.15); }
  #croc-cine.cc-chomp .cc-croc { left:50%; bottom:36%; transform:translateX(-50%) scaleX(-1) rotate(-12deg) scale(1.3); transition:left .28s cubic-bezier(.6,0,.9,.4), bottom .28s ease-out, transform .22s; }
  #croc-cine.cc-chomp .cc-hookfish { animation:ccShrink .4s forwards; }
  @keyframes ccShrink { to { transform:translateX(-220%) scale(.1); opacity:.4; } }
  .cc-splash { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); font-size:90px; opacity:0; pointer-events:none; }
  .cc-bigsplash { position:absolute; left:50%; bottom:20%; transform:translateX(-50%); font-size:130px; opacity:0; pointer-events:none; }
  .cc-boom { animation:ccBoom .55s ease-out forwards; }
  @keyframes ccBoom { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3); } 35% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-140%) scale(1.5); } }
  #croc-cine.cc-shake .cc-bg, #croc-cine.cc-shake .cc-croc { animation:ccShake .4s; }
  @keyframes ccShake { 0%,100% { margin-left:0; } 20% { margin-left:-9px; } 40% { margin-left:8px; } 60% { margin-left:-5px; } 80% { margin-left:4px; } }
  #croc-cine.cc-air .cc-croc { bottom:24%; left:50%; animation:ccFloat 2.4s ease-in-out infinite; }
  @keyframes ccFloat { 0%,100% { transform:translateX(-50%) scaleX(-1) scale(1.1) rotate(-3deg); margin-top:0; } 50% { transform:translateX(-50%) scaleX(-1) scale(1.1) rotate(3deg); margin-top:-16px; } }
  .cc-stars { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s; }
  #croc-cine.cc-air .cc-stars { opacity:1; }
  .cc-stars span { position:absolute; animation:ccTw 1.4s ease-in-out infinite; }
  @keyframes ccTw { 0%,100% { transform:scale(.6); opacity:.4; } 50% { transform:scale(1.15); opacity:1; } }
  .cc-title { position:absolute; left:0; right:0; top:12%; text-align:center; font-size:min(34px,7vw); font-weight:bold;
              color:#ffd54f; text-shadow:0 0 18px rgba(255,160,0,.85), 0 3px 8px rgba(0,0,0,.6); letter-spacing:3px;
              opacity:0; transform:scale(.4); transition:all .45s cubic-bezier(.2,1.6,.4,1); }
  #croc-cine.cc-title-on .cc-title { opacity:1; transform:scale(1); }
  .cc-sub { position:absolute; left:0; right:0; bottom:9%; text-align:center; font-size:14px; color:#cfe8ff;
            text-shadow:0 1px 6px rgba(0,0,0,.7); opacity:0; transition:opacity .4s; }
  .cc-sub.on { opacity:1; }
  .cc-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; }
  .cc-skip:hover { color:#fff; border-color:#fff; }
  .cc-mark { position:absolute; left:56%; top:38%; font-size:44px; opacity:0; transform:scale(.3) rotate(-12deg); transition:all .3s cubic-bezier(.2,1.8,.4,1); pointer-events:none; }
  #croc-cine.cc-near .cc-mark { opacity:1; transform:scale(1.15) rotate(-6deg); animation:ccMark 1s ease-in-out infinite .3s; }
  @keyframes ccMark { 0%,100% { transform:scale(1.15) rotate(-6deg); } 50% { transform:scale(1.35) rotate(4deg); } }
  .cc-qte { position:absolute; left:50%; bottom:16%; transform:translateX(-50%); background:rgba(255,213,79,.95); color:#5d3a00;
            font-size:16px; font-weight:bold; padding:12px 26px; border-radius:40px; box-shadow:0 0 0 0 rgba(255,213,79,.7);
            opacity:0; pointer-events:none; white-space:nowrap; z-index:4; }
  #croc-cine.cc-qte-on .cc-qte { opacity:1; animation:ccPulse .7s ease-out infinite; }
  @keyframes ccPulse { 0% { box-shadow:0 0 0 0 rgba(255,213,79,.7); } 100% { box-shadow:0 0 0 26px rgba(255,213,79,0); } }
  .cc-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:3; }
  .cc-flash-on { animation:ccFlash .3s ease-out forwards; }
  @keyframes ccFlash { 0% { opacity:.95; } 100% { opacity:0; } }
  .cc-wave { position:absolute; left:-10%; right:-10%; bottom:-110%; height:130%; display:none; border-radius:46% 54% 0 0/8% 8% 0 0;
             background:linear-gradient(rgba(120,200,255,.55), rgba(30,120,220,.9)); pointer-events:none; z-index:2; }
  .cc-wave.cc-wave-on { display:block; animation:ccWave .75s ease-in-out forwards; }
  @keyframes ccWave { 0% { bottom:-110%; } 55% { bottom:-8%; } 100% { bottom:-110%; } }
  .cc-croc.cc-chomp-anim { transition:left .28s cubic-bezier(.6,0,.9,.4), transform .22s; }
  .cc-hookfish.cc-fling { animation:ccFling .5s ease-out forwards; }
  @keyframes ccFling { 0% { transform:translateX(-50%) rotate(0); opacity:1; } 100% { transform:translateX(-50%) rotate(120deg) translate(50px,-150px); opacity:0; } }
  .cc-part { position:fixed; font-size:26px; pointer-events:none; z-index:9500; transition:transform .9s cubic-bezier(.2,.7,.5,1), opacity .9s; }
  /* ===== 梦幻海螺出场动画（静谧珠光·深海珍宝，约 10s，可跳过） ===== */
  #conch-cine { position:fixed; inset:0; z-index:9000; overflow:hidden; background:#0b0a2a;
                opacity:0; transition:opacity .6s; }
  #conch-cine.cn-on { opacity:1; }
  #conch-cine.cn-out { opacity:0; transition:opacity .7s; }
  .cn-bg { position:absolute; inset:-2%; background-size:cover; background-position:center; }
  .cn-ripple { position:absolute; left:50%; top:46%; width:60px; height:60px; border-radius:50%;
               border:2px solid rgba(255,220,180,.7); transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
  .cn-ripple.go { animation:cnRipple 1.6s ease-out forwards; }
  .cn-ripple.go2 { animation:cnRipple 1.6s ease-out .25s forwards; }
  .cn-ripple.go3 { animation:cnRipple 1.6s ease-out .5s forwards; }
  @keyframes cnRipple { 0% { opacity:.9; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(7); } }
  /* 海螺基座：海底的珠光光晕（代替之前的蚌壳容器——蚌和螺本来就不是一个生物 😅） */
  .cn-pedestal { position:absolute; left:50%; bottom:16%; width:46%; height:14%; transform:translateX(-50%); opacity:0;
                 transition:opacity 1.4s; pointer-events:none;
                 background:radial-gradient(ellipse at center, rgba(255,200,235,.4), rgba(150,190,255,.18) 55%, transparent 75%); }
  #conch-cine.cn-shell-in .cn-pedestal { opacity:1; }
  .cn-conch { position:absolute; left:50%; bottom:17%; width:min(120px,20vw); transform:translate(-50%,46px) scale(.7); opacity:0;
              transition:opacity 1.2s, transform 1.2s cubic-bezier(.2,1.3,.4,1);
              filter:drop-shadow(0 0 18px rgba(255,170,220,.75)) drop-shadow(0 0 40px rgba(160,220,255,.5));
              animation:cnIridescence 3.5s linear infinite; }
  #conch-cine.cn-shell-in .cn-conch { opacity:1; transform:translate(-50%,0) scale(1); }
  #conch-cine.cn-awake .cn-conch { opacity:1; transform:translate(-50%,-64px) scale(1.12); }
  @keyframes cnIridescence { 0% { filter:hue-rotate(0deg) brightness(1.1) drop-shadow(0 0 18px rgba(255,170,220,.75)); }
                             50% { filter:hue-rotate(60deg) brightness(1.25) drop-shadow(0 0 26px rgba(170,220,255,.9)); }
                             100% { filter:hue-rotate(0deg) brightness(1.1) drop-shadow(0 0 18px rgba(255,170,220,.75)); } }
  .cn-dust { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1s; }
  #conch-cine.cn-on .cn-dust { opacity:1; }
  .cn-dust span { position:absolute; border-radius:50%; background:rgba(255,225,180,.8); animation:cnDust linear infinite; }
  @keyframes cnDust { 0% { transform:translateY(20px); opacity:0; } 30% { opacity:.9; } 100% { transform:translateY(-90vh); opacity:0; } }
  .cn-title { position:absolute; left:0; right:0; top:11%; text-align:center; font-size:min(32px,6.6vw); font-weight:bold;
              color:#ffe9f6; text-shadow:0 0 20px rgba(255,150,220,.9), 0 0 44px rgba(140,200,255,.7), 0 3px 8px rgba(0,0,0,.55);
              letter-spacing:3px; opacity:0; transform:scale(.5); transition:all .5s cubic-bezier(.2,1.6,.4,1); }
  #conch-cine.cn-title-on .cn-title { opacity:1; transform:scale(1); }
  .cn-sub { position:absolute; left:0; right:0; bottom:7%; text-align:center; font-size:14px; color:#dcc8ff;
            text-shadow:0 1px 6px rgba(0,0,0,.7); opacity:0; transition:opacity .4s; }
  .cn-sub.on { opacity:1; }
  .cn-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; }
  .cn-skip:hover { color:#fff; border-color:#fff; }
  .cn-qte { position:absolute; left:50%; bottom:15%; transform:translateX(-50%); background:rgba(255,225,240,.94); color:#7a2a68;
            font-size:16px; font-weight:bold; padding:12px 26px; border-radius:40px;
            box-shadow:0 0 0 0 rgba(255,190,230,.7); opacity:0; pointer-events:none; white-space:nowrap; z-index:4; }
  #conch-cine.cn-qte-on .cn-qte { opacity:1; animation:cnPulse .8s ease-out infinite; }
  @keyframes cnPulse { 0% { box-shadow:0 0 0 0 rgba(255,190,230,.7); } 100% { box-shadow:0 0 0 26px rgba(255,190,230,0); } }
  .cn-part { position:fixed; pointer-events:none; z-index:9500; transition:transform 1.1s cubic-bezier(.2,.7,.5,1), opacity 1.1s; }
  @media (max-width:600px) { .cn-shell { width:58vw; } .cn-conch { width:26vw; } .cn-title { font-size:6.6vw; } .cn-qte { font-size:14px; padding:10px 20px; } }
  @media (max-width:600px) { .cc-croc { width:56vw; } .cc-hookfish { width:30vw; } .cc-title { font-size:7vw; top:10%; } .cc-qte { font-size:14px; padding:10px 20px; } }
  
  
  
  /* 背包子分类 */
  .subtabs { display:flex; gap:6px; margin-bottom:10px; }

  /* ===== 展柜展示弹层（玻璃展柜 + 品质特效） ===== */
  #disp-view .card { position:relative; overflow:hidden; }
  .dv-stage { position:relative; width:250px; height:238px; margin:6px auto 2px; border-radius:16px;
              border:1px solid rgba(255,255,255,.3); overflow:hidden;
              box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 0 40px rgba(0,0,0,.4); }
  .dv-spot { position:absolute; inset:0; pointer-events:none;
             background:linear-gradient(180deg, rgba(255,248,220,.20), transparent 72%);
             clip-path:polygon(36% 0, 64% 0, 84% 80%, 16% 80%); }
  .dv-burst { position:absolute; inset:0; pointer-events:none; animation:dvglow 1.8s ease-in-out infinite alternate; }
  @keyframes dvglow { 0% { opacity:.5 } 100% { opacity:1 } }
  .dv-rays { position:absolute; width:280%; height:280%; left:50%; top:55%;
             background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0deg 11deg, transparent 11deg 30deg);
             -webkit-mask:radial-gradient(circle, #000 0%, transparent 60%);
             mask:radial-gradient(circle, #000 0%, transparent 60%);
             animation:dvspin 10s linear infinite; pointer-events:none; }
  .dv-rays.fast { animation-duration:6s; }
  @keyframes dvspin { to { transform:translate(-50%,-50%) rotate(360deg); } }
  .dv-item { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
             width:96px; height:96px; object-fit:contain; z-index:2;
             filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
  .dv-float { animation:dvfloat 2.6s ease-in-out infinite; }
  @keyframes dvfloat { 0%,100% { margin-top:0 } 50% { margin-top:-7px } }
  .dv-shadow { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); width:76px; height:13px;
               border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.5), transparent 72%); z-index:1; }
  .dv-base { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:158px; height:15px;
             border-radius:5px; background:linear-gradient(#9a6631,#5d3a1a); z-index:1;
             box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,205,110,.4); }
  .dv-base:before { content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
                    width:128px; height:7px; border-radius:4px; background:linear-gradient(#b8823f,#7a4e24); }
  .dv-glass { position:absolute; inset:0; pointer-events:none; border-radius:15px; z-index:3;
              border:1px solid rgba(255,255,255,.35);
              background:linear-gradient(115deg, transparent 16%, rgba(255,255,255,.17) 21%, rgba(255,255,255,.04) 28%, transparent 34%, transparent 55%, rgba(255,255,255,.11) 61%, rgba(255,255,255,.02) 68%, transparent 74%);
              box-shadow:inset 0 0 26px rgba(255,255,255,.09), inset 0 -12px 24px rgba(0,0,0,.3); }
  .dv-glass:after { content:''; position:absolute; top:7px; left:5%; width:24%; height:3px; border-radius:3px;
                    background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); }
  .dv-spark { position:absolute; width:6px; height:6px; border-radius:50%; z-index:4;
              animation:dvspark 1.5s ease-in-out infinite alternate; pointer-events:none; }
  @keyframes dvspark { 0% { transform:scale(.2); opacity:.1 } 100% { transform:scale(1.15); opacity:1 } }
  .dv-ring { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); width:130px; height:36px;
             border-radius:50%; border:2px solid #ffb300; z-index:1; pointer-events:none;
             animation:dvring 2s ease-in-out infinite alternate; }
  @keyframes dvring { 0% { transform:translateX(-50%) scale(.92); opacity:.35 } 100% { transform:translateX(-50%) scale(1.06); opacity:.95 } }
  .dv-rainbow { animation:dvrainbow 3s linear infinite; }
  @keyframes dvrainbow { 0% { filter:hue-rotate(0deg) } 100% { filter:hue-rotate(360deg) } }

  /* ===== 开箱特效 ===== */
  .rw-burst { height:64px; margin:2px 0 6px; position:relative; overflow:hidden; border-radius:12px;
              background:radial-gradient(circle at 50% 85%, #ffe082 0%, #ffd54f 32%, transparent 72%); }
  .rw-burst i { position:absolute; left:50%; top:50%; font-style:normal; font-size:36px;
                transform:translate(-50%,-50%); animation:rwrock .9s ease-in-out infinite alternate; }
  @keyframes rwrock { 0% { transform:translate(-50%,-50%) rotate(-14deg) } 100% { transform:translate(-50%,-50%) rotate(14deg) scale(1.18) } }
  /* CS 式开箱滚轴 */
  .cs-wrap { position:relative; height:126px; margin:10px 0 8px; border-radius:12px; overflow:hidden;
             background:linear-gradient(180deg,#0e2a4d,#123b6e 55%,#0e2a4d); box-shadow:inset 0 0 24px rgba(0,0,0,.5); }
  .cs-strip { position:absolute; left:0; top:8px; display:flex; gap:10px; will-change:transform; }
  .cs-cell { flex:none; width:86px; height:110px; border-radius:10px; border:2px solid rgba(255,255,255,.25);
             background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
             display:flex; align-items:center; justify-content:center; font-size:34px; overflow:hidden; }
  .cs-cell img { width:80%; height:80%; object-fit:contain; }
  .cs-cell.win { border-color:#ffd54f; background:linear-gradient(180deg,rgba(255,213,79,.28),rgba(255,140,0,.10)); box-shadow:0 0 18px rgba(255,193,7,.55); }
  .cs-marker { position:absolute; left:50%; top:0; bottom:0; width:3px; margin-left:-1.5px; z-index:2;
               background:linear-gradient(180deg,#ffd54f,#fff,#ffd54f); box-shadow:0 0 12px rgba(255,215,64,.95); }
  .cs-fade { position:absolute; top:0; bottom:0; width:34px; z-index:2; pointer-events:none; }
  .cs-fade.l { left:0; background:linear-gradient(90deg,#0e2a4d,transparent); }
  .cs-fade.r { right:0; background:linear-gradient(270deg,#0e2a4d,transparent); }
  @keyframes csLand { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
  .cs-skip { position:absolute; right:14px; top:12px; font-size:12px; color:#a08a5f; cursor:pointer;
             border:1.5px solid #d8c9a3; border-radius:20px; padding:3px 12px; user-select:none;
             background:rgba(255,253,245,.92); z-index:5; }
  .cs-skip:hover { color:#6b5432; border-color:#b8a67c; }
  .rw-item { opacity:0; animation:rwpop .45s cubic-bezier(.2,1.4,.4,1) forwards; }
  @keyframes rwpop { 0% { opacity:0; transform:scale(.3) rotate(-8deg) } 100% { opacity:1; transform:scale(1) rotate(0deg) } }
  .rw-item.hi { box-shadow:0 0 14px rgba(255,179,0,.6); border-radius:12px; }
  /* ===== 神秘盲盒专属弹层 v2：紫金奢华风（bx- 前缀，仅 openBox 使用，不影响普通开箱弹窗） ===== */
  .card.bx-mode { position:relative; overflow:hidden;
    background:radial-gradient(150% 120% at 50% -15%, #3b2166 0%, #241147 48%, #140a2c 100%);
    border:2px solid #8a6a2f; color:#f3e9ff;
    box-shadow:0 0 0 1px rgba(255,215,130,.4) inset, 0 0 42px rgba(124,77,255,.4), 0 0 96px rgba(255,193,7,.14), 0 14px 44px rgba(0,0,0,.55);
    animation:bxIn .5s cubic-bezier(.2,1.4,.4,1); }
  @keyframes bxIn { 0% { transform:scale(.6) rotate(-3deg); opacity:0 } 100% { transform:scale(1) rotate(0); opacity:1 } }
  /* 顶部旋转光芒 */
  .bx-rays { position:absolute; left:50%; top:-150px; width:420px; height:420px; pointer-events:none; z-index:0;
    transform:translateX(-50%);
    background:repeating-conic-gradient(from 0deg, rgba(255,220,140,.09) 0deg 7deg, transparent 7deg 20deg);
    -webkit-mask-image:radial-gradient(circle, #000 0%, transparent 68%); mask-image:radial-gradient(circle, #000 0%, transparent 68%);
    animation:bxSpin 26s linear infinite; }
  @keyframes bxSpin { 0% { transform:translateX(-50%) rotate(0deg) } 100% { transform:translateX(-50%) rotate(360deg) } }
  /* 皇冠 */
  .bx-crown { position:relative; z-index:1; font-size:26px; line-height:1; margin-top:-4px;
    filter:drop-shadow(0 2px 6px rgba(255,193,7,.55)); animation:bxFloat 2.6s ease-in-out infinite alternate; }
  /* 金字缎带横幅 */
  .bx-banner { position:relative; z-index:1; margin:4px auto 2px; width:min(80%,250px); padding:7px 30px;
    background:linear-gradient(180deg,#fbeec4 0%,#eecf83 40%,#c99b3f 78%,#a87d24 100%);
    clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%,7% 50%);
    color:#4a2d05; font-weight:bold; font-size:16.5px; letter-spacing:4px; text-align:center;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
  .bx-banner small { display:block; font-size:9px; letter-spacing:6px; color:#7a5514; font-weight:normal; margin-top:1px; }
  /* 金色饰线分隔 */
  .bx-div { display:flex; align-items:center; gap:9px; margin:12px 18px 4px; position:relative; z-index:1; }
  .bx-div::before, .bx-div::after { content:''; flex:1; height:1.5px; }
  .bx-div::before { background:linear-gradient(90deg,transparent,#d4af37); }
  .bx-div::after { background:linear-gradient(90deg,#d4af37,transparent); }
  .bx-div span { color:#ffd54f; font-size:11px; text-shadow:0 0 8px rgba(255,193,7,.7); }
  /* 六边形金框奖励位 */
  .bx-hexrow { display:flex; align-items:center; gap:14px; justify-content:center; margin:14px 10px; position:relative; z-index:1;
    opacity:0; animation:rwpop .45s cubic-bezier(.2,1.4,.4,1) forwards; text-align:left; }
  .bx-hex { flex:none; width:94px; height:104px; position:relative; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#f7e2a4,#d9ab4d 55%,#a87d24);
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
  .bx-hex::before { content:''; position:absolute; inset:3px;
    background:radial-gradient(circle at 50% 28%, #3d2770 0%, #20113f 72%);
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
  .bx-hex img, .bx-hex .bx-hexemo { position:relative; z-index:1; width:58px; height:58px; object-fit:contain;
    filter:drop-shadow(0 0 8px rgba(255,193,7,.4)); }
  .bx-hex .bx-hexemo { font-size:40px; text-align:center; }
  .bx-hexrow.hi .bx-hex { background:linear-gradient(180deg,#fff3c9,#ffd54f 55%,#e0a10c); }
  .bx-hexrow.hi { filter:drop-shadow(0 0 14px rgba(255,193,7,.55)); }
  .bx-info { min-width:0; }
  .bx-info .bx-nm { color:#ffd54f; font-weight:bold; font-size:15px; }
  .bx-info .bx-sub { color:#cdb3e8; font-size:11.5px; margin-top:3px; line-height:1.5; }
  .bx-star { position:absolute; font-style:normal; pointer-events:none; z-index:1; opacity:.85; animation:bxFloat 2.4s ease-in-out infinite alternate; }
  @keyframes bxFloat { 0% { transform:translateY(0) scale(.85); opacity:.45 } 100% { transform:translateY(-9px) scale(1.15); opacity:1 } }
  .bx-gold { color:#ffd54f; font-weight:bold; }
  .card.bx-mode h2 { display:none; } /* 标题改用缎带横幅，隐藏原生 h2 */
  .btn.bxbtn { margin-top:12px; padding:10px 40px; letter-spacing:8px; font-weight:bold; position:relative; z-index:1;
    background:linear-gradient(180deg,#fbeec4,#eecf83 40%,#c9961f); color:#4a2d05;
    border:1px solid #a87d24;
    box-shadow:0 3px 0 #8a6512, 0 0 20px rgba(255,193,7,.4); }
  .btn.bxbtn:active { transform:translateY(2px); box-shadow:0 1px 0 #8a6512, 0 0 10px rgba(255,179,0,.35); }
  /* 盲盒概率公示行 */
  .bx-oddsrow { display:flex; align-items:center; gap:10px; margin:9px 10px; padding:7px 10px; border-radius:12px; text-align:left;
    background:linear-gradient(90deg, rgba(255,213,79,.08), rgba(156,80,215,.13)); border:1px solid rgba(212,175,55,.35);
    opacity:0; animation:rwpop .4s cubic-bezier(.2,1.4,.4,1) forwards; position:relative; z-index:1; }
  .bx-oddsrow .bx-oico { flex:none; width:46px; height:46px; display:flex; align-items:center; justify-content:center; }
  .bx-oddsrow .bx-oico img { max-width:46px; max-height:42px; object-fit:contain; filter:drop-shadow(0 0 5px rgba(255,193,7,.35)); }
  .bx-oddsrow .bx-oico span { font-size:26px; }
  .bx-oddsrow .bx-omain { flex:1; min-width:0; }
  .bx-oddsrow .bx-otitle { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .bx-oddsrow .bx-opct { flex:none; color:#ffd54f; font-weight:bold; font-size:13px; text-shadow:0 0 8px rgba(255,193,7,.6); }
  .bx-oddsrow .bx-obar { height:8px; margin-top:4px; border-radius:5px; overflow:hidden; background:rgba(255,255,255,.10);
    box-shadow:0 0 0 1px rgba(212,175,55,.35) inset; }
  .bx-oddsrow .bx-obar i { display:block; height:100%; border-radius:5px;
    background:linear-gradient(90deg, rgba(255,213,79,.55), #ffd54f 60%, #fff3c9);
    box-shadow:0 0 8px rgba(255,193,7,.6); }
  .bx-oddsrow .bx-osub { font-size:10.5px; color:#b49dd8; margin-top:3px; }
  .bx-oddsrow .bx-nm { color:#ffd54f; font-weight:bold; font-size:13.5px; }
  /* ===== 深海宝箱概率公示深海皮肤（ds-mode：叠在 bx-mode 骨架上换配色，仅 chest_odds tier6 使用，2026-09-27） ===== */
  .card.bx-mode.ds-mode {
    background:radial-gradient(150% 120% at 50% -15%, #0d3b54 0%, #082a44 48%, #04121f 100%);
    border:2px solid #1f7a8c; color:#e0f7fa;
    box-shadow:0 0 0 1px rgba(77,208,225,.35) inset, 0 0 42px rgba(0,188,212,.35), 0 0 96px rgba(0,229,255,.10), 0 14px 44px rgba(0,0,0,.6); }
  .ds-mode .bx-rays { background:repeating-conic-gradient(from 0deg, rgba(77,208,225,.10) 0deg 7deg, transparent 7deg 20deg); }
  .ds-mode .bx-crown { filter:drop-shadow(0 2px 6px rgba(77,208,225,.6)); }
  .ds-mode .bx-banner { background:linear-gradient(180deg,#b2ebf2 0%,#4dd0e1 40%,#0097a7 78%,#006064 100%); color:#00272e; }
  .ds-mode .bx-banner small { color:#004d57; }
  .ds-mode .bx-div::before { background:linear-gradient(90deg,transparent,#4dd0e1); }
  .ds-mode .bx-div::after { background:linear-gradient(90deg,#4dd0e1,transparent); }
  .ds-mode .bx-div span { color:#80deea; text-shadow:0 0 8px rgba(77,208,225,.7); }
  .ds-mode .bx-oddsrow { background:linear-gradient(90deg, rgba(77,208,225,.08), rgba(2,136,209,.16)); border:1px solid rgba(77,208,225,.4); }
  .ds-mode .bx-oddsrow .bx-oico img { filter:drop-shadow(0 0 5px rgba(77,208,225,.45)); }
  .ds-mode .bx-oddsrow .bx-opct { color:#80deea; text-shadow:0 0 8px rgba(77,208,225,.6); }
  .ds-mode .bx-oddsrow .bx-obar { box-shadow:0 0 0 1px rgba(77,208,225,.4) inset; }
  .ds-mode .bx-oddsrow .bx-obar i { background:linear-gradient(90deg, rgba(77,208,225,.55), #26c6da 60%, #b2ebf2); box-shadow:0 0 8px rgba(38,198,218,.6); }
  .ds-mode .bx-oddsrow .bx-osub { color:#8fd3dc; }
  .ds-mode .bx-oddsrow .bx-nm { color:#84ffff; }
  .ds-mode .btn.bxbtn { background:linear-gradient(180deg,#b2ebf2,#4dd0e1 40%,#00838f); color:#00272e; border:1px solid #006064;
    box-shadow:0 3px 0 #00465a, 0 0 20px rgba(38,198,218,.4); }
  .ds-mode .btn.bxbtn:active { box-shadow:0 1px 0 #00465a, 0 0 10px rgba(38,198,218,.35); }
  /* 深海公示弹层装饰：CSS 手绘荧光气泡（替代 🫧 emoji）+ 顶部悬浮宝箱实图 */
  .ds-bub { display:block; border-radius:50%;
    background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 16%, rgba(128,222,234,.28) 42%, rgba(38,166,205,.42) 72%, rgba(2,136,209,.55) 100%);
    box-shadow:inset 0 0 5px rgba(255,255,255,.35), 0 0 9px rgba(77,208,225,.4); }
  .ds-mode .bx-crown img { width:58px; height:58px; object-fit:contain; display:block; margin:0 auto;
    filter:drop-shadow(0 2px 8px rgba(77,208,225,.65)) drop-shadow(0 0 14px rgba(38,198,218,.4)); }
  /* ===== 瑶池宝箱概率公示玉池皮肤（yc-mode：复用 ds-mode 骨架换玉绿鎏金配色，仅 chest_odds tier7 使用，2026-09-28） ===== */
  .card.bx-mode.yc-mode {
    background:radial-gradient(150% 120% at 50% -15%, #1d5a3a 0%, #123f28 48%, #071f12 100%);
    border:2px solid #8d9c4a; color:#fffde7;
    box-shadow:0 0 0 1px rgba(255,224,130,.35) inset, 0 0 42px rgba(139,195,74,.35), 0 0 96px rgba(255,213,79,.10), 0 14px 44px rgba(0,0,0,.6); }
  .yc-mode .bx-rays { background:repeating-conic-gradient(from 0deg, rgba(255,224,130,.10) 0deg 7deg, transparent 7deg 20deg); }
  .yc-mode .bx-crown { filter:drop-shadow(0 2px 6px rgba(255,224,130,.6)); }
  .yc-mode .bx-banner { background:linear-gradient(180deg,#fff9c4 0%,#ffe082 40%,#ffb300 78%,#e65100 100%); color:#3e2723; }
  .yc-mode .bx-banner small { color:#5d4037; }
  .yc-mode .bx-div::before { background:linear-gradient(90deg,transparent,#ffe082); }
  .yc-mode .bx-div::after { background:linear-gradient(90deg,#ffe082,transparent); }
  .yc-mode .bx-div span { color:#fff59d; text-shadow:0 0 8px rgba(255,224,130,.7); }
  .yc-mode .bx-oddsrow { background:linear-gradient(90deg, rgba(255,224,130,.08), rgba(104,159,56,.18)); border:1px solid rgba(255,224,130,.4); }
  .yc-mode .bx-oddsrow .bx-oico img { filter:drop-shadow(0 0 5px rgba(255,224,130,.45)); }
  .yc-mode .bx-oddsrow .bx-opct { color:#fff59d; text-shadow:0 0 8px rgba(255,224,130,.6); }
  .yc-mode .bx-oddsrow .bx-obar { box-shadow:0 0 0 1px rgba(255,224,130,.4) inset; }
  .yc-mode .bx-oddsrow .bx-obar i { background:linear-gradient(90deg, rgba(255,224,130,.55), #8bc34a 60%, #dce775); box-shadow:0 0 8px rgba(139,195,74,.6); }
  .yc-mode .bx-oddsrow .bx-osub { color:#d4e3a1; }
  .yc-mode .bx-oddsrow .bx-nm { color:#ffee58; }
  .yc-mode .btn.bxbtn { background:linear-gradient(180deg,#fff9c4,#ffe082 40%,#ef6c00); color:#3e2723; border:1px solid #e65100;
    box-shadow:0 3px 0 #b3541e, 0 0 20px rgba(255,179,0,.4); }
  .yc-mode .btn.bxbtn:active { box-shadow:0 1px 0 #b3541e, 0 0 10px rgba(255,179,0,.35); }
  .yc-mode .bx-crown img { width:58px; height:58px; object-fit:contain; display:block; margin:0 auto;
    filter:drop-shadow(0 2px 8px rgba(255,224,130,.65)) drop-shadow(0 0 14px rgba(139,195,74,.4)); }
  /* ===== 星空盲盒皮肤（star-mode：bx-mode 骨架换深邃星空紫蓝+星辉青，仅星空盲盒开启/公示使用，2026-10-03） ===== */
  .card.bx-mode.star-mode {
    background:radial-gradient(150% 120% at 50% -15%, #2b3a8f 0%, #1b2668 48%, #0b1034 100%);
    border:2px solid #4fc3f7; color:#e8f4ff;
    box-shadow:0 0 0 1px rgba(129,212,250,.4) inset, 0 0 42px rgba(63,81,181,.45), 0 0 96px rgba(129,212,250,.14), 0 14px 44px rgba(0,0,0,.55); }
  .star-mode .bx-rays { background:repeating-conic-gradient(from 0deg, rgba(129,212,250,.10) 0deg 7deg, transparent 7deg 20deg); }
  .star-mode .bx-crown { filter:drop-shadow(0 2px 6px rgba(129,212,250,.65)); }
  .star-mode .bx-banner { background:linear-gradient(180deg,#e3f2fd 0%,#90caf9 40%,#3949ab 78%,#1a237e 100%); color:#0d1247; }
  .star-mode .bx-banner small { color:#283593; }
  .star-mode .bx-div::before { background:linear-gradient(90deg,transparent,#81d4fa); }
  .star-mode .bx-div::after { background:linear-gradient(90deg,#81d4fa,transparent); }
  .star-mode .bx-div span { color:#81d4fa; text-shadow:0 0 8px rgba(129,212,250,.7); }
  .star-mode .bx-hex { background:linear-gradient(180deg,#b3e5fc,#4fc3f7 55%,#1976d2); }
  .star-mode .bx-hex::before { background:radial-gradient(circle at 50% 28%, #1a2a6c 0%, #0a1034 72%); }
  .star-mode .bx-hex img, .star-mode .bx-hex .bx-hexemo { filter:drop-shadow(0 0 8px rgba(129,212,250,.5)); }
  .star-mode .bx-hexrow.hi .bx-hex { background:linear-gradient(180deg,#e1f5fe,#81d4fa 55%,#29b6f6); }
  .star-mode .bx-hexrow.hi { filter:drop-shadow(0 0 14px rgba(129,212,250,.6)); }
  .star-mode .bx-info .bx-nm { color:#81d4fa; }
  .star-mode .bx-info .bx-sub { color:#9fb8e8; }
  .star-mode .bx-oddsrow { background:linear-gradient(90deg, rgba(129,212,250,.08), rgba(63,81,181,.18)); border:1px solid rgba(129,212,250,.4); }
  .star-mode .bx-oddsrow .bx-oico img { filter:drop-shadow(0 0 5px rgba(129,212,250,.5)); }
  .star-mode .bx-oddsrow .bx-opct { color:#81d4fa; text-shadow:0 0 8px rgba(129,212,250,.6); }
  .star-mode .bx-oddsrow .bx-obar { box-shadow:0 0 0 1px rgba(129,212,250,.4) inset; }
  .star-mode .bx-oddsrow .bx-obar i { background:linear-gradient(90deg, rgba(129,212,250,.55), #4fc3f7 60%, #b3e5fc); box-shadow:0 0 8px rgba(79,195,247,.6); }
  .star-mode .bx-oddsrow .bx-osub { color:#9fb8e8; }
  .star-mode .bx-oddsrow .bx-nm { color:#81d4fa; }
  .star-mode .btn.bxbtn { background:linear-gradient(180deg,#e3f2fd,#90caf9 40%,#1e88e5); color:#0d1247; border:1px solid #1565c0;
    box-shadow:0 3px 0 #0d3f7a, 0 0 20px rgba(79,195,247,.4); }
  .star-mode .btn.bxbtn:active { box-shadow:0 1px 0 #0d3f7a, 0 0 10px rgba(79,195,247,.35); }
  .star-mode .bx-gold { color:#81d4fa; }
  .cnt-l { left:-7px !important; right:auto !important; background:#42a5f5 !important; cursor:help; z-index:2; }
  .cnt-lock { left:-7px !important; right:auto !important; background:#e53935 !important; z-index:2; }
  .qchip { display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:bold;
           cursor:pointer; user-select:none; transition:.15s; white-space:nowrap; min-height:0;
           background:color-mix(in srgb, var(--c, #9e9e9e) 26%, #fff);
           border:1.5px solid color-mix(in srgb, var(--c, #9e9e9e) 82%, #fff);
           color:color-mix(in srgb, var(--c, #9e9e9e) 72%, #000); }
  .qchip:hover { transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.14); }
  .qchip.on { background:var(--c, #4caf50); color:#fff; border-color:var(--c, #4caf50);
              box-shadow:0 2px 8px color-mix(in srgb, var(--c, #4caf50) 45%, transparent); }
  /* 筛选/勾选 chip 容器：flex 均匀间距换行 */
  #rfish, #qchips { display:flex; flex-wrap:wrap; gap:8px 8px; align-items:center; flex:1 1 220px; min-width:0; }
  /* 背包工具栏：统一间距与分隔 */
  .btool { display:flex; gap:10px; align-items:center; flex-wrap:wrap; row-gap:8px;
           background:linear-gradient(#fdfaf1,#faf6ea); border:1px solid #eadfc8; border-radius:14px;
           padding:10px 14px; margin-bottom:10px; box-shadow:0 1px 4px rgba(120,90,40,.06); }
  .btool .lb { font-size:12px; color:#8a7a55; font-weight:bold; letter-spacing:1px; white-space:nowrap; }
  /* 描边按钮（背包操作用）：默认白底彩边，悬停填充 */
  .obtn { background:#fff; border:2px solid #2196f3; color:#1976d2; border-radius:12px;
          padding:8px 18px; font-size:13px; font-weight:bold; cursor:pointer; transition:.15s; user-select:none;
          flex:0 0 auto; box-shadow:0 1px 4px rgba(120,90,40,.08); }
  .obtn:hover { background:#2196f3; color:#fff; transform:translateY(-1px); box-shadow:0 3px 10px rgba(33,150,243,.3); }
  .obtn:active { transform:scale(.96); }
  .obtn.orange { border-color:#ff9800; color:#e65100; } .obtn.orange:hover { background:#ff9800; color:#fff; }
  .obtn.red { border-color:#f44336; color:#c62828; } .obtn.red:hover { background:#f44336; color:#fff; }
  .obtn.green { border-color:#4caf50; color:#2e7d32; } .obtn.green:hover { background:#4caf50; color:#fff; }
  .btool .info { font-size:12px; color:#8a7a55; margin-left:auto; }
  /* 每日签到页：7 天周期槽位 */
  .sign-slot { flex:1; background:#faf6ea; border:2px solid #eadfc8; border-radius:10px; padding:8px 2px; text-align:center; min-width:0; }
  .sign-slot .d { font-size:10px; color:#8a7a55; }
  .sign-slot .ic2 { font-size:22px; margin:4px 0; }
  .sign-slot .rn { font-size:10px; color:#6d4c2f; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sign-slot .st { font-size:10px; color:#b7a97f; margin-top:3px; }
  .sign-slot.done { opacity:.6; background:#f1f8e9; }
  .sign-slot.done .st { color:#2e7d32; font-weight:bold; }
  .sign-slot.today { border-color:#ff9800; background:#fff8ec; box-shadow:0 0 0 2px rgba(255,152,0,.25); }
  .sign-slot.today:not(.done) .st { color:#e65100; font-weight:bold; }
  /* 养殖场 */
  .farm-row { display:flex; gap:12px; align-items:center; border:2px solid #c5e1a5; border-radius:12px;
              background:#f9fbf0; padding:10px 12px; margin-bottom:8px; }
  .farm-row.ready { border-color:#ffb300; background:#fffdf0; box-shadow:0 0 0 2px rgba(255,179,0,.2); }
  .farm-row img { width:64px; height:56px; object-fit:contain; flex:none; }
  .farm-row .fi { flex:1; min-width:0; }
  .farm-row .fn { font-size:14px; font-weight:bold; }
  .farm-row .fw { font-size:12px; color:#8a7a55; margin:2px 0; }
  .farm-row .fs { font-size:12px; color:#558b2f; }
  .farm-row .fops { display:flex; gap:6px; flex:none; }
  .subtab { flex:1; text-align:center; padding:6px 0; font-size:12px; font-weight:bold; background:#f4ecd8;
            border-radius:9px; cursor:pointer; color:#8a7a55; border:2px solid transparent; user-select:none; }
  .subtab.on { background:#e8f5e9; color:#2e7d32; border-color:#66bb6a; }
  /* 钓鱼日志·渔获统计卡片 */
  .log-stat { width:96px; background:#fffef8; border:1px solid #eee6d4; border-radius:10px; padding:9px 6px 8px;
              text-align:center; box-shadow:0 1px 3px rgba(90,70,30,.07); transition:transform .15s, box-shadow .15s; }
  .log-stat:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(90,70,30,.14); }
  .log-stat .ls-img { height:44px; display:flex; align-items:center; justify-content:center; }
  .log-stat .ls-img img { max-width:62px; max-height:40px; }
  .log-stat .ls-name { font-size:12px; font-weight:bold; margin-top:5px; line-height:1.2;
                       overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .log-stat .ls-cnt { display:inline-block; font-size:12px; color:#e65100; background:#fff3e0;
                      border-radius:9px; padding:1px 9px; margin-top:4px; line-height:1.5; }
  .log-stat .ls-max { font-size:10.5px; color:#a09377; margin-top:3px; white-space:nowrap; }
  /* 收藏馆展位特效 */
  @keyframes mvBob { 0%,100%{margin-top:0} 50%{margin-top:-6px} }
  @keyframes mvBobX { 0%,100%{top:6px} 50%{top:0} }
  @keyframes mvPulse { 0%,100%{opacity:.55} 50%{opacity:1} }
  @keyframes mvSpin { to{transform:rotate(360deg)} }
  @keyframes mvTwinkle { 0%,100%{opacity:.15} 50%{opacity:1} }
  @keyframes mvRainbow { 0%{border-color:#ff5252} 25%{border-color:#f9a825} 50%{border-color:#66bb6a} 75%{border-color:#42a5f5} 100%{border-color:#ff5252} }
  /* 收藏馆抽屉/明细 深色细滑条 */
  #museum-drawer::-webkit-scrollbar, #log-detail-list::-webkit-scrollbar { width:8px }
  #museum-drawer::-webkit-scrollbar-track, #log-detail-list::-webkit-scrollbar-track { background:#081226; border-radius:4px }
  #museum-drawer::-webkit-scrollbar-thumb, #log-detail-list::-webkit-scrollbar-thumb { background:#2f5a8a; border-radius:4px }
  #museum-drawer::-webkit-scrollbar-thumb:hover, #log-detail-list::-webkit-scrollbar-thumb:hover { background:#4a7ab5 }
  .mv-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  .rod-grid { grid-template-columns: 1fr !important; }
  .btn { white-space: nowrap; }
  /* 物品格子 */
  .igrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px,1fr)); gap:8px; }
  /* 长列表性能（2026-10-30）：屏外格子跳过渲染（闪光动画/图解码全暂停），滚动掉帧治理。
     2026-10-30 晚限定触摸设备：PC 端滚轮 + content-visibility 在部分内核下滚动被钳制（用户报 PC 弹层滚不动），恢复普通渲染 */
  @media (pointer:coarse) { #aqua-pick-list .icell { content-visibility:auto; contain-intrinsic-size:auto 148px; } }
  /* 皮肤卡固定内联宽度 108px 在 grid 下会溢出格子压到邻卡 → 强制填满所在格子 */
  .skin-grid .icell { width:100% !important; }
  .icell { width:auto; border:2px solid #e0d5b8; border-radius:12px; background:#fffef8; padding:8px 4px 6px;
           text-align:center; cursor:pointer; position:relative; transition:.12s; user-select:none; }
  .icell:hover { border-color:#ff9800; transform:translateY(-2px); box-shadow:0 3px 8px rgba(0,0,0,.12); }
  .icell.sel { border-color:#4caf50; background:#f1f8e9; }
  /* buff 卡顶部徽标防溢出（2026-10-18）：标题允许两行换行、正文断词，覆盖各处 inline nowrap */
  .icell > span:first-child { white-space:normal !important; line-height:1.25; font-size:9.5px !important; left:3px !important; right:3px !important; padding:1.5px 2px !important; }
  .icell .ct, .icell .nm { white-space:normal !important; word-break:break-all; }
  .icell .ic { font-size:28px; height:42px; display:flex; align-items:center; justify-content:center; }
  .icell .ic img { max-width:46px; max-height:40px; }
  .icell .nm { font-size:11px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
  .icell .ct { font-size:10px; color:#8a7a55; white-space:nowrap; text-align:center; }
  .icell .pr { font-size:11px; color:#e65100; font-weight:bold; white-space:nowrap; text-align:center; }
  .icell .cnt { position:absolute; top:-7px; right:-7px; background:#ff7043; color:#fff; font-size:10px;
                font-weight:bold; border-radius:10px; padding:1px 6px; box-shadow:0 1px 3px rgba(0,0,0,.3); z-index:2; }
  .icell .ops { display:flex; gap:3px; margin-top:4px; justify-content:center; flex-wrap:wrap; }
  .icell .ops .btn { padding:2px 8px; font-size:10px; border-radius:7px; box-shadow:none;
                     background:#fff; border:1.5px solid #e0d6bd; color:#757575; text-shadow:none; }
  .icell .ops .btn:hover { background:#f5f1e4; }
  .icell .ops .btn.gray { border-color:#cfd8dc; color:#607d8b; }
  .icell .ops .btn.orange { border-color:#ffcc80; color:#e65100; background:#fffaf3; }
  .icell .ops .btn.blue { border-color:#90caf9; color:#1976d2; background:#f3f9ff; }
  .icell .ops .btn.purple { border-color:#ce93d8; color:#6a1b9a; background:#faf3fd; }
  .icell .ops .btn.red { border-color:#ef9a9a; color:#c62828; background:#fff5f5; }
  .icell .ops .btn.green { border-color:#a5d6a7; color:#2e7d32; background:#f3faf3; } /* 批量开箱（2026-11-06） */
  #disp-grid { display:flex; flex-wrap:wrap; gap:8px; }
  .disp-cell { width:64px; height:64px; border:2px dashed #d8c9a3; border-radius:10px;
               display:flex; flex-direction:column; align-items:center; justify-content:center;
               background:#faf6ea; position:relative; cursor:default; }
  .disp-cell.full { border-style:solid; border-color:#4caf50; cursor:pointer; background:#fff; }
  .disp-cell.locked { border-color:#ccc; background:#f0f0f0; color:#999; font-size:11px; }
  .disp-cell img { max-width:48px; max-height:40px; }
  .disp-cell .slotno { position:absolute; top:2px; left:4px; font-size:10px; color:#b7a97f; }
  .disp-cell .nm { font-size:10px; color:#8a7a55; text-align:center; line-height:1.1; padding:0 2px; width:100%;
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ==================== 移动端适配（≤720px） ====================
     原则：全部转"换行式"布局 + 触控目标加大 + 字号不低于 12px，杜绝文字挤压错乱 */
  @media (max-width: 720px) {
    body { touch-action: manipulation; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
    /* 固定视口布局：顶栏+钓池恒定，物品栏在剩余高度内自滚动 */
    /* iOS 兼容（2026-10-19）：dvh 仅 iOS 15.4+ 支持，旧 iOS 会退化为无 height → 100vh 高估（地址栏/工具栏）→ 底部按钮出屏且拖不动。
       三层兜底：100vh 基础 → -webkit-fill-available（旧 iOS Safari）→ 100dvh（新） */
    body { height: 100vh; height: -webkit-fill-available; height: 100dvh; height: var(--app-h, 100dvh); display: flex; flex-direction: column; overflow: hidden; }
    #topbar, #main, #side, #panel { min-width: 0; max-width: 100vw; width: 100%; } /* 防标签页等 min-content 撑宽主容器 */
    #topbar { flex: 0 0 auto; padding-top: calc(10px + env(safe-area-inset-top)); }
    #main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
    #side { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    #scene-wrap { flex: 0 0 auto; }
    input, select, textarea { font-size: 16px !important; } /* 防 iOS 聚焦自动放大 */

    /* 顶栏：5 列——第 1 格玩家卡（上行名字/下行金币余额），后 4 格 签到/水族馆/养殖场/退出 */
    #topbar { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 6px; padding: 6px 10px; }
    .tb-main, .tb-strip { display: contents; }
    .tb-main .logo, .tb-main .spacer { display: none !important; }
    #hud-bait, #hud-buff, #hud-charm, #hud-skin { display: none !important; }
    #topbar .chip { padding: 2px 4px; font-size: 12px; }
    .tb-main .chip, .tb-strip .mchip, #btn-setting {
      flex-direction: column; gap: 2px; padding: 4px 2px; border-radius: 10px;
      background: transparent !important; border: none !important; box-shadow: none !important;
      color: #5d4037; justify-content: center; min-height: 0; }
    .tb-main .chip i, .tb-strip .mchip i, #btn-setting i { font-size: 19px; }
    .tb-main .chip b, .tb-strip .mchip b { font-size: 11px; max-width: 100%; text-align: center; }
    /* 玩家卡：上行"👤 名字"、下行"💰 金币余额"，icon 固定宽度对齐靠左 */
    #hud-player { flex-direction: column; gap: 3px; align-items: flex-start; }
    #hud-player .pl { display: flex; align-items: center; justify-content: flex-start; gap: 7px; }
    #hud-player .pl i { font-size: 13px; width: 18px; text-align: center; }
    #hud-player .pl b { font-size: 12px; }
    #btn-setting { font-size: 11px; cursor: pointer; }
    #btn-setting:active { background: rgba(255,255,255,.4) !important; }
    #cast-tip { display: none !important; }

    /* 主区与标签页 */
    #main { padding: 8px 8px 4px; gap: 8px; }
    #tabs { overflow-x: auto; flex: 0 0 auto; }
    #tabs div { flex: 0 0 auto; padding: 11px 14px; font-size: 13px; white-space: nowrap; }
    #panel { flex: 1 1 auto; min-height: 0; max-height: none !important; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
    #panel > .sec-title { flex: 0 0 auto; }
    /* 排行榜入口（#panel 内的三卡视图）：恢复自然高度，内容超出由 #panel 下拉滚动 */
    /* 注意：#rank-wrap 是排行榜"大厅"的容器（需要 flex:1 充满视口、列表内部滚动），不能参与此规则 */
    #rank-entry { flex: 0 0 auto !important; }
    #rank-entry > div { flex: 0 0 auto !important; }

    /* 明细/列表行：放不下就换行，文字不再被压 */
    .item { flex-wrap: wrap; row-gap: 4px; }
    .item .info { flex: 1 1 140px; min-width: 0; }
    .item .ops { margin-left: auto; }
    .btool { flex-wrap: wrap; row-gap: 6px; }
    .qchip { padding: 5px 12px; min-height: 30px; }
    .obtn { padding: 7px 14px; }
    /* 鱼获筛选：隐藏"筛选"文字，7 个 chip 4 列对齐（全部/炫彩/神话/传说 一行，史诗/稀有/常见 一行），无该稀有度则半透明 */
    .no-lb .lb { display: none !important; }
    #rfish { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    #rfish .qchip { padding: 5px 4px; font-size: 11px; min-height: 0; justify-content: center; }
    .qchip.dim { opacity: .45; }
    .btool .info { flex: 1 1 100%; }

    /* 收藏品格子：自动换行铺满 */
    /* 收藏品格子：一行固定 4 个 */
    .igrid { grid-template-columns: repeat(4, 1fr) !important; }
    .icell { width: auto; min-width: 0; }
    /* 角色页皮肤卡：一行 2 个，间隔加大 */
    .skin-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .skin-grid .icell { width: auto !important; }
    .skin-grid .ic .ic, .skin-grid .ic { height: 96px !important; }
    /* 道具图鉴：一行 3 个 */
    #itembook-list { grid-template-columns: repeat(3, 1fr) !important; }
    #itembook-list .icell { width: auto !important; }
    #itembook-list [style*="grid-column"] { grid-column: 1 / -1 !important; }
    .log-stat { width: calc((100% - 16px) / 3); min-width: 0; }

    /* 功能页顶栏（水族馆/养殖场/博物馆/龙宫）：一律可换行 */
    #aqua > div:first-child, #farm > div:first-child { flex-wrap: wrap !important; row-gap: 6px; padding: 8px 10px 0 !important; }
    #farm-tip { white-space: normal !important; width: 92%; }
    #museum [style*="display:flex"], #lgspin [style*="display:flex"] { flex-wrap: wrap; }

    /* 宝箱场景：尺寸随屏宽收敛 */
    /* 龙宫画布：手机铺满屏宽 */
    #lgc { width: calc(100vw - 8px) !important; }
    #chest-img img { width: min(230px, 56vw) !important; }
    #chest-item { bottom: min(315px, 46vh) !important; }
    #chest-item > div { min-width: 0 !important; width: min(300px, 84vw); }
    #spin-open, #spin-next { bottom: 14px !important; }

    /* 全屏功能页画布：等比缩放后周边留白收窄 */
    #pond, #farm-c, #aqua-c, #lgc { height: auto; }
    #farm-c, #aqua-c, #lgc { border-width: 4px !important; }

    /* 博物馆展位：窄屏 4 列挤不下 → 3 列 */
    #museum-stage [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; gap: 12px 10px !important; }
    /* 收藏仓库抽屉：一行 4 个 */
    .mv-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
    /* 商店：一行 3 个，购买按钮 2×2 紧凑排布；鱼竿区独立整行 */
    .shop-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .rod-grid { grid-template-columns: 1fr !important; }
    .shop-grid .ops { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 3px; }
    .shop-grid .ops .btn { padding: 4px 2px; font-size: 11px; min-height: 0; width: 100%; }

    /* 弹层卡片：内边距收窄，防横向溢出 */
    .card { padding: 18px 14px; }
    #result-card { padding: 18px 14px; }

    /* 触控目标（排除 sm 小按钮，防止格子内按钮被撑爆） */
    .btn:not(.sm) { min-height: 40px; }
    .btn.big { min-height: 46px; }
    .btn.sm { min-height: 0; padding: 4px 8px; font-size: 11px; }
    /* 格子内按钮：紧凑尺寸，不撑破卡片 */
    .icell .btn { min-height: 0 !important; padding: 4px 8px; font-size: 11px; border-radius: 8px; }
  }

  /* ===== 深海副本（ds- 前缀，只增不改） ===== */
  #ds-chip { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6;
    display:flex; align-items:center; gap:8px; pointer-events:none; }
  #ds-chip.hidden { display:none; }
  #ds-chip .ds-badge { pointer-events:none; background:linear-gradient(135deg,rgba(6,52,86,.92),rgba(10,34,64,.92));
    border:1.5px solid rgba(110,230,255,.55); color:#bdf3ff; font-size:12.5px; font-weight:bold;
    padding:5px 14px; border-radius:20px; letter-spacing:1px;
    box-shadow:0 2px 10px rgba(0,180,255,.35), inset 0 0 12px rgba(110,230,255,.18);
    text-shadow:0 1px 3px rgba(0,40,70,.8); white-space:nowrap; }
  #ds-chip .ds-badge em { font-style:normal; color:#7fe3ff; font-weight:normal; margin-left:4px; }
  #ds-chip .btn { pointer-events:auto; min-height:0 !important; padding:5px 12px; font-size:12px;
    border-radius:18px; box-shadow:0 2px 8px rgba(0,60,110,.4); }
  #ds-enter { position:absolute; top:10px; right:10px; z-index:6; min-height:0 !important;
    display:flex; align-items:center; gap:7px; padding:4px 13px 4px 5px; font-size:12.5px;
    border-radius:999px; font-weight:bold; cursor:pointer; color:#dcf7ff; letter-spacing:1.5px;
    background:linear-gradient(180deg,#2a86c4 0%,#125a96 42%,#0a3468 100%);
    border:1px solid rgba(130,235,255,.8);
    box-shadow:0 3px 14px rgba(0,150,235,.5), 0 6px 18px rgba(0,60,130,.35),
      inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(2,30,70,.45);
    text-shadow:0 1px 3px rgba(0,40,70,.9); overflow:hidden;
    animation:dsBob 3s ease-in-out infinite;
    transition:transform .18s, filter .18s; }
  #ds-enter .ds-ico { flex:0 0 auto; width:25px; height:25px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13.5px;
    background:radial-gradient(circle at 32% 26%, #a7f0ff, #2f9fdd 58%, #0c5c96 100%);
    box-shadow:0 0 9px rgba(120,232,255,.85), inset 0 -2px 4px rgba(0,45,85,.55),
      inset 0 1px 2px rgba(255,255,255,.6); }
  #ds-enter .ds-n { flex:0 0 auto; font-size:11px; line-height:1; padding:3px 7px; border-radius:10px;
    background:linear-gradient(180deg,#ffe082,#ffb300); color:#5d3a00; font-weight:bold; letter-spacing:0;
    text-shadow:none; box-shadow:0 1px 4px rgba(120,70,0,.4), inset 0 1px 0 rgba(255,255,255,.65); }
  #ds-enter::after { content:''; position:absolute; top:-40%; bottom:-40%; left:-30%; width:34%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-22deg); animation:dsSheen 3.4s ease-in-out infinite; pointer-events:none; }
  #ds-enter:hover { transform:translateY(-2px) scale(1.04); filter:brightness(1.12); }
  #ds-enter:active { transform:translateY(0) scale(.97); }
  #ds-enter.hidden { display:none; }
  @keyframes dsBob { 0%,100% { box-shadow:0 3px 14px rgba(0,150,235,.5), 0 6px 18px rgba(0,60,130,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(2,30,70,.45); }
    50% { box-shadow:0 4px 20px rgba(0,195,255,.7), 0 6px 18px rgba(0,60,130,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(2,30,70,.45); } }
  @keyframes dsSheen { 0%,55% { left:-40%; } 85%,100% { left:130%; } }

  /* ===== 瑶池副本（yc- 前缀，只增不改）：玉绿+鎏金配色，结构复用 ds- 思路 ===== */
  #yc-chip { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6;
    display:flex; align-items:center; gap:8px; pointer-events:none; }
  #yc-chip.hidden { display:none; }
  #yc-chip .yc-badge { pointer-events:none; background:linear-gradient(135deg,rgba(16,66,42,.92),rgba(10,44,28,.92));
    border:1.5px solid rgba(255,224,130,.55); color:#ffe9b0; font-size:12.5px; font-weight:bold;
    padding:5px 14px; border-radius:20px; letter-spacing:1px;
    box-shadow:0 2px 10px rgba(255,200,80,.35), inset 0 0 12px rgba(255,224,130,.15);
    text-shadow:0 1px 3px rgba(0,50,25,.8); white-space:nowrap; }
  #yc-chip .yc-badge em { font-style:normal; color:#ffe08a; font-weight:normal; margin-left:4px; }
  #yc-chip .btn { pointer-events:auto; min-height:0 !important; padding:5px 12px; font-size:12px;
    border-radius:18px; box-shadow:0 2px 8px rgba(20,80,50,.4); }
  #yc-enter { position:absolute; top:60px; right:10px; z-index:6; min-height:0 !important;
    display:flex; align-items:center; gap:7px; padding:4px 13px 4px 5px; font-size:12.5px;
    border-radius:999px; font-weight:bold; cursor:pointer; color:#fdf6dc; letter-spacing:1.5px;
    background:linear-gradient(180deg,#4da77b 0%,#2c7a52 42%,#17563a 100%);
    border:1px solid rgba(255,230,150,.8);
    box-shadow:0 3px 14px rgba(80,200,130,.5), 0 6px 18px rgba(20,90,55,.35),
      inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(5,45,28,.45);
    text-shadow:0 1px 3px rgba(0,50,25,.9); overflow:hidden;
    animation:ycBob 3s ease-in-out infinite;
    transition:transform .18s, filter .18s; }
  #yc-enter .yc-ico { flex:0 0 auto; width:25px; height:25px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13.5px;
    background:radial-gradient(circle at 32% 26%, #fff7cf, #ffd54f 58%, #b8860b 100%);
    box-shadow:0 0 9px rgba(255,220,120,.85), inset 0 -2px 4px rgba(120,80,0,.55),
      inset 0 1px 2px rgba(255,255,255,.6); }
  #yc-enter .yc-n { flex:0 0 auto; font-size:11px; line-height:1; padding:3px 7px; border-radius:10px;
    background:linear-gradient(180deg,#ffe082,#ffb300); color:#5d3a00; font-weight:bold; letter-spacing:0;
    text-shadow:none; box-shadow:0 1px 4px rgba(120,70,0,.4), inset 0 1px 0 rgba(255,255,255,.65); }
  #yc-enter::after { content:''; position:absolute; top:-40%; bottom:-40%; left:-30%; width:34%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-22deg); animation:dsSheen 3.4s ease-in-out infinite; pointer-events:none; }
  #yc-enter:hover { transform:translateY(-2px) scale(1.04); filter:brightness(1.12); }
  #yc-enter:active { transform:translateY(0) scale(.97); }
  #yc-enter.hidden { display:none; }
  @keyframes ycBob { 0%,100% { box-shadow:0 3px 14px rgba(80,200,130,.5), 0 6px 18px rgba(20,90,55,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(5,45,28,.45); }
    50% { box-shadow:0 4px 20px rgba(255,214,110,.65), 0 6px 18px rgba(20,90,55,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(5,45,28,.45); } }

  /* 移动端入口 pill 缩小（2026-10-16，用户反馈副本入口一直没缩小）：整体收 ~25%，
     瑶池入口上提对齐缩小后的深海入口；横屏 lm-rot 态物理视口仍窄屏会命中本块，缩小同样适用 */
  @media (max-width:760px) {
    #ds-enter, #yc-enter { gap:5px; padding:3px 10px 3px 4px; font-size:10.5px; letter-spacing:1px; }
    #ds-enter .ds-ico, #yc-enter .yc-ico { width:20px; height:20px; font-size:11px; }
    #ds-enter .ds-n, #yc-enter .yc-n { font-size:9.5px; padding:2px 6px; }
    #yc-enter { top:46px; }
  }

  /* 瑶池鱼池图鉴入口「?」 */
  #yc-help { position:absolute; top:60px; left:10px; z-index:6; width:34px; height:34px; padding:0;
    border-radius:50%; border:1.5px solid rgba(255,230,150,.8); cursor:pointer;
    font-size:18px; font-weight:bold; color:#fff8e1; line-height:1;
    background:linear-gradient(180deg,#4da77b 0%,#2c7a52 45%,#17563a 100%);
    box-shadow:0 2px 10px rgba(80,200,130,.5), inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 3px rgba(0,50,25,.9); transition:transform .18s, filter .18s; }
  #yc-help:hover { transform:scale(1.08); filter:brightness(1.15); }
  #yc-help:active { transform:scale(.95); }
  #yc-help.hidden { display:none; }

  /* 浮空岛鱼池图鉴入口「?」（nb- 前缀，2026-11-01 补：此前无样式按钮渲染不可见，用户反馈「没看到左边池子显示」） */
  #nb-help { position:absolute; top:60px; left:10px; z-index:6; width:34px; height:34px; padding:0;
    border-radius:50%; border:1.5px solid rgba(200,160,255,.8); cursor:pointer;
    font-size:18px; font-weight:bold; color:#f3ecff; line-height:1;
    background:linear-gradient(180deg,#7e57c2 0%,#512da8 45%,#311b92 100%);
    box-shadow:0 2px 10px rgba(150,100,255,.5), inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 3px rgba(20,0,60,.9); transition:transform .18s, filter .18s; }
  #nb-help:hover { transform:scale(1.08); filter:brightness(1.15); }
  #nb-help:active { transform:scale(.95); }
  #nb-help.hidden { display:none; }
  #nb-book { z-index:150; }

  /* 浮空岛状态徽章 + 入口按钮（nb- 前缀，2026-11-01 补：此前 chip 无定位掉进文档流，
     徽章横条被挤到场景图下方——用户反馈「位置不对，怎么会在这里」。布局复刻 yc 体系，
     配色星紫；入口第三层（深海 top10 / 瑶池 top60 / 浮空岛 top110）避免同列叠加 */
  #nb-chip { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6;
    display:flex; align-items:center; gap:8px; pointer-events:none; }
  #nb-chip.hidden { display:none; }
  #nb-chip .yc-badge { pointer-events:none; background:linear-gradient(135deg,rgba(64,28,128,.92),rgba(38,10,84,.92));
    border:1.5px solid rgba(200,160,255,.6); color:#e6dbff; font-size:12.5px; font-weight:bold;
    padding:5px 14px; border-radius:20px; letter-spacing:1px;
    box-shadow:0 2px 10px rgba(150,100,255,.4), inset 0 0 12px rgba(200,160,255,.16);
    text-shadow:0 1px 3px rgba(20,0,60,.85); white-space:nowrap; }
  #nb-chip .yc-badge em { font-style:normal; color:#d1b3ff; font-weight:normal; margin-left:4px; }
  #nb-chip .btn { pointer-events:auto; min-height:0 !important; padding:5px 12px; font-size:12px;
    border-radius:18px; box-shadow:0 2px 8px rgba(40,10,90,.45); }
  #nb-enter { position:absolute; top:110px; right:10px; z-index:6; min-height:0 !important;
    display:flex; align-items:center; gap:7px; padding:4px 13px 4px 5px; font-size:12.5px;
    border-radius:999px; font-weight:bold; cursor:pointer; color:#f0e8ff; letter-spacing:1.5px;
    background:linear-gradient(180deg,#8e63d8 0%,#5e35b1 42%,#311b92 100%);
    border:1px solid rgba(205,170,255,.85);
    box-shadow:0 3px 14px rgba(150,100,255,.5), 0 6px 18px rgba(40,10,90,.4),
      inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(20,0,60,.5);
    text-shadow:0 1px 3px rgba(20,0,60,.9); overflow:hidden;
    animation:nbBob 3s ease-in-out infinite;
    transition:transform .18s, filter .18s; }
  #nb-enter .yc-ico { flex:0 0 auto; width:25px; height:25px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13.5px;
    background:radial-gradient(circle at 32% 26%, #f5eeff, #b388ff 58%, #6a1fb0 100%);
    box-shadow:0 0 9px rgba(200,160,255,.9), inset 0 -2px 4px rgba(60,0,120,.6),
      inset 0 1px 2px rgba(255,255,255,.6); }
  #nb-enter .yc-n { flex:0 0 auto; font-size:11px; line-height:1; padding:3px 7px; border-radius:10px;
    background:linear-gradient(180deg,#e1c8ff,#a97fe8); color:#31135e; font-weight:bold; letter-spacing:0;
    text-shadow:none; box-shadow:0 1px 4px rgba(60,20,120,.45), inset 0 1px 0 rgba(255,255,255,.65); }
  #nb-enter::after { content:''; position:absolute; top:-40%; bottom:-40%; left:-30%; width:34%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
    transform:skewX(-22deg); animation:dsSheen 3.4s ease-in-out infinite; pointer-events:none; }
  #nb-enter:hover { transform:translateY(-2px) scale(1.04); filter:brightness(1.12); }
  #nb-enter:active { transform:translateY(0) scale(.97); }
  #nb-enter.hidden { display:none; }
  @keyframes nbBob { 0%,100% { box-shadow:0 3px 14px rgba(150,100,255,.5), 0 6px 18px rgba(40,10,90,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(20,0,60,.5); }
    50% { box-shadow:0 4px 20px rgba(200,160,255,.7), 0 6px 18px rgba(40,10,90,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(20,0,60,.5); } }
  @media (max-width:760px) {
    #nb-enter { top:82px; gap:5px; padding:3px 10px 3px 4px; font-size:10.5px; letter-spacing:1px; }
    #nb-enter .yc-ico { width:20px; height:20px; font-size:11px; }
    #nb-enter .yc-n { font-size:9.5px; padding:2px 6px; }
  }

  /* 机械暗河（jx- 前缀，2026-11-02）：结构复刻 nb 三件套，配色铜橙工业系；
     入口第四层（深海 top10 / 瑶池 top60 / 浮空岛 top110 / 机械暗河 top160）避免同列叠加 */
  #jx-help { position:absolute; top:60px; left:10px; z-index:6; width:34px; height:34px; padding:0;
    border-radius:50%; border:1.5px solid rgba(255,183,77,.8); cursor:pointer;
    font-size:18px; font-weight:bold; color:#fff3e0; line-height:1;
    background:linear-gradient(180deg,#a1662f 0%,#6d4c1e 45%,#43280f 100%);
    box-shadow:0 2px 10px rgba(255,160,60,.5), inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 3px rgba(40,15,0,.9); transition:transform .18s, filter .18s; }
  #jx-help:hover { transform:scale(1.08); filter:brightness(1.15); }
  #jx-help:active { transform:scale(.95); }
  #jx-help.hidden { display:none; }
  #jx-book { z-index:150; }
  #jx-chip { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6;
    display:flex; align-items:center; gap:8px; pointer-events:none; }
  #jx-chip.hidden { display:none; }
  #jx-chip .yc-badge { pointer-events:none; background:linear-gradient(135deg,rgba(96,50,12,.92),rgba(52,26,6,.92));
    border:1.5px solid rgba(255,183,77,.6); color:#ffe8d0; font-size:12.5px; font-weight:bold;
    padding:5px 14px; border-radius:20px; letter-spacing:1px;
    box-shadow:0 2px 10px rgba(255,160,60,.4), inset 0 0 12px rgba(255,183,77,.16);
    text-shadow:0 1px 3px rgba(40,15,0,.85); white-space:nowrap; }
  #jx-chip .yc-badge em { font-style:normal; color:#ffcc80; font-weight:normal; margin-left:4px; }
  #jx-chip .btn { pointer-events:auto; min-height:0 !important; padding:5px 12px; font-size:12px;
    border-radius:18px; box-shadow:0 2px 8px rgba(70,30,5,.45); }
  #jx-enter { position:absolute; top:160px; right:10px; z-index:6; min-height:0 !important;
    display:flex; align-items:center; gap:7px; padding:4px 13px 4px 5px; font-size:12.5px;
    border-radius:999px; font-weight:bold; cursor:pointer; color:#fff3e0; letter-spacing:1.5px;
    background:linear-gradient(180deg,#c98a45 0%,#a1662f 42%,#5d3a14 100%);
    border:1px solid rgba(255,200,130,.85);
    box-shadow:0 3px 14px rgba(255,160,60,.5), 0 6px 18px rgba(70,30,5,.4),
      inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(40,15,0,.5);
    text-shadow:0 1px 3px rgba(40,15,0,.9); overflow:hidden;
    animation:jxBob 3s ease-in-out infinite;
    transition:transform .18s, filter .18s; }
  #jx-enter .yc-ico { flex:0 0 auto; width:25px; height:25px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13.5px;
    background:radial-gradient(circle at 32% 26%, #fff8ec, #ffcc80 58%, #c77f2a 100%);
    box-shadow:0 0 9px rgba(255,183,77,.9), inset 0 -2px 4px rgba(110,55,10,.6),
      inset 0 1px 2px rgba(255,255,255,.6); }
  #jx-enter .yc-n { flex:0 0 auto; font-size:11px; line-height:1; padding:3px 7px; border-radius:10px;
    background:linear-gradient(180deg,#ffe0b2,#e8a75d); color:#4e2a08; font-weight:bold; letter-spacing:0;
    text-shadow:none; box-shadow:0 1px 4px rgba(110,55,10,.45), inset 0 1px 0 rgba(255,255,255,.65); }
  #jx-enter::after { content:''; position:absolute; top:-40%; bottom:-40%; left:-30%; width:34%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
    transform:skewX(-22deg); animation:dsSheen 3.4s ease-in-out infinite; pointer-events:none; }
  #jx-enter:hover { transform:translateY(-2px) scale(1.04); filter:brightness(1.12); }
  #jx-enter:active { transform:translateY(0) scale(.97); }
  #jx-enter.hidden { display:none; }
  @keyframes jxBob { 0%,100% { box-shadow:0 3px 14px rgba(255,160,60,.5), 0 6px 18px rgba(70,30,5,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(40,15,0,.5); }
    50% { box-shadow:0 4px 20px rgba(255,200,130,.7), 0 6px 18px rgba(70,30,5,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(40,15,0,.5); } }
  @media (max-width:760px) {
    #jx-enter { top:132px; gap:5px; padding:3px 10px 3px 4px; font-size:10.5px; letter-spacing:1px; }
    #jx-enter .yc-ico { width:20px; height:20px; font-size:11px; }
    #jx-enter .yc-n { font-size:9.5px; padding:2px 6px; }
  }

  /* 午夜狂欢游乐场（mc- 前缀，2026-11-03）：结构复刻 jx 三件套，配色霓虹粉紫嘉年华系；
     入口第五层（深海 top10 / 瑶池 top60 / 浮空岛 top110 / 机械暗河 top160 / 游乐场 top210）避免同列叠加 */
  #mc-help { position:absolute; top:60px; left:10px; z-index:6; width:34px; height:34px; padding:0;
    border-radius:50%; border:1.5px solid rgba(240,166,255,.8); cursor:pointer;
    font-size:18px; font-weight:bold; color:#fbeaff; line-height:1;
    background:linear-gradient(180deg,#9a4fd0 0%,#6a2ba0 45%,#3d1465 100%);
    box-shadow:0 2px 10px rgba(200,120,255,.55), inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 3px rgba(35,5,55,.9); transition:transform .18s, filter .18s; }
  #mc-help:hover { transform:scale(1.08); filter:brightness(1.15); }
  #mc-help:active { transform:scale(.95); }
  #mc-help.hidden { display:none; }
  #mc-book { z-index:150; }
  #mc-chip { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6;
    display:flex; align-items:center; gap:8px; pointer-events:none; }
  #mc-chip.hidden { display:none; }
  #mc-chip .yc-badge { pointer-events:none; background:linear-gradient(135deg,rgba(90,30,110,.92),rgba(46,12,62,.92));
    border:1.5px solid rgba(240,166,255,.6); color:#f8e4ff; font-size:12.5px; font-weight:bold;
    padding:5px 14px; border-radius:20px; letter-spacing:1px;
    box-shadow:0 2px 10px rgba(200,120,255,.45), inset 0 0 12px rgba(240,166,255,.16);
    text-shadow:0 1px 3px rgba(35,5,55,.85); white-space:nowrap; }
  #mc-chip .yc-badge em { font-style:normal; color:#f0a6ff; font-weight:normal; margin-left:4px; }
  #mc-chip .btn { pointer-events:auto; min-height:0 !important; padding:5px 12px; font-size:12px;
    border-radius:18px; box-shadow:0 2px 8px rgba(35,5,55,.45); }
  #mc-enter { position:absolute; top:210px; right:10px; z-index:6; min-height:0 !important;
    display:flex; align-items:center; gap:7px; padding:4px 13px 4px 5px; font-size:12.5px;
    border-radius:999px; font-weight:bold; cursor:pointer; color:#fbeaff; letter-spacing:1.5px;
    background:linear-gradient(180deg,#b862e8 0%,#8a3ab8 42%,#4c1478 100%);
    border:1px solid rgba(240,190,255,.85);
    box-shadow:0 3px 14px rgba(200,120,255,.55), 0 6px 18px rgba(35,5,55,.4),
      inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(35,5,55,.5);
    text-shadow:0 1px 3px rgba(35,5,55,.9); overflow:hidden;
    animation:mcBob 3s ease-in-out infinite;
    transition:transform .18s, filter .18s; }
  #mc-enter .yc-ico { flex:0 0 auto; width:25px; height:25px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13.5px;
    background:radial-gradient(circle at 32% 26%, #fff6ff, #f0a6ff 58%, #b050d8 100%);
    box-shadow:0 0 9px rgba(240,166,255,.9), inset 0 -2px 4px rgba(90,20,120,.6),
      inset 0 1px 2px rgba(255,255,255,.6); }
  #mc-enter .yc-n { flex:0 0 auto; font-size:11px; line-height:1; padding:3px 7px; border-radius:10px;
    background:linear-gradient(180deg,#f3d9ff,#cf8ae8); color:#43104f; font-weight:bold; letter-spacing:0;
    text-shadow:none; box-shadow:0 1px 4px rgba(90,20,120,.45), inset 0 1px 0 rgba(255,255,255,.65); }
  #mc-enter::after { content:''; position:absolute; top:-40%; bottom:-40%; left:-30%; width:34%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
    transform:skewX(-22deg); animation:dsSheen 3.4s ease-in-out infinite; pointer-events:none; }
  #mc-enter:hover { transform:translateY(-2px) scale(1.04); filter:brightness(1.12); }
  #mc-enter:active { transform:translateY(0) scale(.97); }
  #mc-enter.hidden { display:none; }
  @keyframes mcBob { 0%,100% { box-shadow:0 3px 14px rgba(200,120,255,.55), 0 6px 18px rgba(35,5,55,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(35,5,55,.5); }
    50% { box-shadow:0 4px 20px rgba(230,170,255,.75), 0 6px 18px rgba(35,5,55,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -9px 14px rgba(35,5,55,.5); } }
  @media (max-width:760px) {
    #mc-enter { top:184px; gap:5px; padding:3px 10px 3px 4px; font-size:10.5px; letter-spacing:1px; }
    #mc-enter .yc-ico { width:20px; height:20px; font-size:11px; }
    #mc-enter .yc-n { font-size:9.5px; padding:2px 6px; }
  }

  /* 深海鱼池图鉴（dsbk- 前缀，只增不改）：左上角「?」+ 一行 3 格鱼卡弹层 */
  #ds-help { position:absolute; top:10px; left:10px; z-index:6; width:34px; height:34px; padding:0;
    border-radius:50%; border:1.5px solid rgba(130,235,255,.8); cursor:pointer;
    font-size:18px; font-weight:bold; color:#e6faff; line-height:1;
    background:linear-gradient(180deg,#2a86c4 0%,#125a96 45%,#0a3468 100%);
    box-shadow:0 2px 10px rgba(0,150,235,.5), inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 3px rgba(0,40,70,.9); transition:transform .18s, filter .18s; }
  #ds-help:hover { transform:scale(1.08); filter:brightness(1.15); }
  /* 主世界鱼池图鉴按钮（与 ds-help/yc-help 同一画风：圆形渐变+「?」，青碧色系=主世界）
     2026-10-20 挪左：原 top:54px right:12px 被右上瑶池副本按钮压住（用户截图反馈），
     改左上第二行（第一行是天气徽标 top:8px，v7 分层方案），与 ds-help/yc-help 同侧 */
  #main-help { position:absolute; top:54px; left:12px; z-index:6; width:34px; height:34px; padding:0;
    border-radius:50%; border:1.5px solid rgba(130,235,200,.8); cursor:pointer;
    font-size:18px; font-weight:bold; color:#eafff6; line-height:1;
    background:linear-gradient(180deg,#2ec4a0 0%,#12876e 45%,#0a5040 100%);
    box-shadow:0 2px 10px rgba(0,200,150,.5), inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 3px rgba(0,60,45,.9); transition:transform .18s, filter .18s; }
  #main-help:hover { transform:scale(1.08); filter:brightness(1.15); }
  #main-help:active { transform:scale(.95); }
  #main-help.hidden { display:none; }
  #ds-help:active { transform:scale(.95); }
  #ds-help.hidden { display:none; }
  #ds-book { z-index:150; }
  .dsbk-panel { width:min(92vw,440px); max-height:86vh; display:flex; flex-direction:column;
    background:linear-gradient(180deg,#06263f 0%,#0a3a60 55%,#0d4a74 100%);
    border:2px solid rgba(110,230,255,.5); border-radius:18px;
    box-shadow:0 14px 44px rgba(0,10,25,.6), inset 0 0 26px rgba(40,160,230,.18); overflow:hidden; }
  .dsbk-head { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
    padding:12px 14px 10px; color:#bdf3ff; font-weight:bold; font-size:15.5px; letter-spacing:1px;
    text-shadow:0 1px 3px rgba(0,40,70,.8); border-bottom:1px solid rgba(110,230,255,.25); }
  .dsbk-x { width:28px; height:28px; border-radius:50%; border:1px solid rgba(110,230,255,.5);
    background:rgba(10,50,86,.8); color:#bdf3ff; font-size:15px; cursor:pointer; line-height:1; }
  .dsbk-tip { padding:8px 14px 2px; font-size:11.5px; color:#8fd8f5; text-align:center; flex:0 0 auto; }
  .dsbk-grid { padding:10px 12px 14px; overflow-y:auto; display:grid;
    grid-template-columns:repeat(3,1fr); gap:10px; }
  .dsbk-load { grid-column:1/-1; text-align:center; color:#9fdcf7; font-size:13px; padding:22px 0; }
  .dsbk-card { position:relative; background:linear-gradient(180deg,#fffdf5,#f4ecd2);
    border:1.5px solid #e3d3a2; border-radius:12px; padding:10px 6px 8px; text-align:center;
    box-shadow:0 2px 6px rgba(0,20,40,.35); }
  .dsbk-tag { position:absolute; top:0; left:0; padding:2.5px 8px; border-radius:10px 0 8px 0;
    font-size:10.5px; font-weight:bold; color:#fff; letter-spacing:1px;
    background:linear-gradient(135deg,#ff7043,#e53935); border:1px solid #ffd9a8; border-top:none; border-left:none;
    box-shadow:0 2px 6px rgba(180,40,20,.45); }
  .dsbk-img { height:52px; display:flex; align-items:center; justify-content:center; }
  .dsbk-img img { max-width:88%; max-height:100%; object-fit:contain; }
  .dsbk-name { margin-top:5px; font-size:12px; font-weight:bold; color:#3c3325;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dsbk-rar { display:block; margin-top:2px; font-size:10.5px; font-weight:bold; }
  /* 未钓获：银灰化 + 暗影内衬区分（caught=0 时渲染） */
  .dsbk-card.unk { filter:grayscale(.6) brightness(.88); opacity:.94;
    box-shadow:0 2px 6px rgba(0,20,40,.35), inset 0 0 0 1.5px rgba(9,34,58,.28), inset 0 0 14px rgba(6,26,46,.28); }
  .dsbk-card.unk .dsbk-name { color:#64707a; }
  .dsbk-unk { position:absolute; top:4px; right:4px; font-size:9px; font-weight:bold; color:#d8ecf8;
    background:rgba(10,42,72,.72); border:1px solid rgba(110,230,255,.4); border-radius:8px; padding:1px 6px;
    letter-spacing:1px; }
  /* 瑶池图鉴：复用 dsbk 结构，配色覆盖为玉绿+鎏金（只增不改） */
  #yc-book { z-index:150; }
  #yc-book .dsbk-panel { background:linear-gradient(180deg,#123524 0%,#1d5a3a 55%,#27714a 100%);
    border-color:rgba(255,224,130,.55);
    box-shadow:0 14px 44px rgba(0,10,25,.6), inset 0 0 26px rgba(255,215,120,.14); }
  #yc-book .dsbk-x { border-color:rgba(255,224,130,.5); background:rgba(30,70,45,.8); color:#ffe9b0; }
  #yc-book .dsbk-tip { color:#cfe8c8; }
  #yc-book .dsbk-load { color:#bfe3b0; }
  #yc-book .dsbk-unk { color:#fff3d6; background:rgba(30,80,50,.75); border-color:rgba(255,224,130,.45); }


/* ---------- 出售鱼获弹层（2026-10-18 重构：独立入口防误卖） ---------- */
#sell-ov { position:fixed; inset:0; z-index:9700; background:rgba(20,14,6,.78); backdrop-filter:blur(3px);
           display:flex; align-items:center; justify-content:center; padding:12px; }
#sell-ov.hidden { display:none; }
.so-card { width:min(96%,560px); max-height:92vh; display:flex; flex-direction:column;
           background:linear-gradient(180deg,#fffdf4,#f6ecd2); border:3px solid #d8c294; border-radius:20px;
           box-shadow:0 16px 60px rgba(0,0,0,.55); overflow:hidden; }
.so-head { position:relative; background:linear-gradient(180deg,#e8a13d,#c97e1e); color:#fff8ea;
           font-size:16px; font-weight:bold; letter-spacing:2px; padding:11px 14px; text-align:center;
           text-shadow:0 1px 2px rgba(90,40,0,.6); }
.so-x { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:30px; height:30px;
        border:none; border-radius:50%; background:rgba(90,40,0,.35); color:#ffe9c8; font-size:14px; cursor:pointer; }
.so-stat { padding:9px 14px 6px; font-size:12px; color:#6b4a1e; }
.so-stat b { color:#e65100; }
.so-filters { padding:2px 12px 8px; display:flex; flex-wrap:wrap; gap:5px; border-bottom:1.5px dashed #d8c294; }
/* 工具行（2026-11-10 UI 重排）：搜索框独占一行 + 保护开关一行三等分。
   必须由 CSS 类接管 display:flex——JS 显隐用 style.display=''，若布局全靠行内样式会回退 block 导致 gap 失效（本次修复根因） */
.so-tools { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 12px 2px; }
.so-q { flex:1 1 100%; height:32px; border:2px solid #d8c294; border-radius:12px; padding:0 11px;
        font-size:12.5px; color:#5d4037; background:#fffdf6; outline:none; box-sizing:border-box; }
.so-q::placeholder { color:#b9a67e; }
.so-q:focus { border-color:#e8a13d; box-shadow:0 0 0 2px rgba(232,161,61,.18); }
.so-prot { display:flex; gap:6px; flex:1 1 100%; }
.so-prot .qchip { flex:1; justify-content:center; padding:5px 4px; }
/* 排序行（2026-11-10 用户拍板）：稀有度/价格两个排序独占一行俩等分，虚线与筛选区分隔 */
.so-sortrow { flex:1 1 100%; display:flex; gap:6px; border-top:1.5px dashed #e2d3ac; padding-top:7px; margin-top:2px; }
.so-sortrow .qchip { flex:1; justify-content:center; }
.so-stat-sub { font-size:10.5px; color:#9a8b66; margin-top:2px; }
.so-list { flex:1; overflow-y:auto; padding:8px 10px; min-height:120px; -webkit-overflow-scrolling:touch; }
.so-row { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:12px; margin-bottom:5px;
          background:#fffef8; border:2px solid #e5d9bb; cursor:pointer; transition:.12s; }
.so-row:active { transform:scale(.99); }
.so-row.sel { border-color:#4caf50; background:#f1f8e9; box-shadow:0 0 0 2px #c8e6c9 inset; }
.so-ck { width:24px; height:24px; border-radius:50%; border:2px solid #c8b891; background:#fff;
         display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:bold; color:#4caf50; flex:0 0 auto; }
.so-row.sel .so-ck { background:#4caf50; border-color:#4caf50; color:#fff; }
.so-ic { position:relative; width:44px; height:44px; border-radius:10px; background:#f3ead2; flex:0 0 auto; overflow:hidden; }
.so-ic img { width:100%; height:100%; object-fit:cover; }
.so-g { position:absolute; top:0; left:0; background:#e53935; color:#fff; font-size:9px; font-style:normal;
        padding:0 4px; border-radius:0 0 6px 0; }
.so-main { flex:1; min-width:0; text-align:left; }
.so-main b { font-size:12.5px; display:block; }
.so-main .so-w { font-size:10.5px; color:#8a7a55; }
.so-bd { font-style:normal; font-size:9px; background:#607d8b; color:#fff; border-radius:4px; padding:0 3px; }
.so-pr { font-size:12px; color:#6b4a1e; flex:0 0 auto; }
.so-empty { text-align:center; color:#9a8b66; font-size:12px; padding:30px 0; }
.so-foot { border-top:2px solid #d8c294; background:#fdf6e3; padding:9px 12px; }
.so-sum { font-size:12.5px; color:#6b4a1e; margin-bottom:8px; }
.so-sum b { color:#e65100; }
.so-btns { display:flex; gap:8px; }
.so-btns .obtn { flex:1; height:36px; font-size:13px; }
@media (max-width:420px) { .so-card { width:100%; max-height:96vh; border-radius:16px; } }

/* ---------- 出售确认卡 v2（宽松排版） ---------- */
.so-cfm { text-align:center; padding:22px 16px 18px; }
.so-cfm-t { font-size:17px; font-weight:bold; color:#5d4037; margin-bottom:14px; }
.so-cfm-imgs { display:flex; justify-content:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.so-cfm-img { width:52px; height:52px; border-radius:12px; background:#f3ead2; border:2px solid #e0d0a8; overflow:hidden; }
.so-cfm-img img { width:100%; height:100%; object-fit:cover; }
.so-cfm-img.more { display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:bold; color:#8a7a55; }
.so-cfm-sum { font-size:14px; color:#6b4a1e; margin-bottom:10px; }
.so-cfm-sum b { font-size:24px; color:#e65100; }
.so-cfm-sum span { font-size:12px; color:#9a8b66; }
.so-cfm-n { font-size:12px; color:#8a7a55; margin-bottom:12px; }
.so-cfm-w { font-size:11.5px; color:#c62828; background:#fdecea; border-radius:10px; padding:6px 10px; margin:0 auto 14px; display:inline-block; }
.so-cfm-btns { display:flex; gap:10px; }
.so-cfm-btns .obtn { flex:1; height:40px; font-size:14px; }