/* 大话骰 · 单挑 —— 紫金擂台(2026-11-02 第一批:老板「背景也换,只是按键的位置不要更改」)
 * 以前是黑金柠檬(design/dark-neon/screens/20–22)。这次只换颜色、材质和背景,所有尺寸、位置、顺序照旧 ——
 * 对照图 output/大话骰等候房间设计/大话骰-换色不换位置对照.jpg。
 * 图片:角色(熊猫 hero / dealer、骰盅、骰子)照旧;擂台背景、熊猫裁判、VS、桂冠环在 /img/duel/arena/(Higgsfield 不带字底图)。
 * --neon 这个名字留着(贴纸、语音条、分享到群都在用),现在它是金色。
 */
.duel {
  position: fixed; inset: 0; z-index: 10; overflow: hidden;
  --vh: 100vh;
  --bg: #13061f; --surface: rgba(36, 16, 60, .9); --surface-2: rgba(48, 22, 80, .92); --line: rgba(226, 180, 96, .5);
  --ink: #fff; --ink-2: #b9a6d6; --ink-3: #6f5b8f; --neon: #f2c35a; --neon-ink: #2b1606; --bad: #ff5a5a;
  --gold: linear-gradient(180deg, #ffe8a6 0%, #f6c95e 45%, #d39832 100%);
  --gold-edge: inset 0 1px 0 rgba(255, 246, 214, .7), inset 0 -2px 0 rgba(120, 66, 10, .35), 0 4px 14px rgba(214, 152, 50, .25);
  --felt-ink: #1d0b33;
  --sans: system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  /* 擂台背景整页铺满,上面压一层暗紫让字看得清;页面本身不滚,所以背景跟着画面不会跑 */
  background: linear-gradient(180deg, rgba(19, 6, 31, .25) 0%, rgba(19, 6, 31, .55) 55%, rgba(19, 6, 31, .8) 100%), url(/img/duel/arena/bg.webp?v=1) center top / cover no-repeat, var(--bg);
  color: var(--ink); font-family: var(--sans);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  /* 熊猫 + 骰盅这一组的缩放。两个必须同一个系数,不然骰盅会从手里掉出去 */
  --art: 1;
}
/* 手机上竖向空间不够:喊了两口之后,叫注条 + 倒计时 + 我的五颗骰就挤不进绒面了。
   先把台面这组装饰缩小让位 —— 屏幕越矮缩得越多。够高的屏幕还是按设计稿的原尺寸。 */
@media (max-height: 860px) { .duel { --art: .82; } }
@media (max-height: 780px) { .duel { --art: .72; } }
@media (max-height: 700px) { .duel { --art: .62; } }
@supports (height: 100dvh) { .duel { --vh: 100dvh; } }
.duel[hidden] { display: none; }
.duel p, .duel h2, .duel h3, .duel h4 { margin: 0; }
.duel img { -webkit-user-drag: none; }
.duel button { appearance: none; border: 0; margin: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.duel button:disabled { cursor: default; }

.dk {
  display: flex; flex-direction: column; height: var(--duel-h, var(--tg-viewport-height, var(--vh)));
  box-sizing: border-box;
  padding: var(--safe-t, 0px) 16px calc(var(--safe-b, 0px) + 12px);
  overflow: hidden auto;
}

/* ---------- 顶栏 ---------- */
.dk-top { display: flex; align-items: center; gap: 12px; flex: none; padding: 12px 0; }
.dk-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dk-icon svg { width: 20px; height: 20px; }
.dk-icon.is-ghost { background: none; box-shadow: none; }
.dk-title { flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 顶栏多了音符按钮(2026-10-23 大话骰有自己那首):间距收一点、标题小一号,余额五位数时标题也不折成两行 */
.dk-top.has-music { gap: 8px; }
.dk-top.has-music .dk-title { font-size: 15px; }
.dk-top.has-music .dk-bal { padding-inline: 10px; }
.dk-bal { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 选底注 ---------- */
.dk-hero { display: block; width: min(78%, 300px); height: auto; margin: 0 auto;
  /* 图是黑底的方图,四边淡出去,免得在纯黑页面上还能看见一个方框 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.dk-lead { margin-top: -4px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.dk-sub { margin-top: 4px; text-align: center; font-size: 14px; color: var(--ink-2); }
.dk-h4 { margin: 22px 0 10px; font-size: 16px; font-weight: 700; }
/* 底注:设计稿 20 是五个正圆。用 grid 等分再配 aspect-ratio,宽的屏上也不会拉成椭圆 */
.dk-stakes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; justify-items: center; }
.dk-stakes-expanded { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-stake-option { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.dk-stake { width: 100%; max-width: 64px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .12s; }
.dk-stake b { color: inherit; font-weight: inherit; }
.dk-stake.is-on, .dk-stake.is-on b { background: none; color: var(--neon-ink); }
.dk-stake.is-on { background: var(--neon); box-shadow: none; }
.dk-stake:disabled { opacity: .4; }
.dk-stake { position: relative; flex: none; }
.dk-stake.has-waiting, .dk-stake.is-self-waiting { box-shadow: inset 0 0 0 1.5px var(--neon), 0 0 14px #e5ff3d20; }
.dk-stake.is-self-waiting:disabled { opacity: 1; }
.dk-stake:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.dk-presence-dot { display: none; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 3px var(--bg); }
.has-waiting .dk-presence-dot, .is-self-waiting .dk-presence-dot { display: block; }
.dk-stake-presence { min-height: 28px; max-width: 100%; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: var(--neon); overflow-wrap: anywhere; }
.duel .dk-presence-note { min-height: 16px; margin: 1px 0 0; text-align: center; font-size: 11px; line-height: 16px; color: var(--ink-2); }
.dk-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 12px 0 18px; font-size: 13px; color: var(--ink-2); }
.dk-meta b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.dk-how { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-top: 14px; padding: 10px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.dk-online { display: flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.dk-online b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-online i { width: 5px; height: 5px; border-radius: 50%; background: var(--neon, #e5ff3d); }
.dk-how b { font-size: 15px; font-weight: 700; }
.dk-how small { font-size: 13px; color: var(--ink-2); }

/* ---------- 按钮 ---------- */
.dk-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 999px; font-size: 17px; font-weight: 700; }
.dk-btn + .dk-btn { margin-top: 10px; }
/* 按钮里面的字、秒数、金额一律点不到:按下、松手、click 都落在按钮本身(里面的字会改,不能让手指落在会被换掉的东西上) */
.dk-btn > *, .dk-btn * { pointer-events: none; }
.dk-btn.primary, .dk-btn.primary b, .dk-btn.primary span { background: none; color: var(--neon-ink); }
.dk-btn.primary { background: var(--neon); }
.dk-btn.ghost { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.dk-btn:active:not(:disabled) { transform: scale(.985); }
.dk-btn:disabled { opacity: .35; }
.dk-wait { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: rgba(10, 10, 10, .18); font-size: 13px; font-variant-numeric: tabular-nums; }
.dk-btn.ghost .dk-wait { background: var(--surface-2); }
.dk-wait[hidden] { display: none; }

/* ---------- 牌桌 ---------- */
.dk-table, .dk-reveal { overflow-x: hidden; overflow-y: auto; }
.dk-table { container-type: size; container-name: duel-table; }
.dk-seats { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex: none; padding-bottom: 6px; }
.dk-seat { display: grid; justify-items: center; gap: 4px; width: 104px; min-width: 0; }
.dk-seat:last-child { order: 3; }
.dk-stake-chip { order: 2; align-self: center; }
.dk-ava { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
/* 叫注气泡里的小头像。只在气泡里用,所以跟着气泡一起收 —— 26px 的圈配 22px 的字
   本来就偏胖,气泡也被它撑到 40px 高。 */
.dk-ava.sm { width: 20px; height: 20px; }
.dk-ava img { width: 100%; height: 100%; object-fit: cover; }
.dk-ava i { font-style: normal; font-size: calc(var(--fs, 22) * 1px); }
.dk-who { display: flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; }
.dk-who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.dk-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--neon); }
.dk-dot.off { background: var(--ink-3); }
.dk-chip { padding: 4px 11px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.dk-chip:empty { display: none; }
.dk-stake-chip { display: flex; gap: 5px; }
.dk-stake-chip b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 绒面:紫色丝绒桌,上缘一道金细弧,往下越来越暗(摆在擂台上的那张桌) */
.dk-felt {
  position: relative; flex: 1; min-height: 0;
  margin: 0 -16px; padding: 0 16px;
  border-radius: 50% 50% 0 0 / 56px 56px 0 0;
  background:
    radial-gradient(34% 44% at 50% 14%, rgba(14, 6, 26, .96) 0%, rgba(14, 6, 26, .7) 50%, rgba(14, 6, 26, 0) 100%),
    radial-gradient(120% 90% at 50% 0%, #3a1764 0%, #26103f 42%, var(--felt-ink) 78%);
  box-shadow: inset 0 1.5px 0 rgba(242, 195, 90, .8), 0 -12px 36px rgba(120, 60, 200, .22);
  display: flex; flex-direction: column; align-items: center;
}
.dk-dealer { position: absolute; left: 50%; top: calc(-38px * var(--art)); width: calc(60% * var(--art)); max-width: calc(250px * var(--art)); transform: translateX(-50%); opacity: .95; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 90%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 90%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; pointer-events: none; }
.dk-cup { position: relative; z-index: 1; flex: none; width: calc(82px * var(--art)); margin-top: calc(104px * var(--art)); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .8)); }
.dk-cup.is-shaking { animation: dk-shake .42s ease-in-out infinite; }
@keyframes dk-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-6px, -4px) rotate(-5deg); } 75% { transform: translate(6px, -4px) rotate(5deg); } }

/* 叫注条不占版面高度 —— 它浮在绒面上,往上盖住骰盅和熊猫的身体。
   height:0 + justify-content:flex-end 的意思是:盒子本身是一条零高的线,气泡从这条线
   往上溢出去。于是不管挂着几口,倒计时、五颗骰、控制面板的位置一模一样,一像素都不动。
   margin-top:auto 把这条线推到倒计时正上方(所以 .dk-turn 那边的 auto 要拿掉,
   两个都写 auto 的话剩余空间会被平分,叫注条会飘到半空中)。

   为什么不让它排在流里:绒面在 393×852 上只有 370px,熊猫加骰盅就吃掉 167px,
   倒计时 54、五颗骰 71 又不能缩,留给叫注条只剩 62px —— 三口要 132px。
   上一版让它「自己滚」来让步,结果是它被压到只剩一口半,玩家看不到对手喊了什么。
   屏幕越矮压得越狠:780 上只剩 30px,一口 40px 都放不下。这是算术问题,挤不出来的。 */
.dk-chain {
  position: relative; z-index: 2; width: 100%;
  flex: none; height: 0; min-height: 0; margin: auto 0 6px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  overflow: visible;
  /* 它现在盖在骰盅上,不能挡住底下的手势 */
  pointer-events: none;
}
.dk-say { display: flex; align-items: center; gap: 8px; flex: none; align-self: flex-start; max-width: 88%; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(21, 21, 21, .92); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.dk-say.mine { align-self: flex-end; flex-direction: row-reverse; padding: 7px 7px 7px 14px; }
.dk-say.is-on { box-shadow: inset 0 0 0 1px var(--neon); }
.dk-say .bid { font-weight: 700; }
.dk-say .auto { padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: 11px; color: var(--ink-2); }
/* 越旧越淡:最新那口(.is-on,黄圈)最实,往上退成背景。
   取代了上一版滚动容器顶部的那道淡出遮罩 —— 现在不滚了,遮罩也就没有意义。 */
.dk-say:nth-last-child(2) { opacity: .6; }
.dk-say:nth-last-child(3) { opacity: .32; }

.dk-turn { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.dk-turn small { font-size: 13px; color: var(--ink-2); }
.dk-timer {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(var(--neon) calc((1 - var(--gone, 0)) * 360deg), var(--line) 0);
}
.dk-timer::after { content: ''; position: absolute; width: 46px; height: 46px; border-radius: 50%; background: var(--felt-ink); }
.dk-timer b { position: relative; z-index: 1; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dk-timer.is-idle { background: var(--line); }
.dk-timer.is-urgent b { color: var(--bad); }

.dk-dice { position: relative; z-index: 2; flex: none; display: flex; justify-content: center; gap: 6px; width: 100%; padding-bottom: 10px; }
.dk-die { width: 17%; max-width: 62px; height: auto; border-radius: 12px; animation: dk-drop .3s var(--ease, cubic-bezier(.2, .8, .3, 1)) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.dk-die.is-hit { box-shadow: 0 0 0 2px var(--neon); }
@keyframes dk-drop { from { opacity: 0; transform: translateY(-18px) rotate(-8deg); } }

/* ---------- 控制面板 ---------- */
.dk-panel { flex: none; display: grid; gap: 10px; padding-top: 10px; }
.dk-panel-lead { text-align: center; font-size: 13px; color: var(--ink-2); }
.dk-bidrow { display: flex; align-items: center; gap: 6px; }
.dk-step { display: grid; place-items: center; width: 40px; height: 44px; flex: none; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 22px; font-weight: 700; }
.dk-count { width: 38px; flex: none; text-align: center; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dk-faces { display: flex; gap: 5px; flex: 1; min-width: 0; }
.dk-face { flex: 1; min-width: 0; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dk-face.is-on { box-shadow: inset 0 0 0 1px var(--neon); }
@media (max-width: 480px) {
  .dk-bidrow { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .dk-step { width: 44px; }
  .dk-faces { flex: 0 0 100%; gap: 4px; }
  .dk-face { min-width: 44px; }
}
.dk-face.is-bad { opacity: .3; }
.dk-pips { display: grid; grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(3, 5px); gap: 2px; }
.dk-pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.dk-face.f1 .dk-pips i, .dk-btn .f1 i { background: var(--bad); }
.dk-btn .dk-pips { display: inline-grid; vertical-align: -2px; }
.dk-btn.primary .dk-pips i { background: var(--neon-ink); }
.dk-pips[data-face="4"] i { background: var(--bad); }
.dk-btn.primary .dk-pips[data-face="4"] i { background: var(--red-deep, #d94545); }

.dk-modes { display: flex; gap: 8px; }
.dk-mode { flex: 1; min-height: 44px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; font-weight: 700; }
.dk-mode.is-on { background: var(--neon); color: var(--neon-ink); box-shadow: none; }
.dk-say .bid, .dk-count, .dk-timer b, .dk-bal { color: var(--ink); }
.dk-mode:disabled { opacity: .35; }

.dk-acts { display: flex; gap: 8px; }
.dk-acts .dk-btn { margin: 0; }
.dk-acts [data-r="bidLabel"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; line-height: 1.25; font-variant-numeric: tabular-nums;
}
.dk-acts [data-r="bidLabel"] .dk-pips { flex: none; vertical-align: initial; }
.dk-acts .dk-btn.primary { flex: 1.6; }
.dk-acts .dk-btn.ghost { flex: 1; padding: 0 10px; font-size: 16px; }
.dk-acts.two .dk-btn.ghost { flex: 1; }
.dk-acts.two .dk-btn.primary { flex: 1.8; }

/* ---------- 开盅结算(设计稿 22) ---------- */
.dk-reveal { padding-top: calc(var(--safe-t, 0px) + 8px); }
.dk-felt.is-open { flex: 0 1 auto; justify-content: flex-start; padding-top: 140px; }
.dk-felt.is-open .dk-dealer { top: -6px; width: 62%; max-width: 250px; }
.dk-cup-open { position: absolute; left: -6px; top: 128px; z-index: 1; width: 92px; pointer-events: none; }
.dk-row-dice { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: 5px; width: 100%; }
.dk-row-dice:first-of-type { padding-left: 78px; }           /* 给左边那只倒着的骰盅让位 */
.dk-row-dice:first-of-type .dk-die { width: 15%; max-width: 54px; }
.dk-row-dice:last-of-type { justify-content: center; }
.dk-shout { position: relative; z-index: 2; margin: 20px 0 0; display: flex; align-items: baseline; gap: 8px; font-size: 44px; font-weight: 800; letter-spacing: -.02em; }
.dk-shout b { color: var(--neon); }
.dk-shout:empty { display: none; }
.dk-strip { position: relative; z-index: 2; margin: 6px 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; font-size: 14px; color: var(--ink-2); text-align: center; }
.dk-strip b { color: var(--ink); font-weight: 700; }
.dk-result { flex: none; margin: auto 0 10px; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.dk-amt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; font-size: 26px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }
.dk-amt small { font-size: .62em; }
.dk-result.is-lose .dk-amt { color: var(--ink); }
/* 输了的金额「−RM x」红字,跟别的游戏一样(老板 10-19);练习桌那几个字不是钱,照旧白 */
.dk-result.is-lose .dk-amt [data-r="amt"] > span { color: var(--bad); }
.dk-rake { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.dk-ready { flex: none; margin-top: 8px; text-align: center; font-size: 13px; color: var(--ink-2); min-height: 18px; }

/* ---------- 规则 / 遮罩 ---------- */
.dk-rules { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
.dk-cover { position: absolute; inset: 0; z-index: 20; display: grid; align-content: center; justify-items: center; gap: 14px; background: rgba(10, 10, 10, .94); color: var(--ink); font-size: 15px; text-align: center; padding: 24px; }
.dk-cover button { min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.dk-cover button:first-of-type { background: var(--neon); color: var(--neon-ink); box-shadow: none; }
.dk-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--neon); animation: dk-spin 1s linear infinite; }
@keyframes dk-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .dk-die, .dk-cup.is-shaking, .dk-spin { animation: none; } }

@media (max-height: 700px) {
  .dk-hero { width: min(62%, 240px); }
  .dk-lead { font-size: 22px; }
  .dk-cup { width: calc(88px * var(--art)); }  /* 跟着 --art 一起缩,不然骰盅会从熊猫手里掉出去 */
  .dk-timer { width: 46px; height: 46px; }
  .dk-timer::after { width: 39px; height: 39px; }
}
.dk-amt i { font-style: normal; }
.dk-amt.is-big { text-shadow: 0 0 26px rgba(229, 255, 61, .55); }

/* ---------- 矮屏幕(手机竖屏,尤其 Telegram 里还要再减掉它自己的顶栏)----------
   放在文件最后:这几条要盖掉上面的原始尺寸,同样权重时后写的赢。
   目的只有一个 —— 把边边角角收一收,腾出竖向空间给叫注条,
   免得「我的五颗骰」压到下面那排选点数的小骰子上去。 */
@media (max-height: 820px) {
  .dk-panel { gap: 8px; padding-top: 6px; }
  .dk-say { padding-top: 5px; padding-bottom: 5px; }
  .dk-dice { padding-bottom: 4px; }
  .dk-turn { margin-bottom: 4px; }
}
@media (max-height: 700px) {
  .dk-panel-lead { display: none; }  /* 「你要喊」—— 下面那颗按钮本来就写着「喊 4个3」 */
  /* 到这个高度,光缩熊猫已经不够了:计时环和五颗骰也一起收小一号。
     不收的话绒面里光是「骰盅 + 计时 + 五颗骰」就已经超高,叫注条压到 0 都还是会溢出去。 */
  .dk-timer { width: 44px; height: 44px; }
  .dk-timer::after { width: 37px; height: 37px; }
  .dk-timer b { font-size: 17px; }
  .dk-die { max-width: 52px; }
  /* 叫注条是往上溢出的,绒面越矮它越往上顶。到这个高度三口会盖到上面那排座位
     (量出来 640px 高的屏上最旧那口比绒面上缘还高 19px),所以只留最近两口。
     被砍的永远是最旧那口 —— 玩家要跟要开,看的是最新的。 */
  .dk-say:nth-last-child(3) { display: none; }
}
@media (max-height: 640px) { .duel { --art: .5; } }

/* Query the content box AFTER Telegram's top/bottom insets, not device height.
   Preserve 44px touch targets; spend less room on artwork and repeated labels. */
@container duel-table (max-height: 720px) {
  .dk-top { padding-block: 4px; }
  .dk-seat > .dk-ava { width: 44px; height: 44px; }
  .dk-seat { gap: 2px; }
  .dk-panel { gap: 6px; padding-top: 4px; }
  .dk-acts .dk-btn { min-height: 44px; }
  .dk-felt { --art: .55; }
  .dk-timer { width: 44px; height: 44px; }
  .dk-timer::after { width: 37px; height: 37px; }
  .dk-timer b { font-size: 17px; }
  .dk-die { max-width: 52px; }
  .dk-dice { padding-bottom: 4px; }
  .dk-turn { margin-bottom: 4px; }
}
@container duel-table (max-height: 600px) {
  .dk-top { padding-block: 0; }
  .dk-felt { --art: .35; }
  .dk-cup { margin-top: calc(64px * var(--art)); }
  .dk-panel { gap: 4px; }
  .dk-panel-lead { display: none; }
  .dk-seat > .dk-chip { display: none; }
  .dk-die { max-width: 44px; }
  .dk-say { padding-block: 4px; }
  .dk-say:nth-last-child(3) { display: none; }
}

/* ---------- 紫金擂台换皮(2026-11-02 第一批):只换颜色、材质、背景,尺寸位置一律不动 ---------- */
/* 金色的那几颗:原本柠檬黄实心的按钮、选中的底注、选中的飞/斋 —— 换成金色渐层 + 深棕字 */
.dk-btn.primary, .dk-stake.is-on, .dk-mode.is-on, .dk-cover button:first-of-type { background: var(--gold); box-shadow: var(--gold-edge); }
.dk-btn.primary:disabled { box-shadow: none; }
/* 深紫按钮、药丸、骰面格:底下一圈细金边(--line 已经是金色),背景半透明一点,让擂台透出来 */
.dk-face.is-on { background: linear-gradient(180deg, #3b2412, #24140a); box-shadow: inset 0 0 0 1.5px var(--neon), 0 0 12px rgba(242, 195, 90, .35); }
.dk-say { background: rgba(30, 12, 52, .92); }
.dk-timer { background: conic-gradient(var(--neon) calc((1 - var(--gone, 0)) * 360deg), rgba(255, 255, 255, .14) 0); }
.dk-timer.is-idle { background: rgba(255, 255, 255, .14); }
.dk-online i { background: #3ddc84; }
.dk-dot { background: #3ddc84; }
.dk-stake.has-waiting, .dk-stake.is-self-waiting { box-shadow: inset 0 0 0 1.5px var(--neon), 0 0 14px rgba(242, 195, 90, .3); }
.dk-amt.is-big { text-shadow: 0 0 26px rgba(242, 195, 90, .55); }
.dk-cover { background: rgba(19, 6, 31, .94); }
/* 熊猫图都是黑底方图:用 screen 混合,黑的地方直接透出后面的擂台 / 紫绒面,不会看到一个黑方框 */
.dk-hero, .dk-dealer { mix-blend-mode: screen; }
.dk-dealer { opacity: 1; }
/* 贴纸面板挂在 body 上、样式表是之后才插进来的:多一层 body 才盖得过它 */
body .duel-sticker-picker { --sticker-surface: #1f0c36; --sticker-tile: #2c1550; --sticker-muted: #b9a6d6; --sticker-accent: #f2c35a; border-color: rgba(226, 180, 96, .35); }

/* ---------- 擂台等候画面(概念图 A)/ 朋友点开的应战画面:照稿一比一(老板 11-02「你和设计差很多噢」) ----------
 * 底图 plate-wait / plate-invite.webp = 设计稿去掉字、头像、按钮,跟设计稿同样 9:16。
 * 底图高 --sh:按屏幕高铺满,但最多只让左右各裁 3%(手机越长越会被裁,设计稿边上的卡片框会被切掉);
 * 屏幕更长时底图贴底,多出来的高度留在顶栏那边(--top),按钮照旧贴近屏幕下缘。
 * 叠上去的东西照设计稿上量出来的比例摆:横 left = 50% + (X − 0.5) × --sw,纵 top = --top + Y × --sh */
.dk-arena { position: relative; overflow: hidden; --vh-now: var(--duel-h, var(--tg-viewport-height, var(--vh)));
  --sh: min(var(--vh-now), calc(100vw * 16 / 9 * 1.06)); --sw: calc(var(--sh) * 9 / 16); --top: calc(var(--vh-now) - var(--sh)); }
.dkp-stage { position: absolute; top: var(--top); left: 50%; width: var(--sw); height: var(--sh); transform: translateX(-50%); pointer-events: none;
  background: url(/img/duel/arena/plate-wait.webp?v=1) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%); mask-image: linear-gradient(180deg, transparent 0, #000 5%); }
.dk-invite .dkp-stage { background-image: url(/img/duel/arena/plate-invite.webp?v=1); }
.dk-arena .dk-top { position: relative; z-index: 3; }
.dk-arena .dk-title { font-size: clamp(18px, calc(var(--sh) * .036), 30px); font-weight: 900; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); }
.dkp { position: absolute; z-index: 1; left: calc(50% + (var(--x, .5) - .5) * var(--sw)); top: calc(var(--top) + var(--y, .5) * var(--sh)); transform: translate(-50%, -50%); margin: 0; text-align: center; white-space: nowrap; }
.dkp b { font-weight: inherit; }
/* 头像滚动:设计稿顶上那条弯弯的玻璃轨道(底图里是空的),头像在里面滚;中间的金框叠在最上面 */
.dkp-reel { --y: .108; width: calc(var(--sw) * .74); height: calc(var(--sh) * .056); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.dkp-reel .dkw-reel-track { display: flex; align-items: center; gap: calc(var(--sw) * .055); height: 100%; width: max-content; animation: dkw-reel 7s linear infinite; }
.dkp-reel img { width: calc(var(--sw) * .085); height: calc(var(--sw) * .085); flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(226, 180, 96, .45); filter: brightness(.9); }
@keyframes dkw-reel { to { transform: translateX(-50%); } }
.dkp-reel-frame { --y: .106; z-index: 2; width: calc(var(--sw) * .108); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--sw) * .006) #f2c35a, 0 0 16px rgba(242, 195, 90, .6); pointer-events: none; }
.dkp-find { --y: .278; font-size: calc(var(--sh) * .021); font-weight: 800; color: #f3ecff; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.dkp-plaque-k { --y: .552; font-size: calc(var(--sh) * .0125); color: #f1dcab; }
.dkp-plaque-v { --y: .574; font-size: calc(var(--sh) * .024); font-weight: 800; color: #f8d77e; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
/* 计时:设计稿右边那颗金圈(底图里拿掉了,这里画);靠右,窄屏夹回屏幕里 */
.dkp-clock { --x: .855; --y: .513; left: min(calc(50% + .355 * var(--sw)), calc(100% - 10px - var(--sw) * .089)); width: calc(var(--sw) * .178); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; gap: 2px;
  background: radial-gradient(circle, #15082a 0 60%, transparent 61%), conic-gradient(var(--neon) calc((1 - var(--gone, 0)) * 360deg), rgba(255, 255, 255, .16) 0);
  box-shadow: 0 0 0 calc(var(--sw) * .006) #2a1450, 0 6px 18px rgba(0, 0, 0, .55); }
.dkp-clock b { font-size: calc(var(--sh) * .022); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dkp-clock small { font-size: calc(var(--sh) * .0125); color: #e9e0ff; }
/* 我的头像:放进底图桂冠中间那个空圆 */
.dkp-me { --y: .694; width: calc(var(--sw) * .205); height: calc(var(--sw) * .205); }
.dkp-me i { --fs: 40 !important; }
.dkp-name { --y: .793; display: flex; align-items: center; gap: 8px; font-size: calc(var(--sh) * .022); font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.dkp-name b { max-width: calc(var(--sw) * .4); overflow: hidden; text-overflow: ellipsis; }
.dkw-ready { padding: 2px 10px; border-radius: 999px; font-size: calc(var(--sh) * .0135); font-weight: 700; color: #5fe39a; background: rgba(20, 60, 40, .7); box-shadow: inset 0 0 0 1px rgba(95, 227, 154, .55); text-shadow: none; }
.dkp-bal { --y: .826; display: flex; align-items: center; gap: 8px; font-size: calc(var(--sh) * .019); color: #d9cdf2; }
.dkp-bal b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.dkp-note { --y: .869; display: flex; align-items: center; gap: 10px; font-size: calc(var(--sh) * .0145); color: #b9a6d6; }
.dkp-note::before, .dkp-note::after { content: ''; width: calc(var(--sw) * .1); height: 1px; background: linear-gradient(90deg, transparent, rgba(185, 150, 255, .7)); }
.dkp-note::after { transform: scaleX(-1); }
/* 分享到群开着时放在「配到对手自动开局」那一行 */
.dkp-share { --y: .861; }
.dk-arena:has(.dkp-share:not([hidden])) .dkp-note { visibility: hidden; }
.dk-arena .room-share-row { padding: 0; min-height: 0; border: 0; background: none; }
.dk-arena .room-share-copy, .dk-arena .room-share-dismiss { display: none; }
.dk-arena .room-share-action { max-width: none; min-height: 32px; padding: 4px 18px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: rgba(30, 12, 52, .85); font-size: calc(var(--sh) * .016); font-weight: 700; color: #f6d27a; }
/* 底下两颗:设计稿左边紫边「取消匹配」、右边金边那颗(放邀请好友)。两颗的位置、大小照设计稿;窄屏左右至少留 16px */
.dkp-row { --y: .92; width: min(calc(var(--sw) * .83), calc(100% - 32px)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--sw) * .035); white-space: normal; }
.dk-arena .dkp-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: max(44px, calc(var(--sh) * .05)); border-radius: 999px; font-size: calc(var(--sh) * .021); font-weight: 800; color: #fff;
  background: rgba(24, 9, 44, .72); box-shadow: inset 0 0 0 2px #8d5bff, 0 0 16px rgba(141, 91, 255, .45); }
.dk-arena .dkp-btn.is-gold { color: #f7d98a; box-shadow: inset 0 0 0 2px #f2c35a, 0 0 18px rgba(242, 195, 90, .45); }
.dkp-btn svg { width: calc(var(--sh) * .026); height: calc(var(--sh) * .026); flex: none; }
.dkp-btn > * { pointer-events: none; }
.dkp-btn:active:not(:disabled) { transform: scale(.98); }
.dkp-btn:disabled { opacity: .45; }
/* 应战画面 */
.dkp-title { --y: .103; display: flex; align-items: baseline; gap: .3em; font-size: calc(var(--sh) * .056); font-weight: 900; letter-spacing: .02em; }
.dkp-title b, .dkp-title span { background: linear-gradient(180deg, #fff3c4 0%, #f7cf62 45%, #c98a22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #5a2c06) drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.dkp-title b { max-width: calc(var(--sw) * .42); overflow: hidden; text-overflow: ellipsis; }
.dkp-host { --y: .196; width: calc(var(--sw) * .196); height: calc(var(--sw) * .196); }
.dkp-you { --x: .495; --y: .639; width: calc(var(--sw) * .2); height: calc(var(--sw) * .2); }
.dkp-host i, .dkp-you i { --fs: 38 !important; }
.dkp-plate { font-size: calc(var(--sh) * .0195); font-weight: 800; color: #fff; padding: .12em 1.4em; border-radius: 999px; background: linear-gradient(180deg, #2c1554, #170a2e); box-shadow: inset 0 0 0 1.5px #c99a48, 0 4px 10px rgba(0, 0, 0, .5); }
.dkp-plate.is-host { --y: .268; min-width: calc(var(--sw) * .24); max-width: calc(var(--sw) * .5); overflow: hidden; text-overflow: ellipsis; }
.dkp-plate.is-you { --y: .713; min-width: calc(var(--sw) * .17); }
.dkp-banner { --y: .295; padding: .25em 1.6em; font-size: calc(var(--sh) * .0135); font-weight: 700; color: #f3d38a;
  background: linear-gradient(90deg, transparent, rgba(28, 11, 50, .92) 14%, rgba(28, 11, 50, .92) 86%, transparent); box-shadow: inset 0 1px 0 rgba(242, 195, 90, .45), inset 0 -1px 0 rgba(242, 195, 90, .45); }
.dkp-banner[hidden] { display: none; }
.dkp-card-k { --y: .762; font-size: calc(var(--sh) * .0152); color: #dccdf5; }
.dkp-card-v { --y: .792; font-size: calc(var(--sh) * .027); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dkp-card-k.is-l, .dkp-card-v.is-l { --x: .16; }
.dkp-card-k.is-r, .dkp-card-v.is-r { --x: .83; }
.dkp-card-mid { --y: .778; width: calc(var(--sw) * .3); white-space: normal; font-size: calc(var(--sh) * .0138); line-height: 1.35; color: #b9a6d6; }
.dk-arena .dkp-accept, .dk-arena .dkp-decline { width: calc(var(--sw) * .61); max-width: calc(100% - 32px); border-radius: 999px; font-weight: 800; }
.dk-arena .dkp-accept { --y: .854; height: max(44px, calc(var(--sh) * .049)); font-size: calc(var(--sh) * .023); color: #3a1d06; background: linear-gradient(180deg, #ffe9a8 0%, #f6c85a 48%, #d8962e 100%); box-shadow: inset 0 1px 0 rgba(255, 248, 220, .8), inset 0 -3px 0 rgba(120, 60, 8, .35), 0 6px 18px rgba(214, 152, 50, .35); }
.dk-arena .dkp-decline { --y: .923; height: max(44px, calc(var(--sh) * .038)); font-size: calc(var(--sh) * .02); color: #fff; background: rgba(24, 9, 44, .78); box-shadow: inset 0 0 0 1.5px #c99a48; }
.dkp-accept > *, .dkp-decline > * { pointer-events: none; }
.dkp-accept:active:not(:disabled), .dkp-decline:active { transform: translate(-50%, -50%) scale(.98); }
.dkp-accept:disabled { opacity: .5; }
.dkp-foot { --y: .974; font-size: calc(var(--sh) * .0128); color: #b9a6d6; white-space: normal; width: min(calc(var(--sw) * .8), calc(100% - 32px)); }
/* 配到对手那一下 */
.dkw-slam { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(70, 24, 120, .88), rgba(12, 4, 22, .94)); animation: dkw-fade 1.3s ease forwards; }
.dkw-slam .dk-ava { width: 88px; height: 88px; box-shadow: 0 0 0 3px var(--neon), 0 0 24px rgba(242, 195, 90, .55); }
.dkw-slam .is-opp { animation: dkw-in-l .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.dkw-slam .is-me { animation: dkw-in-r .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.dkw-slam img { width: 132px; height: auto; animation: dkw-vs .5s .12s cubic-bezier(.2, .9, .3, 1.3) both; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .7)); }
@keyframes dkw-in-l { from { transform: translateX(-60vw); } }
@keyframes dkw-in-r { from { transform: translateX(60vw); } }
@keyframes dkw-vs { from { transform: scale(2.4); opacity: 0; } }
@keyframes dkw-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dkp-reel .dkw-reel-track { animation: none; } }
/* 牌桌、开盅:下半截压一层暗紫,把擂台的绳子盖掉(按钮区干净);上半截照旧看得到擂台的灯 */
.dk-table, .dk-reveal { background: linear-gradient(180deg, transparent 0%, transparent 44%, rgba(19, 6, 31, .9) 60%, var(--bg) 100%); }

/* ---------- 第二批 / 第三批(2026-11-02):好友房大厅、私人房在等、观战 —— 跟等候画面同一套照稿定位 ---------- */
.dk-friends .dkp-stage { background-image: url(/img/duel/arena/plate-lobby.webp?v=1); }
.dk-room .dkp-stage { background-image: url(/img/duel/arena/plate-room.webp?v=1); }
.dk-watch .dkp-stage { background-image: url(/img/duel/arena/plate-watch.webp?v=1); }
.dk-arena .dkp-btn.is-solid { color: #3a1d06; background: var(--gold); box-shadow: var(--gold-edge); }
.dk-arena .dkp-btn.is-thin { height: max(40px, calc(var(--sh) * .042)); font-size: calc(var(--sh) * .018); font-weight: 700; color: #fff; background: rgba(20, 8, 36, .66); box-shadow: inset 0 0 0 1.5px #c99a48; }
.dk-arena .dkp-btn.is-thin svg { width: calc(var(--sh) * .02); height: calc(var(--sh) * .02); }
/* 靠左 / 靠右对齐的(窄屏夹在屏幕里,至少留 12px) */
.dkp.is-left { left: max(12px, calc(50% - .45 * var(--sw))); transform: translateY(-50%); }
.dkp.is-right { left: auto; right: max(12px, calc(50% - .45 * var(--sw))); transform: translateY(-50%); }

/* 选底注页:「好友房」入口浮在熊猫图右上角,不占版面、不挪动任何按钮 */
.dk[data-screen="lobby"] { position: relative; }
.dk-friends-chip { position: absolute; z-index: 2; top: calc(var(--safe-t, 0px) + 72px); right: 16px; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #f7d98a !important; background: rgba(24, 9, 44, .78) !important; box-shadow: inset 0 0 0 1.5px #f2c35a, 0 0 14px rgba(242, 195, 90, .35); }
.dk-friends-chip svg { width: 15px; height: 15px; }

/* ① 好友房大厅 */
.dkp-ftitle { --x: .695; --y: .165; font-size: calc(var(--sh) * .056); font-weight: 900; letter-spacing: .04em; background: linear-gradient(180deg, #fff3c4 0%, #f7cf62 45%, #c98a22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #5a2c06) drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.dkp-fsub { --x: .69; --y: .218; font-size: calc(var(--sh) * .016); font-weight: 700; color: #f6e7c2; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.dkp-tabs { --y: .313; width: min(calc(var(--sw) * .92), calc(100% - 16px)); display: grid; grid-template-columns: 1fr 1fr; }
.dk-arena .dkp-tabs button { position: relative; height: max(44px, calc(var(--sh) * .045)); font-size: calc(var(--sh) * .02); font-weight: 800; color: #b9a6d6; }
.dk-arena .dkp-tabs button.is-on { color: #f7d98a; }
.dkp-tabs button.is-on::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 2px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #c98a22, #ffe39a, #c98a22); box-shadow: 0 0 10px rgba(242, 195, 90, .6); }
.dkp-fbtns { --y: .387; width: min(calc(var(--sw) * .9), calc(100% - 24px)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--sw) * .03); white-space: normal; }
.dkp-fbtns .dkp-btn { height: max(46px, calc(var(--sh) * .053)); font-size: calc(var(--sh) * .022); }
.dkp-fhead { --y: .457; display: flex; align-items: center; gap: 10px; font-size: calc(var(--sh) * .021); font-weight: 800; color: #e7d9ff; }
.dkp-fhead::before, .dkp-fhead::after { content: ''; width: calc(var(--sw) * .16); height: 1px; background: linear-gradient(90deg, transparent, rgba(185, 150, 255, .8)); }
.dkp-fhead::after { transform: scaleX(-1); }
.dkp-flist { top: calc(var(--top) + .485 * var(--sh)); transform: translateX(-50%); width: min(calc(var(--sw) * .93), calc(100% - 16px)); height: calc(var(--sh) * .468); overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--sh) * .009); white-space: normal; text-align: left; -webkit-overflow-scrolling: touch; }
.dkf-empty { margin: calc(var(--sh) * .06) 0 0; text-align: center; font-size: calc(var(--sh) * .016); color: #b9a6d6; }
.dkf-row { flex: none; display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px; min-height: max(64px, calc(var(--sh) * .088)); padding: 6px 12px; box-sizing: border-box; border-radius: 16px;
  background: linear-gradient(180deg, rgba(42, 18, 72, .92), rgba(26, 10, 46, .92)); box-shadow: inset 0 0 0 1px rgba(150, 110, 220, .35); }
.dkf-ava { width: calc(var(--sh) * .066); height: calc(var(--sh) * .066); min-width: 46px; min-height: 46px; box-shadow: 0 0 0 2px #7c4fd6; }
.dkf-mid { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 2px; min-width: 0; font-size: calc(var(--sh) * .0175); color: #e9e0ff; }
.dkf-mid b { font-weight: 800; color: #fff; }
.dkf-mid em { flex-basis: 100%; font-style: normal; font-weight: 800; font-size: calc(var(--sh) * .02); color: #fff; font-variant-numeric: tabular-nums; }
.dkf-seats { display: flex; align-items: center; gap: 4px; font-size: calc(var(--sh) * .016); color: #c4b2e8; font-variant-numeric: tabular-nums; }
.dkf-seats svg { width: calc(var(--sh) * .02); height: calc(var(--sh) * .02); }
.dkf-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: calc(var(--sh) * .0145); font-weight: 700; color: #d9c8ff; box-shadow: inset 0 0 0 1px #8d5bff; background: rgba(60, 30, 110, .6); white-space: nowrap; }
.dkf-tag svg { width: 1em; height: 1em; }
.dkf-tag.is-lock { color: #f7d98a; box-shadow: inset 0 0 0 1px #c99a48; background: rgba(60, 35, 10, .5); }
.dkf-tag.is-play { color: #c9c3d6; box-shadow: inset 0 0 0 1px #8b8399; background: rgba(60, 55, 70, .55); }
.dk-arena .dkf-go { min-width: 72px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: calc(var(--sh) * .018); font-weight: 800; color: #3a1d06; background: var(--gold); box-shadow: var(--gold-edge); }
.dk-arena .dkf-go.is-ghost { color: #fff; background: rgba(24, 9, 44, .7); box-shadow: inset 0 0 0 1.5px #8d5bff; }
.dkp-fnote { --y: .975; font-size: calc(var(--sh) * .013); color: #9d8cbf; }
@media (max-width: 380px) { .dkf-row { grid-template-columns: auto 1fr auto auto; } .dkf-seats { display: none; } }

/* 选底注 / 输房号的小弹层 */
.dko { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(10, 4, 20, .72); }
.dko-card { position: relative; box-sizing: border-box; width: min(340px, 100%); padding: 22px 18px 18px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, #2a1150, #170a2c); box-shadow: inset 0 0 0 1.5px #c99a48, 0 18px 40px rgba(0, 0, 0, .6); }
.dko-card h3 { margin: 0 0 4px; font-size: 20px; font-weight: 900; color: #f7d98a; }
.dko-card p { margin: 0 0 14px; font-size: 13px; color: #c4b2e8; }
.dko-stakes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
.dko-code { box-sizing: border-box; width: 100%; height: 58px; margin: 0 0 14px; border: 0; border-radius: 14px; text-align: center; font: 800 30px/1 var(--sans); letter-spacing: .4em; text-indent: .4em; color: #fff; background: #12061f; box-shadow: inset 0 0 0 1.5px #c99a48; }
.dko-code:focus { outline: 2px solid #f2c35a; outline-offset: 2px; }
.dk-arena .dko-x, .dko-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; color: #c4b2e8; }

/* ② 私人房在等好友 */
.dkp-rplate { --y: .093; width: calc(var(--sw) * .7); max-width: calc(100% - 24px); display: flex; align-items: center; justify-content: space-around; font-size: calc(var(--sh) * .0185); color: #fff; }
.dkp-rplate i { width: 1px; height: 1.3em; background: rgba(242, 195, 90, .55); }
.dkr-c { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.dk-arena .dkr-c { font-size: inherit; color: #fff; min-height: 36px; }
.dkr-c b { color: #f6d27a; font-weight: 800; font-variant-numeric: tabular-nums; }
.dkr-c svg { width: calc(var(--sh) * .021); height: calc(var(--sh) * .021); color: #f2c35a; }
.dkp-rcap { --y: .285; font-size: calc(var(--sh) * .0185); font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.dkp-rme { --y: .61; width: calc(var(--sw) * .205); height: calc(var(--sw) * .205); }
.dkp-rme i { --fs: 40 !important; }
.dkp-plate.is-rhost { --y: .70; display: flex; align-items: center; gap: 8px; max-width: calc(var(--sw) * .5); }
.dkp-plate.is-rhost b { overflow: hidden; text-overflow: ellipsis; }
.dkr-tag { padding: 0 8px; border-radius: 6px; font-size: calc(var(--sh) * .0125); line-height: 1.6; color: #3a1d06; background: linear-gradient(180deg, #ffe39a, #d9a03a); }
.dk-arena .dkp-rinvite { --y: .782; display: flex; align-items: center; justify-content: center; gap: 12px; width: calc(var(--sw) * .68); max-width: calc(100% - 40px); height: max(50px, calc(var(--sh) * .062)); border-radius: 999px;
  font-size: calc(var(--sh) * .03); font-weight: 900; color: #2b1606; background: linear-gradient(180deg, #ffe9a8 0%, #f6c85a 48%, #d8962e 100%); box-shadow: inset 0 1px 0 rgba(255, 248, 220, .8), inset 0 -3px 0 rgba(120, 60, 8, .35), 0 8px 22px rgba(214, 152, 50, .4); }
.dkp-rinvite svg { width: calc(var(--sh) * .032); height: calc(var(--sh) * .032); }
.dkp-rinvite > * { pointer-events: none; }
.dk-arena .dkp-rinvite:active { transform: translate(-50%, -50%) scale(.98); }
.dkp-rhint { --y: .832; font-size: calc(var(--sh) * .0155); color: #c4b2e8; }
.dkp-rrow { --y: .895; width: calc(var(--sw) * .7); max-width: calc(100% - 40px); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--sw) * .05); white-space: normal; }
.dkp-rfoot-l { --y: .966; left: max(12px, calc(50% - .45 * var(--sw))); transform: translateY(-50%); display: flex; align-items: center; gap: 6px; font-size: calc(var(--sh) * .0155); color: #c4b2e8; }
.dkp-rfoot-l svg { width: calc(var(--sh) * .02); height: calc(var(--sh) * .02); }
.dkp-rfoot-l b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.dk-arena .dkp-rfoot-r { --y: .966; left: auto; right: max(4px, calc(50% - .47 * var(--sw))); transform: translateY(-50%); min-height: 44px; padding: 0 8px; font-size: calc(var(--sh) * .0155); color: #c4b2e8; }
/* 应战画面:私人房锁牌 */
.dkp-ibadge { --x: .825; --y: .152; display: flex; align-items: center; gap: 6px; padding: .2em .9em; border-radius: 999px; font-size: calc(var(--sh) * .0155); font-weight: 700; color: #fff; background: rgba(20, 8, 36, .78); box-shadow: inset 0 0 0 1.5px #c99a48; left: min(calc(50% + .325 * var(--sw)), calc(100% - 12px - var(--sw) * .1)); }
.dkp-ibadge[hidden] { display: none; }
.dkp-ibadge svg { width: 1em; height: 1em; color: #f2c35a; }
.dkp-ibadge b { color: #f6d27a; font-variant-numeric: tabular-nums; }

/* ④ 观战 */
.dkw-eye { padding: 4px 10px; border-radius: 999px; background: rgba(20, 8, 36, .7); box-shadow: inset 0 0 0 1px rgba(185, 150, 255, .4); }
.dkw-eye svg { width: 14px; height: 14px; }
.dkp-wstrip-l { --y: .102; left: max(16px, calc(50% - .43 * var(--sw))); transform: translateY(-50%); display: flex; align-items: center; gap: 5px; font-size: calc(var(--sh) * .018); color: #fff; }
.dkp-wstrip-l b, .dkp-wstrip-r b { color: #f6d27a; font-weight: 800; font-variant-numeric: tabular-nums; }
.dkp-wstrip-r { --y: .102; left: auto; right: max(16px, calc(50% - .43 * var(--sw))); transform: translateY(-50%); display: flex; gap: 4px; font-size: calc(var(--sh) * .018); font-weight: 700; color: #f6d27a; }
.dkp-seat { --y: .203; width: calc(var(--sw) * .19); height: calc(var(--sw) * .19); }
.dkp-seat i { --fs: 36 !important; }
.dkp-seat.is-l, .dkp-sname.is-l, .dkp-sdice.is-l { --x: .14; }
.dkp-seat.is-r, .dkp-sname.is-r, .dkp-sdice.is-r { --x: .86; }
.dkp-sname { --y: .278; min-width: calc(var(--sw) * .19); max-width: calc(var(--sw) * .26); overflow: hidden; text-overflow: ellipsis; padding: .12em .9em; box-sizing: border-box; border-radius: 999px; font-size: calc(var(--sh) * .019); font-weight: 800; color: #fff; background: rgba(20, 8, 36, .88); box-shadow: inset 0 0 0 1.5px #c99a48; }
.dkp-sdice { --y: .309; min-width: calc(var(--sw) * .17); padding: .08em .9em; box-sizing: border-box; border-radius: 999px; font-size: calc(var(--sh) * .0165); font-weight: 700; color: #fff; background: rgba(70, 30, 130, .78); box-shadow: inset 0 0 0 1px rgba(185, 150, 255, .6); }
.dkp-sdice:empty { display: none; }
.dkp-sturn { --x: .15; --y: .34; display: flex; align-items: center; gap: 6px; padding: .2em .9em; border-radius: 999px; font-size: calc(var(--sh) * .0165); font-weight: 700; color: #fff; background: rgba(40, 18, 8, .85); box-shadow: inset 0 0 0 1.5px #f2c35a, 0 0 14px rgba(242, 195, 90, .45); }
.dkp-sturn.is-r { --x: .85; }
.dkp-sturn[hidden] { display: none; }
.dkp-sturn svg { width: 1em; height: 1em; color: #f2c35a; }
.dkp-wlabel { --y: .583; font-size: calc(var(--sh) * .0155); font-weight: 700; color: #f6e7c2; }
.dkp-reveal { --y: .44; z-index: 2; width: min(calc(var(--sw) * .92), calc(100% - 16px)); display: grid; justify-items: center; gap: 6px; padding: 12px 10px; box-sizing: border-box; border-radius: 18px; background: rgba(14, 6, 26, .9); box-shadow: inset 0 0 0 1.5px rgba(242, 195, 90, .65), 0 12px 30px rgba(0, 0, 0, .6); white-space: normal; }
.dkp-reveal[hidden] { display: none; }
.dkr-shout { font-size: calc(var(--sh) * .036); font-weight: 900; color: #f7d98a; }
.dkr-dice { display: flex; align-items: center; gap: 4px; }
.dkr-dice img { width: calc(var(--sw) * .105); max-width: 46px; height: auto; border-radius: 8px; }
.dkr-dice .dk-ava { margin-right: 6px; }
.dkr-strip { display: flex; gap: 6px; margin: 2px 0 0; font-size: calc(var(--sh) * .017); color: #c4b2e8; }
.dkr-strip b { color: #fff; }
.dkr-win { display: flex; gap: 6px; margin: 0; font-size: calc(var(--sh) * .02); font-weight: 900; color: #f7d98a; }
.dkp-cheers { --y: .545; left: min(calc(50% + .4 * var(--sw)), calc(100% - 64px)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; }
.dkc-bubble { padding: .25em .85em; border-radius: 999px; font-size: calc(var(--sh) * .0145); font-weight: 700; color: #fff; background: rgba(70, 40, 140, .78); box-shadow: inset 0 0 0 1px rgba(185, 150, 255, .55); animation: dkc-in .3s ease-out both; }
.dkc-bubble b { margin-right: 4px; color: #d9c8ff; font-weight: 700; }
@keyframes dkc-in { from { opacity: 0; transform: translateY(8px); } }
.dkp-chain { --y: .703; width: min(calc(var(--sw) * .92), calc(100% - 16px)); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; white-space: normal; }
.dkc-say { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: 14px; background: rgba(26, 10, 46, .85); box-shadow: inset 0 0 0 1px rgba(150, 110, 220, .45); opacity: .75; }
.dkc-say.is-on { opacity: 1; box-shadow: inset 0 0 0 1.5px #f2c35a, 0 0 14px rgba(242, 195, 90, .35); }
.dkc-say.is-empty { grid-column: span 3; justify-content: center; font-size: calc(var(--sh) * .016); color: #b9a6d6; opacity: 1; }
.dkc-say .dk-ava.sm { width: 26px; height: 26px; flex: none; }
.dkc-say > span:last-child { display: grid; min-width: 0; }
.dkc-say small { font-size: calc(var(--sh) * .0125); color: #c4b2e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkc-say b { font-size: calc(var(--sh) * .019); font-weight: 800; color: #fff; white-space: nowrap; }
.dkc-now { display: grid; place-content: center; text-align: center; padding: 4px 6px; border-radius: 14px; background: linear-gradient(180deg, #3b2412, #1e1008); box-shadow: inset 0 0 0 1.5px #c99a48; }
.dkc-now small { font-size: calc(var(--sh) * .0125); color: #f3dfb0; }
.dkc-now b { font-size: calc(var(--sh) * .023); font-weight: 900; color: #f8d77e; white-space: nowrap; }
.dkp-cheerbtns { --y: .798; width: min(calc(var(--sw) * .82), calc(100% - 24px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--sw) * .03); white-space: normal; }
.dkp-wbtns { --y: .90; width: min(calc(var(--sw) * .9), calc(100% - 24px)); display: grid; grid-template-columns: 1.6fr 1fr; gap: calc(var(--sw) * .05); white-space: normal; }
.dkp-wbtns .dkp-btn { height: max(48px, calc(var(--sh) * .062)); font-size: calc(var(--sh) * .024); }

/* ----- 大厅「快速配对」页(11-02 老板「重新设计」):跟好友房同一张底图(熊猫横幅 + 紫色面板),上面两页切换,
 * 下面一整栏从分页底下排到屏幕底:选底注(8 档 4 × 2)→ 有人等待 → 余额 / 抽水 → 开始匹配 → 陪练 | 怎么玩 → 好友房入口卡 ----- */
.dk-lobby .dkp-stage { background-image: url(/img/duel/arena/plate-lobby.webp?v=1); }
.dkq-body { top: calc(var(--top) + .352 * var(--sh)); bottom: calc(var(--safe-b, 0px) + 12px); transform: translateX(-50%); width: min(calc(var(--sw) * .92), calc(100% - 24px));
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; white-space: normal; text-align: left; }
.dkq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: calc(var(--sh) * .02); color: #fff; }
.dkq-head b { font-weight: 800; }
.dkq-head span { font-size: calc(var(--sh) * .015); color: #b9a6d6; }
.dk-lobby .dk-stakes { row-gap: 0; }
.dk-lobby .dk-stakes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-lobby .dk-stake-option { gap: 3px; }
.dk-lobby .dk-stake { max-width: min(68px, calc(var(--sw) * .17)); font-size: clamp(15px, calc(var(--sh) * .022), 19px); background: rgba(30, 12, 52, .78); box-shadow: inset 0 0 0 1.5px #c99a48; }
.dk-lobby .dk-stake.is-on { background: var(--gold); box-shadow: var(--gold-edge), 0 0 16px rgba(242, 195, 90, .45); }
.dk-lobby .dk-stake-presence { min-height: 14px; }
.duel .dk-lobby .dk-presence-note { margin: 0; text-align: center; color: #c4b2e8; }
.dk-lobby .dk-meta { margin: 0; font-size: calc(var(--sh) * .015); color: #b9a6d6; }
.dk-lobby .dk-btn { min-height: max(48px, calc(var(--sh) * .058)); font-size: calc(var(--sh) * .022); font-weight: 800; }
.dk-lobby .dk-btn + .dk-btn { margin-top: 0; }
.dkq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dk-lobby .dkq-row .dk-btn, .dk-lobby .dkq-row .dk-how { min-height: max(46px, calc(var(--sh) * .052)); margin: 0; font-size: calc(var(--sh) * .019); }
.dk-lobby .dkq-row .dk-btn.ghost, .dk-lobby .dk-how { border-radius: 999px; background: rgba(24, 9, 44, .78); box-shadow: inset 0 0 0 1.5px #c99a48; color: #fff; }
.dk-lobby .dk-how { padding: 0 18px; }
.dk-lobby .dk-how b { font-size: inherit; font-weight: 800; }
.dk-lobby .dk-how span { color: #f7d98a; }
.dk-arena .dkq-rooms { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: max(60px, calc(var(--sh) * .076)); padding: 8px 16px 8px 10px; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, rgba(86, 38, 150, .78), rgba(30, 12, 52, .9)); box-shadow: inset 0 0 0 1.5px #c99a48, 0 0 18px rgba(242, 195, 90, .16); }
.dkq-rooms:active { transform: scale(.985); }
.dkq-rooms-ico { display: grid; place-items: center; width: max(40px, calc(var(--sh) * .05)); height: max(40px, calc(var(--sh) * .05)); border-radius: 50%; background: var(--gold); box-shadow: var(--gold-edge); color: #3a1d06; }
.dkq-rooms-ico svg { width: 46%; height: 46%; }
.dkq-rooms-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dkq-rooms-txt b { font-size: calc(var(--sh) * .021); font-weight: 900; color: #f7d98a; }
.dkq-rooms-txt small { font-size: calc(var(--sh) * .015); color: #d9c8ff; }
.dkq-rooms-txt small[hidden] { display: none; }
.dkq-rooms-txt em { font-style: normal; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dkq-rooms-go { font-size: 24px; color: #f7d98a; }

/* ---------- VIP 卡座(11-02 老板选 B):牌桌 / 开盅 / 等候 / 私人房在等,照稿一比一 ----------
 * 底图是设计稿去掉字、按键、头像、骰子的那张(img/duel/vip/plate-*.webp),定位跟擂台那套一样:
 * left = 50% + (X − 0.5) × --sw、top = --top + Y × --sh,X / Y 是在设计稿上量出来的比例。
 * DOM 和逻辑一行没动(贴纸、语音、倒数、叫注照旧),这里只是把每样东西挪到稿子上的位置、换上稿子的样子。 */
.dk-vip.dk-table, .dk-vip.dk-reveal { overflow: hidden; }
/* 底图上面那截(长屏幕多出来的高度)不能露出擂台的灯:整屏先铺一层跟卡座顶上一样的深紫,底图上缘本来就淡出 */
.dk.dk-vip, .dk.dk-vlob { background: linear-gradient(180deg, #0a0412 0%, #12061f 100%); }
.dk-vip.dk-table .dkp-stage { background-image: url(/img/duel/vip/plate-table.webp?v=3); }
.dk-vip.dk-reveal .dkp-stage { background-image: url(/img/duel/vip/plate-reveal.webp?v=3); }
.dk-vip[data-screen="wait"] .dkp-stage { background-image: url(/img/duel/vip/plate-wait.webp?v=1); }
.dk-vip.dk-room .dkp-stage { background-image: url(/img/duel/vip/plate-room.webp?v=1); }
.dk-vip .dk-bal { background: rgba(20, 8, 36, .8); box-shadow: inset 0 0 0 1.5px #c99a48; color: #fff; }

/* 牌桌:两个座位放进底图的两个空金框(对手在卡座中间、我在左边),名牌接在金框下面 */
.dk-vip .dk-seats { position: static; display: block; padding: 0; }
.dk-vip .dk-seat { --ava: calc(var(--sw) * .18); position: absolute; z-index: 3; width: auto; gap: 0;
  left: calc(50% + (var(--x) - .5) * var(--sw)); top: calc(var(--top) + var(--y) * var(--sh)); transform: translate(-50%, calc(var(--ava) * -.5)); }
.dk-vip .dk-seat[data-sticker-seat="opponent"] { --x: .503; --y: .2498; position: absolute; } /* duel-stickers.css 的 .dk-seat[data-sticker-seat] 后载入、会盖回 relative */
.dk-vip .dk-seat:not([data-sticker-seat]) { --x: .1545; --y: .4388; --ava: calc(var(--sw) * .175); }
/* 对手的语音小条:放在对手金框左边、跟头像同高的卡座上。挂在名牌下面会落到桌子正中间、被倒数金圈压住(老板 11-05「跑到中间不明显」);
   右边是叫注气泡往上长的地方、下面是贴纸气泡,都不能放 */
.dk-vip .dk-seat[data-sticker-seat="opponent"] > .duel-voice-pill { top: calc(var(--ava) / 2); left: auto; right: calc(100% + 6px); translate: 0 -50%; width: max-content; max-width: calc(50vw - var(--sw) * .1 - 12px); padding: 0 10px; white-space: normal; text-align: left; line-height: 1.15; }
.dk-vip .dk-seat[data-sticker-seat="opponent"] > .duel-voice-pill[data-state=tap] { color: var(--neon-ink); background: var(--neon); border-color: var(--neon); box-shadow: 0 0 14px rgba(242, 195, 90, .6); }
.dk-vip .dk-seat[data-sticker-seat="opponent"] > .duel-voice-pill[data-state=tap] span { color: inherit; }
.dk-vip .dk-seat .dk-ava { width: var(--ava); height: var(--ava); background: #1a0b2e; box-shadow: none; }
.dk-vip .dk-ava i { --fs: 30 !important; color: #f7d98a; }
.dk-vip .dk-who, .dk-vip .dk-seat .dk-chip { box-sizing: border-box; display: flex; justify-content: center; min-width: calc(var(--sw) * .19); background: linear-gradient(180deg, #24103f, #12071f); box-shadow: inset 0 0 0 1px rgba(201, 154, 72, .75); }
.dk-vip .dk-who { margin-top: calc(var(--sw) * .014); padding: 3px 10px 1px; border-radius: 10px 10px 0 0; max-width: calc(var(--sw) * .26); }
.dk-vip .dk-who:last-child, .dk-vip .dk-who:has(+ .dk-chip:empty) { border-radius: 10px; padding-bottom: 3px; }
.dk-vip .dk-who b { font-size: calc(var(--sh) * .0165); color: #fff; }
.dk-vip .dk-seat .dk-chip { padding: 1px 10px 4px; border-radius: 0 0 10px 10px; font-size: calc(var(--sh) * .0145); color: #e9d8b0; }
.dk-vip .dk-dot { order: -1; background: #3ddc84; }
.dk-vip .dk-dot.off { background: #6b5e80; }
/* 底注:设计稿那块金边桌卡的位置(左边、我的金框上面) */
.dk-vip .dk-seats > .duel-sticker-seat { position: absolute; z-index: 3; left: calc(50% + (.19 - .5) * var(--sw)); top: calc(var(--top) + .335 * var(--sh)); transform: translate(-50%, -50%); }
.dk-vip .dk-stake-chip { flex-direction: column; align-items: center; gap: 0; padding: 4px 14px; border-radius: 8px; background: linear-gradient(180deg, #3a2410, #1c1007); box-shadow: inset 0 0 0 1.5px #c99a48, 0 6px 14px rgba(0, 0, 0, .6); font-size: calc(var(--sh) * .014); color: #f1dcab; }
.dk-vip .dk-stake-chip b { font-size: calc(var(--sh) * .022); color: #f8d77e; }
/* 熊猫、对手的骰盅都画在底图里:原来那两张图收起来 */
.dk-vip .dk-felt { position: static; flex: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; display: block; }
.dk-vip .dk-dealer, .dk-vip .dk-cup, .dk-vip .dk-cup-open { display: none; }
/* 叫注:设计稿右边那颗霓虹对话框;零高的线放在对话框下缘,气泡往上长,最新那口最亮 */
.dk-vip .dk-chain { position: absolute; z-index: 4; left: calc(50% + .115 * var(--sw)); top: calc(var(--top) + .29 * var(--sh)); width: min(calc(var(--sw) * .37), calc(50% - .115 * var(--sw) - 8px)); margin: 0; }
.dk-vip .dk-say { max-width: 100%; padding: 6px 14px 6px 6px; background: rgba(28, 10, 52, .9); box-shadow: inset 0 0 0 1.5px rgba(176, 108, 255, .55); font-size: calc(var(--sh) * .017); }
.dk-vip .dk-say.mine { padding: 6px 6px 6px 14px; }
.dk-vip .dk-say.is-on { box-shadow: inset 0 0 0 2px #c58bff, 0 0 14px rgba(176, 108, 255, .7), 0 0 30px rgba(176, 108, 255, .35); }
.dk-vip .dk-say .bid { color: #fff; }
/* 倒数:桌子中间那颗金圈,「该你了」在下面 */
.dk-vip .dk-turn { --tm: calc(var(--sw) * .135); position: absolute; z-index: 3; left: 50%; top: calc(var(--top) + .392 * var(--sh) - var(--tm) / 2); transform: translateX(-50%); flex-direction: column; gap: 2px; margin: 0; }
.dk-vip .dk-timer { width: var(--tm); height: var(--tm); background: conic-gradient(#f2c35a calc((1 - var(--gone, 0)) * 360deg), rgba(255, 255, 255, .14) 0); box-shadow: 0 0 18px rgba(242, 195, 90, .45); }
.dk-vip .dk-timer::after { width: calc(var(--tm) - 9px); height: calc(var(--tm) - 9px); background: radial-gradient(circle, #2a1346, #12071f); }
.dk-vip .dk-timer b { font-size: calc(var(--tm) * .42); color: #fbe3a0; }
.dk-vip .dk-timer.is-idle { background: rgba(255, 255, 255, .14); box-shadow: none; }
.dk-vip .dk-turn small { font-size: calc(var(--sh) * .022); font-weight: 900; color: #f7d98a; text-shadow: 0 0 10px rgba(242, 195, 90, .55), 0 2px 4px rgba(0, 0, 0, .8); }
/* 我的五颗骰:摆在大理石桌上、我的金框右边 */
.dk-vip .duel-my-hand { position: absolute; z-index: 3; left: calc(50% + .03 * var(--sw)); top: calc(var(--top) + .497 * var(--sh)); transform: translate(-50%, -50%); width: calc(var(--sw) * .52); }
.dk-vip .dk-dice { padding: 0; gap: calc(var(--sw) * .014); }
.dk-vip .dk-die { width: calc(var(--sw) * .088); max-width: none; border-radius: 10px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
/* 控制面板:放进底图那块空的毛玻璃面板;顺序照稿:你要喊 → 个数 → 六个点数 → 飞 / 斋 → 喊 / 开! / 劈 → 按住说话 | 互动 */
/* 下缘钉在底图面板的下缘(.96),高度至少是那块面板,放不下就往上长,不压缩:
 * 以前固定高度 + 按比例的 fr 行,叫注那块还横跨两行。窄屏(360 宽的 Android,--sh 只有约 678,面板约 254 px,
 * 最少要约 275)或旧版 Chromium(算 fr 行高时不管横跨两行的那块)上,点数那排被挤进「飞 / 斋」那行、
 * 斋盖在点数上,按点数按到斋(11-04 玩家投诉的截图)。现在每行照内容的高度,多出来的平均分成行距 */
.dk-vip .dk-panel { position: absolute; z-index: 3; left: 50%; transform: translate(-50%, -100%); top: calc(var(--top) + .96 * var(--sh) - var(--safe-b, 0px)); min-height: calc(var(--sh) * .375 - var(--safe-b, 0px));
  width: min(calc(var(--sw) * .84), calc(100% - 24px)); padding: 0; gap: calc(var(--sh) * .008); align-items: center; align-content: space-between;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "lead lead" "bid bid" "modes modes" "acts acts" "voice stick"; }
.dk-vip .duel-sticker-toolbar { display: contents; }
.dk-vip .duel-sticker-toolbar .dk-panel-lead { grid-area: lead; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: calc(var(--sh) * .022); font-weight: 900; color: #f7d98a; text-shadow: 0 0 10px rgba(242, 195, 90, .45); }
.dk-vip .dk-panel-lead::before, .dk-vip .dk-panel-lead::after { content: ''; width: calc(var(--sw) * .2); height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 195, 90, .75)); }
.dk-vip .dk-panel-lead::after { transform: scaleX(-1); }
.dk-vip .duel-sticker-toolbar .duel-sticker-seat.duel-voice-slot { grid-area: voice; justify-self: stretch; }
.dk-vip .duel-sticker-toolbar .duel-sticker-seat:not(.duel-voice-slot) { grid-area: stick; justify-self: stretch; }
.dk-vip .duel-sticker-toolbar button { width: 100%; min-height: max(42px, calc(var(--sh) * .046)); display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px;
  background: rgba(24, 9, 44, .8); box-shadow: inset 0 0 0 1.5px rgba(160, 110, 255, .55); color: #fff; font-size: calc(var(--sh) * .019); font-weight: 800; }
.dk-vip .duel-sticker-toolbar button[hidden] { display: none; }
.dk-vip .dk-bidrow { grid-area: bid; align-self: stretch; flex-wrap: wrap; justify-content: center; align-content: space-between; gap: 0; }
.dk-vip .dk-step { position: relative; z-index: 1; width: max(44px, calc(var(--sh) * .052)); height: max(44px, calc(var(--sh) * .052)); border-radius: 50%; color: #fff; font-size: calc(var(--sh) * .03);
  background: radial-gradient(circle at 50% 35%, #6a3ae0, #3a1a8c 70%); box-shadow: inset 0 0 0 1.5px rgba(197, 139, 255, .8), 0 0 10px rgba(140, 80, 255, .5); }
.dk-vip .dk-step:disabled { opacity: .45; }
.dk-vip .dk-count { display: grid; place-items: center; width: calc(var(--sw) * .36); height: max(44px, calc(var(--sh) * .052)); margin: 0 calc(var(--sh) * -.03); border-radius: 999px;
  background: rgba(8, 3, 16, .85); box-shadow: inset 0 0 0 1.5px rgba(201, 154, 72, .7); font-size: calc(var(--sh) * .038); font-weight: 900; color: #fbe3a0; }
.dk-vip .dk-faces { flex: 0 0 100%; box-sizing: border-box; gap: calc(var(--sw) * .018); padding: calc(var(--sh) * .006); border-radius: 16px; background: rgba(8, 3, 16, .55); box-shadow: inset 0 0 0 1px rgba(160, 110, 255, .35); }
.dk-vip .dk-face { height: max(44px, calc(var(--sh) * .056)); min-width: 0; border-radius: 12px; background: rgba(46, 20, 82, .82); box-shadow: inset 0 0 0 1px rgba(160, 110, 255, .45); }
.dk-vip .dk-face.is-on { background: rgba(70, 34, 120, .9); box-shadow: inset 0 0 0 2px #f2c35a, 0 0 14px rgba(242, 195, 90, .55); }
.dk-vip .dk-face .dk-pips { padding: calc(var(--sh) * .0045); border-radius: 6px; background: linear-gradient(180deg, #fffaf0, #eadfca); box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
.dk-vip .dk-face .dk-pips i { background: #1b1210; }
.dk-vip .dk-face.f1 .dk-pips i, .dk-vip .dk-face .dk-pips[data-face="4"] i { background: #d21f2a; }
.dk-vip .dk-modes { grid-area: modes; justify-self: center; width: 72%; gap: 0; padding: 3px; border-radius: 999px; background: rgba(8, 3, 16, .75); box-shadow: inset 0 0 0 1px rgba(160, 110, 255, .45); }
.dk-vip .dk-mode { min-height: max(40px, calc(var(--sh) * .044)); background: none; box-shadow: none; color: #9d8cbf; font-size: calc(var(--sh) * .022); font-weight: 900; }
.dk-vip .dk-mode.is-on { background: linear-gradient(180deg, #5b33d6, #34168a); color: #fff; box-shadow: inset 0 0 0 1.5px #c99a48, 0 0 12px rgba(140, 80, 255, .55); }
.dk-vip .dk-acts { grid-area: acts; gap: calc(var(--sw) * .025); }
.dk-vip .dk-acts .dk-btn { min-height: max(44px, calc(var(--sh) * .056)); border-radius: 18px; font-size: calc(var(--sh) * .024); font-weight: 900; }
.dk-vip .dk-acts .dk-btn.primary { flex: 1.25; box-shadow: var(--gold-edge), 0 0 16px rgba(242, 195, 90, .45); }
.dk-vip .dk-acts .dk-btn.ghost { flex: 1; color: #fff; }
.dk-vip .dk-acts [data-dd="open"] { background: linear-gradient(180deg, #ee5aa8 0%, #b0206f 100%); box-shadow: inset 0 0 0 1.5px #ffb3dc, 0 0 16px rgba(255, 80, 170, .5); }
.dk-vip .dk-acts [data-dd="pi"] { background: linear-gradient(180deg, #8a5cff 0%, #4b22c0 100%); box-shadow: inset 0 0 0 1.5px #c9a8ff, 0 0 16px rgba(140, 90, 255, .5); }

/* 开盅:两边头像放进金框,两手骰子摊在大理石上(对手在上、我在下),中间「开!」+ 叫几个实到几个,下面结果面板 */
.dkv-ava { z-index: 3; width: calc(var(--sw) * .178); height: calc(var(--sw) * .178); background: #1a0b2e; box-shadow: none; }
.dk-reveal .dkv-ava.is-opp { --x: .503; --y: .247; }
.dk-reveal .dkv-ava.is-me { --x: .152; --y: .462; width: calc(var(--sw) * .172); height: calc(var(--sw) * .172); }
.dkv-plate { z-index: 3; font-size: calc(var(--sh) * .0165); color: #fff; }
.dkv-plate b { font-weight: 700; display: block; max-width: calc(var(--sw) * .22); overflow: hidden; text-overflow: ellipsis; }
.dk-reveal .dkv-plate.is-opp { --x: .503; --y: .305; }
.dk-reveal .dkv-plate.is-me { --x: .152; --y: .53; }
.dk-vip.dk-reveal .duel-voice-anchor { top: calc(var(--top) + .3 * var(--sh)); left: calc(50% + .12 * var(--sw)); }
.dk-vip .dk-row-dice { position: absolute; z-index: 3; left: 50%; transform: translate(-50%, -50%); width: calc(var(--sw) * .62); justify-content: center; gap: calc(var(--sw) * .016); padding: 0; }
.dk-vip .dk-row-dice[data-r="oppDice"] { top: calc(var(--top) + .378 * var(--sh)); }
.dk-vip .dk-row-dice[data-r="myDice"] { top: calc(var(--top) + .59 * var(--sh)); }
.dk-vip .dk-row-dice .dk-die { width: calc(var(--sw) * .084); max-width: none; border-radius: 10px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.dk-vip .dk-die.is-hit { box-shadow: 0 0 0 2px #f2c35a, 0 0 14px rgba(242, 195, 90, .75); }
.dk-vip .dk-shout { position: absolute; z-index: 3; left: 50%; top: calc(var(--top) + .455 * var(--sh)); transform: translate(-50%, -50%); margin: 0; font-size: calc(var(--sh) * .075); font-weight: 900;
  background: linear-gradient(180deg, #fff3c4 0%, #f7cf62 45%, #c98a22 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(242, 195, 90, .6)) drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.dk-vip .dk-shout b, .dk-vip .dk-shout span { color: transparent; }
.dk-vip .dk-strip { position: absolute; z-index: 3; left: 50%; top: calc(var(--top) + .52 * var(--sh)); transform: translate(-50%, -50%); margin: 0; width: calc(var(--sw) * .8); padding: 6px 0;
  font-size: calc(var(--sh) * .02); font-weight: 800; color: #fff;
  background: linear-gradient(90deg, transparent, rgba(12, 4, 22, .78) 15%, rgba(12, 4, 22, .78) 85%, transparent); box-shadow: inset 0 1px 0 rgba(242, 195, 90, .45), inset 0 -1px 0 rgba(242, 195, 90, .45); }
.dk-vip .dk-strip:empty { display: none; }
.dk-vip .dk-strip b { color: #fbe3a0; }
.dk-vip .dk-result { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(var(--top) + .69 * var(--sh)); width: min(calc(var(--sw) * .84), calc(100% - 24px)); margin: 0; padding: 0; background: none; box-shadow: none; }
.dk-vip .dk-amt { flex-direction: column; align-items: center; gap: 0; }
.dk-vip .dk-amt [data-r="head"] { font-size: calc(var(--sh) * .052); font-weight: 900; line-height: 1.15;
  background: linear-gradient(180deg, #fff3c4 0%, #f7cf62 45%, #c98a22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(242, 195, 90, .5)); }
.dk-vip .dk-amt [data-r="head"].is-lose { background: none; color: #e9e0ff; filter: none; }
.dk-vip .dk-amt [data-r="amt"] { font-size: calc(var(--sh) * .04); color: #fbe3a0; }
.dk-vip .dk-result.is-lose .dk-amt [data-r="amt"] > span { color: #ff5a6a; }
.dk-vip .dk-rake { margin-top: 2px; font-size: calc(var(--sh) * .015); color: #b9a6d6; }
.dk-vip.dk-reveal .dk-acts.two { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(var(--top) + .842 * var(--sh)); width: min(calc(var(--sw) * .84), calc(100% - 24px)); }
.dk-vip.dk-reveal .dk-acts .dk-btn { min-height: max(48px, calc(var(--sh) * .066)); border-radius: 18px; font-size: calc(var(--sh) * .025); font-weight: 900; }
.dk-vip.dk-reveal .dk-acts.two .dk-btn.ghost { flex: 1; color: #fff; background: linear-gradient(180deg, rgba(90, 50, 200, .55), rgba(40, 16, 90, .85)); box-shadow: inset 0 0 0 2px #8d5bff, 0 0 16px rgba(141, 91, 255, .45); }
.dk-vip.dk-reveal .dk-acts.two .dk-btn.primary { flex: 1.4; box-shadow: var(--gold-edge), 0 0 18px rgba(242, 195, 90, .5); }
.dk-vip .dk-ready { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(var(--top) + .925 * var(--sh) - var(--safe-b, 0px)); margin: 0; width: 80%; color: #c4b2e8; }

/* 等候:对面空位(问号 + 「等待对手」),头像滚动放进空位上面那条玻璃条,底注在桌卡上,中间金圈计时 */
.dk-vip .dkp-reel { --y: .222; width: calc(var(--sw) * .3); height: calc(var(--sh) * .042); }
.dk-vip .dkp-reel img { width: calc(var(--sw) * .062); height: calc(var(--sw) * .062); }
.dk-vip .dkp-reel .dkw-reel-track { gap: calc(var(--sw) * .02); }
.dk-vip .dkp-reel-frame { display: none; }
.dkv-q { --x: .497; --y: .275; z-index: 2; font-style: normal; font-size: calc(var(--sh) * .06); font-weight: 900; color: #b98cff; text-shadow: 0 0 14px rgba(185, 140, 255, .9), 0 0 30px rgba(140, 80, 255, .6); }
[data-screen="wait"] .dkv-plate.is-opp { --x: .497; --y: .326; color: #e9e0ff; }
.dk-vip .dkp-find { --y: .415; color: #fbe3a0; text-shadow: 0 0 12px rgba(242, 195, 90, .5), 0 2px 6px rgba(0, 0, 0, .8); }
.dk-vip .dkp-clock { --x: .5; --y: .486; left: calc(50% + (var(--x) - .5) * var(--sw)); width: calc(var(--sw) * .16);
  background: radial-gradient(circle, #15082a 0 64%, transparent 65%), conic-gradient(#f2c35a calc((1 - var(--gone, 0)) * 360deg), rgba(255, 255, 255, .16) 0); box-shadow: 0 0 18px rgba(242, 195, 90, .45); }
.dk-vip .dkp-clock small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(var(--sh) * .012); white-space: nowrap; font-size: calc(var(--sh) * .015); color: #e9e0ff; }
.dk-vip .dkp-plaque-k { --x: .19; --y: .322; }
.dk-vip .dkp-plaque-v { --x: .19; --y: .346; }
.dk-vip .dkp-me { --x: .155; --y: .438; width: calc(var(--sw) * .166); height: calc(var(--sw) * .166); }
.dk-vip .dkp-me i { --fs: 30 !important; }
.dk-vip .dkp-name { --x: .155; --y: .503; flex-direction: column; gap: 1px; font-size: calc(var(--sh) * .0165); }
.dk-vip .dkp-name b { max-width: calc(var(--sw) * .2); }
.dk-vip .dkw-ready { padding: 0; background: none; box-shadow: none; font-size: calc(var(--sh) * .0145); display: flex; align-items: center; gap: 4px; }
.dk-vip .dkw-ready::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.dk-vip .dkp-bal { --y: .757; }
.dk-vip .dkp-note { --y: .792; }
.dk-vip .dkp-share { --y: .792; }
.dk-vip .dkp-row { --y: .858; width: min(calc(var(--sw) * .84), calc(100% - 32px)); }
.dk-vip .dkp-btn { background: linear-gradient(180deg, rgba(90, 50, 200, .5), rgba(40, 16, 90, .85)); }
.dk-vip .dkp-btn.is-gold { color: #2b1606; background: linear-gradient(180deg, #ffe39a, #e0a53c); box-shadow: inset 0 0 0 1.5px #fff0c0, 0 0 18px rgba(242, 195, 90, .5); }
.dk-vip .dkp-btn.is-thin { background: rgba(20, 8, 36, .7); }

/* 私人房在等:顶上一条金牌(私人房 | 房号 | 底注),对面上锁的空位,我在左边;下面面板:邀请好友 → 一句提示 → 复制房号 | 复制链接 → 到期倒数 / 关闭房间 */
.dk-vip .dkp-rplate { --y: .089; width: calc(var(--sw) * .66); }
.dk-vip .dkp-rcap { --y: .36; font-size: calc(var(--sh) * .016); }
.dk-vip .dkp-rme { --x: .155; --y: .44; width: calc(var(--sw) * .166); height: calc(var(--sw) * .166); }
.dk-vip .dkp-rme i { --fs: 30 !important; }
.dk-vip .dkp-plate.is-rhost { --x: .155; --y: .505; flex-direction: column; gap: 2px; padding: 0; background: none; box-shadow: none; font-size: calc(var(--sh) * .0165); max-width: calc(var(--sw) * .24); }
.dk-arena.dk-vip .dkp-rinvite { --y: .68; width: calc(var(--sw) * .72); height: max(50px, calc(var(--sh) * .062)); }
.dk-vip .dkp-rhint { --y: .745; }
.dk-vip .dkp-rrow { --y: .805; width: calc(var(--sw) * .82); gap: calc(var(--sw) * .035); }
.dk-vip .dkp-rfoot-l { --y: .893; left: max(12px, calc(50% - .41 * var(--sw))); }
.dk-arena.dk-vip .dkp-rfoot-r { --y: .893; right: max(8px, calc(50% - .43 * var(--sw))); padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(160, 110, 255, .5); background: rgba(24, 9, 44, .6); color: #fff; }
/* 矮屏(375×667 这种)和窄屏(400 宽以下:面板高度跟 --sh 走,--sh 最多是宽 × 1.88,屏幕再长面板也只有约 254px):
 * 拿掉「你要喊」那行字(面板本身就是喊注区),间距收紧,按钮保持 40px 以上能点,面板才不用往上长到盖住我的骰子 */
@media (max-height: 720px), (max-width: 400px) {
  .dk-vip .dk-panel { grid-template-rows: auto auto auto auto; grid-template-areas: "bid bid" "modes modes" "acts acts" "voice stick"; gap: 4px; }
  .dk-vip .duel-sticker-toolbar .dk-panel-lead { display: none; }
  .dk-vip .dk-bidrow { row-gap: 6px; }
  .dk-vip .dk-step, .dk-vip .dk-count { height: 40px; min-height: 40px; }
  .dk-vip .dk-step { width: 40px; min-width: 40px; }
  .dk-vip .dk-faces { padding: 3px; }
  .dk-vip .dk-mode { min-height: 36px; }
  .dk-vip .duel-sticker-toolbar button { min-height: 38px; }
}
/* 11-02 老板测试站反馈(金框后来又照「那个圆不是在中间的」换成置中的底图 v=3,中线 0.503):
 * - 「拿掉自己的头像,只保留对方的」:牌桌上我那个座位收起来(底图也换成没有那个金框的,v=2);开盅画面的我那格直接拿掉了
 * - 「头像跟倒数没对齐」:倒数圈、我的五颗骰对齐对方头像那条中线(底图上对方金框在 0.4705)
 * - 「送贴纸被头像挡着」:贴纸气泡挂在座位里,座位那一层盖不过后面的倒数圈 / 叫注气泡;有贴纸的那个座位整层抬到最上面 */
.dk-vip .dk-seat:not([data-sticker-seat]) { display: none; }
.dk-vip .dk-turn { left: calc(50% + (.503 - .5) * var(--sw)); top: calc(var(--top) + .41 * var(--sh) - var(--tm) / 2); }
.dk-vip .duel-my-hand { left: calc(50% + (.503 - .5) * var(--sw)); top: calc(var(--top) + .507 * var(--sh)); }
.dk-vip.dk-reveal .dk-row-dice, .dk-vip.dk-reveal .dk-shout, .dk-vip.dk-reveal .dk-strip { left: calc(50% + (.503 - .5) * var(--sw)); }
.dk-vip [data-sticker-seat]:has(.duel-sticker-bubble) { z-index: 20; }

/* ---------- 大厅第二版:B「卡座桌面」照稿一比一(11-02 老板「严格按照」)----------
 * 底图 img/duel/vip/plate-lobby.webp = 设计稿 art/l2.png 去掉字、按钮、筹码;快速配对 / 好友房两页共用。
 * 上面一条毛玻璃分页 → 大理石桌上摆筹码(4 × 2,中心在 0.43 / 0.54)→ 下面毛玻璃面板:余额条、开始匹配、陪练 | 怎么玩、好友房卡 */
.dk-vlob .dkp-stage { background-image: url(/img/duel/vip/plate-lobby.webp?v=1); }
.dk-vlob .dkp-ftitle, .dk-vlob .dkp-fsub { display: none; }
.dk-vlob .dkp-tabs { --x: .492; --y: .1; width: min(calc(var(--sw) * .72), calc(100% - 24px)); }
.dk-arena.dk-vlob .dkp-tabs button { height: max(44px, calc(var(--sh) * .042)); font-size: calc(var(--sh) * .021); }
.dk-vlob .dkp-tabs button.is-on::after { left: 30%; right: 30%; height: 2px; bottom: 4px; }
/* 筹码:一颗不带数字的金筹码图,程序写数字;选中的抬起来发光;有人在等的,左上角挂「有人等待」 */
.dk-vlob .dkq-chips { top: calc(var(--top) + .375 * var(--sh)); left: calc(50% + (.51 - .5) * var(--sw)); transform: translateX(-50%); width: min(calc(var(--sw) * .855), calc(100% - 8px)); height: calc(var(--sh) * .22);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: center; justify-items: center; gap: 0; white-space: normal; }
.dk-vlob .dkq-chips:not(.dk-stakes-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-vlob .dk-stake-option { position: relative; display: grid; place-items: center; width: 100%; gap: 0; }
.dk-arena.dk-vlob .dk-stake { position: relative; width: min(calc(var(--sw) * .185), 96%); max-width: none; aspect-ratio: 360 / 334; border-radius: 0; padding: 0;
  background: url(/img/duel/vip/chip.webp?v=1) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .65)); transition: transform .15s, filter .15s; }
.dk-arena.dk-vlob .dk-stake b { position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%); font-size: calc(var(--sw) * .062); font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #fff3c4 0%, #f7cf62 50%, #c98a22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .85)); }
.dk-arena.dk-vlob .dk-stake.is-long b { font-size: calc(var(--sw) * .046); }
.dk-arena.dk-vlob .dk-stake.is-on { background: url(/img/duel/vip/chip.webp?v=1) center / contain no-repeat; box-shadow: none; transform: translateY(-5px) scale(1.06);
  filter: drop-shadow(0 0 12px rgba(255, 214, 110, .95)) drop-shadow(0 0 26px rgba(242, 195, 90, .55)) brightness(1.1); }
.dk-arena.dk-vlob .dk-stake.is-on b { background: linear-gradient(180deg, #fff8dc 0%, #ffd76a 50%, #e0a032 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dk-arena.dk-vlob .dk-stake.has-waiting, .dk-arena.dk-vlob .dk-stake.is-self-waiting { box-shadow: none; }
.dk-vlob .dk-presence-dot { display: none !important; }
.dk-vlob .dk-stake-presence { position: absolute; left: 2%; top: calc(var(--sw) * -.03); min-height: 0; max-width: none; padding: 2px 9px 2px 19px; border-radius: 999px; white-space: nowrap;
  background: rgba(16, 6, 30, .88); box-shadow: inset 0 0 0 1px rgba(160, 110, 255, .55); font-size: calc(var(--sh) * .0135); line-height: 1.5; color: #fff; }
.dk-vlob .dk-stake-presence::before { content: ''; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #3ddc84; }
.dk-vlob .dk-stake-presence:empty { display: none; }
.dk-vlob .dkq-note { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* 面板:放进底图那块空的毛玻璃面板 */
.dk-vlob .dkq-body { top: calc(var(--top) + .66 * var(--sh)); bottom: calc(var(--sh) * .045); justify-content: space-between; gap: calc(var(--sh) * .008); width: min(calc(var(--sw) * .85), calc(100% - 24px)); }
.dk-vlob .dk-meta { align-self: center; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 999px; background: rgba(8, 3, 16, .72); box-shadow: inset 0 0 0 1px rgba(201, 154, 72, .5);
  font-size: calc(var(--sh) * .016); color: #d9cdf2; }
.dk-vlob .dk-meta b { color: #fff; }
.dkq-sep { width: 1px; height: 1em; background: rgba(242, 195, 90, .5); }
.dk-arena.dk-vlob .dk-btn.primary { min-height: max(52px, calc(var(--sh) * .07)); border-radius: 22px; font-size: calc(var(--sh) * .03); font-weight: 900; letter-spacing: .06em;
  box-shadow: var(--gold-edge), 0 0 22px rgba(242, 195, 90, .5); }
.dkq-crown { display: inline-grid; width: 1.05em; height: 1.05em; color: #3a1d06; }
.dkq-crown svg, .dkq-ico svg { width: 100%; height: 100%; }
.dk-arena.dk-vlob .dkq-row .dk-btn.ghost, .dk-arena.dk-vlob .dk-how { justify-content: center; gap: 10px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgba(60, 30, 120, .55), rgba(24, 9, 44, .85)); box-shadow: inset 0 0 0 1.5px rgba(160, 110, 255, .7), 0 0 12px rgba(140, 80, 255, .35); }
.dkq-ico { display: inline-grid; width: 1.35em; height: 1.35em; flex: none; color: #fff; }
/* 好友房那一页:按钮放桌上,「正在等人的房间」在桌子下缘,列表放进面板 */
.dk-vlob .dkp-fbtns { --y: .43; width: min(calc(var(--sw) * .84), calc(100% - 24px)); }
.dk-vlob .dkp-fnote { --y: .5; }
.dk-vlob .dkp-fhead { --y: .585; }
.dk-vlob .dkp-flist { top: calc(var(--top) + .665 * var(--sh)); height: calc(var(--sh) * .285); width: min(calc(var(--sw) * .82), calc(100% - 24px)); }
/* 矮屏(375×667 这种底图贴顶的):大厅分页、私人房顶上那条金牌在底图 0.09~0.1 的高度,会压在顶栏下面、被顶栏挡住按不到。
 * 这两种画面的底图让出顶栏的高度(少算 30px),长屏幕本来就有空,不受影响 */
.dk-vlob, .dk-vip.dk-room { --sh: min(calc(var(--vh-now) - var(--safe-t, 0px) - 30px), calc(100vw * 16 / 9 * 1.06)); }
.dk-arena.dk-vlob .dkq-rooms { background: linear-gradient(180deg, rgba(28, 12, 46, .9), rgba(12, 5, 22, .92)); box-shadow: inset 0 0 0 1.5px #c99a48, 0 0 16px rgba(242, 195, 90, .18); }
.dk-arena.dk-vlob .dk-stake { width: min(calc(var(--sw) * .172), 92%); }