/*
 * 加载遮罩、确认弹窗、按钮 loading 态。八个页面共用。
 *
 * 这些覆盖层用真实视口像素定位，不放进桌面版那个 3840px 的缩放画布里 ——
 * 画布会被 scale 到视口宽度，放进去的话文字会跟着缩得看不清。
 * 配色和圆角沿用设计稿的紫金体系，视觉上是一套。
 */

:root {
  --lw-purple-1: rgb(161, 104, 255);
  --lw-purple-2: rgb(94, 56, 227);
  --lw-purple-3: rgb(78, 43, 204);
  --lw-gold-1: rgb(255, 216, 145);
  --lw-gold-2: rgb(255, 168, 114);
  --lw-gold-3: rgb(255, 122, 6);
  --lw-cream: rgb(255, 237, 186);
}

@keyframes lwSpin { to { transform: rotate(360deg) } }
@keyframes lwFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes lwPopIn { from { opacity: 0; transform: translateY(14px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes lwPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes lwSweep { to { background-position: 200% 0 } }

/* ---------- 首屏加载遮罩 ---------- */
.lw-loader {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(circle at 50% 38%, #3b2ba8 0%, #1a1246 62%, #120d33 100%);
  transition: opacity .45s ease;
}
.lw-loader[data-done] { opacity: 0; pointer-events: none }

.lw-loader-ring {
  width: 92px; height: 92px; border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .14);
  border-top-color: var(--lw-gold-2);
  border-right-color: var(--lw-gold-1);
  animation: lwSpin 1s cubic-bezier(.5, .1, .4, .9) infinite;
}
.lw-loader-text {
  font-size: 16px; font-weight: 500; letter-spacing: .04em; color: #fff;
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}
.lw-loader-sub { font-size: 13px; color: rgba(255, 255, 255, .62); animation: lwPulse 1.6s ease-in-out infinite }

/* 进度条 */
.lw-loader-bar {
  width: 216px; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .13);
}
.lw-loader-bar > i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--lw-gold-1), var(--lw-gold-3));
  transition: width .35s ease;
}

/* ---------- 抽奖期间的状态文案 ---------- */
/*
 * 抽奖期间的底部状态条。
 *
 * 居中用 left/right + margin:auto，不能用 transform：本元素挂了 lwPopIn 动画，
 * 其终帧 transform:none 会覆盖掉 translateX(-50%)（动画优先级高于普通声明）。
 *
 * 不加 white-space:nowrap：英文提示最长 273px，窄屏应换行而不是溢出。
 */
.lw-status {
  /* 用 left/right 内缩限定可用宽度，不用 vw —— vw 在视口宽度未确定时会解析成 0，
     max-width 跟着塌成 0，状态条会缩成一条竖窄块。 */
  position: fixed; left: 12px; right: 12px; bottom: 5vh; margin-inline: auto; z-index: 8000;
  width: fit-content; max-width: 420px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 26px; border-radius: 26px;
  background: rgba(24, 12, 62, .82); backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4), inset 0 0 0 1.5px rgba(255, 255, 255, .18);
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 15px; line-height: 1.35; color: #fff;
  animation: lwPopIn .4s ease both;
}
.lw-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--lw-gold-2); animation: lwPulse 1s ease-in-out infinite;
}
.lw-status-txt {
  text-align: center;
  background: linear-gradient(90deg, #fff 0%, var(--lw-cream) 50%, #fff 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lwSweep 2.4s linear infinite;
}

/* ---------- 确认弹窗 ---------- */
.lw-mask {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(12, 6, 38, .62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: lwFadeIn .2s ease both;
}
.lw-dialog {
  width: min(430px, 100%); box-sizing: border-box;
  border-radius: 24px; padding: 26px 24px 22px;
  background: linear-gradient(168deg, var(--lw-purple-1) -8%, var(--lw-purple-2) 30%, var(--lw-purple-3) 78%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .3);
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif; color: #fff;
  animation: lwPopIn .28s cubic-bezier(.2, .9, .3, 1) both;
}
.lw-dialog h3 {
  margin: 0 0 6px; font-size: 20px; font-weight: 600; text-align: center;
  background: linear-gradient(180deg, #fff, var(--lw-cream));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lw-dialog-note { margin: 0 0 18px; font-size: 13px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .72) }
.lw-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 14px; margin-bottom: 10px; border-radius: 13px;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.lw-row-k { font-size: 11.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .6) }
.lw-row-v { font-size: 14px; font-family: Inter, monospace; word-break: break-all; line-height: 1.45 }
.lw-warn {
  margin: 12px 0 18px; padding: 10px 13px; border-radius: 11px;
  background: rgba(255, 168, 66, .15); box-shadow: inset 0 0 0 1px rgba(255, 168, 66, .38);
  font-size: 12.5px; line-height: 1.5; color: rgb(255, 205, 140);
}
.lw-btns { display: flex; gap: 11px }
.lw-btn {
  flex: 1; height: 46px; border: 0; border-radius: 23px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #fff;
  transition: filter .15s ease;
}
.lw-btn:hover:not(:disabled) { filter: brightness(1.08) }
.lw-btn:disabled { cursor: default; opacity: .72 }
.lw-btn-ghost { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .26) }
.lw-btn-gold {
  background: linear-gradient(180deg, var(--lw-gold-1) 0%, var(--lw-gold-2) 30%, var(--lw-gold-3) 92%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34), 0 4px 12px rgba(0, 0, 0, .28);
  color: rgb(88, 38, 6);
}
.lw-btn-spin {
  display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: lwSpin .7s linear infinite;
}

/* 领取成功页：三步进度依次点亮 */
@keyframes lwStepIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.lw-step-anim { opacity: 0 }
.lw-step-anim.on { animation: lwStepIn .5s cubic-bezier(.2,.9,.3,1) both }

/* ---------- 中奖庆祝动效 ---------- */
@keyframes lwFlash { 0% { opacity: 0 } 18% { opacity: .9 } 100% { opacity: 0 } }
@keyframes lwCardIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6) }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) }
  70%  { transform: translate(-50%, -50%) scale(.98) }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}

.lw-celebrate { position: fixed; inset: 0; z-index: 9500; pointer-events: none }
.lw-celebrate.out { opacity: 0; transition: opacity .42s ease }

/* 压暗背景，让撒花和金额跳出来；不做全黑，页面还要透出来一点 */
.lw-cel-mask {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(20,8,52,.42) 0%, rgba(14,6,42,.74) 62%, rgba(10,4,32,.86) 100%);
  backdrop-filter: blur(2.5px);
  animation: lwFadeIn .32s ease both;
}

/* 中奖瞬间的一下白光 */
.lw-cel-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,246,222,.92) 0%, rgba(255,205,116,.35) 34%, transparent 66%);
  animation: lwFlash .85s ease-out both;
}
.lw-cel-canvas { position: absolute; inset: 0; width: 100%; height: 100% }

.lw-cel-card {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif; text-align: center;
  animation: lwCardIn .62s cubic-bezier(.2,.9,.3,1) both;
}
.lw-cel-label {
  font-size: clamp(15px, 3.4vw, 26px); font-weight: 600; letter-spacing: .34em; text-indent: .34em;
  color: #fff; text-shadow: 0 2px 12px rgba(60,20,120,.7);
}
.lw-cel-amount {
  font-family: 'Russo One', Inter, sans-serif;
  font-size: clamp(40px, 11vw, 108px); line-height: 1; white-space: nowrap;
  background: linear-gradient(180deg, rgb(255,246,222) 6%, rgb(255,225,162) 48%, rgb(240,158,66) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgb(196,104,32)) drop-shadow(0 8px 20px rgba(51,14,86,.6));
}

@media (prefers-reduced-motion: reduce) {
  .lw-cel-flash { animation-duration: .3s }
  .lw-cel-card { animation: none }
}

/* ---------- 进场：恭喜获得抽奖机会 ---------- */
@keyframes lwGrantIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.72) }
  58%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06) }
  78%  { transform: translate(-50%, -50%) scale(.985) }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
@keyframes lwTicketIn {
  0%   { opacity: 0; transform: translateY(-16px) rotate(-24deg) scale(.5) }
  60%  { opacity: 1; transform: translateY(0) rotate(6deg) scale(1.12) }
  100% { opacity: 1; transform: none }
}
@keyframes lwGlow { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }

.lw-grant { position: fixed; inset: 0; z-index: 9400 }
.lw-grant.out { opacity: 0; transition: opacity .32s ease; pointer-events: none }

.lw-grant-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 44px)); box-sizing: border-box;
  padding: 30px 26px 24px; border-radius: 28px; text-align: center;
  background: linear-gradient(168deg, var(--lw-purple-1) -10%, var(--lw-purple-2) 32%, var(--lw-purple-3) 82%);
  box-shadow: 0 24px 66px rgba(0,0,0,.52), inset 0 0 0 2.5px rgba(255,255,255,.34);
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif; color: #fff;
  animation: lwGrantIn .58s cubic-bezier(.2,.9,.3,1) both;
}
/* 卡片后面的一圈金色光晕 */
.lw-grant-card::before {
  content: ''; position: absolute; inset: -30% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,205,116,.5) 0%, transparent 68%);
  animation: lwGlow 2.2s ease-in-out infinite;
}
.lw-grant-ticket {
  width: 76px; height: 76px; display: block; margin: -62px auto 8px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.42));
  animation: lwTicketIn .66s cubic-bezier(.2,.9,.3,1) .1s both;
}
.lw-grant-label {
  font-size: 15px; font-weight: 500; letter-spacing: .3em; text-indent: .3em;
  color: rgba(255,255,255,.82);
}
.lw-grant-count {
  display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 2px 0 -2px;
}
.lw-grant-count b {
  font-family: 'Russo One', Inter, sans-serif; font-size: 72px; line-height: 1.1; font-weight: 400;
  background: linear-gradient(180deg, rgb(255,246,222) 8%, rgb(255,225,162) 48%, rgb(240,158,66) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgb(196,104,32));
}
.lw-grant-count span { font-size: 24px; font-weight: 600; color: var(--lw-cream) }
.lw-grant-sub { font-size: 19px; font-weight: 600; color: var(--lw-cream); letter-spacing: .04em }
.lw-grant-go {
  width: 100%; height: 50px; margin-top: 20px; border: 0; border-radius: 25px; cursor: pointer;
  font-family: inherit; font-size: 18px; font-weight: 600; color: rgb(88,38,6);
  background: linear-gradient(180deg, var(--lw-gold-1) 0%, var(--lw-gold-2) 30%, var(--lw-gold-3) 92%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.36), 0 5px 14px rgba(0,0,0,.32);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease;
}
.lw-grant-go:hover { filter: brightness(1.07) }
.lw-grant-hint { margin-top: 11px; font-size: 12px; color: rgba(255,255,255,.5) }

@media (prefers-reduced-motion: reduce) {
  .lw-grant-card, .lw-grant-ticket { animation: none }
  .lw-grant-card::before { animation: none; opacity: .6 }
}

/* ---------- 中英文切换按钮 ---------- */
/*
 * 固定在视口左上角，用真实像素定位 —— 桌面版画布会被 scale 到视口宽度，
 * 放进画布里字会跟着缩到看不清。左上角在两端都是空的：桌面版标题图从
 * top:233px（画布坐标，约视口 11%）才开始，移动版顶栏从 12px 起但按钮
 * 在它左侧留有余量。
 */
/*
 * 移动端的语言切换（网页版已改走画布内的 .lw-lang-c，这条现在只有 m/ 那几页在用）。
 *
 * 挂在 .m-topbar 里，和「我的奖品」「分享链接」排同一行，不再做悬浮固定。
 *
 * 宽度 104 是算出来的：顶栏内宽 369，另两颗胶囊中文态共占 238，
 * 留给语言胶囊不到 146；取 104 可让三颗之间有 15~21px 的均匀间距。
 *
 * 高度 44 / 圆角 22 与另外两颗胶囊一致；外观取 .m-pill-share 的
 * 半透明底 + 淡紫内描边。
 */
.lw-lang {
  position: relative; flex-shrink: 0;
  width: 104px; height: 44px; overflow: hidden; border-radius: 22px;
  background: rgba(70, 58, 168, .45);
  box-shadow: inset 0 0 0 1.5px rgba(224, 189, 255, .5), 0 2px 6px rgba(0, 0, 0, .25);
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}
/* 兜底：页面没有 .m-topbar 时退回浮层，避免它以静态元素的身份挤进正文 */
.lw-lang-fixed {
  position: fixed; z-index: 9200;
  left: auto; right: calc(10px + env(safe-area-inset-right));
  top: calc(12px + env(safe-area-inset-top));
}
.lw-lang-slider {
  position: absolute; top: 3px; width: 49px; height: 38px; border-radius: 19px;
  background: linear-gradient(103.729deg, rgb(252, 81, 144) 5.55%, rgb(115, 26, 254) 97.71%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  transition: left .22s cubic-bezier(.3, .9, .4, 1);
}
.lw-lang button {
  position: absolute; top: 0; width: 52px; height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: #fff;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/*
 * 网页版的语言切换：与首页那颗胶囊完全一致的样式。
 *
 * 首页画布是 1920×1080，胶囊 189×66.5、位于 (101.333, 38.5)，滑块 89.5×56.5。
 * 这几页画布是 3840×2161，基数差一倍，所以全部乘 2 —— 两页并排看时同样大小、
 * 同一条水平线。外观取移动端邀请胶囊 .m-pill-share：半透明底 + 淡紫内描边，
 * 描边和投影按高度比 133/44 = 3.02 放大。
 */
.lw-lang-c {
  position: absolute; left: 202.667px; top: 77px; width: 378px; height: 133px; z-index: 40;
  overflow: hidden; border-radius: 98px;
  background: rgba(70, 58, 168, .45);
  box-shadow: inset 0 0 0 4.6px rgba(224, 189, 255, .5), 0 6px 18px rgba(0, 0, 0, .25);
}
.lw-lang-c-slider {
  position: absolute; top: 10px; width: 179px; height: 113px; border-radius: 98px;
  background: linear-gradient(103.729deg, rgb(252, 81, 144) 5.55%, rgb(115, 26, 254) 97.71%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
  transition: left .22s cubic-bezier(.3, .9, .4, 1);
}
.lw-lang-c button {
  position: absolute; top: 0; width: 179px; height: 133px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 52px; font-weight: 500; color: #fff; white-space: nowrap;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/*
 * ---------- 英文长度适配（桌面版）----------
 *
 * 设计稿是按中文排的，元素宽度写死、大量 white-space: nowrap。英文同义表达
 * 普遍比中文长 60%~100%，直接换文案会溢出或被裁掉。这里对会出问题的位置
 * 单独收字号 / 放开换行，只在 data-lang="en" 时生效，不影响中文版。
 *
 * 两个必须注意的点：
 *   1. 所有声明都要 !important —— 设计稿的字号和 nowrap 是写在内联 style 上的，
 *      外部样式表默认压不过内联。
 *   2. 光放开 white-space 不够。这些元素是绝对定位、没有宽度约束的，
 *      包含块又是 3840px 的画布，不给 max-width 它照样排成一行。
 *
 * 放在 ui.css 而不是 app.css，因为桌面首页是自包含页面、不加载 app.css。
 * 但 ui.css 移动端也会加载，而两端有同名的 data-i18n（比如 inviteCard.title），
 * 所以每条都用 .canvas 限定作用域 —— 只有桌面页有这个容器。
 */

/* 主标语：英文比中文长约一倍，收字号并允许换行 */
[data-lang="en"] .canvas [data-i18n="home.tagline"]  { font-size: 54px !important; white-space: normal !important; line-height: 1.15 !important }

/* 「您拥有 N 次免费抽奖机会」整行 */
[data-lang="en"] .canvas [data-i18n="home.ownPre"],
[data-lang="en"] .canvas [data-i18n="home.ownPost"]  { font-size: 54px !important }

/* 活动规则四列：英文句子更长，放开换行、压行高、加宽列宽。
   第 3、4 条需要 376/396 的文字宽度才能排两行，中文版的 324 会掉到第三行，
   行高超出 .rule 的 88px 顶到面板底边。文字框取 404，列宽 404+62+20=486。 */
[data-lang="en"] .canvas .rule  { font-size: 30px !important; width: 486px !important }
[data-lang="en"] .canvas .rule-t  { white-space: normal !important; line-height: 1.25 !important }
[data-lang="en"] .canvas #rules  { padding: 0 24px !important }

/* 底部保障条四项 */
[data-lang="en"] .canvas .note-t  { font-size: 34px !important }
[data-lang="en"] .canvas .note-s  { font-size: 25px !important }

/* 发放进度三步 */
[data-lang="en"] .canvas .step-t, [data-lang="en"] .step-h  { font-size: 34px !important }
[data-lang="en"] .canvas .step-s, [data-lang="en"] .step-st  { font-size: 27px !important }

/* 免责声明整行 nowrap，英文放不下 */
[data-lang="en"] .canvas [data-i18n="home.disclaimer"]  { font-size: 30px !important; white-space: normal !important; line-height: 1.3 !important }

/* 中奖页表单标题、按钮文案 */
[data-lang="en"] .canvas [data-i18n="win.claimHead"]  { font-size: 52px !important }
[data-lang="en"] .canvas [data-i18n="win.note24h"]  { font-size: 34px !important; white-space: normal !important; line-height: 1.25 !important }
[data-lang="en"] .canvas [data-i18n="ok.note"]  { font-size: 34px !important; white-space: normal !important; line-height: 1.25 !important }
[data-lang="en"] .canvas [data-i18n="ok.eta"]  { font-size: 34px !important }

/* 奖池 / 邀请卡 */
[data-lang="en"] .canvas [data-i18n="home.pool"]  { font-size: 54px !important }
[data-lang="en"] .canvas [data-i18n="inviteCard.title"]  { font-size: 50px !important; white-space: normal !important; line-height: 1.2 !important }
[data-lang="en"] .canvas #invite-text  { font-size: 40px !important; white-space: normal !important; line-height: 1.25 !important }

/*
 * 首页的邀请文案卡得很死：文案在 top:158，复制按钮在 top:243，中间只有 85px。
 * 英文换行成两行后按 40px 算是 100px，会顶到按钮上。收到 32px、行高 1.2，
 * 两行 77px 正好放得下。中奖页/领取成功页那块是 flex 列排、空间宽松，不受影响。
 */
[data-lang="en"] .canvas #invite-text.invite-tight {
  font-size: 32px !important; line-height: 1.2 !important;
}

/* 我的奖品弹窗 */
[data-lang="en"] .canvas [data-i18n="inviteCard.linkLabel"]  { font-size: 38px !important }

/* 复制成功提示 */
[data-lang="en"] .canvas .toast-txt  { font-size: 44px !important }

/* 「奖励发放进度」有 27px 字间距，英文加了会散架 */
[data-lang="en"] .canvas [data-i18n="ok.progress"]  { letter-spacing: 6px !important; font-size: 58px !important }

/* ---------- 英文版的图片替身 ----------
 *
 * 部分图片把中文印死在像素里。缺英文图时，用 CSS 还原这几个元素的外观
 * —— 它们本身就是「渐变色块 + 文字」，CSS 能做到几乎一致。
 * 立体字标题（带皇冠月桂那种）还原不了，那类仍旧显示中文原图。
 *
 * 尺寸用容器查询单位（cqh）跟着盒子高度走：同一个组件在桌面画布里是
 * 891×178，在移动端只有 243×28，写死字号会崩。
 */
.lw-en {
  container-type: size;
  /* 替身要照搬原图的定位和尺寸，所以直接复制了 img 的内联 style，
     里面常带 display:block —— 必须用 !important 压回 flex。 */
  display: flex !important;
  align-items: center; justify-content: center;
  box-sizing: border-box; overflow: hidden;
}
.lw-en img { flex-shrink: 0 }

/* 「比特币奖励」：两侧渐隐横线 + 菱形 + 金色渐变文字 */
.lw-en-badge { gap: 2.5cqh }

/*
 * 移动端那个徽标是用 background-size:100% 294% 把原图裁出一条文字带，
 * 盒子高度就等于文字高度；桌面版是整张图带大量上下留白。
 * 同一个组件两种比例，所以裁切版单独给一套更大的字号。
 */
.lw-en-badge.tight b { font-size: 66cqh }
.lw-en-badge.tight s { width: 26cqh; height: 26cqh }
.lw-en-badge.tight i { height: 3cqh; max-width: 20% }
.lw-en-badge.tight { gap: 6cqh }
.lw-en-badge i {
  flex: 1; height: 1cqh; max-width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 140, .85));
}
.lw-en-badge i:last-child { transform: scaleX(-1) }
.lw-en-badge s {
  width: 9cqh; height: 9cqh; flex-shrink: 0; text-decoration: none;
  background: linear-gradient(180deg, #fff2d8, #f7a24d);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.lw-en-badge b {
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 24cqh; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  background: linear-gradient(180deg, #fff6e2 4%, #ffd08c 52%, #f2913c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .5cqh 1.5cqh rgba(247, 150, 60, .45));
}

/* 「立即领取奖励」：奶油金渐变胶囊 */
.lw-en-btn-gold {
  gap: 7cqh; border-radius: 999px;
  background: linear-gradient(180deg, #fdeed4 0%, #fbdfb2 42%, #f3c98a 100%);
  box-shadow: inset 0 0 0 1.6cqh rgba(255, 255, 255, .72),
              inset 0 -3cqh 6cqh rgba(214, 152, 74, .3),
              0 3cqh 8cqh rgba(140, 90, 30, .22);
}
.lw-en-btn-gold img { width: 36cqh; height: 36cqh }
.lw-en-btn-gold b {
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 34cqh; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: rgb(91, 42, 140);
}

/* 「邀请好友赚取更多抽奖机会」：粉紫渐变胶囊 + 金色文字 */
.lw-en-btn-pink {
  gap: 6cqh; border-radius: 999px;
  background: linear-gradient(96deg, #f78ad4 0%, #ef7fd6 34%, #c47af0 68%, #a86bf5 100%);
  box-shadow: inset 0 0 0 2.4cqh rgba(255, 255, 255, .82),
              inset 0 -4cqh 8cqh rgba(150, 60, 170, .28),
              0 3cqh 9cqh rgba(120, 40, 140, .3);
}
.lw-en-btn-pink img { width: 34cqh; height: 34cqh }
.lw-en-btn-pink b {
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 30cqh; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(180deg, #fff3cd, #ffd069);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 「关闭」：紫色胶囊 + 白色圆形叉号 + 白字。
   胶囊渐变按原图逐列取色得出（左 #884dfe → 右 #925df9），叉号用 CSS 画，
   不依赖单独的图标素材，任何尺寸下都不会糊。 */
/* 这里全部用 px，不用 cqh：
 *   1. gap 写在容器元素自身上时，cqh 不按自己解析，会回落到外层容器或视口 ——
 *      同一份代码在不同窗口高度下间距会从 0 变到近 100px，图标和文字忽远忽近。
 *   2. 容器查询在 Safari 15（macOS 12 自带）里完全不支持，cqh 会让整条声明失效。
 * 这颗按钮只有网页版这一个尺寸（380×134），写死 px 反而最稳。
 *
 * 数值取自中文原图 btn-close.png：白色圆盘 64px，图标到文字间距 21px。 */
.lw-en-btn-close {
  gap: 21px; border-radius: 999px;
  background: linear-gradient(90deg, #884dfe 0%, #925df9 100%);
}
.lw-en-btn-close s {
  flex-shrink: 0; position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; text-decoration: none;
}
.lw-en-btn-close s::before,
.lw-en-btn-close s::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 52%; height: 7px; border-radius: 999px; background: #8b52fc;
}
.lw-en-btn-close s::before { transform: translate(-50%, -50%) rotate(45deg) }
.lw-en-btn-close s::after  { transform: translate(-50%, -50%) rotate(-45deg) }
.lw-en-btn-close b {
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 54px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: #fff;
}

/* ---------- 立体标题的英文替身 ----------
 *
 * 装饰（月桂枝、闪光）在原图两端，文字在中间。两端按边界切出来继续用原图像素，
 * 中间的文字用 CSS 重做。
 *
 * 立体感靠三层叠加：
 *   background-clip:text  渐变填充（白 → 淡紫 → 粉）
 *   -webkit-text-stroke   紫色厚描边，配 paint-order 让描边压在填充下面
 *   多层 drop-shadow      逐层下移，模拟挤出的侧面
 *
 * 做不到 100%：原图侧面有手绘的高光过渡，皇冠压在首字上也没法保留。
 * 拿到设计导出的 x-en.png 后图片自动优先，这套替身停用。
 */
.lw-en-title { justify-content: center; gap: 1.5% }
.lw-en-title i {
  flex: 0 0 auto; height: 100%; align-self: stretch;
  background-repeat: no-repeat; background-size: auto 100%;
}
.lw-en-title .deco-l { background-position: left center }
.lw-en-title .deco-r { background-position: right center }

.lw-en-title b {
  flex: 0 1 auto; min-width: 0;
  font-family: 'Arial Black', 'Helvetica Neue', Inter, sans-serif;
  font-weight: 900; font-style: italic; letter-spacing: -.01em; white-space: nowrap;
  line-height: 1;
  background: linear-gradient(180deg, #fff 5%, #f3ecff 34%, #f9cbe8 66%, #f0a3cc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .055em rgb(107, 47, 181);
  paint-order: stroke fill;
  filter:
    drop-shadow(0 .035em 0 rgb(96, 38, 168))
    drop-shadow(0 .07em 0 rgb(84, 31, 152))
    drop-shadow(0 .105em 0 rgb(72, 25, 134))
    drop-shadow(0 .16em .06em rgba(40, 10, 80, .55));
}

/* 金色系标题（我的奖品、SPIN & WIN）用暖色填充和描边 */
.lw-en-title.gold b {
  background: linear-gradient(180deg, #fff6e0 5%, #ffe0a4 40%, #ffc264 72%, #f79c33 100%);
  -webkit-text-stroke: .055em rgb(146, 62, 24);
  filter:
    drop-shadow(0 .035em 0 rgb(132, 55, 20))
    drop-shadow(0 .07em 0 rgb(116, 47, 16))
    drop-shadow(0 .105em 0 rgb(100, 39, 12))
    drop-shadow(0 .16em .06em rgba(70, 26, 6, .5));
}

/* ---------- 首屏主标题的英文替身 ----------
 *
 * title.png 是两行：第一行「SPIN & WIN」本来就是英文，第二行「100%中奖」是中文。
 * 两行的分界在高度 47.5%。上半张原样切出来继续用原图像素，
 * 只把下半行换成 CSS 立体字。
 */
.lw-en-hero { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0 }
.lw-en-hero .line1 {
  flex: 0 0 47.5%;
  background-repeat: no-repeat; background-position: top center; background-size: 100% auto;
}
.lw-en-hero b {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  font-family: 'Arial Black', 'Helvetica Neue', Inter, sans-serif;
  font-weight: 900; font-style: italic; letter-spacing: -.015em; white-space: nowrap; line-height: 1;
  background: linear-gradient(180deg, #fff 6%, #f2e9ff 38%, #e6cdfb 70%, #cfa4f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .05em rgb(125, 62, 200);
  paint-order: stroke fill;
  filter:
    drop-shadow(0 .035em 0 rgb(112, 52, 186))
    drop-shadow(0 .07em 0 rgb(98, 43, 168))
    drop-shadow(0 .105em 0 rgb(84, 35, 150))
    drop-shadow(0 .16em .07em rgba(44, 12, 88, .55));
}

/* ---------- 英文标题图的适配 ----------
 *
 * 英文版和中文版的宽高比不一样（比如首屏主标题 2.60:1 vs 1.78:1），
 * 沿用页面里写死的 width/height 会把图拉变形。
 *
 * 用 object-fit: contain 在原位置框内等比缩放、居中留白：版面不动，图也不变形。
 * 代价是比例差异大的图会显得偏小，但好过拉变形。
 */
[data-lang="en"] img[data-i18n-alt="alt.winTitle"],
[data-lang="en"] img[data-i18n-alt="alt.winTitleM"],
[data-lang="en"] img[data-i18n-alt="alt.okTitle"],
[data-lang="en"] img[data-i18n-alt="nav.prizes"] {
  object-fit: contain !important;
  object-position: center !important;
}

/*
 * 「我的奖品」这张的英文图要单独放大。
 *
 * 中文图 1122×310，实心区占画幅 99%×96%，套 561×155 的框刚好铺满。
 * 英文图 698×393，实心区只有 x 13~684 / y 102~264 —— 上下各留了 102px 和
 * 129px 的透明边，只占画幅高度的 41%。同一个框用 contain 等比缩放后，
 * 字形实际只有 64px 高，中文是 149.5px，所以看着小了一大截。
 *
 * 这里按「实心区对齐」重算：放大到 640×360.3（k=0.9169），字形高度回到
 * 149.5px，与中文一致；再把整张图左移到 701、上移到 -24.5，让字形中心
 * 落在与中文相同的 (1021, 143.75)。露出面板上沿的那 24.5px 全是透明留白，
 * 弹窗容器也没有 overflow，不会裁掉任何可见内容。
 */
[data-lang="en"] .canvas img[data-i18n-alt="nav.prizes"] {
  left: 701px !important;
  top: -24.5px !important;
  width: 640px !important;
  height: 360.3px !important;
  pointer-events: none;
}

/* 主标题的中英文图同尺寸同比例（1156×445），直接换图即可，无需位置或尺寸补丁。 */

/* ---------- 暂时隐藏「查看全部」 ----------
 *
 * 这个入口还没有对应的完整榜单页，先不展示。中英文都隐藏。
 *
 * 用 visibility 而不是 display:none：桌面首页那条表头是 space-between 布局，
 * 直接移除元素会让「最新中奖播报」被推到右边，位置变了。
 * visibility 保留占位，其余元素一动不动。
 *
 * 要恢复展示，删掉这条规则即可。
 */
[data-i18n="common.viewAll"] { visibility: hidden }

/* ---------- 双击相关 ----------
 *
 * 1) touch-action: manipulation 关掉「双击缩放」。
 *    之前只加在可点元素上，页面空白处双击仍会触发。触屏设备（触屏笔记本、
 *    平板、手机）双击任意位置都不再缩放，双指捏合缩放不受影响。
 *    注意：这条对鼠标无效 —— macOS 触控板的「双指双击智能缩放」是系统手势，
 *    网页无法拦截，只能在「系统设置 → 触控板 → 智能缩放」里关。
 *
 * 2) 装饰性画布禁止选中。双击会选中整段文字并高亮，在这种满屏插画的页面上
 *    很像"闪了一下"。表单输入框单独放行，否则地址粘不了也选不中。
 */
html, body { touch-action: manipulation }

.canvas, .home-canvas, .m-root {
  -webkit-user-select: none; user-select: none;
}
.canvas input, .home-canvas input, .m-root input,
.lw-dialog, .lw-dialog * {
  -webkit-user-select: text; user-select: text;
}

/* ---------- 单字循环浮现（LWUI.stagger）----------
 *
 * 动画本身由 Web Animations API 在 JS 里生成（每种语言字数不同、周期不同，
 * keyframes 的百分比写不死），这里只负责让单字可以做 transform。
 * 父级的 text-align / letter-spacing / text-shadow 都不受影响。
 */
.lw-ch { display: inline-block }