/* ==========================================================================
   compulsory-modal.css · 旧皮肤强制安装弹窗
   对应源码：ptgame/app/src/pwa/comp/CompulsoryModal.vue <style scoped lang="less"> + 全局 <style lang="less">
   注：Tailwind 工具类保留在 class 中，此处按转义选择器生成等价规则（作用域限定 .compulsory-warp）；
       ion-button → button.ion-button（--background → background，shape="round" → border-radius:64px）；
       ion-icon/ion-img → img，font-size 控 icon 尺寸处补 width/height（注释注明）。
   ========================================================================== */

/* ---- 源码 scoped 样式 ---- */

/* 对应源码 Tailwind preflight（p 默认 margin 清零） */
.compulsory-warp p { margin: 0; }

.compulsory-warp .content {
  background-color: var(--color-bg-progressier-operation, var(--ion-text-color));
  padding-bottom: var(--ion-safe-area-bottom);
}

.compulsory-warp .header {
  background: url('/images/bg-forced-popup-BR.png');
  background-size: 100%;
}

.compulsory-warp .header-BR {
  background: url('/images/bg-forced-popup-BR.png');
  background-size: 100%;
}

.compulsory-warp .header-PH {
  background: url('/images/bg-forced-popup-PH.png');
  background-size: 100%;
}

/* 源码 ion-button { --background: linear-gradient(...); text-transform: none; min-height: 0; height: 2.8125rem } */
.compulsory-warp .ion-button {
  background: linear-gradient(180deg, #72CB45 0%, #337611 100%);
  text-transform: none;
  min-height: 0;
  height: 2.8125rem;
  border-radius: 64px; /* 对应源码 shape="round"（Ionic round = 64px） */
}

.compulsory-warp .accent {
  color: var(--color-currency);
}

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

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

/* ---- Tailwind 工具类等价规则（rem 基值 16px） ---- */

.compulsory-warp .h-full { height: 100%; }
.compulsory-warp .w-full { width: 100%; }
.compulsory-warp .flex { display: flex; }
.compulsory-warp .justify-center { justify-content: center; }
.compulsory-warp .justify-end { justify-content: flex-end; }
.compulsory-warp .items-end { align-items: flex-end; }
.compulsory-warp .items-center { align-items: center; }
.compulsory-warp .flex-col { flex-direction: column; }
.compulsory-warp .relative { position: relative; }
.compulsory-warp .absolute { position: absolute; }
.compulsory-warp .top-0 { top: 0; }
.compulsory-warp .p-2\.5 { padding: .625rem; }
.compulsory-warp .p-2 { padding: .5rem; }
.compulsory-warp .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.compulsory-warp .px-2 { padding-left: .5rem; padding-right: .5rem; }
.compulsory-warp .px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.compulsory-warp .pt-1 { padding-top: .25rem; }
.compulsory-warp .pb-7 { padding-bottom: 1.75rem; }
.compulsory-warp .py-\[\.3125rem\] { padding-top: .3125rem; padding-bottom: .3125rem; }
.compulsory-warp .text-black { color: #000; }
.compulsory-warp .text-white { color: #fff; }
.compulsory-warp .font-semibold { font-weight: 600; }
.compulsory-warp .mb-2 { margin-bottom: .5rem; }
.compulsory-warp .my-3 { margin-top: .75rem; margin-bottom: .75rem; }
.compulsory-warp .my-2\.5 { margin-top: .625rem; margin-bottom: .625rem; }
.compulsory-warp .mt-2 { margin-top: .5rem; }
.compulsory-warp .ml-2\.5 { margin-left: .625rem; }
.compulsory-warp .ml-1\.5 { margin-left: .375rem; }
.compulsory-warp .mr-2 { margin-right: .5rem; }
.compulsory-warp .mr-1\.5 { margin-right: .375rem; }
.compulsory-warp .mb-10 { margin-bottom: 2.5rem; }
.compulsory-warp .text-xs { font-size: .75rem; line-height: 1rem; }
.compulsory-warp .text-sm { font-size: .875rem; line-height: 1.25rem; }
.compulsory-warp .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.compulsory-warp .text-\[1\.75rem\] { font-size: 1.75rem; }
.compulsory-warp .text-\[\.8125rem\] { font-size: .8125rem; }
.compulsory-warp .text-\[\.625rem\] { font-size: .625rem; }
.compulsory-warp .leading-tight { line-height: 1.25; }
.compulsory-warp .w-\[24\.375rem\] { width: 24.375rem; }
.compulsory-warp .rounded-t-\[1\.25rem\] { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.compulsory-warp .bg-\[\#F5F5F5\] { background-color: #F5F5F5; }
.compulsory-warp .rounded-\[\.3125rem\] { border-radius: .3125rem; }
.compulsory-warp .rounded-full { border-radius: 9999px; }
.compulsory-warp .h-\[3\.4375rem\] { height: 3.4375rem; }
.compulsory-warp .w-\[2\.8125rem\] { width: 2.8125rem; }
.compulsory-warp .h-\[2\.8125rem\] { height: 2.8125rem; }
.compulsory-warp .w-5 { width: 1.25rem; }
.compulsory-warp .flex-1 { flex: 1 1 0%; }

/* 源码 class="cover"（ion-img 全局 cover 类）→ img object-fit */
.compulsory-warp .cover { object-fit: cover; }

/* ion-icon/ion-img → img：font-size 类同步宽高（Ionic 图标按 font-size 渲染） */
.compulsory-warp img.text-3xl { width: 1.875rem; height: 1.875rem; }
.compulsory-warp img.text-\[1\.75rem\] { width: 1.75rem; height: 1.75rem; }
.compulsory-warp img.text-\[\.8125rem\] { width: .8125rem; height: .8125rem; }
.compulsory-warp img.w-5 { height: 1.25rem; }

/* 安装按钮内层 button 重置（源码 <button class="w-full h-full"> 继承 ion-button 文本样式） */
.compulsory-warp .ion-button button {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}