/* ==========================================================================
   new-compulsory-modal.css · 新皮肤强制安装弹窗
   对应源码：ptgame/app/src/pwa/comp/NewCompulsoryModal.vue <style scoped lang="less">（嵌套/mixin 展开）
             + 全局 <style lang="less">（.tex-desc .accent）
   注：.aperture() mixin 参数 → 各 apertureN 展开；ion-icon/ion-img → img（font-size 处补宽高）；
       SvgIcon → span.svg-icon + 内联 svg。
   ========================================================================== */

/* ---- 装饰圆/光斑公共（源码 .aperture() mixin 展开） ---- */

.compulsory-warp .aperture1,
.compulsory-warp .aperture2,
.compulsory-warp .aperture3 {
  border-radius: 50%;
  position: absolute;
}

/* ---- content ---- */

.compulsory-warp .content {
  width: 22.875rem;
  position: relative;
  background: var(--ep-dynamic-tertiary, linear-gradient(90deg, var(--ep-color-background-fill-gradients-tertiary-a, #357FCF) -27.5%, var(--ep-color-background-fill-gradients-tertiary-b, #2D8C2E) 127.5%));
  border-radius: var(--ep-border-radius-surface-small, .875rem);
  overflow: hidden;
  margin: 0 auto calc(env(safe-area-inset-bottom) + 16px);
}

.compulsory-warp .content .circle {
  width: 12.9375rem;
  height: 12.9375rem;
  border-radius: 50%;
  background: var(--ep-color-icon-brand-primary, #3A8EE3);
  position: absolute;
  right: -4.3125rem;
  top: -4.3125rem;
}

.compulsory-warp .content .aperture1 {
  width: 2.9375rem;
  height: 2.9375rem;
  background: var(--ep-color-text-success, #53C154);
  filter: blur(11.949999809265137px);
  top: 6.375rem;
  left: 3.4375rem;
  opacity: 0.53;
}

.compulsory-warp .content .aperture2 {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--ep-color-text-warning, #FC974C);
  filter: blur(3.549999952316284px);
  top: 10rem;
  right: 1.875rem;
  z-index: 5;
  opacity: 0.48;
}

.compulsory-warp .content .aperture3 {
  width: 6.5625rem;
  height: 6.5625rem;
  background: var(--ep-color-text-danger, #E64021);
  filter: blur(2.8125rem);
  bottom: 2rem;
  left: 1.875rem;
  opacity: 0.35;
}

/* 源码 ion-icon font-size 控尺寸；img 等价物补宽高 */
.compulsory-warp .content .close-icon {
  position: absolute;
  color: var(--ep-color-icon-inverse, #fff);
  font-size: var(--ep-font-size-xl, 1.125rem);
  width: var(--ep-font-size-xl, 1.125rem);
  height: var(--ep-font-size-xl, 1.125rem);
  right: .75rem;
  top: .75rem;
  z-index: 10;
  cursor: pointer;
}

/* ---- logo 区 ---- */

.compulsory-warp .content .logo-area {
  display: flex;
  align-items: center;
  margin: 1.8125rem 0 0 1.1875rem;
}

.compulsory-warp .content .logo-area .logo-wrap {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: var(--ep-border-radius-surface-small, .75rem);
  overflow: hidden;
}

.compulsory-warp .content .logo-area .logo-wrap .logo {
  width: 100%;
  height: 100%;
}

.compulsory-warp .content .logo-area .app-name {
  height: 3.125rem;
  line-height: 3.125rem;
  font-size: var(--ep-font-size-xl, 1.125rem);
  font-weight: var(--ep-font-weight-bold, 700);
  color: var(--ep-color-text-highlight-white, #fff);
  margin-left: .5625rem;
}

/* ---- force 插图 ---- */

.compulsory-warp .content .force-img-area {
  width: 216px;
  height: 216px;
  position: absolute;
  right: .3125rem;
  top: 0;
}

.compulsory-warp .content .force-img-area .force-img {
  width: 100%;
  height: 100%;
}

/* ---- 文案区 ---- */

.compulsory-warp .content .tips-area {
  width: 21.25rem;
  margin: 5rem auto 0;
}

.compulsory-warp .content .tips-area .version {
  font-size: var(--ep-font-size-xl, 1.125rem);
  line-height: 1.75rem;
  font-weight: var(--ep-font-weight-bold, 700);
  color: var(--ep-color-text-highlight-white, #fff);
}

.compulsory-warp .content .tips-area .sub-title {
  font-size: var(--ep-font-size-m, .875rem);
  line-height: 1.25rem;
  color: var(--ep-color-text-highlight-white-weak, rgba(255, 255, 255, 0.6));
}

/* ---- action 区 ---- */

.compulsory-warp .content .action-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5625rem auto 1.375rem;
  width: 21.5625rem;
}

/* 源码 ion-button.action-btn（--box-shadow/--border-radius/--background → 展开） */
.compulsory-warp .content .action-area .action-btn {
  width: 18.125rem;
  height: 2.625rem;
  text-align: center;
  font-size: var(--ep-font-size-m, .875rem);
  line-height: 2.625rem;
  font-weight: var(--ep-font-weight-bold, 700);
  box-shadow: none;
  color: var(--ep-color-text-highlight-white, #fff);
  border-radius: var(--ep-border-radius-m, .375rem);
  background: var(--ep-color-icon-brand-primary, #CF3F5B);
}

.compulsory-warp .content .action-area .action-btn .download-svg {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ep-color-icon-inverse, #fff);
}

.compulsory-warp .content .action-area .action-btn .btn-text {
  font-size: var(--ep-font-size-m, .875rem);
  line-height: 2.625rem;
  font-weight: var(--ep-font-weight-bold, 700);
  color: var(--ep-color-text-inverse, #fff);
  /* 内层 button 重置（对应 ion-button 内原生 button 继承样式） */
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.compulsory-warp .content .action-area .customer-wrap {
  height: 2.625rem;
  width: 2.625rem;
  border-radius: var(--ep-border-radius-s, 0.25rem);
  background: var(--ep-color-icon-brand-secondary, #3A8EE3);
  text-align: center;
  padding: .5rem;
  cursor: pointer;
}

/* 源码 ion-icon font-size:1.625rem；img 等价物补宽高 */
.compulsory-warp .content .action-area .customer-wrap .customer {
  font-size: 1.625rem;
  width: 1.625rem;
  height: 1.625rem;
  color: var(--ep-color-icon-inverse, #fff);
}

/* ---- 安装说明区 ---- */

.compulsory-warp .content .instructions-area {
  width: 21.25rem;
  margin: 0 auto 2.5rem;
  position: relative;
}

.compulsory-warp .content .instructions-area .title {
  color: var(--ep-color-text-highlight-white, #fff);
  font-size: var(--ep-font-size-m, .875rem);
  font-weight: var(--ep-font-weight-medium, 600);
  line-height: 1.375rem;
  margin-bottom: 1rem;
}

.compulsory-warp .content .instructions-area .details {
  display: flex;
  color: var(--ep-color-text-highlight-white-weak, rgba(255, 255, 255, 0.60));
  font-size: var(--ep-font-size-s, .75rem);
}

.compulsory-warp .content .instructions-area .warn-area {
  width: 100%;
  background: var(--ep-neutral-white-white-10, rgba(255, 255, 255, 0.1));
  padding: .3125rem .625rem .4375rem .625rem;
  border-radius: var(--ep-border-radius-m, .375rem);
  margin-top: 1rem;
}

.compulsory-warp .content .instructions-area .warn-area .top {
  display: flex;
  align-items: center;
  font-size: var(--ep-font-size-m, .875rem);
  line-height: 1.375rem;
}

.compulsory-warp .content .instructions-area .warn-area .top .tip-icon {
  color: var(--ep-color-icon-info, #5C82F5);
}

.compulsory-warp .content .instructions-area .warn-area .top .tip-title {
  color: var(--ep-color-text-highlight-white, #fff);
  margin-left: .3125rem;
  font-weight: var(--ep-font-weight-medium, 600);
}

.compulsory-warp .content .instructions-area .warn-area .details {
  font-size: var(--ep-font-size-xs, .625rem);
  color: var(--ep-color-text-highlight-white-weaker, rgba(255, 255, 255, 0.60));
  line-height: 1.125rem;
}

/* ---- theme-42/54 特例（源码 .content:is(.theme-42, .theme-54)） ---- */

.compulsory-warp .content:is(.theme-42, .theme-54) .close-icon {
  color: var(--ep-color-icon-highlight-white);
}

.compulsory-warp .content:is(.theme-42, .theme-54) .action-area .customer-wrap {
  background: var(--ep-color-icon-brand-primary);
}

/* ---- moveUpDown 动画（源码注释原意保留） ---- */

.moveUpDown {
  animation: moveUpDown 8s ease-in-out infinite;
  /* 动画持续2秒，无限循环 */
}

@keyframes moveUpDown {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(2px);
  }

  75% {
    transform: translateY(-10px);
  }
}

/* ---- 源码全局样式（<style lang="less"> 非 scoped） ---- */

.tex-desc .accent {
  color: var(--color-currency);
  font-weight: var(--ep-font-weight-medium, 600);
  font-size: .875rem;
}

/* ---- SvgIcon 等价物（源码 components/SvgIcon  scoped 样式） ---- */

.svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  color: inherit;
  flex-shrink: 0;
}

.svg-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Tailwind 工具类等价规则 ---- */

.compulsory-warp .mr-1\.5 { margin-right: .375rem; }
.compulsory-warp .mb-10 { margin-bottom: 2.5rem; }
.compulsory-warp .accent { color: var(--color-currency); }