/* ============================================================
   lamp/lamp.css —— 抽卡结果那一层（牌堆：一叠牌 + 「遇见小瓜」当封盖 + 点击打开）
   ============================================================
   这套几何是从抽卡灯原型（gacha-lamp/lamp.css）整搬过来的，尺寸与节奏都是站长在真机上
   验收过的那一版，只在两处按站内情况改了：遮罩底色跟着新壳的瓷白走，那颗提示的文案
   从「点击跳过」换成定稿说的「点击继续」。
   改之前先读完 .rv 那段注释：堆叠为什么必须是瞬时的、封盖为什么不能比牌窄，都在里面。
   ============================================================ */

/* 结果层：整屏覆盖，点哪儿都算推进（开堆 → 一次翻完 → 收）。
   flex-wrap + align-content:center 是牌堆的网格布局：发牌只动 transform，布局一格不重排。 */
.dg-reveal{
  position:fixed;inset:0;z-index:70;display:flex;flex-wrap:wrap;gap:9px;
  align-content:center;justify-content:center;padding:20px;
  background:rgba(58,22,36,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer
}
.dg-reveal[hidden]{display:none}

.rv{
  position:relative;width:min(26vw,120px);aspect-ratio:.6356;border-radius:9px;
  box-shadow:0 8px 26px rgba(0,0,0,.34);background:#33222a;perspective:800px;
  /* --dx/--dy 把网格位补偿到容器中心（JS 用 offsetLeft 量，不能用 getBoundingClientRect ——
     它含 transform，量一次就把自己算歪了）。--ox/--oy/--rot 是堆内错落，--sc 是堆里那张
     相对网格位的放大倍率（见 boot.js 的 layoutStack）。
     这里不写 transition：堆叠是「一进来就该已堆好」的态，它得是瞬时的。补间只挂在 dealt
     那侧 —— 挂在这里的话，JS 量 offsetLeft 那一下会把未堆好的算个起点（强制重排就是提交
     style），整个堆自己「咕」地吸到中间，而这一拍在结果页第一帧就播，看着像牌自己在抽风。实测踩过。 */
  transform:translate(calc(var(--dx,0px) + var(--ox,0px)),calc(var(--dy,0px) + var(--oy,0px))) rotate(var(--rot,0deg)) scale(var(--sc,1))
}
/* 去掉堆叠那套偏移就是发牌。延迟按张数递增，看着是一张张甩到位而不是同时炸开。
   起手那 160ms 是给「提示先淡 → 封盖让开 → 牌再散」排的序，不是随手写的余量。 */
.dg-reveal.dealt .rv{
  transform:none;
  transition:transform .52s cubic-bezier(.22,.86,.3,1.06);
  transition-delay:calc(160ms + var(--k,0) * 55ms)
}
/* 单张（在抽卡页上领满赠那一次）摊开后仍保持放大态。上面那条 dealt 把整串 transform 清成
   none 是为了去掉堆叠错落，但它连 scale(var(--sc)) 一起清了，于是那张卡从封盖等大掉回
   120 宽（站长 09-27：领取那张太小，要和「遇见小瓜」一样大）。只给 .one 把倍率留回来：
   多张（十连）一字不变，它们摊开后就得按网格原尺寸，否则十张 213 宽会叠成一团。 */
.dg-reveal.dealt.one .rv{transform:scale(var(--sc,1))}
/* 翻面结构照搬站内已在生产跑的 .reveal-card（perspective + preserve-3d + backface-visibility）。
   .bk 放卡背图、初始可见，.ft 放卡面图、翻过来才见。 */
.rv-in{
  position:absolute;inset:0;border-radius:9px;transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.4,.05,.2,1)
}
.rv.flipped .rv-in{transform:rotateY(180deg) translateZ(0)}
.rv-face{
  position:absolute;inset:0;border-radius:9px;overflow:hidden;background:#33222a;
  -webkit-backface-visibility:hidden;backface-visibility:hidden
}
.rv-face.ft{transform:rotateY(180deg)}
.rv img{width:100%;height:100%;object-fit:cover;display:block}
.rv .emo{display:grid;place-items:center;height:100%;font-size:min(14vw,64px)}
/* 卡名与稀有度角标都不显示（站长定稿：卡名可重复而卡面必不同，用户靠图分得清；
   角标写的是档位，而卡背是共用的，堆着时必须藏 —— 现在没有需要藏的东西了）。 */
/* 金框与光晕必须等翻开才加：它是「这一发出了 SSR」的宣告，堆着的时候挂上去就是
   开奖前先把答案亮出来。 */
.rv.flipped.ssr{box-shadow:0 8px 26px rgba(0,0,0,.34),0 0 0 2px #c9a227,0 0 30px rgba(201,162,39,.6)}

/* 封盖：「遇见小瓜」的卡背。宽度这条公式是抄正式站的 .card-reveal-container.few .reveal-card
   （clamp(200px,58vw,260px)），不是量出来的漂亮数：灯上被放大那张卡实测占屏 232×360，
   站内出卡遮罩 226×356 —— 差 3%，本来就是一对。
   尺寸差 22% 是封盖的身份（它是包装，不是其中一张），同时给堆内错落留出「不许超出封盖轮廓」
   的余量 —— 卡背在编码稀有度身份（两张 SSR 各有专属背能唯一确定是哪张），
   所以堆叠时严禁露出下方卡牌的可辨识图案。 */
.lid{
  position:absolute;left:50%;top:50%;width:clamp(200px,58vw,260px);aspect-ratio:.6356;
  transform:translate(-50%,-50%);border-radius:12px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.18);z-index:99
}
.lid img{width:100%;height:100%;object-fit:cover;display:block}
/* 放大之后这一下得飞得动：封盖高 356，从中心往上飞 46vh 只走掉它自己的高度，看着像在原位
   淡掉而不是被掀开。多推 20vh，并把淡出往后压到飞行末段再开始。 */
.dg-reveal.dealt .lid{
  transform:translate(-50%,-50%) translateY(-66vh) rotate(-9deg) scale(.72);opacity:0;
  transition:transform .5s .1s cubic-bezier(.3,.7,.2,1),opacity .26s .3s
}

/* 「点击打开」：只在这一发还堆着的时候在，发牌瞬间先淡出。
   pointer-events:none 是硬的：这行字是提示不是按钮，它要是接走了那一下点击，牌堆就永远打不开。
   呼吸挂在里面那层 span 上而不是这层：CSS animation 的优先级高于普通声明，
   在这层做呼吸会把下面那句 opacity:0 盖掉，字会一直呼吸到发牌之后。 */
.openhint{
  position:absolute;left:50%;top:50%;margin-top:calc(var(--halfh,150px) + 26px);
  transform:translateX(-50%);white-space:nowrap;pointer-events:none;z-index:100;
  font-size:13px;letter-spacing:.06em;color:rgba(255,245,246,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.6);transition:opacity .18s
}
.openhint span{display:block;animation:dg-hintbreathe 1.9s ease-in-out infinite}
.dg-reveal.dealt .openhint{opacity:0}
@keyframes dg-hintbreathe{0%,100%{opacity:.42}50%{opacity:1}}

/* 「点击继续」：全部翻完之后出现。在那之前那一下点击另有其职（第一下开堆、第二下把没翻完的
   一次翻完），提前提示会教错用户 —— 那个 done 类由 JS 在最后一张起翻后再等 460ms 才加。
   位置挂在平铺那几行的下缘之外（--gridh 由 layoutStack 量），因为横屏手机上十连要吃掉几乎
   整屏高，钉底部一定会压在牌上。 */
.skiphint{
  position:absolute;left:50%;top:50%;margin-top:calc(var(--gridh,150px) + 20px);
  transform:translateX(-50%);white-space:nowrap;pointer-events:none;z-index:100;opacity:0;
  transition:opacity .3s;font-size:13px;letter-spacing:.06em;color:rgba(255,245,246,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.6)
}
.skiphint span{display:block;animation:dg-hintbreathe 1.9s ease-in-out infinite}
.dg-reveal.done .skiphint{opacity:1}

/* 十连的平铺：一屏要放十张，尺寸让位给数量（单抽出卡仍是上面那一档）。
   26vw 放十张会堆成四行，压到 17vw 手机上一屏看全。 */
.dg-reveal.many{gap:7px;padding:22px}
.dg-reveal.many .rv{width:min(17vw,88px)}

/* 演出中「点击继续」那颗小标（灯停在放大那一瞬时浮在灯下面）。
   它住在页面里而不是结果层里，所以 pointer-events:none 同样是硬的。 */
.dg-tap{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:58;
  padding:8px 16px;border-radius:999px;pointer-events:none;font-size:13.5px;font-weight:600;
  color:var(--dg-hot-ink);background:rgba(255,241,236,.94);box-shadow:0 4px 16px rgba(60,20,35,.26);
  animation:dg-breathe 1.5s ease-in-out infinite;white-space:nowrap
}
.dg-tap[hidden]{display:none}
@keyframes dg-breathe{0%,100%{opacity:.6;transform:translateX(-50%) scale(.97)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}

/* 有人关掉动效，就不该让人对着一个不动的堆猜「这底下有没有东西」：直接摊开。
   只掐 transition/animation，点击推进那一下照旧（那是控制权，不是动效）。 */
@media (prefers-reduced-motion:reduce){
  .rv,.rv-in,.lid{transition:none}
  .openhint span,.skiphint span,.dg-tap{animation:none}
}

/* 矮屏（横屏手机）下十连的两行牌几乎吃掉整屏高，提示只留 6px 缝 —— 再往上就压牌，往下就出屏。
   这里不藏掉它：关掉这一屏恰恰是最需要提示的时候。 */
@media (max-height:460px){
  .skiphint{margin-top:calc(var(--gridh,150px) + 6px)}
}

/* 桌面（≥861px）：一张大桌面能一行摆开十张，尺寸按视口走而不是按 vw 走 */
@media (min-width:861px){
  .rv{width:132px}
  .dg-reveal.many{gap:12px;padding:34px}
  .dg-reveal.many .rv{width:112px}
  .lid{width:280px}
  .dg-tap{bottom:120px}
}