/* 🎠 游乐场.css —— 本地实验动效样式（2026-10-17），在站内 style.css 之后加载，只加不改 */

/* 卡片果冻弹 */
.游-果冻 { animation: 游果冻 .46s cubic-bezier(.34,1.56,.64,1); }
@keyframes 游果冻 { 0%{transform:scale(1)} 25%{transform:scale(.955)} 62%{transform:scale(1.028)} 100%{transform:scale(1)} }

/* 🎈 氛围粒子层（背景/前景漂浮小粒子 + 小泡泡）—— 在内容之上、弹层之下 */
.游-氛 { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* ── 详情页：点赞行（居中）── */
.游-点赞行 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 12px; }
.游-赞, .游-赞榜, .游-泡泡 {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--边框); background: var(--背景-层); color: var(--文字);
  border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 700;
  -webkit-tap-highlight-color: transparent; transition: transform .12s, border-color .2s, background .2s;
}
.游-赞:active, .游-赞榜:active, .游-泡泡:active { transform: scale(.94); }
.游-赞 .游-赞数 { font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; }
.游-赞.已赞 { border-color: rgba(255,107,107,.65); background: rgba(255,107,107,.14); color: #ff8080; }
.游-赞.已赞 .游-赞心 { animation: 游心跳 .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes 游心跳 { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }
.游-泡泡 { border-style: dashed; }

/* ── 点赞榜弹层 ── */
.游-榜遮 { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 440;
          display: none; align-items: flex-end; justify-content: center; }
.游-榜遮.开 { display: flex; }
.游-榜 { width: 100%; max-width: 520px; background: var(--面板底,#141821); color: var(--文字,#e8ebe9);
        border-radius: 20px 20px 0 0; padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        max-height: 82vh; display: flex; flex-direction: column; animation: 游榜上 .26s ease; }
@keyframes 游榜上 { from { transform: translateY(100%); } to { transform: none; } }
.游-榜头 { display: flex; align-items: center; justify-content: space-between; }
.游-榜标 { font-size: 17px; font-weight: 800; }
.游-榜关 { border: 0; background: transparent; color: var(--文字-弱,#8b95a3); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.游-榜副 { color: var(--文字-弱,#8b95a3); font-size: 12px; margin: 4px 0 10px; }
.游-榜列表 { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; gap: 9px; }
.游-榜卡 { position: relative; display: flex; align-items: center; gap: 11px; cursor: pointer;
          border: 1px solid var(--边框,rgba(255,255,255,.12)); border-radius: 12px; padding: 9px 12px 9px 10px;
          background: var(--背景-层,#1a1d24); }
.游-榜卡:active { transform: scale(.985); }
.游-榜名次 { flex: 0 0 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 800; background: rgba(255,255,255,.08); color: var(--文字-弱,#8b95a3); }
.游-榜名次.前三 { background: linear-gradient(135deg,#ffb02e,#ff7a45); color: #3a2600; }
.游-榜卡 img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; background: rgba(255,255,255,.06); flex: 0 0 auto; }
.游-榜文 { flex: 1; min-width: 0; }
.游-榜名 { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.游-榜类 { font-size: 11.5px; color: var(--文字-弱,#8b95a3); margin-top: 2px; }
.游-榜赞 { font-size: 13px; font-weight: 800; color: #ff7a8a; flex: 0 0 auto; }
.游-榜空 { color: var(--文字-弱,#8b95a3); font-size: 13px; text-align: center; padding: 26px 0; }

/* ── ④ 解压验证闸门（点网盘链接先过这一关）── */
/* 🔴 2026-10-17 用户要求：① 说明文字一律居中 ② 全程不出现上下/左右滚动条 ③ 泡泡做成真·透明薄膜 */
html.游-锁, html.游-锁 body { overflow: hidden !important; }
.游-闸遮 { position: fixed; inset: 0; background: rgba(6,9,13,.92); z-index: 460;
          display: none; align-items: center; justify-content: center; padding: 14px; overflow: hidden; }
.游-闸遮.开 { display: flex; }
.游-闸 { width: 100%; max-width: 520px; max-height: 94vh; overflow: hidden; display: flex; flex-direction: column;
        border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
        padding: 13px 14px 14px; color: #e8f1f8; animation: 游闸入 .26s cubic-bezier(.22,1,.36,1);
        /* 后面铺几团柔光 ⇒ 透明泡泡"透"过去才有东西可看（不然深底上看不出透明）*/
        background:
          radial-gradient(circle at 16% 14%, rgba(70,140,255,.22), transparent 44%),
          radial-gradient(circle at 88% 86%, rgba(255,110,190,.17), transparent 46%),
          radial-gradient(circle at 82% 16%, rgba(90,255,205,.13), transparent 42%),
          #0b1016; }
@keyframes 游闸入 { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.游-闸头 { position: relative; display: flex; align-items: center; justify-content: center; }
.游-闸标 { font-size: 16px; font-weight: 800; }
/* 右上角成组：重置 + 关闭（初版那种位置）*/
.游-闸右 { position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
          display: flex; align-items: center; gap: 4px; }
.游-闸关 { border: 0; background: transparent; color: #8b95a3; font-size: 17px; cursor: pointer; padding: 2px 8px;
          -webkit-tap-highlight-color: transparent; }
/* 🔴 重置钮（初版那个「重置泡泡」，放右上角）*/
.游-闸重 { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #cfe3f2;
          border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer;
          -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.游-闸重:active { transform: scale(.94); }
.游-闸问 { font-size: 13px; color: #c3d0dc; margin: 8px 0 8px; text-align: center; line-height: 1.6; }
.游-闸问 b { color: #ffd166; font-size: 17px; letter-spacing: 3px; }
.游-闸进 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.游-闸块 { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
          border-radius: 9px; font-size: 15px; font-weight: 800;
          background: rgba(255,255,255,.07); color: #93a2b3; border: 1px solid rgba(255,255,255,.1); }
.游-闸块.已中 { background: linear-gradient(135deg,#4ad991,#12a45f); color: #fff; border-color: transparent; }
.游-闸箭 { color: #56616d; font-size: 12px; }
/* 网格：尺寸由 JS 按屏算好（保证一屏放下、绝不滚动）*/
.游-闸格 { flex: 1 1 auto; display: grid; gap: 8px; justify-content: center; align-content: center;
          overflow: hidden; padding: 3px 0 6px; }
.游-闸格.抖 { animation: 游抖 .35s linear; }
@keyframes 游抖 { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
/* ── 泡泡：真·透明薄膜（参考 github.com/Visnalize/makeaero 的 Soap Bubble +
      aicssanimations 的 soap-bubble loader + codefronts 的薄膜写法；
      🔴 原版用 oklch()/color-mix()（Chrome 111+），这里全换成 rgba 以兼容安卓 10 WebView）
      🔴 2026-10-17 重做透明感：泡心几乎全透（深底直接透过来）→ 只留很薄的一层膜 */
.闸泡 {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* 🔴 2026-10-17：降低"固有色"透明度 —— 原来的蓝调（rgba(130,195,255,…)）撤掉，
     改成近乎无色的白，只靠边缘亮膜 + 虹彩环显形 ⇒ 更像"真水膜"，不再是蓝色小球 */
  background: radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.05)  0%,
      rgba(255,255,255,.018) 32%,
      rgba(246,250,255,.026) 58%,
      rgba(255,255,255,.09)  78%,
      rgba(255,255,255,.26)  91%,
      rgba(255,255,255,.52)  99%,
      rgba(255,255,255,.06) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.60),        /* 极细的亮膜边 */
    inset 0 0 18px rgba(255,255,255,.12),           /* 内层柔光 */
    inset -9px -12px 22px rgba(255,255,255,.10),    /* 背面折射（改白，去掉蓝）*/
    inset 10px 12px 20px rgba(255,255,255,.09),     /* 迎光面 */
    0 6px 16px rgba(0,0,0,.40),                     /* 落地投影 */
    0 0 16px rgba(200,230,255,.14);                 /* 外发光（很淡）*/
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  animation: 游泡浮 4.2s ease-in-out infinite;
}
@keyframes 游泡浮 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
/* 虹彩薄膜：边缘一圈彩色环，缓慢旋转 */
.闸泡::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
      rgba(120,200,255,.42), rgba(255,160,240,.36) 18%, rgba(255,240,150,.34) 34%,
      rgba(150,255,210,.36) 52%, rgba(160,180,255,.42) 70%, rgba(255,190,220,.34) 86%,
      rgba(120,200,255,.42));
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 88%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 62%, #000 88%, transparent 100%);
  animation: 游膜转 7s linear infinite;
  opacity: .95;
}
@keyframes 游膜转 { to { transform: rotate(360deg); } }
/* 高光点（三处：主高光 + 次反光 + 底部弧面反射）*/
.闸泡::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 20% 14% at 30% 24%, rgba(255,255,255,.98), transparent 72%),
    radial-gradient(ellipse 8% 6%  at 72% 76%, rgba(255,255,255,.7),  transparent 72%),
    radial-gradient(ellipse 12% 7%  at 76% 28%, rgba(255,255,255,.4),  transparent 72%);
  transform: rotate(-18deg);
}
/* 泡泡上的字：更大 + 白色发光（中性色，不再偏蓝）*/
.闸泡-字 {
  position: relative; z-index: 3; font-size: clamp(24px, 7.8vw, 34px); font-weight: 900;
  color: #ffffff; letter-spacing: 1px;
  text-shadow: 0 0 9px rgba(255,255,255,.85), 0 0 18px rgba(215,235,255,.5), 0 2px 5px rgba(0,0,0,.8);
}
/* 🔴 2026-10-17 用户要求：**暗号字发光标识**（金色描边 + 呼吸光晕）—— 一眼认出该点哪些 */
.闸泡.目标 {
  animation: 游泡浮 4.2s ease-in-out infinite, 游目标 1.7s ease-in-out infinite;
}
@keyframes 游目标 {
  0%, 100% { box-shadow:
      inset 0 0 0 2px rgba(255,216,130,.95),
      inset 0 0 18px rgba(255,200,90,.32),
      inset -9px -12px 22px rgba(255,225,160,.16),
      0 6px 16px rgba(0,0,0,.4),
      0 0 20px rgba(255,198,80,.55); }
  50%      { box-shadow:
      inset 0 0 0 2.5px rgba(255,236,180,1),
      inset 0 0 26px rgba(255,214,110,.58),
      inset -9px -12px 22px rgba(255,235,180,.24),
      0 6px 16px rgba(0,0,0,.4),
      0 0 38px rgba(255,206,100,.9); }
}
.闸泡.目标 .闸泡-字 {
  color: #fff8de;
  text-shadow: 0 0 10px rgba(255,214,120,.95), 0 0 26px rgba(255,180,60,.85), 0 2px 5px rgba(0,0,0,.8);
}
/* 🔴 2026-10-17 用户要求：戳破了**要留个坑**（不是消失）—— 瘪掉的凹陷 + 边缘亮脊，像捏瘪的泡泡纸 */
.闸泡.炸 {
  pointer-events: none;
  animation: 游泡炸 .34s cubic-bezier(.2,.9,.3,1) forwards;
  background: radial-gradient(circle at 50% 44%,
      rgba(0,0,0,.58) 0%, rgba(0,0,0,.44) 44%, rgba(255,255,255,.10) 74%, rgba(255,255,255,.26) 100%);
  box-shadow:
    inset 0 7px 14px rgba(0,0,0,.72),          /* 内凹的暗影 = 坑 */
    inset 0 -4px 9px rgba(255,255,255,.16),     /* 坑底的弱反光 */
    inset 0 0 0 1.5px rgba(255,255,255,.20),    /* 边缘亮脊 */
    0 2px 5px rgba(0,0,0,.45);
}
.闸泡.炸::before, .闸泡.炸::after { opacity: 0; }              /* 薄膜/高光收掉 */
/* 坑里的字：换成名言/热梗 ⇒ 字号缩小、允许多字排两行 */
.闸泡.炸 .闸泡-字 {
  color: rgba(255,255,255,.55); text-shadow: none; letter-spacing: 0;
  font-size: 11.5px; line-height: 1.16; text-align: center;
  padding: 0 6px; word-break: break-word;
}
@keyframes 游泡炸 {
  0%   { transform: scale(1);   }
  30%  { transform: scale(1.2); }
  100% { transform: scale(.9);  }
}
/* 破泡冲击波 */
.游-泡波 { position: fixed; transform: translate(-50%,-50%) scale(.18); border-radius: 50%;
          border: 2.5px solid rgba(190,230,255,.9); pointer-events: none; z-index: 99998;
          animation: 游波 .5s ease-out forwards; }
@keyframes 游波 { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.游-闸态 { text-align: center; font-size: 12.5px; color: #8b95a3; padding-top: 10px; }
/* 戳破顺序行（坑里那些名言/热梗，按顺序列出来）*/
.游-闸出 { text-align: center; font-size: 12px; color: #ffd166; line-height: 1.5;
          margin-top: 5px; min-height: 18px; word-break: break-word; opacity: .92; }
@media (min-width: 760px) { .游-闸 { max-width: 700px; } }
@media (min-width: 920px) { .游-闸 { max-width: 860px; } }

/* ── 解压泡泡全屏层 ── */
.游-泡遮 { position: fixed; inset: 0; background: #0d1014; z-index: 450; display: none;
          flex-direction: column; padding: 12px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.游-泡遮.开 { display: flex; }
.游-泡头 { display: flex; align-items: center; justify-content: space-between; color: #cfe3f2; font-size: 13px;
          font-variant-numeric: tabular-nums; padding: 4px 2px 10px; }
.游-泡重, .游-泡关 { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #dbe7f0;
                    border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-left: 6px; }
.游-泡重:active, .游-泡关:active { transform: scale(.95); }
.游-泡格 { flex: 1; display: grid; gap: 8px; align-content: start; overflow-y: auto; padding: 2px; }
.游-泡 { position: relative; aspect-ratio: 1; border-radius: 50%; cursor: pointer;
        background: radial-gradient(circle at 32% 28%, #eaf7ff 0%, #9ec9e8 38%, #5f8fb8 72%, #3d6484 100%);
        box-shadow: inset 0 -3px 7px rgba(0,0,0,.28), inset 0 3px 7px rgba(255,255,255,.65), 0 3px 7px rgba(0,0,0,.35);
        transition: transform .14s ease; }
.游-泡::after { content: ""; position: absolute; left: 22%; top: 16%; width: 26%; height: 20%; border-radius: 50%;
               background: rgba(255,255,255,.85); filter: blur(1px); }
.游-泡:active { transform: scale(.9); }
.游-泡.正在破 { animation: 游泡破 .3s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes 游泡破 { 0%{transform:scale(.72) rotate(-6deg)} 55%{transform:scale(.9) rotate(4deg)} 100%{transform:scale(.8)} }
.游-泡.已破 { background: radial-gradient(circle at 40% 40%, #3c4550, #2b333b 75%);
             box-shadow: inset 0 3px 6px rgba(0,0,0,.55); transform: scale(.8); cursor: default; }
.游-泡.已破::after { display: none; }
.游-泡.正在回 { animation: 游泡回 .42s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes 游泡回 { 0%{transform:scale(.5)} 70%{transform:scale(1.09)} 100%{transform:scale(1)} }
.游-泡尾 { text-align: center; color: #6d7b89; font-size: 12px; padding-top: 8px; }

/* 大屏：弹层撑开（跟站内规则一致） */
@media (min-width: 760px) { .游-榜 { max-width: 700px; } }
@media (min-width: 920px) { .游-榜 { max-width: 1080px; border-radius: 20px; margin-bottom: 2vh;
                                     max-height: 84vh; } .游-泡格 { gap: 10px; } }

/* ─────────── ⑥ 点击特效 / 鼠标特效（2026-10-17）─────────── */
/* 点击涟漪 */
.游-涟 { position: fixed; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
        border: 2px solid rgba(130,205,255,.9); pointer-events: none; z-index: 99997;
        animation: 游涟 .58s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes 游涟 { from { transform: scale(.35); opacity: .95; } to { transform: scale(5.4); opacity: 0; } }

/* 鼠标星点拖尾 */
.游-星 { position: fixed; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
        pointer-events: none; z-index: 99996; opacity: .9;
        animation: 游星 .64s ease-out forwards; }
@keyframes 游星 { to { transform: translateY(15px) scale(.15); opacity: 0; } }

/* 鼠标光晕跟随 */
.游-光标 { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
          border-radius: 50%; pointer-events: none; z-index: 99995;
          background: radial-gradient(circle, rgba(130,205,255,.30), rgba(130,205,255,0) 70%);
          transition: width .18s, height .18s, margin .18s, background .18s; }
.游-光标.按 { width: 52px; height: 52px; margin: -26px 0 0 -26px;
             background: radial-gradient(circle, rgba(255,196,120,.42), rgba(255,196,120,0) 70%); }

/* 满屏撒花画布 */
/* 🔴 2026-10-18：撒花层级从 99999 降到 300 —— 原来满屏彩纸会盖住二维码弹窗(450) 整整 2.7 秒，
   用户戳完泡泡只看到彩纸、以为"没弹二维码"。彩纸本就该在弹窗**后面**飘。 */
.游-花 { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99999; }