/* Alfa Slab One 字体：源项目无本地字体文件，由 src/data.ts FONT_LINKS.default 在运行时
   加载 Google Fonts（https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap），
   此处按源码行为以 @import 同源加载；加载失败时回退浏览器默认字体（源码同样无本地 fallback） */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

/* ==========================================================================
   pwa-header-bar-default2.css · default 皮肤 Platform 布局 PWA 顶部安装栏
   对应源码：ptgame/app/src/pwa/HeaderBar/Default2.vue <style lang="less" scoped>
             + ptgame/app/src/pwa/HeaderBar/Default2.less（#pwa-HeaderBar-Default2.v01.style() mixin）
   展开方式（AGENTS.md 复刻契约）：mixin 参数 → CSS 自定义属性（--d2-*，默认值 = green-default 分支调用值），
   主题分支只覆盖参数；mixin 体共用一组规则。
   层级：主题类（green-default 等）挂 html，home-type-Platform/v01/v02 挂 body（见 themes.css 头部注释）。
   注：Default2.less 的基 #pwa-HeaderBar-Default2.style() mixin 在源码中从未被调用（不产生 CSS），
       此处同样不生成（复刻源码行为）；
       HeaderBar/styles/green-default-v01.less / v02.less 未被 import（源码遗留），存档于 src/css/reference/。
   ========================================================================== */

/* ---- 源码依赖 Tailwind preflight 的元素重置（本项目无全局 preflight，按组件补齐） ---- */
.pwa-HeaderBar-Default2 .install-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.pwa-HeaderBar-Default2 .label {
  margin: 0; /* preflight p 重置 */
}

/* ---- .v01.style() 参数定义（默认值 = 源码默认参数，即 green-default 分支的无参调用） ---- */
.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 {
  line-height: 1rem;
  --d2-text-color1: #fff;
  --d2-line-color1: rgba(255, 235, 167, 0.37);
  --d2-line-color2: #fff;
  --d2-gradient1: linear-gradient(180deg, #fff 38.17%, #CBFA6A 100%);
  --d2-bg1: url('/images/green-default.png') no-repeat center / 100% 100%;
  --d2-bg2: rgba(255, 255, 255, 0.2);
  --d2-bg3: #f3bc00;
  --d2-shadow1: inset 0 0.1875rem 0 0 #fbeb00, inset 0 -0.1875rem 0 0 rgba(223, 141, 78, 0.9);
  --d2-shadow2: drop-shadow(0 0.404px 0 #000) drop-shadow(0 1.413px 0.404px rgba(0, 0, 0, 0.25));
  --d2-shadow3: 0 0 1.5px #2b4f14, 0 0 1.5px #2b4f14, 0 0 1.5px #2b4f14, 0 0 1.5px #2b4f14;
  --d2-shadow4: 0 0.0883rem 0.0253rem rgba(0, 0, 0, 0.25), 0 0.0253rem 0 #000;
  background: var(--d2-bg1); /* 源码 --background: @bg1 */
  min-height: 3.5rem; /* Ionic ion-toolbar md 默认 min-height: 56px（复刻 Ionic chrome） */
}

/* ---- 源码 .forest-green 分支参数覆盖 ---- */
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 {
  --d2-line-color1: #849D69;
  --d2-bg1: url('/images/deep-forest-green.png') no-repeat center / 100% 100%;
  --d2-gradient1: linear-gradient(180deg, #F5F8DD 38.17%, #CBFA6A 100%);
}

/* ---- 源码 .amber-purple 分支参数覆盖（仅 v01） ---- */
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 {
  --d2-line-color1: rgba(232, 221, 248, 0.37);
  --d2-bg1: url('/images/pwa-amber-purple.png') no-repeat center / 100% 100%;
  --d2-bg3: #A46AFA;
  --d2-gradient1: linear-gradient(180deg, #E8DDF8 38.17%, #A46AFA 100%);
  --d2-shadow1: inset 0 0.1875rem 0 0 rgb(215, 173, 249), inset 0 -0.1875rem 0 0 rgb(81, 31, 238);
  --d2-shadow3: 0 0 0.0938rem #5F588C, 0 0 0.0938rem #5F588C, 0 0 0.0938rem #5F588C, 0 0 0.0938rem #5F588C;
}

/* ---- 源码 .blue-default 分支参数覆盖（仅 v02） ---- */
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 {
  --d2-line-color1: rgba(22, 128, 220, 0.37);
  --d2-line-color2: #182344;
  --d2-bg1: url('/images/pwa-blue-default.png') no-repeat center / 100% 100%;
  --d2-bg3: #37A6F8;
  --d2-gradient1: linear-gradient(180deg, #EDF8FF 38.17%, #6EABFF 100%);
  --d2-shadow1: inset 0 0.1875rem 0 0 #7bdcfa, inset 0 -0.1875rem 0 0 #2b5bea;
  --d2-shadow3: 0 0 0.0938rem #182344, 0 0 0.0938rem #182344, 0 0 0.0938rem #182344, 0 0 0.0938rem #182344;
}

/* ---- .v01.style() mixin 体（消费上方 --d2-* 参数） ---- */

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .close-btn,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .close-btn,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .close-btn,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .close-btn,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .close-btn,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .close-btn {
  padding: 0.2rem;
  min-height: min-content;
  font-size: 1rem;
  margin-inline: 0.625rem;
  border-radius: 50%;
  background: var(--d2-bg2);
  color: var(--d2-text-color1);
}

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .logo,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .logo,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .logo,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .logo,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .logo,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem; /* ::part(image) border-radius 与自身一致（ion-img → img，同一元素） */
  border: 0.1875rem solid var(--d2-line-color1);
}

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label {
  font-family: 'Alfa Slab One';
  font-size: 0.875rem;
  font-weight: 400;
  margin-inline-start: 0.75rem;
}

/* .text-stroke 描边字：渐变文字 + ::before attr(data-text) 投影垫底 */
.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label .text-stroke,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label .text-stroke,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label .text-stroke,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label .text-stroke,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label .text-stroke,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label .text-stroke {
  background: var(--d2-gradient1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  position: relative;
}

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label .text-stroke::before,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label .text-stroke::before,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label .text-stroke::before,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label .text-stroke::before,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .label .text-stroke::before,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .label .text-stroke::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  text-shadow: var(--d2-shadow4);
}

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-right: 0.5rem;
  height: 1.375rem;
}

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .install,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .install,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .install,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .install,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .install,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .install {
  /* 自定义按钮样式 */
  display: flex;
  justify-content: flex-end;
  z-index: -1;
  min-width: 4.7053rem;
  margin-left: -1.25rem;
  align-self: flex-end;
  font-size: 0.625rem;
  border-radius: 0.1875rem;
  border: 0.0625rem solid var(--d2-line-color2);
  transform: skewX(-8deg);
  padding: 0.25rem 0.3125rem 0.1875rem 1.2rem;
  background-color: var(--d2-bg3);
  box-shadow: var(--d2-shadow1);
  filter: var(--d2-shadow2);
}

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .btn-img,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .btn-img,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .btn-img,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .btn-img,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .btn-img,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .btn-img {
  width: 3.125rem;
  height: 1.9063rem;
  margin-block-end: -0.125rem;
}

.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .install-btn,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .install-btn,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .install-btn,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .install-btn,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .toolbar-end .install-btn,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .toolbar-end .install-btn {
  color: var(--d2-text-color1);
  font-size: 1rem;
  font-weight: 900;
  text-shadow: var(--d2-shadow3);
}

/* ---- 源码 Default2.vue 各主题分支内 .pwa-HeaderBar-Default2 .close-btn 覆盖（在 mixin 调用之后，覆盖 margin） ---- */
.green-default .home-type-Platform.v01 .pwa-HeaderBar-Default2 .close-btn,
.green-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .close-btn,
.forest-green .home-type-Platform.v01 .pwa-HeaderBar-Default2 .close-btn,
.forest-green .home-type-Platform.v02 .pwa-HeaderBar-Default2 .close-btn,
.amber-purple .home-type-Platform.v01 .pwa-HeaderBar-Default2 .close-btn,
.blue-default .home-type-Platform.v02 .pwa-HeaderBar-Default2 .close-btn {
  margin-inline-start: 0.25rem;
  margin-inline-end: 0.625rem;
}