/* ==========================================================================
   pwa-header-bar.css · PWA 顶部安装栏（旧皮肤通用）
   对应源码：ptgame/app/src/pwa/comp/HeaderBar.vue <style scoped lang="less">
   （--background 为 Ionic ion-toolbar 变量，原生等价直接写 background；
     皮肤/主题类在组件根元素自身（:class="['text-xs',skin,theme]"），
     home-type-*/v01 在 body 上，见 themes.css 头部注释）
   ========================================================================== */

#pwa-header-bar {
  min-height: 3.5rem; /* Ionic ion-toolbar md 默认 min-height: 56px（复刻 Ionic chrome） */
  background: var(--color-bar-bg-pwa); /* 源码 --background */
}

/* 源码依赖 Tailwind preflight（本项目无全局 preflight，按组件补齐）：
   p 重置；默认插槽 button（class="w-full h-full"）重置——first/Button 的 button.ion-button
   在源码中位于 ion-button shadow 内不受 preflight 影响，故此处不覆盖它 */
#pwa-header-bar p {
  margin: 0;
}

#pwa-header-bar .install > button.w-full {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ---- 源码 #pwa-header-bar.blue-default ---- */
#pwa-header-bar.blue-default {
  background: linear-gradient(90deg, #202940 0%, #131A2C 100%);
}

/* 源码 .home-type-GameType.v01 &（home-type-*/v01 挂 body） */
.home-type-GameType.v01 #pwa-header-bar.blue-default {
  border-radius: 0.625rem;
  background: linear-gradient(95deg, #0C526C 4.14%, #533E08 100%);
}

#pwa-header-bar.blue-default .install {
  /* 自定义按钮样式 */
  background: linear-gradient(0deg, #0167CA -13.77%, #38A8FA 102.34%);
}

/* ---- 源码 #pwa-header-bar.green-default ---- */
#pwa-header-bar.green-default {
  background: var(--theme-color-gradient-300);
}

#pwa-header-bar.green-default .install {
  /* 自定义按钮样式 */
  background: var(--theme-color-gradient-200);
  color: var(--color-bg-400);
}

/* ---- 源码 #pwa-header-bar.default.amber-purple（skin + theme 同在根元素） ---- */
#pwa-header-bar.default.amber-purple .install {
  /* 自定义按钮样式 */
  background: var(--theme-color-gradient-200);
  color: var(--accent-color-white);
}

/* ---- 源码 #pwa-header-bar.auroral-yellow ---- */
#pwa-header-bar.auroral-yellow {
  background: linear-gradient(95deg, #0C526C 4.14%, #533E08 100%);
}

#pwa-header-bar.auroral-yellow .install {
  background: linear-gradient(0deg, #23D8DB 1.92%, #23DB8C 96.15%);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-black-100);
}

#pwa-header-bar.auroral-yellow .close-btn {
  margin-inline-start: 0.25rem;
}

/* ---- 源码 .close（组件内 ion-icon） ---- */
#pwa-header-bar .close {
  color: var(--color-text-white-100);
}

/* ---- Tailwind 工具类（class 名与源码 100% 一致，转写为转义选择器） ---- */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.cover {
  object-fit: cover;
}

.flex {
  display: flex;
}

.w-9 {
  width: 2.25rem;
}

.h-9 {
  height: 2.25rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.items-center {
  align-items: center;
}

.h-full {
  height: 100%;
}

.w-24 {
  width: 6rem;
}

.h-8 {
  height: 2rem;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.p-\[5px\] {
  padding: 5px;
}

.min-w-16 {
  min-width: 4rem;
}

.text-center {
  text-align: center;
}

.mx-2\.5 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.w-full {
  width: 100%;
}