/* 幻晶契约 抽奖层 —— 坐标全部取自 PSD 画板1（页面区 = 画板 y360..1616，750x1256） */
#tsLottery { position: fixed; inset: 0; z-index: 9998; display: none; }
#tsLottery.show { display: block; }
#tsLottery * { box-sizing: border-box; }

.tsl-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }

.tsl-panel {
  position: absolute; overflow: hidden; background: transparent;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
}
/* 弹窗卡片：不铺满全屏，四周留出游戏画面 */
.tsl-fit {
  position: absolute; left: var(--ox, 0); top: var(--oy, 0);
  width: calc(750 * var(--s)); height: calc(1256 * var(--s));
  background: #04060e; overflow: hidden;
  border-radius: calc(30 * var(--s));
  box-shadow: 0 0 0 calc(2 * var(--s)) rgba(176, 200, 255, .28),
              0 calc(16 * var(--s)) calc(44 * var(--s)) rgba(0, 0, 0, .6);
}
.tsl-fit img { display: block; }
/* 只重置颜色，不用 background 简写，否则会把各按钮自己的底图清掉 */
.tsl-fit button {
  border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-color: transparent; background-repeat: no-repeat;
  background-position: center; background-size: 100% 100%;
}

/* 水晶球动效：与 PSD 里 bg 图层同一块区域，不再另铺静态背景 */
.tsl-anim {
  position: absolute; left: 0; top: calc(224 * var(--s));
  width: calc(750 * var(--s)); height: calc(1040 * var(--s));
  z-index: 1; pointer-events: none;
}
.tsl-anim.hide { visibility: hidden; }

/* 动效还没就绪时的等待提示，压在球体亮部上会看不清，放到球下方 */
.tsl-load {
  position: absolute; left: 0; top: calc(938 * var(--s));
  width: calc(750 * var(--s)); z-index: 6;
  text-align: center; display: none; pointer-events: none;
}
.tsl-load.show { display: block; }
.tsl-load span {
  display: inline-block; color: #dce8ff; font-size: calc(24 * var(--s));
  line-height: 1; letter-spacing: calc(2 * var(--s));
  padding: calc(11 * var(--s)) calc(26 * var(--s));
  border-radius: calc(24 * var(--s));
  background: rgba(8, 12, 40, .78);
}

.tsl-shade {
  position: absolute; left: calc(-3 * var(--s)); top: calc(988 * var(--s));
  width: calc(757 * var(--s)); height: calc(281 * var(--s));
  z-index: 2; pointer-events: none;
}

/* 飘屏（PSD 里是半透明圆角矩形 + 文字） */
.tsl-marquee {
  position: absolute; left: calc(84 * var(--s)); top: calc(316 * var(--s));
  width: calc(581 * var(--s)); height: calc(56 * var(--s));
  z-index: 3; border-radius: calc(28 * var(--s));
  background: rgba(41, 57, 160, .70); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tsl-marquee .roll {
  font-size: calc(21 * var(--s)); line-height: 1; color: #fff;
  white-space: nowrap;
}
.tsl-marquee .roll em { font-style: normal; color: #df88ff; }
.tsl-marquee .roll i { font-style: normal; color: #f8d532; }

/* 三个抽奖按钮 */
.tsl-draw {
  position: absolute; top: calc(1037 * var(--s));
  width: calc(268 * var(--s)); height: calc(151 * var(--s)); z-index: 4;
  background-image: url(lottery/btn.webp);
}
.tsl-draw.n1 { left: calc(-9 * var(--s)); }
.tsl-draw.n10 { left: calc(231 * var(--s)); }
.tsl-draw.n100 { left: calc(462 * var(--s)); }
.tsl-draw:disabled { filter: grayscale(.5) brightness(.85); }
.tsl-draw b {
  position: absolute; left: calc(101 * var(--s)); top: calc(63 * var(--s));
  font-size: calc(28 * var(--s)); line-height: 1; font-weight: 700;
  color: #262186; letter-spacing: calc(.5 * var(--s));
}
.tsl-draw .cost {
  position: absolute; top: calc(121 * var(--s));
  display: flex; align-items: center; gap: calc(6 * var(--s));
  font-size: calc(24 * var(--s)); line-height: 1; color: #fff;
}
.tsl-draw .cost img { width: calc(23 * var(--s)); height: calc(25 * var(--s)); }
.tsl-draw .cost .num { font-style: normal; }
.tsl-draw.n1 .cost { left: calc(107 * var(--s)); }
.tsl-draw.n10 .cost { left: calc(103 * var(--s)); }
.tsl-draw.n100 .cost { left: calc(96 * var(--s)); }

/* 余额条 */
.tsl-bal {
  position: absolute; left: calc(576 * var(--s)); top: calc(977 * var(--s));
  width: calc(153 * var(--s)); height: calc(51 * var(--s)); z-index: 5;
  background: no-repeat center/100% 100% url(lottery/pill.webp);
}
.tsl-bal .gem {
  position: absolute; left: calc(10 * var(--s)); top: calc(10 * var(--s));
  width: calc(28 * var(--s)); height: calc(30 * var(--s));
}
.tsl-bal .val {
  position: absolute; left: calc(40 * var(--s)); top: calc(14 * var(--s));
  width: calc(70 * var(--s)); font-size: calc(20 * var(--s)); line-height: 1;
  color: #fff; text-align: center; overflow: hidden; white-space: nowrap;
}
.tsl-bal .plus {
  position: absolute; left: calc(112 * var(--s)); top: calc(10 * var(--s));
  width: calc(32 * var(--s)); height: calc(32 * var(--s));
  background-image: url(lottery/plus.webp);
}

/* 四个侧翼页签，各自用自己的原图 */
.tsl-wing {
  position: absolute; width: calc(125 * var(--s)); height: calc(85 * var(--s));
  z-index: 6; background-repeat: no-repeat; background-size: 100% 100%;
}
.tsl-wing.baoku { left: 0; top: calc(287 * var(--s)); background-image: url(lottery/wing-baoku.webp); }
.tsl-wing.bangdan { left: 0; top: calc(358 * var(--s)); background-image: url(lottery/wing-bangdan.webp); }
.tsl-wing.jilu { left: calc(625 * var(--s)); top: calc(287 * var(--s)); background-image: url(lottery/wing-jilu.webp); }
.tsl-wing.guize { left: calc(625 * var(--s)); top: calc(358 * var(--s)); background-image: url(lottery/wing-guize.webp); }

.tsl-glow {
  position: absolute; left: 0; top: calc(102 * var(--s));
  width: calc(750 * var(--s)); height: calc(185 * var(--s));
  z-index: 7; pointer-events: none;
}
.tsl-title {
  position: absolute; left: 0; top: calc(8 * var(--s));
  width: calc(750 * var(--s)); height: calc(329 * var(--s));
  z-index: 8; pointer-events: none;
}

.tsl-close {
  position: absolute; left: calc(601 * var(--s)); top: calc(48 * var(--s));
  width: calc(125 * var(--s)); height: calc(78 * var(--s)); z-index: 9;
}
.tsl-close .ico {
  position: absolute; left: 0; top: 0;
  width: calc(77 * var(--s)); height: calc(78 * var(--s));
}
.tsl-close .lab {
  position: absolute; left: calc(76 * var(--s)); top: calc(25 * var(--s));
  font-size: calc(26 * var(--s)); line-height: 1; color: #fff4d5; white-space: nowrap;
}

.tsl-chip { display: none !important; }

/* 二级页：宝库 / 榜单 / 记录 / 规则。原画板把图放在 y=171，顶上会空出一条黑边，整体上移贴顶。 */
.tsl-sub {
  position: absolute; inset: 0; z-index: 40; display: none;
  background: #050814;
}
.tsl-sub.show { display: block; }
.tsl-sub .bg {
  position: absolute; left: 0; top: 0;
  width: calc(750 * var(--s)); height: 100%;
  background-color: #050814;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
#tsLottery.sub-open .tsl-draw,
#tsLottery.sub-open .tsl-bal {
  visibility: hidden; pointer-events: none;
}
.tsl-sub.baoku .bg { background-image: url(lottery/page-baoku.webp); }
.tsl-sub.bangdan .bg { background-image: url(lottery/page-bangdan.webp); }
.tsl-sub.jilu .bg { background-image: url(lottery/page-jilu.webp); }
.tsl-sub.guize .bg { background-image: url(lottery/page-guize.webp); }
.tsl-subx {
  position: absolute; left: calc(672 * var(--s)); top: calc(8 * var(--s));
  width: calc(75 * var(--s)); height: calc(75 * var(--s));
  background-image: url(lottery/popclose.webp);
}
/* 正文跟着背景上移 171，腾出来的高度加给列表，避免底下再空一截 */
.tsl-sub .body {
  position: absolute; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: calc(24 * var(--s)); line-height: 1.75; color: #e8f0ff;
}
.tsl-sub.baoku .body {
  left: calc(21 * var(--s)); top: calc(129 * var(--s));
  width: calc(712 * var(--s)); height: calc(1049 * var(--s));
}
.tsl-sub.bangdan .body, .tsl-sub.jilu .body {
  left: 0; top: calc(72 * var(--s));
  width: calc(750 * var(--s)); height: calc(1184 * var(--s));
  padding: 0 0 calc(24 * var(--s)); scrollbar-width: none;
}
.tsl-sub.bangdan .body::-webkit-scrollbar,
.tsl-sub.jilu .body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tsl-sub.guize .body {
  left: calc(114 * var(--s)); top: calc(248 * var(--s));
  width: calc(525 * var(--s)); height: calc(799 * var(--s));
  font-size: calc(22 * var(--s));
}
.tsl-sub .body .row.empty, .tsl-sub .body .card.empty {
  display: flex; align-items: center; justify-content: center;
  height: calc(420 * var(--s)); border: 0; background: none;
  color: #c5d8ff; font-size: calc(26 * var(--s));
  text-shadow: 0 1px 4px #000;
}
/* 榜单/记录：原画卡片 = 头像 + 昵称 + 获得奖品*数量 + 气泡图标 + 日期 */
.tsl-sub .body .card {
  position: relative; width: calc(750 * var(--s)); height: calc(218 * var(--s));
  overflow: hidden; flex-shrink: 0;
  background: url(lottery/row.webp) center top / calc(750 * var(--s)) calc(279 * var(--s)) no-repeat;
}
.tsl-sub .body .card .av {
  position: absolute; left: calc(55 * var(--s)); top: calc(70 * var(--s));
  width: calc(114 * var(--s)); height: calc(114 * var(--s));
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 calc(3 * var(--s)) rgba(140, 210, 255, .4);
}
.tsl-sub .body .card .who {
  position: absolute; left: calc(180 * var(--s)); top: calc(84 * var(--s));
  width: calc(360 * var(--s)); font-size: calc(30 * var(--s)); line-height: 1;
  color: #fff; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
.tsl-sub .body .card .got {
  position: absolute; left: calc(180 * var(--s)); top: calc(128 * var(--s));
  width: calc(360 * var(--s)); font-size: calc(22 * var(--s)); line-height: 1.3;
  color: #b7e7ff; white-space: normal;
  overflow: hidden; word-break: break-all;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
.tsl-sub .body .card .bub,
.tsl-sub .body .card .orb {
  position: absolute; left: calc(554 * var(--s)); top: calc(42 * var(--s));
  width: calc(162 * var(--s)); height: calc(154 * var(--s));
  object-fit: contain; pointer-events: none;
}
.tsl-sub .body .card .ico {
  position: absolute; left: calc(597 * var(--s)); top: calc(70 * var(--s));
  width: calc(76 * var(--s)); height: calc(76 * var(--s));
  object-fit: contain; pointer-events: none;
}
.tsl-sub .body .card .dt {
  position: absolute; left: calc(554 * var(--s)); top: calc(176 * var(--s));
  width: calc(162 * var(--s)); text-align: center;
  font-size: calc(20 * var(--s)); line-height: 1; color: #fff;
  text-shadow: 0 1px 3px #000;
}
.tsl-sub .body p { margin: 0 0 calc(18 * var(--s)); }
.tsl-sub .body .grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--s)) 0;
}
.tsl-sub .body .cell { position: relative; text-align: center; }
.tsl-sub .body .cell .bub,
.tsl-sub .body .cell .orb { display: block; width: 100%; height: auto; }
.tsl-sub .body .cell .ico { display: none; }
.tsl-sub .body .cell b {
  display: block; margin-top: calc(-18 * var(--s)); padding: 0 calc(8 * var(--s));
  font-size: calc(20 * var(--s)); line-height: 1.2; color: #fff; font-weight: 400;
  white-space: normal;
}
.tsl-sub .body .cell em {
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--s));
  font-style: normal; font-size: calc(21 * var(--s)); color: #ffd978;
}
.tsl-sub .body .cell em img { width: calc(23 * var(--s)); height: calc(25 * var(--s)); }

/* 中奖弹层：开一次单奖 / 开十次 3×2 / 开百次密铺，底图来自 PSD 画板 */
.tsl-pop { position: absolute; inset: 0; z-index: 30; display: none; background: rgba(0, 0, 0, .6); }
.tsl-pop.show { display: block; }
.tsl-pop .card {
  position: absolute; left: calc(85 * var(--s)); top: calc(438 * var(--s));
  width: calc(556 * var(--s)); height: calc(578 * var(--s));
  background: no-repeat center/100% 100% url(lottery/win.webp);
}
.tsl-pop.big .card {
  left: calc(82 * var(--s)); width: calc(588 * var(--s));
  background-image: url(lottery/win-big.webp);
}
.tsl-pop .val {
  position: absolute; left: 0; right: 0; top: calc(136 * var(--s));
  text-align: center; font-size: calc(22 * var(--s)); line-height: 1; color: #ffe9a8;
  pointer-events: none;
}
.tsl-pop .stage {
  position: absolute; left: calc(70 * var(--s)); top: calc(158 * var(--s));
  width: calc(420 * var(--s)); height: calc(330 * var(--s));
  overflow: hidden;
}
.tsl-pop.one .stage, .tsl-pop.big .stage {
  left: 0; right: 0; width: auto;
  top: calc(170 * var(--s)); height: calc(340 * var(--s));
  display: flex; align-items: center; justify-content: center;
}
.tsl-pop.ten .stage {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(150 * var(--s));
  align-content: start;
  overflow-y: auto; scrollbar-width: none;
}
.tsl-pop.hundred .stage {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(108 * var(--s));
  align-content: start;
  overflow-y: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tsl-pop.hundred .stage::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tsl-pop .stage .cell { position: relative; text-align: center; }
.tsl-pop .stage .cell .bub,
.tsl-pop .stage .cell .orb { display: block; width: 100%; height: auto; }
.tsl-pop .stage .cell .ico { display: none; }
.tsl-pop .stage .cell b {
  display: block; margin-top: calc(-18 * var(--s)); padding: 0 calc(4 * var(--s));
  font-size: calc(18 * var(--s)); line-height: 1.15; color: #fff; font-weight: 400;
  text-shadow: 0 1px 3px #000; white-space: normal;
}
.tsl-pop .stage .cell em {
  display: block; margin-top: calc(2 * var(--s));
  font-style: normal; font-size: calc(18 * var(--s)); line-height: 1; color: #b7e7ff;
  text-shadow: 0 1px 3px #000;
}
.tsl-pop.one .stage .cell, .tsl-pop.big .stage .cell {
  width: calc(273 * var(--s));
}
.tsl-pop.one .stage .cell b, .tsl-pop.big .stage .cell b {
  margin-top: calc(-28 * var(--s)); font-size: calc(28 * var(--s));
}
.tsl-pop.hundred .stage .cell b { font-size: calc(18 * var(--s)); margin-top: calc(-16 * var(--s)); }
.tsl-pop .again {
  position: absolute; left: calc(231 * var(--s)); top: calc(896 * var(--s));
  width: calc(268 * var(--s)); height: calc(151 * var(--s));
  background-image: url(lottery/again.webp);
}
.tsl-pop.big .again { display: none; }
.tsl-pop .px {
  position: absolute; left: calc(331 * var(--s)); top: calc(1046 * var(--s));
  width: calc(75 * var(--s)); height: calc(75 * var(--s));
  background-image: url(lottery/popclose.webp);
}

/* 积分不足等提示弹窗 */
.tsl-tip {
  position: absolute; inset: 0; z-index: 55; display: none;
  background: rgba(0, 0, 0, .55);
  align-items: center; justify-content: center;
}
.tsl-tip.show { display: flex; }
.tsl-tip .card {
  width: calc(520 * var(--s));
  padding: calc(36 * var(--s)) calc(28 * var(--s)) calc(28 * var(--s));
  border-radius: calc(22 * var(--s));
  background: linear-gradient(180deg, #1c2a6e 0%, #0d1438 100%);
  box-shadow: 0 0 0 calc(2 * var(--s)) rgba(176, 200, 255, .35),
              0 calc(12 * var(--s)) calc(32 * var(--s)) rgba(0, 0, 0, .55);
  text-align: center;
}
.tsl-tip .ttl {
  margin: 0 0 calc(18 * var(--s));
  font-size: calc(32 * var(--s)); line-height: 1; font-weight: 700;
  color: #ffe9a8; letter-spacing: calc(2 * var(--s));
}
.tsl-tip .msg {
  margin: 0 0 calc(28 * var(--s));
  font-size: calc(28 * var(--s)); line-height: 1.4; color: #fff;
}
.tsl-tip .ok {
  display: inline-block; min-width: calc(180 * var(--s));
  height: calc(64 * var(--s)); padding: 0 calc(28 * var(--s));
  border-radius: calc(32 * var(--s));
  font-size: calc(26 * var(--s)); font-weight: 700; color: #262186;
  background: linear-gradient(180deg, #ffe9a8, #f0c45a);
}

/* 左下角入口 */
#tsLotteryFab {
  position: fixed; z-index: 9990; display: none;
  align-items: center; justify-content: center; gap: 4px;
  padding: 0 8px; border: 0; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #3d5cc9, #23307a);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(0, 0, 0, .35);
}
#tsLotteryFab .ico { width: 1.1em; height: 1.18em; }