/* ==========================================================================
   compulsory-modal-second.css · 强制安装弹窗 second 皮肤（amber-purple）
   对应源码：ptgame/app/src/pwa/compulsoryModal/second.vue <style scoped lang="less">
             （:deep(.amber-purple) 展开；作用域前缀 .compulsory-modal-second 等价父组件 scope id）
             + components/second/Button/index.vue scoped 样式（VButton 等价物）
   ========================================================================== */

/* ---- 源码 :deep(.amber-purple) 展开 ---- */

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

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

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

.compulsory-modal-second .amber-purple {
  background-color: var(--color-bg-300);
}

.compulsory-modal-second .amber-purple .title {
  color: var(--text-color-light-purple-1-100);
}

.compulsory-modal-second .amber-purple p {
  color: var(--text-color-light-purple-2-100);
}

.compulsory-modal-second .amber-purple span {
  color: var(--accent-color-yellow);
}

.compulsory-modal-second .amber-purple .logo {
  background-color: var(--color-bg-100);
}

.compulsory-modal-second .amber-purple .logo p {
  color: var(--text-color-light-purple-1-100);
}

.compulsory-modal-second .amber-purple .support {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem;
  border-color: var(--line-color);
  background: var(--color-bg-200);
  box-shadow: 0px 4px 6.8px 0px rgba(0, 0, 0, 0.25),
    0px -2px 4px 0px rgba(0, 0, 0, 0.11) inset;
}

.compulsory-modal-second .amber-purple .tip-box span {
  color: var(--text-color-light-purple-2-100);
}

.compulsory-modal-second .amber-purple .warn {
  background-color: var(--color-bg-100);
}

.compulsory-modal-second .amber-purple .btn-text {
  color: var(--color-primary-btn-text-active);
}

/* ---- VButton（components/second/Button/index.vue）等价样式 ---- */

.compulsory-modal-second div.button .ion-button.second-button {
  background: var(--color-button-bg-basic);
  border-radius: var(--layout-radius-basic);
  padding-left: .625rem;
  padding-right: .625rem;
  box-shadow: var(--color-button-shadow-basic); /* 对应源码 ::part(native) box-shadow */
  font-size: var(--button-font-size, .875rem);
  font-weight: var(--button-font-weight, bold);
  min-height: 26px;
  width: 100%;
  height: 100%;
  margin: 0;
}

.compulsory-modal-second div.button .ion-button.second-button p {
  font-size: inherit;
}

.compulsory-modal-second div.button .ion-button.second-button p span {
  color: var(--button-text-color, --color-primary-btn-text-active); /* 复刻源码行为：第二参数缺 var() 包裹，照原样保留 */
}

/* 对应源码 :global(ion-button.second-button p) */
.ion-button.second-button p {
  color: var(--color-primary-btn-text-active);
}

/* ---- install-area 插槽多节点包装（display:contents 视觉等价） ---- */

.compulsory-modal-second .install-area-slot {
  display: contents;
}

/* ---- Tailwind 工具类等价规则（插槽内容用） ---- */

.compulsory-modal-second .flex { display: flex; }
.compulsory-modal-second .items-center { align-items: center; }
.compulsory-modal-second .items-end { align-items: flex-end; }
.compulsory-modal-second .justify-center { justify-content: center; }
.compulsory-modal-second .h-\[2\.5rem\] { height: 2.5rem; }
.compulsory-modal-second .w-\[2\.5rem\] { width: 2.5rem; }
.compulsory-modal-second .mr-\[1\.8125rem\] { margin-right: 1.8125rem; }
.compulsory-modal-second .text-\[1\.75rem\] { font-size: 1.75rem; }
.compulsory-modal-second .flex-1 { flex: 1 1 0%; }
.compulsory-modal-second .text-white { color: #fff; }
.compulsory-modal-second .w-full { width: 100%; }
.compulsory-modal-second .h-full { height: 100%; }

/* ion-icon → img：font-size 类同步宽高 */
.compulsory-modal-second img.text-\[1\.75rem\] { width: 1.75rem; height: 1.75rem; }
.compulsory-modal-second img.text-\[\.8125rem\] { width: .8125rem; height: .8125rem; }

/* VButton 插槽内层 button 重置（对应源码 <button class="w-full h-full btn-text">） */
.compulsory-modal-second .btn-text {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}