:root { --red:#d0342c; --dark:#2b2b2b; --gold:#f6b93b; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { overflow-anchor:none;
          font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:#f4efe7; color:#333; }
  header { background:var(--red); color:#fff; padding:18px 16px; text-align:center;
           border-bottom:6px solid #222; }
  header h1 { font-size:24px; letter-spacing:2px; }
  header p { font-size:13px; color:#fff; margin-top:4px; }
  nav.tabs { margin-top:14px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  nav.tabs a { color:#fff; text-decoration:none; font-size:15px; font-weight:bold;
               padding:10px 16px; background:rgba(255,255,255,.12);
               border:2px solid rgba(255,255,255,.75); border-radius:12px 12px 4px 4px;
               display:inline-block; }
  nav.tabs a b { margin-right:4px; }
  nav.tabs a.on { background:#fff; color:var(--red); border-bottom:4px solid var(--gold); }
  .ballbar { text-align:center; margin-top:-18px; position:relative; z-index:5; }
  .bigball { position:relative; display:inline-block; width:34px; height:34px; border-radius:50%;
             background:#fff; border:3px solid #222; box-shadow:0 3px 8px rgba(0,0,0,.25); }
  .bigball::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                    width:11px; height:11px; border-radius:50%; background:#fff; border:3px solid #222; }
  main { max-width:880px; margin:0 auto; padding:34px 12px 60px; }
  /* ---- 大木博士 2.5D 通讯窗（全站左下角） ---- */
  #oakwrap { position:fixed; left:14px; bottom:14px; z-index:62;
             /* 跟着屏幕宽度自动缩放：宽屏不再顶到 360，小窗口自动收窄 */
             width:clamp(248px, 19vw, 336px);
             perspective:820px; font-size:13px; }
  #oakwrap.hidden { display:none; }
  #oakcard { position:relative; transform-style:preserve-3d;
             transition:transform .3s cubic-bezier(.2,.8,.3,1); }
  #oakpanel { position:relative; overflow:hidden;
              background:linear-gradient(160deg,rgba(255,251,243,.97),rgba(255,240,214,.95));
              border:2px solid var(--gold); border-radius:16px; padding:10px 12px 12px;
              box-shadow:0 12px 30px rgba(90,45,10,.30); }
  #oakpanel:before { content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
              background:repeating-linear-gradient(180deg,rgba(185,138,47,.07) 0 1px,transparent 1px 5px); }
  .oakscan { position:absolute; left:-10%; right:-10%; height:30px; pointer-events:none; z-index:4;
             background:linear-gradient(180deg,rgba(120,220,255,0),rgba(120,220,255,.20),rgba(120,220,255,0));
             animation:oakscan 6s linear infinite; }
  @keyframes oakscan { from { top:-34px; } to { top:100%; } }
  .oaktop { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .oaktitle { font-size:clamp(12px, 0.74vw, 13.5px); color:#b98a2f; letter-spacing:1.2px;
              flex:1; font-weight:bold; }
  .oakx { cursor:pointer; color:#b98a2f; font-size:15px; line-height:1; padding:2px 4px; }
  .oakbody { display:flex; gap:10px; align-items:flex-start; }
  .oakhead { position:relative; flex:none; width:clamp(70px, 5.3vw, 96px);
             height:clamp(70px, 5.3vw, 96px); border-radius:14px;
             overflow:hidden; border:2px solid #b98a2f;
             background:radial-gradient(circle at 50% 32%,#fff8ea,#efdcb4);
             box-shadow:0 8px 18px rgba(120,70,20,.30); }
  .oakhead img { width:100%; height:100%; display:block; object-fit:cover;
                 image-rendering:pixelated; }
  /* 喵喵用的是动画截图，别用像素化的放大方式 */
  .oak-egg .oakhead img, .oak-egg #oaktab img { image-rendering:auto; }
  /* 眨眼的闭眼线：用博士的肤色（不是黑色），位置按立绘眼白实测 */
  .oakblink { position:absolute; top:50%; width:11%; height:11%;
              background:#ffc86e; border-bottom:2px solid rgba(150,86,20,.55);
              border-radius:2px; opacity:0; animation:oakblink 5.6s infinite; }
  .oakblink.l { left:27.9%; }
  .oakblink.r { right:27.7%; }
  @keyframes oakblink { 0%,92%,100% { opacity:0; } 95%,97% { opacity:1; } }
  .oakbubble { position:relative; flex:1; min-height:clamp(76px, 5.6vw, 96px); cursor:pointer;
               background:#fffdf7; border:1px solid #e8d3a4; border-radius:12px;
               padding:8px 10px 16px; color:#5a4a3a; line-height:1.65;
               font-size:clamp(11.5px, 0.7vw, 13px); }
  .oakbubble:hover { background:#fff6e2; border-color:#e0c58c; }
  /* 气泡右下角跳动的倒三角（表示还有下一句） */
  .oakmore { position:absolute; right:9px; bottom:5px; width:0; height:0;
             border-left:6px solid transparent; border-right:6px solid transparent;
             border-top:8px solid #d8b877; animation:oakmore 1.15s ease-in-out infinite; }
  @keyframes oakmore { 0%,100% { transform:translateY(0); opacity:.5; }
                       50% { transform:translateY(3px); opacity:1; } }
  /* 三个按钮固定挤在一行（手机/半屏可用宽只有 210-230px，换行更难看）：
     用 flex 平均分宽 + 超出省略号，文字太长时自动截断而不是掉到第二行。
     注意：彩蛋（听喵喵说）和"缓冲中…"是改 textContent，这里不动 DOM，所以都兼容；
     这几个动态文案都要短，8 个字的"（这句没配音）"在 63px 里会被截掉。 */
  .oakbtns { display:flex; flex-wrap:nowrap; gap:3px; margin-top:7px; align-items:stretch; }
  .oakbtns a, .oakbtns span { flex:1 1 0; min-width:0; text-align:center;
               font-size:clamp(10.5px, 1.1vw, 11.5px); padding:3px 4px;
               border-radius:9px; border:1px solid #d8c49a; background:#fff8e6;
               color:#a8802a; text-decoration:none; cursor:pointer; white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; }
  .oakbtns a:hover, .oakbtns span:hover { background:#ffefcf; }
  /* 图标用伪元素加在文字前面：文字标签就能完整显示，JS 改 textContent
     （彩蛋"听喵喵说"、缓冲中…）也不会把图标冲掉。
     注：这三个不透明图标会让文字被省略号挤掉（"宝可梦课堂" 57px + 图标 15px
     在 71px 按钮里放不下），所以留一条 #oakbtns-icons 开关方便随时打开。 */
  #oakbtns-icons .oakbtns a:before, #oakbtns-icons .oakbtns span:before { margin-right:3px; }
  #oakbtns-icons .oakbtns a:before { content:"📋 "; }
  #oakbtns-icons #oakvoice:before { content:"🔊 "; }
  #oakbtns-icons #oakvideoBtn:before { content:"📺 "; }
  #oakvoice.loading { background:#f4eee1; color:#9c8c6a; cursor:default; }
  #oakvoice.loading:hover { background:#f4eee1; }
  .oakshadow { position:absolute; left:8%; right:8%; bottom:-6px; height:14px; z-index:-1;
               background:radial-gradient(ellipse at 50% 50%,rgba(80,40,10,.30),rgba(80,40,10,0) 70%);
               transition:transform .3s; }
  #oaktab { position:fixed; left:14px; bottom:14px; z-index:61; display:none;
            width:52px; height:52px; border-radius:50%; overflow:hidden; cursor:pointer;
            border:2px solid var(--gold); box-shadow:0 6px 16px rgba(90,45,10,.34);
            background:#fff8e6; }
  #oaktab img { width:100%; height:100%; display:block; image-rendering:pixelated; }
  /* ---- 火箭队彩蛋：喵喵接管时的紫色主题 ---- */
  .oak-egg #oakpanel { background:linear-gradient(160deg,rgba(248,242,255,.97),rgba(233,220,250,.95));
                       border-color:#8b5cf6; }
  .oak-egg .oaktitle { color:#7c3aed; }
  .oak-egg .oakx { color:#7c3aed; }
  .oak-egg .oakhead { border-color:#7c3aed;
                      background:radial-gradient(circle at 50% 32%,#fbf7ff,#e7dcf7); }
  .oak-egg .oakbubble { background:#faf7ff; border-color:#d9c9f2; color:#4b3b63; }
  .oak-egg .oakbubble:hover { background:#f2ebff; border-color:#c3aee8; }
  .oak-egg .oakbtns a, .oak-egg .oakbtns span { color:#7c3aed; border-color:#c9b6ea;
                      background:#f7f1ff; }
  .oak-egg .oakbtns a:hover, .oak-egg .oakbtns span:hover { background:#efe6ff; }
  .oak-egg .oakscan { background:linear-gradient(180deg,rgba(255,120,200,0),
                      rgba(255,120,200,.28),rgba(255,120,200,0)); }
  .oak-egg .oakmore { border-top-color:#b79ae0; }
  /* 喵喵不是博士的脸，别再眨眼了 */
  .oak-egg .oakblink { display:none !important; animation:none !important; }
  .oak-egg .oakshadow { background:radial-gradient(ellipse at 50% 50%,
                      rgba(60,20,90,.30),rgba(60,20,90,0) 70%); }
  /* ---- 喵喵"来袭"过渡：先抖一下 + 顶上一行红字，再变身 ----
     直接换头像太像页面出 bug；先给一个"信号被干扰"的提示，玩家才知道是有人闯进来了。 */
  .oakalarm { display:none; margin:-2px 0 6px; padding:3px 8px; border-radius:8px;
              font-size:11.5px; text-align:center; letter-spacing:.5px;
              color:#b3261e; background:#ffe9e6; border:1px solid #f0b4ae; }
  #oakwrap.oak-alert .oakalarm { display:block; }
  #oakwrap.oak-alert #oakcard { animation:oakshake .16s linear 0s 6; }
  @keyframes oakshake {
    0%,100% { transform:translateX(0); }
    25% { transform:translateX(-3px) rotate(-.4deg); }
    75% { transform:translateX(3px) rotate(.4deg); }
  }
  #oakwrap.oak-alert #oakpanel { border-color:#f0b4ae;
              box-shadow:0 0 0 3px rgba(179,38,30,.12),0 12px 30px rgba(90,45,10,.30); }
  #oakwrap.oak-alert .oakbubble { border-color:#f0b4ae; }
  @media (max-width:860px){
    /* 手机端：默认贴底；只有「今日研究课题」浮窗出现时才上移（body.taskon）。
       浮窗高度实测 128px，所以上移时留 138px。
       宽度 232→248：三个按钮要待在一行，之前 210px 内宽连文字都放不下。 */
    #oakwrap { width:248px; bottom:14px; left:10px; transition:bottom .18s; }
    .oakhead { width:64px; height:64px; }
    .oakbubble { font-size:11.5px; min-height:70px; }
    /* 图标让位：窄屏只用文字，"宝可梦课堂"这种长标签才不会被省略号吃掉。
       上面图标规则用的是 #oakvoice:before / #oakvideoBtn:before（ID 选择器），
       这里必须同级甚至更强，否则压不住——曾因此白测一轮：图标还在，多占 ~15px。 */
    .oakbtns a:before, .oakbtns span:before,
    .oakbtns a#tasklink:before, .oakbtns #oakvoice:before, .oakbtns #oakvideoBtn:before {
      content:none !important; margin-right:0; }
    .oakbtns a, .oakbtns span { font-size:11px; padding:3px 5px; }
    #oakpanel { padding:10px 9px 12px; }
    #oaktab { left:10px; bottom:14px; width:46px; height:46px; transition:bottom .18s; }
    body.taskon #oakwrap { bottom:138px; }
    /* 超窄屏（iPhone SE 320/360 竖屏）：按钮再缩一档 */
    @media (max-width:400px){
      #oakwrap { width:266px; }
      #oakpanel { padding:10px 8px 12px; }
      .oakbtns a, .oakbtns span { font-size:10.5px; padding:3px 4px; }
      .oakbtns { gap:3px; }
    }
    body.taskon #oaktab { bottom:138px; }
  }
  /* ---- 宝可梦课堂：点开才加载 B 站播放器 ---- */
  #oakvideo { display:none; position:fixed; inset:0; z-index:80; background:rgba(20,15,10,.86);
              padding:24px 12px; overflow:auto; }
  #oakvideo.on { display:block; }
  .oakvbox { max-width:880px; margin:24px auto; background:#fffaf0; border-radius:14px;
             padding:12px 14px 14px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
  .oakvtop { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .oakvtop b { flex:1; color:var(--red); font-size:15px; }
  .oakvtop span { cursor:pointer; color:#b98a2f; font-size:16px; padding:2px 6px; }
  .oakvframe { position:relative; padding-top:56.25%; background:#000; border-radius:10px;
               overflow:hidden; }
  .oakvframe iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  /* 手机上让弹窗更贴边，画面更大 */
  @media (max-width:560px){
    #oakvideo { padding:8px 6px; }
    #oakvideo .oakvbox { margin:8px auto; padding:8px 8px 10px; }
    .oakvtop b { font-size:14px; }
  }
  @media (prefers-reduced-motion:reduce){
    .oakhead, .oakscan, .oakblink { animation:none; }
  }
  /* ---- 真新镇的音乐：右下角小按钮，默认关闭（带斜杠） ---- */
  #bgm { position:fixed; right:14px; bottom:14px; z-index:63; width:42px; height:42px;
         border-radius:50%; background:#fff8e6; border:2px solid var(--gold);
         box-shadow:0 6px 16px rgba(90,45,10,.28); cursor:pointer;
         display:flex; align-items:center; justify-content:center;
         font-size:20px; line-height:1; color:#b98a2f; user-select:none; }
  #bgm:hover { background:#ffefcf; }
  #bgm.on { color:var(--red); border-color:var(--red); background:#fff2ea; }
  #bgm .slash { position:absolute; width:28px; height:2.5px; background:#c0392b;
                border-radius:2px; transform:rotate(-45deg); pointer-events:none; }
  #bgm.on .slash { display:none; }
  #bgm .note { pointer-events:none; }
  @media (max-width:860px){
    /* 手机上「今日课题」是贴底横条，按钮要抬到它上面 */
    #bgm { right:10px; bottom:14px; width:38px; height:38px; font-size:18px;
           transition:bottom .18s; }
    body.taskon #bgm { bottom:138px; }
  }
  section { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08);
            padding:20px; margin-bottom:20px; }
  section h2 { color:var(--red); font-size:20px; border-left:5px solid var(--gold);
               padding-left:10px; margin-bottom:14px; }
  section h3 { color:var(--red); font-size:16px; margin:16px 0 8px; }
  section h4 { margin:16px 0 8px; font-size:15px; color:#b98a2f; }
  p, li { font-size:14px; line-height:1.9; color:#444; }
  .sub { background:#fff7e6; border:1px solid #f0d9a8; border-radius:10px;
         padding:12px 14px; font-size:13px; line-height:1.9; color:#5a4a3a; margin-bottom:12px; }
  /* 宝可梦详情页的「拍过它的训练家」：上面紧挨着照片墙，必须留出间隔
     （作者反馈"和上面照片没有间隔"）。.sub 本身只有下边距，所以这里补上边距。 */
  .pktrainers { margin-top:20px; }
  .btn { display:inline-block; margin-top:6px; padding:8px 16px; background:var(--gold);
         color:#5a3a00; border-radius:18px; text-decoration:none; font-size:13px; font-weight:bold; }
  .ph { border:2px dashed #d8c49a; border-radius:10px; background:#fffaf0;
        color:#b09a6a; text-align:center; padding:30px 10px; font-size:13px; margin:10px 0; }
  .ver { margin-bottom:14px; }
  .ver h4 { font-size:16px; color:var(--red); margin-bottom:4px; }
  .ver ul { padding-left:22px; font-size:13px; line-height:1.9; color:#444; }
  ul.nobullet { list-style:none; padding-left:4px; }
  .steps { padding-left:20px; }
  .steps li { margin-bottom:6px; }
  .totals { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
  .total-card { flex:1; min-width:110px; background:#fff7e6; border:1px solid #f0d9a8;
                border-radius:10px; text-align:center; padding:12px 8px; }
  .total-card .num { font-size:26px; font-weight:bold; color:var(--red); }
  .total-card .lbl { font-size:12px; color:#8a7a5a; margin-top:4px; }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { background:#faf3e3; color:#7a5a30; padding:7px 6px; text-align:left; }
  td { padding:7px 6px; border-bottom:1px solid #f0e6d2; }
  .rank { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center;
          border-radius:50%; background:#eee; font-size:12px; font-weight:bold; }
  .r1 { background:var(--gold); color:#fff; } .r2 { background:#c0c0c0; color:#fff; }
  .r3 { background:#cd7f32; color:#fff; }
  .bar { height:10px; background:#f0e0c0; border-radius:5px; overflow:hidden; min-width:80px; }
  .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--gold)); }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
  .poke { background:#fffaf0; border:1px solid #f0dcb0; border-radius:10px; padding:10px; text-align:center; }
  .poke .n { font-size:12px; color:#a08c66; }
  .poke .name { font-size:15px; font-weight:bold; margin:2px 0; }
  .poke .c { color:var(--red); font-size:13px; }
  .feed { font-size:13px; }
  .feed .frow { overflow:hidden; padding:7px 4px; border-bottom:1px dashed #eee; }
  .feed img { width:44px; height:44px; object-fit:cover; border-radius:6px;
              float:left; margin-right:8px; background:#eee; cursor:zoom-in; }
  .feed .t { color:#a08c66; font-size:11px; }
  .feed .pname { color:#2a7ae2; cursor:pointer; font-weight:bold; }
  .empty { color:#a08c66; text-align:center; padding:16px; font-size:13px; }
  footer { text-align:center; font-size:12px; color:#a08c66; padding:18px; }
  /* 页脚：大木博士的座右铭（2026-09-19 加；访问统计那两行已按作者要求撤掉） */
  footer .fmotto { color:#c0392b; }
  .videobox { position:relative; width:100%; max-width:640px; margin:12px auto;
              overflow-anchor:none; }
  .videobox::before { content:""; display:block; padding-top:56.25%; }
  .videobox iframe { position:absolute; top:0; left:0; width:100%; height:100%;
                     border:none; border-radius:10px; background:#222; }
  .links { text-align:center; margin:12px 0; }
  .links a { display:inline-block; margin:4px 6px; padding:8px 14px; background:var(--red);
             color:#fff; border-radius:18px; text-decoration:none; font-size:13px; }
  .hero { background:linear-gradient(135deg,#f9f3e3,#ffe9c7); padding:24px 18px; text-align:center;
          border-radius:12px; margin-bottom:20px; border:1px solid #f0d9a8;
          box-shadow:0 2px 8px rgba(0,0,0,.06); }
  .hero h3 { color:var(--red); font-size:20px; margin-bottom:8px; }
  .hero p { font-size:14px; color:#5a4a3a; line-height:1.9; }
  .feature { display:flex; gap:16px; align-items:center; margin:14px 0; }
  .feature .ph { flex:0 0 40%; margin:0; }
  .feature .fimg { flex:0 0 40%; max-width:40%; border-radius:10px;
                   border:1px solid #eee; box-shadow:0 2px 6px rgba(0,0,0,.08); }
  .feature .txt { flex:1; }
  .feature .txt h4 { color:var(--red); font-size:16px; margin-bottom:4px; }
  .lookimg { display:block; width:100%; max-width:560px; margin:0 auto 6px;
             border-radius:10px; border:1px solid #eee;
             box-shadow:0 3px 10px rgba(0,0,0,.12); }
  .feature:nth-child(even) { flex-direction:row-reverse; }
  .rotom { display:flex; gap:16px; align-items:center; margin:12px 0 2px; }
  .rotom img { width:200px; max-width:46%; height:auto; flex:0 0 auto;
               max-height:130px; object-fit:contain;
               border-radius:12px; border:1px solid #eee;
               box-shadow:0 2px 6px rgba(0,0,0,.08); }
  .rotom .txt { flex:1; }
  .rotom .txt h4 { color:var(--red); font-size:16px; margin-bottom:4px; }
  /* 洛托姆图鉴机**整个板块做成横幅**（作者要求）：暖金渐变 + 金边 + 阴影，
     卡片内部再分区——洛托姆介绍在上，许愿区在下（半透明白底，像嵌在横幅里）。
     顺序：洛托姆介绍 → 许愿区。手机端许愿列表一列，桌面两列。 */
  .rotomsec { position:relative; overflow:hidden;
    background:linear-gradient(135deg,#fff8e6 0%,#ffeacb 55%,#ffe2bd 100%);
    border:2px solid #eccf92;
    box-shadow:0 6px 20px rgba(160,110,20,.14), inset 0 1px 0 #fffdf6; }
  .rotomsec:before { content:''; position:absolute; left:0; right:0; top:0; height:5px;
    background:linear-gradient(90deg,var(--red),#f0a03c,var(--red)); }
  .rotomsec h2 { border-left-color:var(--red); }
  /* 许愿区：横幅里的一块半透明白底面板 */
  .wishbox { position:relative; margin:14px 0 2px;
             padding:14px 16px 12px; border-radius:12px;
             background:rgba(255,255,255,.72); border:1px solid #ecd9ad; }
  .wishbox h4 { color:#a8802a; font-size:15px; font-weight:bold; margin:0 0 8px; }
  .wishform { display:flex; gap:8px; margin:9px 0; }
  .wishform input { flex:1; min-width:0; padding:9px 12px; font-size:14px;
    border:1px solid #e2d3b4; border-radius:9px; background:#fff; color:#5a4a3a; }
  .wishform input:focus { outline:none; border-color:#c9a45c; }
  .wishform button { flex:none; padding:9px 20px; font-size:14px; font-weight:bold;
    color:#fff; background:#c9705f; border:none;
    border-radius:9px; cursor:pointer; }
  .wishform button:hover { background:#bd6252; }
  .wishform button[disabled] { background:#dcc7c0; cursor:default; }
  /* 列表两列（作者要求）；窄屏一列 */
  .wishlist { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; }
  .wishrow { display:flex; align-items:center; gap:8px; padding:6px 10px;
    background:#fff; border:1px solid #f2e7d0; border-radius:8px; font-size:13px; }
  .wishrow .wt { flex:1; min-width:0; color:#4a3c2c; word-break:break-word; }
  .wishrow .ww { flex:none; color:#a08c66; font-size:11px; }
  .wishrow .wv { flex:none; cursor:pointer; color:#5b7fa6; font-size:11px;
    padding:2px 8px; border:1px solid #dfe8f2; border-radius:8px; background:#f8fbfe; }
  .wishrow .wv:hover { background:#eef5fc; }
  /* 许愿区分页条（每页 10 条） */
  .wishpager { display:flex; align-items:center; justify-content:center;
               gap:12px; margin-top:8px; font-size:12px; color:#a2937a; }
  .wishpager .wpbtn { cursor:pointer; padding:3px 11px; border-radius:8px;
    border:1px solid #e4d9c0; background:#fffdf7; color:#a8802a; }
  .wishpager .wpbtn:hover { background:#fdf7e8; }
  .wishpager .wpinfo { color:#9c8c6a; }
  /* 手机端：许愿列表一列（两列太挤） */
  @media (max-width:700px){ .wishlist { grid-template-columns:1fr; } }
  @media (max-width:560px){ .feature { flex-direction:column; } .feature:nth-child(even){ flex-direction:column; }
    .feature .fimg { flex:none; max-width:100%; }
    /* 手机端卡片变一列：文字排在图片上方（HTML 里图片在前，用 order 调换），
       并把整体改为左对齐、去掉多余的 gap，读起来更像"标题→说明→配图" */
    .feature { gap:10px; align-items:stretch; }
    .feature .txt { order:1; }
    .feature .fimg, .feature .ph { order:2; }
    /* 同理：轮播那块的图文卡片（.rotom）手机端也统一成文字在上 */
    .rotom { flex-direction:column; gap:10px; align-items:stretch; }
    .rotom .txt { order:1; }
    .rotom img { order:2; width:100%; max-width:100%; } }
  .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .toolbar select { padding:8px 10px; font-size:14px; border:1px solid #d8c49a;
                    border-radius:8px; background:#fffaf0; color:#5a4a3a; }
  .toolbar .info { font-size:13px; color:#8a7a5a; }
  .gallery { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-start;
            overflow-anchor:none; }
  .gallery .card { flex:0 1 150px; min-width:0; }
  /* 手机端：两列铺满。原来卡片固定 150px、加上内外边距后容器只剩 281px，
     放不下 150+12+150=312 两个卡片，会被挤成一列。
     这里同时用 margin 代替 gap、并给不支持 calc() 的老浏览器留 width:48% 兜底。 */
  @media (max-width:560px){
    main { padding:20px 8px 50px; }
    section { padding:15px; margin-bottom:14px; }
    .gallery { gap:0; text-align:center; }
    .gallery .card {
      display:inline-block; vertical-align:top; flex:0 0 auto;
      width:48%; width:calc(50% - 8px); max-width:calc(50% - 8px);
      margin:0 4px 8px; }
  }
  .card { background:#fffaf0; border:1px solid #f0dcb0; border-radius:10px; padding:8px;
          text-align:center; cursor:zoom-in; transition:transform .1s; }
  .card:hover { transform:scale(1.03); }
  /* 卡片图片：正方裁切。
     ★ height:auto 不能省：卡片给 <img> 写了 width/height 属性（用来预留空间），
       而 Chromium 会让"属性尺寸"压过 aspect-ratio（实测渲染成 132×224 的长方形，
       作者报"图库图片比例怎么这么奇怪了"）。加 height:auto 后由 aspect-ratio 定高。 */
  .card img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
              border-radius:8px; background:#eee; display:block; }
  .card .cap { font-size:11px; color:#8a7a5a; margin-top:6px; word-break:break-all; line-height:1.5; }
  /* 灯箱：整块（图片 + 说明）竖直居中，说明紧跟在图片下方；
     「点击任意位置关闭」固定在屏幕底部 */
  #lightbox { display:none; position:fixed; inset:0; background:rgba(20,15,10,.92);
              z-index:99; text-align:center; padding:12px 12px 44px;
              flex-direction:column; align-items:center; justify-content:center;
              gap:8px; overflow:auto; }
  #lightbox.open { display:flex; }
  #lightbox img { position:static; max-width:92vw; max-height:64vh; border-radius:10px;
                  box-shadow:0 4px 30px rgba(0,0,0,.6); flex:none; }
  #lightbox .lbot { position:static; display:flex; flex-direction:column; align-items:center;
                    gap:6px; width:100%; max-width:92vw; flex:none; }
  #lightbox .lbot > * { max-width:100%; }
  #lightbox .lcap, #lightbox .lcmt { width:100%; text-align:center; }
  /* 灯箱说明行里的可点链接（训练家 ID → 主页；宝可梦名 → 图鉴卡）：
     观感保持和普通文字一致（白字、不带下划线），悬停才给下划线提示可点。 */
  #lightbox .lclink { color:inherit !important; text-decoration:none !important; cursor:pointer; }
  #lightbox .lclink:hover { text-decoration:underline !important; }
  #lightbox .lcap { color:#fff; font-size:14px; word-break:break-word; }
  #lightbox .lcmt { color:#f6b93b; font-size:13px; font-style:italic;
                    word-break:break-word; }
  #lightbox .lcard { display:none; color:var(--gold); font-size:14px;
                     text-decoration:none; }
  #lightbox .lcard:hover { text-decoration:underline; }
  #lightbox .lclose { position:fixed; left:0; right:0; bottom:10px; color:#ccc;
                      font-size:13px; pointer-events:none; }
  @media (max-width:560px){
    #lightbox img { max-height:56vh; }
    #lightbox .lcap { font-size:13px; }
    #lightbox .lcmt { font-size:12px; }
  }
  #rankbox { display:none; position:fixed; inset:0; background:rgba(20,15,10,.92);
             z-index:99; padding:40px 16px; text-align:center; overflow:auto; }
  .rankpanel { display:inline-block; background:#fff; border-radius:12px; padding:18px 22px;
               max-width:420px; width:100%; text-align:left; }
  .rankpanel h3 { color:var(--red); font-size:17px; margin-bottom:10px; }
  .rankpanel .lclose { color:#a08c66; text-align:center; margin-top:10px; font-size:12px; }
  .poke { cursor:pointer; }
  #tip { position:fixed; z-index:98; background:#fff; border-radius:10px; padding:10px 14px;
         box-shadow:0 4px 16px rgba(0,0,0,.25); border:1px solid #f0d9a8; max-width:270px;
         pointer-events:none; }
  #tip h4 { color:var(--red); font-size:14px; margin-bottom:6px; }
  #tip table { width:100%; font-size:12px; }
  #tip td { padding:2px 6px 2px 0; border:none; }
  .loginbox { max-width:360px; margin:0 auto; }
  .loginbox input { width:100%; padding:10px; font-size:15px; margin-bottom:10px;
                    border:1px solid #d8c49a; border-radius:8px; background:#fffaf0; }
  .loginbox button { width:100%; padding:10px; font-size:15px; background:var(--red);
                     color:#fff; border:none; border-radius:8px; cursor:pointer; }
  .mine { font-size:14px; line-height:2.1; }
  .mine b { color:var(--red); }
  .switch { cursor:pointer; color:#2a7ae2; }
  /* ---------------- 训练家称号徽章（训练家中心 ID 右侧）----------------
     做法：渐变描边用 border-image（不占额外层级），流光用 ::after 扫过。
     每个等级一套配色，越稀有越华丽；最稀有的两个（收藏大师/神兽）才常驻流光。 */
  .idline { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
  .tbadge { position:relative; display:inline-block; overflow:hidden;
            padding:2px 12px 3px; border-radius:999px; border:2px solid transparent;
            font-size:12.5px; font-weight:bold; letter-spacing:.4px; line-height:1.7;
            white-space:nowrap; color:#7a5200;
            background:radial-gradient(120% 140% at 20% 0%,#fffdf5 0%,#ffefc2 70%,#f7dfa0 100%);
            border-image:linear-gradient(135deg,#f6d365,#b8860b 45%,#ffeaa7,#c9971f) 1;
            text-shadow:0 1px 0 rgba(255,255,255,.6); }
  .tbadge::after { content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
                   background:linear-gradient(100deg,rgba(255,255,255,0) 0%,
                              rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%);
                   transform:skewX(-18deg); pointer-events:none; }
  /* 收藏大师：金 */
  .tbadge.tt-master { color:#6a4700; background:linear-gradient(180deg,#fffdf0,#ffe9a8);
                      border-image:linear-gradient(135deg,#f7d774,#b8860b 45%,#fff3c4,#c9971f) 1;
                      box-shadow:0 1px 6px rgba(180,130,20,.35); }
  /* 资深助手：红金 */
  .tbadge.tt-aid3 { color:#7a2a1a; background:linear-gradient(180deg,#fff7f2,#ffd9c2);
                    border-image:linear-gradient(135deg,#ffb27a,#c0392b 55%,#ffd9a8) 1; }
  /* 得力助手：红 */
  .tbadge.tt-aid2 { color:#7a2020; background:linear-gradient(180deg,#fff6f6,#ffd6d6);
                    border-image:linear-gradient(135deg,#ff9c9c,#c0392b 60%,#ffc9a8) 1; }
  /* 见习助手：灰蓝 */
  .tbadge.tt-aid1 { color:#3f5060; background:linear-gradient(180deg,#f8fbfd,#dde7ef);
                    border-image:linear-gradient(135deg,#b6c8d8,#6b7f94 60%,#dbe6ef) 1; }
  /* 喜欢X系的：青绿 */
  .tbadge.tt-like { color:#0d5c47; background:linear-gradient(180deg,#f3fffb,#c8f5e6);
                    border-image:linear-gradient(135deg,#8fe8cf,#1f9d7a 60%,#d6fbef) 1; }
  /* 喜欢神兽的：紫金 */
  .tbadge.tt-legend { color:#4a2a70; background:linear-gradient(180deg,#faf5ff,#e6d6ff);
                      border-image:linear-gradient(135deg,#c9a3ff,#6b3fa0 55%,#ffe6a8,#c9a3ff) 1;
                      box-shadow:0 1px 6px rgba(110,60,170,.32); }
  /* 最喜欢XXX的：粉 */
  .tbadge.tt-fav { color:#7a2246; background:linear-gradient(180deg,#fff6fa,#ffd9e8);
                   border-image:linear-gradient(135deg,#ffb3d1,#d1477f 60%,#ffe3ef) 1; }
  /* 新人：素雅（还没有照片） */
  .tbadge.tt-new { color:#5a5340; background:linear-gradient(180deg,#fffdf7,#f0ece0);
                   border-image:linear-gradient(135deg,#e0d6bd,#b9ab8c 60%,#f2ecdd) 1;
                   font-weight:normal; }
  @keyframes tshine { 0%{left:-60%} 55%{left:135%} 100%{left:135%} }
  .tbadge.tt-master::after, .tbadge.tt-legend::after { animation:tshine 3.4s ease-in-out infinite; }
  .tbadge.tt-aid3::after, .tbadge.tt-aid2::after { animation:tshine 6.5s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){ .tbadge::after { animation:none !important; } }
  @media (max-width:560px){ .tbadge { font-size:11.5px; padding:0 9px 1px; } }
  /* ---------------- 称号一览页 /titles ---------------- */
  .tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
           gap:11px; margin:10px 0 4px; }
  .tcard { border:1px solid #efe3c8; border-radius:12px; padding:10px 12px;
           background:linear-gradient(180deg,#fffdf7,#fff6e2);
           transition:transform .12s ease, box-shadow .12s ease; }
  .tcard[onclick] { cursor:pointer; }
  .tcard[onclick]:hover { transform:translateY(-2px);
                          box-shadow:0 4px 12px rgba(170,130,40,.18); }
  .tcard.on { border-color:#e0a94a; box-shadow:0 0 0 2px #fff, 0 0 0 4px #f2d08a; }
  .tcard .tbadge { font-size:12px; }
  .tcard.lock { background:#f7f6f2; border-color:#e8e6df; }
  .tcard.lock .tbadge { filter:grayscale(1) opacity(.5); }
  .tcard.lock .tcond { color:#a9a49a; }
  .tcond { font-size:11.5px; color:#8a7a5a; line-height:1.6; margin-top:7px; }
  .tprog { display:inline-block; margin-top:4px; font-size:11px; color:#b58a2f;
           background:#fff8e6; border:1px solid #f0d9a8; border-radius:999px;
           padding:0 8px; }
  .tcard.lock .tprog { color:#a9a49a; background:#f2f1ec; border-color:#e6e4dc; }
  .tcnt { font-size:12px; color:#b09a6a; font-weight:normal; margin-left:9px; }
  .tcard .tbadge::after { animation:none; }
  .tcard.on .tbadge.tt-master::after,
  .tcard.on .tbadge.tt-legend::after { animation:tshine 3.4s ease-in-out infinite; }
  @media (max-width:560px){ .tgrid { grid-template-columns:1fr 1fr; gap:8px; } }
  /* ---------------- 称号挑选（训练家中心「我的称号」） ---------------- */
  .tchips { display:flex; flex-wrap:wrap; gap:9px; margin:9px 0 2px; }
  .tchip { display:inline-block; cursor:pointer; border-radius:999px;
           transition:transform .12s ease, filter .12s ease; }
  .tchip .tbadge { filter:grayscale(.55) opacity(.62); }
  .tchip:hover { transform:translateY(-2px); }
  .tchip:hover .tbadge { filter:grayscale(0) opacity(1); }
  .tchip.on { box-shadow:0 0 0 2px #fff, 0 0 0 4px #e0a94a, 0 2px 8px rgba(160,110,20,.35); }
  .tchip.on .tbadge { filter:none; }
  .tchip .tbadge::after { animation:none; }        /* 选择区不跑流光，免得眼花 */
  .tchip.on .tbadge.tt-master::after,
  .tchip.on .tbadge.tt-legend::after { animation:tshine 3.4s ease-in-out infinite; }
  @media (max-width:560px){ .tchips { gap:7px; } }
  /* 门面照按钮（训练家中心"我的照片"里） */
  .favbtn { cursor:pointer; color:#b98a2f; margin-left:10px; }
  .favbtn:hover { text-decoration:underline; }
  .favbtn.on { color:#d0342c; font-weight:bold; }
  .favbtn.dis { color:#c8bda6; cursor:not-allowed; }
  .del { cursor:pointer; color:var(--red); margin-left:10px; }
  .dextabs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
  .dextabs a { padding:6px 12px; border-radius:999px; border:1px solid var(--red);
               color:var(--red); font-size:13px; text-decoration:none; }
  .dextabs a.on { background:var(--red); color:#fff; }
  .dexgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .dexcard { display:block; border:1px solid #eee; border-radius:10px; padding:10px 12px;
             color:inherit; text-decoration:none; background:#fffaf0; }
  .dexcard:hover { border-color:var(--red); }
  .dexcard .no { color:#b98a2f; font-size:12px; }
  .dexcard .nm { font-size:15px; font-weight:bold; }
  .dexcard .cnt { color:#888; font-size:12px; }
  .dexthumb { display:block; width:100%; height:88px; object-fit:cover;
              border-radius:8px; margin-bottom:6px; background:#eee; }
  .dexsearch { display:flex; gap:8px; margin:10px 0; max-width:460px; }
  .dexsearch input { flex:1; padding:8px 10px; border:1px solid #d8c49a; border-radius:8px;
                     background:#fffaf0; font-size:14px; }
  .dexsearch button { padding:8px 16px; background:var(--red); color:#fff; border:none;
                      border-radius:8px; cursor:pointer; font-size:14px; }
  .photowall { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;
    /* 关掉滚动锚定：图片陆续加载/撑高时，浏览器会自行调整滚动位置（"锚定"），
       表现就是"滚了却像没动"。这些区块内容加载中会变高，关掉更符合直觉 ——
       配合页面里那段"滚动守卫"（把用户滚到的位置钉住）一起解决"加载中滚不动"。 */
    overflow-anchor:none; }
  .photowall img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px;
                   cursor:zoom-in; background:#eee; }
  /* 照片格子（包一层是为了挂"置顶"角标）+ 置顶角标 */
  .photowall .pcell { position:relative; display:block; line-height:0; }
  .photowall .pinbadge { position:absolute; left:6px; top:6px; z-index:2;
    background:rgba(208,52,44,.92); color:#fff; font-size:11px; line-height:1.5;
    padding:1px 6px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.25); }
  .photowall .pcell[data-pin="1"] img { outline:2px solid var(--red); outline-offset:-2px; }
  /* 置顶按钮（训练家中心"我的照片"里） */
  .pinbtn { cursor:pointer; color:#2a7ae2; margin-left:10px; }
  .pinbtn:hover { text-decoration:underline; }
  .pinbtn.on { color:#d0342c; font-weight:bold; }
  .pinbtn.dis { color:#c8bda6; cursor:not-allowed; }
  /* 照片墙排序条：时间排序为默认 */
  .wallsort { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
              margin:6px 0 8px; font-size:12px; color:#8a7a5a; }
  /* 训练家主页 · 照片墙以上的版面（作者让我来定，2026-09-19）：
       训练家 xxx
       ┌─ 信息文本 ─┬─ 代表照片 ─┬─ 活跃热力图 ─┐   ← 三块并排，只占一行
       照片墙（公开 N 张）
     设计理由：
       · 三块并排 = 竖向只占一行的高度 → 照片墙标题能提到最上（此前分两行要低 ~200px）
       · 三块本身高度接近（文本≈148 / 照片≈150 / 热力图 215），并排不会显得空
       · 照片高度用 stretch 跟齐左侧文本，object-fit:contain 保证不裁切不变形
       · 每块给一条淡背景 + 内边距，视觉上成组、也避免"糊在一起"
       · 阅读顺序保持：先信息（左）、再代表照片（中）、再活跃度（右）
     没设代表照片时自动变两栏（文本 + 热力图），结构与以前一致。 */
  /* 三栏并排的宽度是硬约束：内容区 856px = 文本 + 照片 + 热力图 + 2×间距。
     实测 230+320+304+28 = 882 放不下（热力图会被挤到第二行，反而更矮不了），
     所以这样分配：
       · 文本：自然宽度（约 480，正好放下最长那行不折行）
       · 照片：列宽 200，但高度用 stretch 跟着文本块 → 图片按 4:3 等比放大到
               约 266×200，视觉上并不小；object-fit:contain 保证不变形不裁切
       · 热力图：304（本身宽度，不再压缩）
     三块高度都跟齐成一行，照片墙标题因此能提到 y≈556。 */
  /* 三块**始终**并排（作者要求：没设门面照时，热力图也要在信息文本右侧那个位置，
     而不是掉到下一行）。没有照片时就是"文本 + 热力图"两栏，热力图位置与有照片时一致。
     间距 28px：14px 时照片和热力图贴得太近（作者反馈）。宽度仍放得下：
       文本 264 + 28 + 照片 220 + 28 + 热力图 304 = 844 < 856 */
  .tcols { display:flex; align-items:stretch; gap:28px; flex-wrap:nowrap;
           justify-content:flex-start; }
  .tcols.hasfav { display:flex; }
  /* 宽度分配（内容区 856px）：文本(弹性) + 照片 270 + 热力图 271 + 2×14 = 放得下。
     取舍：照片沿用作者认可的尺寸再小一点点（300→270），
     热力图这栏可以让（12 列格子在窄栏里照样排得下，格子略小），文本弹性收缩。 */
  .tcols .mine { flex:1 1 180px; min-width:150px; max-width:340px; }
  .heatcol { flex:0 1 auto; min-width:190px; }
  .heatcol h3 { margin-top:0; white-space:nowrap; }   /* 并排时标题不折行 */
  /* 热力图这栏可以收窄：格子略小，下面的小字允许换行，不再撑宽整栏 */
  .heatcol .hcell, .heatcol .heatleg span { width:13px; height:13px; }
  .heatcol .heatsum, .heatcol .heatleg { white-space:normal; }
  .heatcol .heatwrap { padding:8px 0; }
  /* 代表照片：高度跟着左侧文本块（stretch），图片等比 contain，不裁切不变形。
     宽度按作者反馈逐步收窄：300 → 270 → 240 → 220。 */
  .favorbig { flex:0 1 auto; display:flex; flex-direction:column; margin:0;
              width:220px; min-width:120px; max-width:220px; min-height:0; }
  .favorbig img { display:block; width:100%; height:100%; min-height:0;
    object-fit:contain; border-radius:10px; border:1px solid #e6d5ae;
    box-shadow:0 3px 12px rgba(120,80,20,.16); cursor:zoom-in; background:#eee; }
  .favorbig figcaption { margin-top:4px; text-align:center; color:#9c8c6a;
    font-size:11px; line-height:1.35; }
  .favorbig figcaption b { color:#a8802a; }
  /* "最多"那行的宝可梦小标签：字号缩小一档，三项才放得下一行 */
  .topmon { color:#a8802a; font-size:12px; }
  .topmon b { color:var(--red); }
  .topsep { color:#d8c49a; margin:0 4px; }
  @media (max-width:860px){
    /* 中屏：文本在左，照片缩小跟在同一行，热力图换到下一行 */
    .tcols.hasfav { flex-wrap:wrap; }
    .favorbig { max-width:200px; }
  }
  @media (max-width:560px){
    /* 手机端（作者要求）：文本 / 代表照片 / 热力图 **各自单独一行**，照片居中。 */
    .tcols.hasfav { flex-wrap:wrap; align-items:flex-start; gap:10px; }
    .tcols.hasfav .mine { order:1; flex:1 1 100%; min-width:0; max-width:none; }
    .tcols.hasfav .favorbig { order:2; flex:0 0 auto; width:200px;
                              min-width:0; max-width:200px;
                              align-self:center; margin:2px auto 4px; }
    .tcols.hasfav .favorbig img { height:auto; }   /* 居中展示：按原比例，不拉伸 */
    .tcols.hasfav .favorbig figcaption { font-size:11px; }
    .tcols.hasfav .heatcol { order:3; flex:1 1 100%; min-width:0; }
  }
  .wallsort a { padding:3px 9px; border:1px solid #d8c49a; border-radius:9px;
                background:#fff8e6; color:#a8802a; text-decoration:none; }
  .wallsort a:hover { background:#ffefcf; }
  .wallsort a.on { background:var(--gold); color:#5a3a00; border-color:#c9a45c;
                   font-weight:bold; }
  .ttab { font-size:14px; }
  .ttab th { text-align:left; font-size:13px; color:#8a7a5a; padding:7px 10px 7px 0; }
  .ttime { color:#888; font-size:12px; white-space:nowrap; }
  .tthumb { width:30px; height:30px; object-fit:cover; border-radius:4px;
            cursor:zoom-in; display:block; }
  .tproof { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .tproof-item { display:flex; align-items:center; gap:4px; }
  .tproof-item span { font-size:11px; color:#5a4a3a; white-space:nowrap; }
  .dim { color:#a08c66; }
  .crybox { margin:8px 0; }
  /* 叫声题的提示语（冷门宝可梦专用）：紧跟在播放器后面，只占自己那一行，
     不再额外空一行（作者反馈悬浮窗里太高） */
  .crytip { display:inline-block; margin:2px 0 0; padding:2px 8px;
            background:#fff8e6; border:1px solid #f0d9a8; border-radius:8px;
            color:#8a6a20; font-size:12px; line-height:1.35; }
  /* 叫声播放器：**不要限制高度** —— 原来压成 30px，原生播放键几乎点不中，
     手机浏览器上更是点不动（作者报的「点不了」）。让它按原生高度显示。 */
  .crybox audio { width:100%; min-height:44px; max-width:420px;
                  vertical-align:middle; margin:4px 0; }
  .crybox .dim { font-size:12px; }
  /* 悬浮窗很窄（216px），里面的叫声播放器单独缩一号 */
  .taskfloat .crybox { margin:4px 0 0; }
  /* 同上（见 .crybox audio 的注释）：26px 高压根点不中播放键，改成按原生高度显示 */
  .taskfloat .crybox audio { display:block; width:100%; height:auto; min-height:40px;
                             margin:4px 0 2px; }
  .taskfloat .crybox .dim { display:block; font-size:11px; line-height:1.5; }
  .block { margin:14px 0; padding:14px 18px; border:1px solid #eee;
           border-radius:12px; background:#fffaf0; }
  .block h3 { color:var(--red); font-size:17px; margin-bottom:6px; }
  .block h4 { margin:10px 0 4px; font-size:15px; color:#b98a2f; }
  .block b { color:#b98a2f; }
  .block .ttab { font-size:13px; margin-top:4px; }
  .scrank { width:40px; }
  .hist-item { padding:8px 0; border-bottom:1px dashed #eee; }
  .hist-item:last-child { border-bottom:none; }
  .hist-item b { color:#b98a2f; }
  .pgdots { color:#8a7a5a; padding:0 4px; }
  .ttab td { padding:7px 10px 7px 0; }
  .heatwrap { overflow-x:auto; padding:8px 0; }
  .heatbox { display:inline-block; }
  .hmonths { display:flex; gap:4px; margin:0 0 4px 32px; }
  .hmonths span { width:15px; margin-right:4px; font-size:11px; color:#8a7a5a;
                  white-space:nowrap; overflow:visible; }
  .hrow { display:flex; }
  .hdays { display:flex; flex-direction:column; gap:4px; margin-right:8px;
           width:24px; font-size:11px; color:#8a7a5a; line-height:15px; }
  .hdays span { height:15px; }
  .hcols { display:flex; gap:4px; }
  .hcol { display:flex; flex-direction:column; gap:4px; }
  .hcell { width:15px; height:15px; border-radius:4px; background:#e8e0d2;
           cursor:default; transition:transform .08s; }
  .hcell:hover { transform:scale(1.25); outline:2px solid rgba(208,52,44,.45); }
  .hcell.h1 { background:#f7d4c0; }
  .hcell.h2 { background:#ee9b6b; }
  .hcell.h3 { background:#d0342c; }
  /* 热力图悬停提示（比浏览器自带 title 快，样式也统一） */
  #htip { position:fixed; z-index:130; background:rgba(45,33,22,.95); color:#fff;
          font-size:12px; line-height:1.5; padding:5px 9px; border-radius:7px;
          pointer-events:none; display:none; white-space:nowrap;
          box-shadow:0 4px 14px rgba(0,0,0,.3); }
  #htip b { color:#ffd479; }
  .heatleg { margin-top:10px; font-size:13px; color:#8a7a5a; display:flex;
             align-items:center; gap:5px; }
  .heatleg span { width:15px; height:15px; border-radius:4px; display:inline-block;
                  background:#e8e0d2; }
  .heatleg .h1 { background:#f7d4c0; }
  .heatleg .h2 { background:#ee9b6b; }
  .heatleg .h3 { background:#d0342c; }
  .heatsum { margin-top:6px; font-size:13px; color:#8a7a5a; }
  .podium { display:flex; justify-content:center; align-items:flex-end; gap:14px; margin:14px 0; }
  .pslot { width:165px; text-align:center; background:#fffaf0; border:1px solid #eee;
           border-radius:12px; padding:12px 8px 10px; cursor:pointer;
           box-shadow:0 2px 6px rgba(0,0,0,.08); transition:transform .15s; }
  .pslot:hover { transform:translateY(-3px); }
  .pslot.first { width:185px; padding-top:20px; border-color:var(--gold);
                 box-shadow:0 4px 12px rgba(246,185,59,.35); }
  .pmedal { font-size:26px; }
  .pno { color:#b98a2f; font-size:12px; margin-top:2px; }
  .pname { font-weight:bold; font-size:15px; margin-top:2px; }
  .pcnt { color:var(--red); font-size:13px; margin-top:2px; }
  .pby { color:#8a7a5a; font-size:11px; margin-top:2px; line-height:1.5; }
  /* 贡献者编号：整块折行，绝不从中间断开。
     "主要贡献者：弦masaya#1103" 共 18 字，领奖台卡片内宽只有 147px（约 13 字），
     以前编号会被硬折成两行（弦masaya#11 / 03），看着像排版坏了。
     现在编号单独一行居中显示，名字再长也完整。 */
  .pbyid { display:block; white-space:nowrap; text-align:center;
           color:#a8802a; font-weight:bold; }
  .pspr { width:56px; height:56px; object-fit:contain; image-rendering:pixelated; }
  @media (max-width:560px){
    .podium { gap:8px; }
    .pslot { width:auto; flex:1; min-width:0; padding:10px 4px 8px; }
    .pslot.first { width:auto; flex:1.2; padding-top:14px; }
    .pmedal { font-size:20px; }
    .pname { font-size:13px; }
    .pspr { width:44px; height:44px; }
    .pbyid { font-size:10px; }
  }
  .rspr { width:26px; height:26px; object-fit:contain; image-rendering:pixelated; flex:none; }
  .tsp { width:26px; height:26px; object-fit:contain; image-rendering:pixelated;
         margin-right:2px; vertical-align:middle; }
  .restlist { max-width:520px; margin:4px auto 0; }
  .rrow { display:flex; align-items:center; gap:10px; padding:6px 12px;
          border-bottom:1px dashed #eee; cursor:pointer; font-size:14px; }
  .rrow:hover { background:#fffaf0; }
  .rrank { color:#b98a2f; width:24px; }
  .rname { flex:1; line-height:1.35; }
  .rby { color:#8a7a5a; font-size:11px; }
  .rbyid { white-space:nowrap; }
  .rcnt { color:#888; }
  .pager { display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
           align-items:center; margin:16px 0 6px; }
  .pg { padding:4px 11px; border:1px solid #d8c49a; border-radius:6px;
        color:#b98a2f; cursor:pointer; font-size:13px; text-decoration:none; }
  .pg.on { background:var(--red); color:#fff; border-color:var(--red); }
  .taskfloat { position:fixed; right:14px; top:170px; width:216px; background:#fffaf0;
               border:1px solid var(--red); border-radius:12px; padding:14px 16px;
               font-size:13px; line-height:1.7; box-shadow:0 3px 10px rgba(0,0,0,.15);
               z-index:60; }
  .taskfloat b { color:var(--red); }
  .taskfloat a { color:#2a7ae2; }
  .tfclose { float:right; cursor:pointer; color:#b98a2f; font-size:15px; }
  /* ---- 今日课题的小图标浮窗：关掉面板后出现，点它把面板叫回来 ----
     以前点 × 就彻底没了，想再看只能刷新（作者要求留个小图标）。 */
  .tasktab { position:fixed; right:14px; top:170px; width:40px; height:40px;
             display:none; align-items:center; justify-content:center;
             background:#fffaf0; border:1px solid var(--red); border-radius:50%;
             font-size:18px; line-height:1; cursor:pointer; z-index:60;
             box-shadow:0 3px 10px rgba(0,0,0,.18); user-select:none; }
  .tasktab:hover { background:#fff2d8; }
  .tasktab .dot { position:absolute; right:1px; top:1px; width:9px; height:9px;
                  border-radius:50%; background:var(--red); border:1px solid #fffaf0; }
  .tftitle { margin-top:6px; padding-top:4px; border-top:1px dashed #e0d5c0;
             color:#b98a2f; font-size:12px; }
  .tfrow { display:flex; gap:4px; font-size:12px; line-height:1.7; }
  .tfrow span:first-child { width:16px; flex:none; }
  .tfrow b { flex:1; color:#333; font-weight:normal; overflow:hidden;
             text-overflow:ellipsis; white-space:nowrap; }
  .tfrow span:last-child { color:#888; flex:none; }
  .tflink { margin-top:6px; padding-top:4px; border-top:1px dashed #e0d5c0; }
  .tidlink { color:inherit !important; text-decoration:none !important; }
  .tidlink:hover { text-decoration:underline !important; }
  @media (max-width:860px){
    .taskfloat { top:auto; right:0; bottom:0; left:0; width:auto; max-width:none;
                 border-radius:12px 12px 0 0; border-bottom:none; }
    .taskfloat .tftitle, .taskfloat .tfrow { display:none; }
    .tfclose { font-size:16px; }
    /* 小图标在手机端也贴右上，避开底部徽章 */
    .tasktab { top:12px; right:12px; }
  }
  /* ---- 资料库顶部的收集进度条 ---- */
  .pgsect { padding-bottom:14px; margin-bottom:16px; border-bottom:1px dashed #e0d5c0; }
  .pbar { height:12px; background:#f0e6d0; border:1px solid #e3d6b8;
          border-radius:8px; overflow:hidden; margin:8px 0 4px; }
  .pbar i { display:block; height:100%; background:linear-gradient(90deg,#f6b93b,#e8503a); }
  /* ---- 研究所快报 ---- */
  .wk { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
  .wkbox { flex:1 1 180px; background:#fffaf0; border:1px solid #f0dcb0;
           border-radius:10px; padding:12px 14px; }
  .wkbox .num { font-size:22px; color:var(--red); font-weight:bold; }
  .wkbox .lb { font-size:12px; color:#8a7a5a; }
  .wkspr { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .wkspr a { text-align:center; font-size:10px; color:#8a7a5a; text-decoration:none;
             width:44px; }
  .wkspr img { width:40px; height:40px; image-rendering:pixelated; display:block; }
  .wkdays { display:flex; align-items:flex-end; gap:6px; height:110px; margin-top:10px; }
  .wkday { flex:1; text-align:center; font-size:11px; color:#8a7a5a; }
  .wkday i { display:block; background:linear-gradient(180deg,#f6b93b,#e8503a);
             border-radius:4px 4px 0 0; min-height:2px; margin-bottom:2px; }
  .wkq { background:#fffaf0; border-left:3px solid var(--gold); padding:8px 12px;
         margin-top:10px; font-size:13px; color:#5a4a3a; border-radius:0 8px 8px 0; }
  /* ---- 猜照片小游戏 ---- */
  .qzbox { text-align:center; }
  .qzimg { width:min(320px,80vw); height:min(320px,80vw); object-fit:cover;
           border-radius:14px; border:3px solid #f0dcb0; background:#eee;
           filter:blur(12px); transition:filter .25s; }
  .qzimg.show { filter:none; }
  .qzopts { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }
  .qzopt { padding:10px 18px; border:1px solid #d8c49a; border-radius:10px;
           background:#fffaf0; cursor:pointer; font-size:14px; color:#5a4a3a; }
  .qzopt:hover { background:#fff2d8; }
  .qzopt.ok { background:#2e9e5b; color:#fff; border-color:#2e9e5b; }
  .qzopt.no { background:#c0392b; color:#fff; border-color:#c0392b; }
  .qzstat { font-size:13px; color:#8a7a5a; }
  .qzbig { font-size:15px; color:var(--red); font-weight:bold; }
  /* ---- 网页版图鉴卡（分层 + 全息镭射，参考 RuiC-card-skill 的层深模型）---- */
  .cardstage { position:relative; display:inline-block; max-width:100%;
               perspective:720px; line-height:0; }
  .cardstage canvas { display:block; max-width:100%; width:1000px; border-radius:14px; }
  #dexcard { position:relative; box-shadow:0 6px 24px rgba(0,0,0,.18);
             transform-style:preserve-3d;
             transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s; }
  /* 文字层（编号/名字/副标题）：浮在底板之上，随视角轻移 */
  #dexcardtype { position:absolute; left:0; top:0; pointer-events:none;
                 transition:transform .18s cubic-bezier(.2,.8,.3,1); }
  /* 照片层：浮得最高，随视角多位移（层深 0.30） */
  #dexcardphoto { position:absolute; left:0; top:0; pointer-events:none;
                  transition:transform .18s cubic-bezier(.2,.8,.3,1); }
  .cardstage:hover #dexcard { box-shadow:0 18px 44px rgba(0,0,0,.34); }
  /* 镭射膜：粉→黄→蓝→白 的斜向条纹，相位跟视角（--ang）走，Overlay 混合。
     打光压得很淡（再减半），卡片本身才是主角。 */
  .cardglare { position:absolute; inset:0; border-radius:14px; pointer-events:none;
               opacity:0; transition:opacity .22s; mix-blend-mode:overlay;
               background:
                 repeating-linear-gradient(32deg,
                   rgba(255,120,200,.13) 0px, rgba(255,232,120,.13) 14px,
                   rgba(120,190,255,.13) 28px, rgba(255,255,255,.18) 42px,
                   rgba(255,120,200,.13) 56px),
                 radial-gradient(circle at var(--gx,50%) var(--gy,50%),
                   rgba(255,255,255,.13), rgba(255,255,255,0) 50%);
               background-size:200% 200%, 100% 100%;
               background-position:var(--ang,0deg) 0%, 0 0; }
  /* 釉面反光（几乎只是一层薄雾） */
  .cardsheen { position:absolute; inset:0; border-radius:14px; pointer-events:none;
               opacity:0; transition:opacity .22s;
               background:linear-gradient(120deg, rgba(255,255,255,.08) 0%,
                 rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%,
                 rgba(255,255,255,.06) 100%); }
  /* 只有"没有倾斜能力"的设备（桌面无鼠标 / 手机禁用了动作权限）才隐藏光效层；
     手机能用倾斜驱动时保留，立体感和镭射才有意义 */
  @media (hover:none){ body.nomotion .cardglare, body.nomotion .cardsheen { display:none; } }
  @media (prefers-reduced-motion:reduce){
    #dexcard, #dexcardphoto { transition:none; }
  }
  @media (max-width:560px){ .cardstage canvas { width:100%; } }