/* ============================================================
   draw2.css —— 抽卡一组（v7 定稿）的新壳样式
   ============================================================
   只管 .dg-* 这批类名与 body.dg-mode 这一个开关，不碰旧 style.css 的规矩：
   收藏、融卡、签到、历史这些页面还是原来那套深紫蓝，抽卡这一组先换成瓷白 + 西瓜粉。
   两套壳以页面为界，靠 body.dg-mode 互斥（app.js 的 switchPage 打这个 class）。

   手机与桌面共用同一套 DOM，靠 861px 断点换布局 —— 与大厅用的是同一个断点，
   站内不要出现两个「什么算平板」的标准。

   几个数是量出来写死在这儿，别顺手改：
   · 底部那一行四颗：跳过 87 + 两颗抽卡钮各吃 flex + 卡池 50 + 6px 缝 ×3 = 内宽 364（390 屏）；
     两颗抽卡钮在一个 flex:1 1 auto 的容器里，换顺序不吃宽，所以「跳过挪到最左」不会让它们变窄。
   · 灯左右各垫 44（左边那块只占位不显形，右边是那一竖列），灯吃中间剩余、上限 260 ——
     两侧等宽 = 灯的水平居中与屏宽无关（站长 09-26 硬要求）。
   · 所有可点的东西热区不小于 44×44。
   ============================================================ */

:root{
  --dg-ink:#3f3f3e; --dg-ink2:#7d7d7b; --dg-ink3:#a8a8a5;
  --dg-line:#d6d6d3; --dg-line2:#e8e8e5; --dg-fill:#f1f1ef; --dg-fill2:#faf9f8;
  --dg-hot:#FF5A76; --dg-hot-soft:#ffe9ee; --dg-hot-ink:#b8324c;
  --dg-ssr:#b9975b; --dg-sr:#9a86a8; --dg-r:#7f9bb0; --dg-n:#9d9a94;
  --dg-tally:#c9a227;
}

/* ── 开关：抽卡一组这三页不挂旧顶栏，页面自身负责底色 ── */
body.dg-mode{background:linear-gradient(180deg,#fdfcfb 0%,#f3f1ef 100%);color:var(--dg-ink)}
body.dg-mode .hb-top{display:none!important}
body.dg-mode .page{padding-top:0}
/* 与大厅同一手法：脱掉 #app 的 960 上限与 16/60 内边距，否则桌面上那四个角
   其实坐在一个 928 宽的盒子里，左右各被白吃掉 136 —— 而 v7 画的是贴屏幕四角。
   宽度上限改由 .dg-stage 自己管（手机全宽、桌面 1200）。 */
body.dg-mode #app{max-width:none;padding:0}
/* 这三页明确不参与任何滚动锁。body 上那条 overflow-x:hidden 与 hub-mode 的 overflow:hidden
   都是靠「body 的 overflow 传播给视口」这条规则起作用的，而这条传播在 WebKit 与 Blink
   之间历来有出入（单轴 hidden 在 WebKit 下把 body 变成滚动容器、纵向就锁死了）。
   这里把三页的 overflow 写死成 visible，至少保证「滑不动」不是这一组引起来的。 */
body.dg-mode{overflow:visible}
.page.dg{min-height:100vh;min-height:100dvh;color:var(--dg-ink);
  font:14px/1.6 -apple-system,"PingFang SC","Helvetica Neue",sans-serif}

.dg-stage{position:relative;max-width:1200px;margin:0 auto;padding:10px 12px 14px;
  display:flex;flex-direction:column;gap:10px;min-height:calc(100vh - 0px);min-height:100dvh}

/* ── 四个角：返回 / 余额 / 池名 ──
   手机上这三件也移出流（与桌面同一手法）：灯区要从 stage 内容顶开始，站长 09-26 那句
   「手机端灯的顶部到『返回』方块的最上面那条边」靠的就是这个 —— 它们留在流里的话，
   返回、余额、池名三行要先吃掉两百来像素，灯就永远顶不到头。absolute 的 top/left 取的是
   stage 的 padding 值，所以它们的边跟原来在流里时一模一样，只是不再占地。 */
.dg-tl,.dg-tr{position:absolute;top:10px;z-index:6}
/* 手机上「返回」不在左上角 —— 站长 09-27：把它放到「奖池」左边，五颗同一行。与那四颗共用 top:60 这一行。 */
.dg-tl{left:12px;top:60px;display:flex;align-items:flex-start;gap:6px} .dg-tr{right:12px}
.dg-back,.dg-bal{white-space:nowrap}
/* 收成与右边四颗同尺寸的小方块（44×44）：宽 44 里装「‹ 返回」三个字宽约 33px，
   nowrap 兜着不会拆行（上一版宽 63 摆在左上角，与四颗不同高也不同宽，看着就是两行）。 */
.dg-back{width:44px;height:44px;min-height:0;padding:0;border:1px solid var(--dg-line);border-radius:13px;
  background:#fff;color:var(--dg-ink);font-size:11.5px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 3px rgba(60,60,60,.05)}
.dg-back:active{background:var(--dg-fill)}
/* 奖池页左上第二颗 = 许愿入口（站长 09-27 的图：就贴在「遇见」右边）。同样 44×44，
   但描边用热粉 —— 这一页上它是唯一能改变抽取结果的开关，得比返回抢眼；
   文案三态由 JS 写（许愿 / 选卡中 / 换一张），所以宽度不能写死，靠 nowrap + padding 撑。 */
.dg-wishbtn{flex:0 0 auto;min-width:44px;height:44px;padding:0 4px;border:1px solid var(--dg-hot);border-radius:13px;
  background:#fff;color:var(--dg-hot-ink);font-size:11.5px;line-height:1;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;box-shadow:0 1px 3px rgba(60,60,60,.05)}
.dg-wishbtn[aria-pressed="true"]{background:var(--dg-hot-soft)}
.dg-bal{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;
  height:44px;padding:0 2px;font-size:15px;font-weight:700;color:var(--dg-ink);font-variant-numeric:tabular-nums}
.dg-tr{text-align:right}
.dg-pname{text-align:right;line-height:1.15;position:absolute;top:60px;right:12px;margin:0;z-index:6}
.dg-pname b{display:block;font-size:26px;letter-spacing:.02em;color:var(--dg-ink)}
.dg-pname small{display:block;font-size:11.5px;color:var(--dg-ink3)}

/* ── 中部：灯 + 右列（这块是整个页面的核心几何）
   mid 吃满剩余高度（flex:1 1 auto），所以它的顶就是 stage 内容顶 = 返回方块顶，
   它的底就是两行字与按钮行之上 —— 灯顶到底这一整段都归灯。 */
.dg-mid{display:flex;align-items:stretch;gap:8px;flex:1 1 auto;min-height:0;margin-top:104px}
.dg-gutter{display:none}
/* 手机上「奖池/记录/满赠/说明」不再占右边一竖列 —— 09-27 站长：左右两边位置不够了，
   把这几个模块移到灯上面那一块（示意图图3）。本行现在是五颗：返回 + 四颗入口，
   紧挨着左对齐（gap 6）；nowrap 硬性不许拆行（站长 09-27：不要出现文字换行）。
   宽度算得过来：390 屏 12+44+6+(44×4+6×3)=256，右侧池名从 325 起 → 空 69px；
   320 屏靠下面那条 ≤360 的规则把池名缩一号，仍然不碰。left:62 = 12+44+6。 */
.dg-side{position:absolute;left:62px;right:auto;top:60px;z-index:6;min-width:0;
  display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:6px;flex-wrap:nowrap}
.dg-sidei{flex:0 0 44px;width:44px;height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;border:1px solid var(--dg-line);border-radius:13px;background:#fff;
  color:var(--dg-ink2);font-size:10px;line-height:1.1;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 3px rgba(60,60,60,.05)}
.dg-sidei em{font-style:normal;font-size:15px;line-height:1}
.dg-sidei.on,.dg-sidei.on:active,.dg-sidei:active{border-color:var(--dg-hot);background:var(--dg-hot-soft);color:var(--dg-hot-ink)}
/* 手机端「记录」页不要这四颗（站长 09-27）：这一页本来就在看记录，四颗里三颗是跳去别处，
   而当时「满赠」那颗点了还全无反应（弹层长在抽卡页里，父页 display:none 把它一起藏了）。
   出口留左上角那颗「‹ 抽卡」就够 —— 想换地方先回抽卡页。桌面端保留（那边位置够）。 */
#page-history .dg-side{display:none}
/* 窄屏（≤360，iPhone SE 那一档）：五颗 44 热区不缩（那是底线），改把右侧池名缩一号 ——
   320 屏上五颗右边缘到 253，池名从 264 起，还空 11px；不缩就会压上。 */
@media(max-width:360px){
  .dg-pname b{font-size:22px}
  .dg-side{gap:5px}
}

/* 灯的容器：高交给 mid 拉伸；宽度手机上不再给右侧竖列让位（那一列已移到灯上方），吃满整宽。
   不锁 aspect-ratio：画布取景由 lamp.js 的 fitCamera() 按容器实际比例二分算距离；而取景已取消
   「竖屏主动裁横裁底」那套参数，所以容器再狭也不会把底座切掉 —— 代价是狭容器下上下会留白。 */
.dg-lamp{flex:0 1 auto;min-width:0;width:100%;max-width:100%;min-height:0;
  margin:0 auto;position:relative;align-self:stretch}
.dg-lampmount{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:transparent}
.dg-lampmount canvas{display:block;width:100%;height:100%}
/* 回退层：WebGL 不可用时露出来。卡的位置由 JS 按弧摆，点卡许愿照常能用 */
.dg-lampfb{position:absolute;inset:0;display:none}
.dg-lamp.fb .dg-lampfb{display:block}
.dg-lamp.fb .dg-lampmount{display:none}
.dg-fb-ring{position:absolute;left:6px;right:6px;top:34%;height:34%}
.dg-fb-hook{position:absolute;left:50%;top:50%;width:26px;height:38px;margin:-19px 0 0 -13px;
  border-radius:5px;background:#fff;
  box-shadow:0 2px 6px rgba(60,60,60,.18);border:1.5px solid var(--dg-line);cursor:pointer;padding:0;
  perspective:300px}
.dg-fb-hook.ssr{border-color:var(--dg-ssr)} .dg-fb-hook.sr{border-color:var(--dg-sr)}
.dg-fb-hook.r{border-color:var(--dg-r)} .dg-fb-hook.n{border-color:var(--dg-n)}
.dg-fb-hook.tally{border-color:var(--dg-tally)}
/* 回退灯上的翻面。结构与结果页那套 .rv-in / .rv-face 相同（perspective + preserve-3d +
   backface-visibility），时长 .55s 与 WebGL 那盏 flipCard 的 dur:0.55 对齐 —— 两盏灯翻起来
   得是同一个动作，不然显卡不行的用户看到的是另一套手感。
   为什么必须套一层 <i> 而不能直接转 button：button 自己的 transform 被椭圆定位占了
   （translate/rotate/scale 那一串），再叠 rotateY 就是互相覆盖。 */
.dg-fb-flip{position:absolute;inset:0;display:block;border-radius:4px;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.05,.2,1)}
.dg-fb-hook.flip .dg-fb-flip{transform:rotateY(180deg) translateZ(0)}
.dg-fb-flip>span{position:absolute;inset:0;display:block;border-radius:4px;overflow:hidden;
  background:#fff center/cover no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* 卡背沿用原来那条默认图：没有背图的卡（emoji 卡）以前也是拿 fan-card-back.jpg 挂着，
   现在它盖在 <span class="fbk"> 上，行为一致；有背图的由行内 style 盖过这一条。 */
.dg-fb-flip>span.fbk{background-image:url('fan-card-back.jpg')}
.dg-fb-flip>span.ffr{transform:rotateY(180deg)}
.dg-fb-flip>span.emo{display:grid;place-items:center;font-size:14px;line-height:1}
/* 这里原来有一条 .dg-fb-hook.wished{金色 box-shadow}：回退灯上给许愿那张卡描一圈金边。
   09-27 站长要求许愿后灯上的卡保持原样，它跟 WebGL 那盏的冒金光一起删掉了。 */
.dg-fb-canopy,.dg-fb-pole,.dg-fb-base{position:absolute;left:50%;transform:translateX(-50%);background:var(--dg-line)}
.dg-fb-canopy{top:6%;width:74%;height:12%;border-radius:40% 40% 8px 8px}
.dg-fb-pole{top:18%;width:3%;height:16%}
.dg-fb-base{bottom:4%;width:52%;height:7%;border-radius:8px}

/* ── 两行小字：许愿提示（一行两态）+ 本池累计 ── */
.dg-leftinfo{display:contents}   /* 手机上等于没包：两个子块直接在 stage 的列里排版 */
.dg-wishline{text-align:center;font-size:12.5px;color:var(--dg-hot-ink);min-height:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-wishline.set{color:var(--dg-ink2)}
/* 未许愿时这行字本身就是入口（「去奖池许愿」——写了去就得真能点）；已许愿时它只是状态展示 */
.dg-wishline:not(.set){cursor:pointer}
/* 借这一行说一句临时话（点了计数牌、刚许上/取消）：金色只留给许愿与 SSR 两件事 */
.dg-wishline.nag{color:var(--dg-tally)}
.dg-statline{text-align:center;font-size:11.5px;color:var(--dg-ink3);margin-top:-4px}
.dg-statline b{color:var(--dg-ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ── 底部一行四颗 ── */
.dg-acts{display:flex;align-items:center;gap:6px;margin-top:auto}
.dg-skip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px;
  border:1px solid var(--dg-line);border-radius:12px;background:#fff;color:var(--dg-ink2);
  font-size:12px;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dg-skip .dg-sw{flex:0 0 auto;width:20px;height:12px;border-radius:6px;background:var(--dg-line);
  position:relative;transition:background .18s}
.dg-skip .dg-sw:after{content:"";position:absolute;left:1px;top:1px;width:10px;height:10px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .18s}
.dg-skip.on{color:var(--dg-hot-ink);border-color:var(--dg-hot)}
.dg-skip.on .dg-sw{background:var(--dg-hot)}
.dg-skip.on .dg-sw:after{left:9px}
.dg-btns{flex:1 1 auto;min-width:0;display:flex;gap:6px}
.dg-btn{flex:1 1 0;min-width:0;height:44px;border:1px solid var(--dg-line);border-radius:12px;background:#fff;
  color:var(--dg-ink);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:4px;-webkit-tap-highlight-color:transparent}
.dg-btn small{font-size:11px;font-weight:400;color:var(--dg-ink2)}
.dg-btn.pri{background:var(--dg-hot);border-color:var(--dg-hot);color:#fff;box-shadow:0 2px 8px rgba(255,90,118,.28)}
.dg-btn.pri small{color:rgba(255,255,255,.86)}
.dg-btn:disabled,.dg-btn.off{opacity:.5;box-shadow:none;cursor:default}
.dg-poolbtn{flex:0 0 auto;width:50px;height:44px;border:1px solid var(--dg-line);border-radius:12px;
  background:#fff;color:var(--dg-ink2);font-size:11px;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.dg-poolbtn:active{background:var(--dg-fill)}

/* ── 桌面的两块漂浮卡 + 左边缘那一叠池签：手机上全部不显示 ── */
.dg-pools,.dg-float{display:none}

/* 「点击继续」那一拍的全屏接点（高稀有度卡停在放大那一瞬时整屏都算点击）。
   z-index 66：在内容之上、结果层（70）之下 —— 结果层自己接点击，两层不能抢。
   [hidden] 那行是硬的：作者样式里只要写了 display，就会盖掉 UA 对 hidden 属性的
   display:none，忘写这一行等于留一层全屏挡位 —— 整站既点不动也滑不动。 */
.dg-tapcatch{position:fixed;inset:0;z-index:66;cursor:pointer}
.dg-tapcatch[hidden]{display:none}

/* ── P 切卡池半屏：从上方拉下来盖在抽卡页上，不是新页面 ── */
.dg-pull{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column}
.dg-pull[hidden]{display:none}
.dg-pullbg{flex:0 0 30%;background:rgba(63,63,62,.34)}
.dg-pan{flex:1 1 auto;background:var(--dg-fill2);border-radius:0 0 18px 18px;
  box-shadow:0 -6px 22px rgba(60,60,60,.16);padding:0 12px 18px;overflow-y:auto;position:relative;
  transition:transform .18s ease}   /* 下拉手势跟手位移，松手后靠这条弹回 / 退场 */
/* 下拉关闭那颗：原来用 absolute;top:-15px 悬在面板顶边之外，而父级 .dg-pan 带 overflow-y:auto
   —— 它被自己的滚动容器裁掉了，只剩几像素，所以站长看到「半屏没有下拉的按钮」。
   改成流内顶部一条 44px 高的横条（热区达标），中间画一个抓手胶囊，文字写明作用。 */
.dg-handle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:calc(100% + 24px);min-height:44px;margin:0 -12px 2px;padding:2px 0 0;border:none;background:none;
  color:var(--dg-ink3);font-size:10.5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dg-handle:before{content:"";display:block;width:46px;height:5px;border-radius:3px;background:var(--dg-line)}
.dg-pan-ttl{font-size:15px;font-weight:700;padding:16px 0 8px;color:var(--dg-ink)}
.dg-tickets{display:flex;flex-direction:column;gap:10px}
.dg-ticket{display:flex;align-items:stretch;gap:10px;min-height:80px;padding:12px;background:#fff;
  border:1.5px dashed var(--dg-line);border-radius:14px;cursor:pointer;text-align:left;width:100%;
  -webkit-tap-highlight-color:transparent;position:relative}
.dg-ticket.cur{border-style:solid;border-color:var(--dg-hot)}
.dg-ticket.lock{opacity:.5;cursor:default}
.dg-ticket .tl{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dg-ticket .tl b{font-size:15px;color:var(--dg-ink)}
.dg-ticket .tl span{font-size:11.5px;color:var(--dg-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-ticket .tr{flex:0 0 82px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:11px;color:var(--dg-ink3);border-left:1px dashed var(--dg-line2);text-align:center}
.dg-ticket .tr i{font-style:normal;font-size:20px;line-height:1}

/* ── G 满赠面板：手机从底部升起 ── */
.dg-scrim{position:fixed;inset:0;z-index:62;background:rgba(63,63,62,.42);
  display:flex;align-items:flex-end;justify-content:center}
.dg-scrim[hidden]{display:none}
.dg-sheet{width:100%;max-width:520px;background:var(--dg-fill2);border-radius:18px 18px 0 0;
  padding:16px 14px 20px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 -8px 26px rgba(60,60,60,.2);max-height:86vh;overflow-y:auto}
.dg-sheet-hd{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:var(--dg-ink)}
.dg-x{border:none;background:none;color:var(--dg-ink3);font-size:12px;cursor:pointer;padding:10px;margin:-10px}
.dg-sheet-sub{font-size:12px;color:var(--dg-ink2)}
.dg-sheet-sub b{color:var(--dg-ink);font-variant-numeric:tabular-nums}
.dg-sheet-sub b.need{color:var(--dg-hot-ink)}
.dg-prog{height:8px;border-radius:4px;background:var(--dg-fill);overflow:hidden}
.dg-prog i{display:block;height:100%;border-radius:4px;background:var(--dg-hot);transition:width .3s}
.dg-tiers{display:flex;flex-direction:column;gap:8px}
.dg-tier{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--dg-line2);
  border-radius:12px;padding:8px 10px}
.dg-tier .tk{flex:0 0 38px;width:38px;height:52px;border-radius:6px;background:var(--dg-fill) center/cover;
  border:1.5px solid var(--dg-line)}
.dg-tier .tk.cnt{border-style:dashed;border-color:var(--dg-hot);background-color:var(--dg-hot-soft)}
.dg-tier .tx{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--dg-ink2);line-height:1.5}
.dg-tier .tx b{display:block;font-size:13px;color:var(--dg-ink)}
.dg-claim{height:44px;border:none;border-radius:12px;background:var(--dg-hot);color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.dg-claim.off{background:var(--dg-fill);color:var(--dg-ink3);cursor:default}
.dg-claim.done{background:#fff;border:1px solid var(--dg-line);color:var(--dg-ink2);cursor:default}
.dg-fine{font-size:10.5px;color:var(--dg-ink3);line-height:1.65;margin:0}

/* ── R2 历史页（v7 原型的 C / D-C）──
   同一份 DOM 两个形态：手机上统计四格与筛选在顶、记录逐条堆叠；桌面上左栏躺下、
   记录成对齐的表。时间、卡名、稀有度三列对齐就是桌面存在的理由。 */
.dg-his{display:flex;flex-direction:column;gap:12px;margin-top:112px;flex:1 1 auto;min-height:0}
.dg-his-blk h3{font-size:11.5px;color:var(--dg-ink3);margin:0 0 6px;font-weight:600}
.dg-his-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dg-his-stat div{background:#fff;border:1px solid var(--dg-line2);border-radius:12px;padding:9px 4px;text-align:center}
.dg-his-stat b{display:block;font-size:18px;line-height:1.1;color:var(--dg-ink);font-variant-numeric:tabular-nums}
.dg-his-stat b.ssr{color:var(--dg-ssr)} .dg-his-stat b.sr{color:var(--dg-sr)}
.dg-his-stat span{display:block;font-size:10px;color:var(--dg-ink3);margin-top:3px}
.dg-seg{display:flex;gap:6px;flex-wrap:wrap}
.dg-segi{flex:1 1 auto;min-width:54px;min-height:40px;display:flex;align-items:center;justify-content:center;
  gap:5px;border:1px solid var(--dg-line);border-radius:11px;background:#fff;color:var(--dg-ink2);
  font:inherit;font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dg-segi b{font-size:10.5px;font-weight:700;color:var(--dg-ink3)}
.dg-segi.on{border-color:var(--dg-hot);background:var(--dg-hot-soft);color:var(--dg-hot-ink)}
.dg-hday{font-size:11px;color:var(--dg-ink3);padding:14px 2px 6px;letter-spacing:.02em}
.dg-hitem{display:grid;grid-template-columns:40px 44px 1fr auto;align-items:center;gap:10px;
  padding:8px 10px;background:#fff;border:1px solid var(--dg-line2);border-radius:12px;margin-bottom:8px}
.dg-hthumb{width:40px;height:40px;border-radius:8px;overflow:hidden;border:2px solid var(--dg-line);
  display:flex;align-items:center;justify-content:center;background:var(--dg-fill)}
.dg-hthumb img{width:100%;height:100%;object-fit:cover;display:block}
.dg-hitem.ssr .dg-hthumb{border-color:var(--dg-ssr)} .dg-hitem.sr .dg-hthumb{border-color:var(--dg-sr)}
.dg-hitem.r .dg-hthumb{border-color:var(--dg-r)}   .dg-hitem.n .dg-hthumb{border-color:var(--dg-n)}
.dg-hglyph{font-size:18px;line-height:1}
.dg-hclock{font-size:11.5px;color:var(--dg-ink3);font-variant-numeric:tabular-nums}
.dg-hname{font-size:14px;color:var(--dg-ink);font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dg-hrr{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--dg-n)}
.dg-hrr.ssr{color:var(--dg-ssr)} .dg-hrr.sr{color:var(--dg-sr)} .dg-hrr.r{color:var(--dg-r)}
.dg-his-empty{font-size:12px;color:var(--dg-ink3);line-height:1.8;padding:26px 14px;text-align:center;
  background:#fff;border:1px dashed var(--dg-line);border-radius:14px}
.dg-his-more{width:100%;min-height:44px;margin-top:6px;border:1px solid var(--dg-line);border-radius:12px;
  background:#fff;color:var(--dg-ink2);font:inherit;font-size:12.5px;cursor:pointer}
.dg-his-foot{padding-bottom:20px}
.dg-his-del{display:flex;gap:10px;margin-top:12px}
.dg-btn-danger{flex:1 1 0;min-height:44px;border:1px solid #ffd0da;border-radius:12px;background:#fff;
  color:var(--dg-hot-ink);font:inherit;font-size:13px;cursor:pointer}
.dg-btn-plain{flex:1 1 0;min-height:44px;border:1px solid var(--dg-line);border-radius:12px;background:#fff;
  color:var(--dg-ink2);font:inherit;font-size:13px;cursor:pointer}

/* ── R 奖池预览：一列网格，格底一条稀有度色条，名字在格下。原型 R⑵６：手机五列、格宽 66 ── */
/* margin-top 那 112 是给头部三件让的位置：返回 / 余额 / 池名都是 absolute（抽卡页要拿它们的顶
   做灯的上边界，所以上了流），不占地方了就得由主体自己顶下来，否则第一行格子会被池名压住。
   112 = 返回行 44 + 池名 52 + 两道间距。 */
.dg-pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;margin-top:112px;position:relative}
.dg-cell{position:relative;background:#fff;border:1px solid var(--dg-line2);border-radius:12px;
  padding:6px 6px 4px;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 3px rgba(60,60,60,.05)}
.dg-cell .face{width:100%;aspect-ratio:638/1004;border-radius:8px;background:var(--dg-fill) center/cover;
  display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden}
.dg-cell .face img{width:100%;height:100%;object-fit:cover;display:block}
.dg-cell .rb{height:3px;border-radius:2px;background:var(--dg-n)}
.dg-cell.ssr .rb{background:var(--dg-ssr)} .dg-cell.sr .rb{background:var(--dg-sr)}
.dg-cell.r .rb{background:var(--dg-r)} .dg-cell.n .rb{background:var(--dg-n)}
/* 名字两行：站内有四个同名的「恋人怀中樱花草」，一行截断会把它们截成同一个词 */
.dg-cell .nm{font-size:10.5px;color:var(--dg-ink2);line-height:1.3;text-align:center;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dg-cell .ct{position:absolute;right:4px;top:4px;font-size:10px;font-weight:700;color:var(--dg-ink2);
  background:rgba(255,255,255,.9);border:1px solid var(--dg-line);border-radius:8px;padding:1px 5px;
  font-variant-numeric:tabular-nums}
.dg-cell.special .face{border:1.5px dashed var(--dg-hot);background:var(--dg-hot-soft)}
/* 许愿选卡模式（点奖池页左上「许愿」进）：能许的那批留全彩 + 一层热粉内描边提示可点，
   不能许的（满赠卡、计数牌、R / N）压到三成 —— 让人一眼看出挑不了，而不是点了没反应。
   提示那行字用 ::before 挂在网格上：网格本来就有 112px 上边距，头部两颗按钮底边在 104，
   所以 -16px 是唯一能塞下它（高 14）又不压着按钮的位置；写晚了会撞头部，写早了会压网格。
   桌面档网格上边距 122、头部底 112，空隙宽得多，下面单独给它一个 -24px 呼吸位。 */
.dg-pgrid.picking::before{content:"点一张卡许个愿 · 只有 SSR / SR 能许";position:absolute;top:-16px;left:0;
  font-size:11.5px;line-height:1.2;color:var(--dg-hot-ink)}
.dg-pgrid.picking .dg-cell{opacity:.3}
.dg-pgrid.picking .dg-cell.wishable{opacity:1;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--dg-hot)}
.dg-cell.wished{border-color:var(--dg-hot)}
.dg-cell .wg{position:absolute;left:5px;top:4px;font-size:12px;line-height:1}
.dg-lnk{margin-top:10px}
.dg-lnk button{background:none;border:none;color:var(--dg-hot-ink);font-size:12px;cursor:pointer;padding:10px 0}

/* ── E 说明页 ── */
.dg-body{margin-top:112px;display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.dg-card{background:#fff;border:1px solid var(--dg-line2);border-radius:14px;padding:14px}
.dg-card h3{font-size:15px;margin:0 0 8px;color:var(--dg-ink)}
.dg-card h4{font-size:13px;margin:12px 0 4px;color:var(--dg-ink)}
.dg-card p,.dg-card li{font-size:12px;color:var(--dg-ink2);line-height:1.75;margin:0}
.dg-card ul{margin:4px 0 0 16px;padding:0}
.dg-rate{display:grid;grid-template-columns:44px 1fr 62px;align-items:center;gap:8px;margin-top:6px}
.dg-rate .rr{font-size:11px;font-weight:700;color:#fff;background:var(--dg-n);border-radius:6px;
  padding:2px 0;text-align:center}
.dg-rate .rr.ssr{background:var(--dg-ssr)} .dg-rate .rr.sr{background:var(--dg-sr)} .dg-rate .rr.r{background:var(--dg-r)}
.dg-rate .track{height:6px;border-radius:3px;background:var(--dg-fill);overflow:hidden}
.dg-rate .fill{display:block;height:100%;border-radius:3px;background:var(--dg-ssr)}
.dg-rate .fill.sr{background:var(--dg-sr)} .dg-rate .fill.r{background:var(--dg-r)} .dg-rate .fill.n{background:var(--dg-n)}
.dg-rate b{text-align:right;font-size:12px;color:var(--dg-ink);font-variant-numeric:tabular-nums}
.dg-rate .sub{grid-column:2/4;font-size:10.5px;color:var(--dg-ink3)}
.dg-row{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--dg-ink2);
  border-bottom:1px solid var(--dg-line2);padding:7px 0}
.dg-row:last-child{border-bottom:none}
.dg-row b{margin-left:auto;color:var(--dg-ink);font-variant-numeric:tabular-nums}
.dg-toc{position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:wrap;background:rgba(250,249,248,.94);
  padding:8px 0;backdrop-filter:blur(4px)}
/* 目录签是按钮而不是 <a>：点它不跳页、只滚到那一段，没有 href 可给 */
.dg-toc button,.dg-toc a{font:inherit;font-size:11.5px;color:var(--dg-ink2);text-decoration:none;
  border:1px solid var(--dg-line);border-radius:10px;padding:5px 10px;background:#fff;cursor:pointer}
.dg-toc button:active,.dg-toc button.on,.dg-toc a:active,.dg-toc a.on{border-color:var(--dg-hot);
  color:var(--dg-hot-ink);background:var(--dg-hot-soft)}

/* 桌面那两块漂浮卡（D-A 13/14）用一条自己的进度条，不借旧 milestone-box 的样式 */
.dg-tierline{height:6px;border-radius:3px;background:var(--dg-fill);overflow:hidden;margin-bottom:6px}
.dg-tierline i{display:block;height:100%;border-radius:3px;background:var(--dg-hot)}

/* ============================================================
   桌面（≥861px）：整屏一张舞台，东西贴四角
   ============================================================ */
@media(min-width:861px){
  .dg-stage{padding:14px 18px 18px;gap:0}
  .dg-tl,.dg-tr{position:absolute;top:14px}
  .dg-tl{left:18px} .dg-tr{right:18px}
  /* 手机上「返回」被压成 44 宽小方块，桌面上恢复成原来那颗带内边距的胶囊（文字宽得多，不用挤）。
     height 要写 44 不能写 auto：auto 会塌成字高 16px，整颗变成一条没高度的细框。 */
  .dg-back{width:auto;height:44px;padding:0 12px;font-size:14px}
  .dg-wishbtn{height:44px;padding:0 12px;font-size:14px}
  .dg-pgrid.picking::before{top:-24px;font-size:12.5px}
  #page-history .dg-side{display:flex}
  .dg-pname{position:absolute;top:64px;right:18px;margin:0}
  .dg-pname b{font-size:30px}

  /* 左边缘那一叠池签：桌面上切池只靠它，底部那颗「卡池」删了 */
  .dg-pools{display:flex;flex-direction:column;gap:8px;position:absolute;left:18px;top:112px;width:132px}
  .dg-vp{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
    padding:10px 12px;border-radius:12px;border:1px solid var(--dg-line);background:#fff;
    color:var(--dg-ink);cursor:pointer;white-space:nowrap}
  .dg-vp b{font-size:14px}
  .dg-vp small{font-size:10.5px;color:var(--dg-ink3)}
  .dg-vp.cur{background:var(--dg-hot-soft);border-color:var(--dg-hot);color:var(--dg-hot-ink)}
  .dg-vp.lock{opacity:.45;cursor:default}

  .dg-mid{flex:1 1 auto;min-height:0;align-items:stretch;justify-content:center;margin-top:0}
  /* 右侧那一竖列移出流、贴右边缘垂直居中。它原来坐在 .dg-mid 里，与那两块漂浮卡
     （absolute right:18）水平上重叠 —— 卡把「奖池」「记录」两颗整个盖住，只露出下面
     两颗，这就是站长 09-26 说的「右边那些满赠进度、说明这些都放到一坨了」。
     移出流以后灯的左右两翼垫块也没用了，居中改由 justify-content 保证（与屏宽无关，
     而 stage 本身居中 → 灯仍在屏幕中线上，那是站长 09-26 的另一条硬要求）。 */
  .dg-side{position:absolute;left:auto;right:18px;top:50%;bottom:auto;transform:translateY(-50%);
    width:44px;flex:0 0 44px;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;gap:12px}
  .dg-gutter{display:none}
  /* 灯：顶到「返回」方块的最上边、底保持在其底下那行抽卡钮之上 —— 站长 09-26 的原话。
     不再用 calc(100dvh - 250px) 猜高度，也不用 height:100%：mid 是 flex:1 1 auto，它的顶就
     是「返回」那一行的顶、底就是下面那一堆东西之上，而 mid 是横排 —— 交叉轴就是垂直，所以高交给
     align-items:stretch 拉。百分比高度在这么一层 flex 链上解不出确定值（实测写 height:100%
     整块塌成 0 高，这一版之前已经踩过一次），拉伸走的是另一套算法，不经过百分比解析。
     宽 620 → 520（上一轮）→ 560（本轮）：灯的本征比例是 0.71（全宽 4.12 / 全高 5.80），
     容器宽只要 ≥ 0.71×容器高就不会卡住灯，多出来的宽只会变成左右空白（所以上一轮说的「框比灯大」）。
     本轮把那两行小字抬到左侧（见下面 .dg-leftinfo）后 mid 高了约 40px，灯需要 0.71×~724 ≈ 514 宽，
     窗口再高一点就需要更多 —— 留到 560 免得到时候宽先到顶、灯却不再变大。 */
  .dg-lamp{flex:0 1 auto;width:min(560px,calc(100% - 320px));min-height:0;
    max-width:none;align-self:stretch}

  /* 许愿行与本池计数行：桌面抬到左侧空档（那里只有上方那叠池签，下面是空的），
     把灯底下 40px 垂直空间全腾给灯 —— 站长 09-27 选的方案。宽 186：上一轮实测 statline
     单行就是 186，再窄就要拆行；底 74：跳过钮实测占 bottom:18 往上 44 高（顶在 y=738），
     这一块高 41，取 74 才与它留到 11px 间距（写 64 就只剩 1px，看着就是贴上了）。
     文字改左对齐 —— 它不再居中在灯下，继续居中会在左边缘留出随机空白。
     手机上这一块是 display:contents（见上面那条），照旧居中排在灯底下。 */
  .dg-leftinfo{position:absolute;left:18px;bottom:74px;width:186px;display:flex;
    flex-direction:column;gap:4px;text-align:left}
  .dg-wishline,.dg-statline{text-align:left;max-width:none;margin:0;min-height:0;white-space:normal}
  .dg-statline{font-size:11px;line-height:1.5}
  /* 桌面这一行：宽给到 520 并靠 auto 边距居中（不写 width 会被收缩到内容 163），
     margin-top:auto 是它贴着页面底部的东西，不能被上边的 shorthand 抹掉 */
  .dg-acts{width:520px;max-width:calc(100% - 36px);margin:auto auto 0;justify-content:center}
  .dg-poolbtn{display:none}                      /* 桌面切池走左列，同一件事不给两个入口 */
  .dg-skip{position:absolute;left:18px;bottom:18px}

  /* 漂浮卡：861~999 这一段不上（灯、左池签与右竖列已经排满，硬塞就是刚才那个一坨）。
     ≥ 1000 才开，见下面那个断点。 */
  .dg-float{display:none;position:absolute;width:186px;background:#fff;border:1px solid var(--dg-line2);
    border-radius:14px;padding:12px 13px;box-shadow:0 2px 10px rgba(60,60,60,.07)}
  .dg-float h3{font-size:12.5px;margin:0 0 6px;color:var(--dg-ink)}
  .dg-float p{font-size:11.5px;color:var(--dg-ink2);line-height:1.7;margin:0}
  /* 概率那张卡底下那句口径：它是给上面那四个数用的，得比数轻一档，不然抢主信息 */
  .dg-float p small{display:block;margin-top:5px;font-size:10.5px;line-height:1.5;color:var(--dg-ink3)}

  .dg-pull{display:none!important}               /* 桌面不盖东西 */
  .dg-scrim{align-items:center}
  .dg-sheet{border-radius:18px}
  /* 历史页桌面：左栏统计 + 筛选躺下，右边记录成表（时间/缩略图/卡名/稀有度四列对齐）。
     左栏 sticky 常驻 —— 记录拉到一百多条时不至于把统计与筛选滑掉。 */
  .dg-his{flex-direction:row;gap:18px;align-items:flex-start;margin-top:122px}
  .dg-his-lr{flex:0 0 186px;width:186px;position:sticky;top:14px;display:flex;flex-direction:column;gap:14px}
  .dg-his-stat{grid-template-columns:repeat(2,1fr)}
  .dg-his-main{flex:1 1 auto;min-width:0}
  .dg-seg{flex-direction:column}
  .dg-segi{width:100%;min-width:0;justify-content:space-between;padding:0 12px}
  .dg-hitem{grid-template-columns:52px 46px 1fr auto;gap:12px;padding:10px 12px}

  /* 奖池网格桌面照图5：一行五张、一张 120（30 格 = 六行，跟手机同一个列数，只是格子变大） */
  .dg-pgrid{grid-template-columns:repeat(5,120px);justify-content:center;gap:18px 14px;margin-top:122px}
  .dg-cell .nm{font-size:11.5px}
  /* 说明页桌面：左目录常驻 + 右边正文，与 D-E 那幅同一个分栏。
     目录与六张卡都是 .dg-body 的直接子元素，所以上面那张两列网格会把它们一行两个地铺 ——
     得把两边钉死在各列上（目录占满整高一列，卡片全走右列逐行往下）。 */
  .dg-body{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:start;
    max-width:900px;margin:6px auto 0}
  .dg-body>.dg-toc{grid-column:1;grid-row:1/-1;align-self:start}
  .dg-body>.dg-card{grid-column:2}
  .dg-body>.dg-toc{flex-direction:column;flex-wrap:nowrap;position:sticky;top:14px;align-items:stretch;
    background:none;padding:0;backdrop-filter:none}
  .dg-body>.dg-toc button{text-align:left}
}

/* 桌面再宽一档（≥1000）才上那两块漂浮卡，并且从右边缘让开那一竖列的 44+12：
   叠在同一列上就是站长这次抱怨的成因。右侧从上到下的次序固定为
   余额·池名 → 满赠进度 → （垂直居中的那一竖列）→ 概率速览，三段互不占位。 */
@media(min-width:1000px){
  .dg-float{display:block}
  /* 两块漂浮卡的右边缘与右侧那一竖列对齐（都是 right:18）—— 站长 09-26：「满赠进度和
     概率速览的方块的最右边和奖池、记录那几个方块的最右边那条边对齐」。原来卡让开竖列
     写到 right:74，右边缘就出一条 56px 的缝，看着像两套对齐。竖列垂直居中占 313..525，
     两张卡一个在 120..223 一个在 690..820，垂直上本就不相遇，不用再水平让位。 */
  .dg-float-mile{right:18px;top:120px}
  .dg-float-odds{right:18px;bottom:18px}
  /* 卡贴到 right:18 以后左边缘进到 18+186 那一块，灯要再多让一点，不然 1000~1100 这一段
     灯的右边会压到概率速览卡上（实测 1000 宽时差 32px）。 */
  .dg-lamp{width:min(560px,calc(100% - 440px))}   /* 与上面那档同宽：这一档多两块漂浮卡，从右侧多让 120 */
}

/* 极窄屏：底部那一行放不下四颗时收缝，不让任何一颗折行（320 内宽实测两颗抽卡钮各 82.5 仍不折） */
@media(max-width:360px){
  .dg-acts{gap:4px}
  .dg-skip{padding:0 8px;font-size:11.5px}
  .dg-mid{gap:6px}
}

/* 尊重系统的「减少动效」：牌堆的补间与提示呼吸全停，功能一个不减 */
@media(prefers-reduced-motion:reduce){
  .dg-prog i{transition:none}
  .dg-skip .dg-sw,.dg-skip .dg-sw:after{transition:none}
  /* 回退灯的翻面：去掉补间而不是去掉翻面 —— WebGL 那盏在 reduce 下也是照翻（只是不给
     荡的冲量），这里给它同样的尺度：点下去立即换面，只是不播补间。 */
  .dg-fb-flip{transition:none}
}