/* ==========================================================================
   skin-petri.css — 皮肤 J「人工自然主义·培养皿」（specs/024，概念展板 J 落地）
   --------------------------------------------------------------------------
   一句话：每条支线是一菌落 —— 卡片带皿沿双环，徽章是单菌落，进度条是移液管，
   12 族 = 12 种培养菌落色。「自然」不用树叶画，在实验室里养出来。

   024 老板两条硬需求都落在本文件：
     1. 粉钮撤了：强调色从「黏质红菌落粉」换成**结晶紫**（真实的实验室染液，
        叙事不崩、白字 AA）；
     2. 绿萝藤蔓浮在页面上慢慢攀爬：.app 双伪元素挂同源 SVG，
        mask 自下而上揭示 = "生长"，pointer-events:none 不吃操作，
        prefers-reduced-motion 下静止全现。
   ========================================================================== */

/* ---------- 1. 亮档 token：营养琼脂 × 苔绿 × 结晶紫 × 番红黄 ---------- */
html[data-skin="petri"] {
  --paper: #EDF2E4;
  --paper-2: #F7FAF1;
  --paper-3: #E1EAD2;
  --ink: #17251C;
  --ink-soft: #3E5044;
  --ink-faint: #52665A;              /* 琼脂上实算 5.3:1 */

  /* .btn-accent 吃 --vermillion：**结晶紫 #5B4FA0**（替换掉老板否掉的粉钮，
     白字实算 6.2 ✓）；.btn-primary 吃 --pine 苔绿，纸色字 4.6 ✓ */
  --vermillion: #5B4FA0;
  --pine: #2F7A3D;
  --pine-deep: #1D5229;
  --gold: #D8A434;

  --line: rgba(47, 82, 64, 0.40);
  --line-soft: rgba(47, 82, 64, 0.18);

  --dot: rgba(47, 122, 61, 0.07);
  --tape: rgba(216, 164, 52, 0.52);
  --scrim: rgba(23, 37, 28, 0.56);
  --on-accent: #F2EFFB;
  --on-tag: #F2FFE9;
  --vermillion-soft: rgba(91, 79, 160, 0.4);
  --flow-night: #245C2E;
  --check-idle: #2F5240;
  --thumb-paper: #F7FAF1;

  --shadow-paper: 0 6px 16px rgba(23, 37, 28, 0.12);
  --shadow-lift: 0 12px 28px rgba(23, 37, 28, 0.16);
  --shadow-tag: 2px 2px 0 rgba(23, 37, 28, 0.35);
  --shadow-thumb: 2px 2px 0 rgba(23, 37, 28, 0.2);

  --font-display: "Microsoft YaHei", system-ui, sans-serif;

  /* 皿沿：大圆角 + 胶囊按钮 */
  --r-card: 26px;
}

/* ---------- 2. 背景：菌落显微实拍压在琼脂 veil 下 + 气泡点阵 ---------- */
html[data-skin="petri"] .flow-canvas { display: none; }
html[data-skin="petri"] body::after {
  background-image:
    linear-gradient(rgba(237, 242, 228, 0.80), rgba(225, 234, 210, 0.86)),
    url("../../assets/skins/petri-bg.jpg");
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}
/* 网点层 = 菌落点阵（三色错位阵列） */
html[data-skin="petri"] body::before {
  background-image:
    radial-gradient(rgba(47, 122, 61, 0.13) 2px, transparent 2.6px),
    radial-gradient(rgba(91, 79, 160, 0.10) 1.6px, transparent 2px),
    radial-gradient(rgba(216, 164, 52, 0.12) 1.4px, transparent 1.8px);
  background-size: 14px 14px, 18px 18px, 22px 22px;
  background-position: 0 0, 6px 6px, 11px 3px;
}

/* ---------- 3. 组件：皿沿双环 + 菌落 ---------- */
html[data-skin="petri"] .card {
  background: var(--paper-2);
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3.5px rgba(47, 122, 61, 0.34), var(--shadow-paper);
}
html[data-skin="petri"] .chip { background: var(--paper-2); border: 1.5px solid var(--line-soft); color: var(--ink); }
html[data-skin="petri"] .chip[aria-pressed="true"] {
  background: var(--pine);
  color: #F2FFE9;
  border-color: var(--pine-deep);
  box-shadow: 0 0 0 3px rgba(47, 122, 61, 0.22);
}
/* 026：那一圈 1.5px 皿沿框拿掉（老板：全局不要矩形外框）。
   培养皿的语言仍在：纸底轨道 + 选中那颗皿白胶囊 + 内描边。 */
html[data-skin="petri"] .seg { background: var(--paper-2); border: none; padding: 3px; border-radius: 999px; }
html[data-skin="petri"] .seg-item { border: none; }
html[data-skin="petri"] .seg-item[aria-pressed="true"] {
  background: #CFE3B4;
  color: #1D3A24;
  box-shadow: inset 0 0 0 1.5px rgba(47, 122, 61, 0.4);
}
html[data-skin="petri"] .seg-item[aria-selected="true"]  {
  background: #CFE3B4;
  color: #1D3A24;
  box-shadow: inset 0 0 0 1.5px rgba(47, 122, 61, 0.4);
}
html[data-skin="petri"] .seg-item[aria-pressed="true"] .k { color: #1D3A24; }
html[data-skin="petri"] .seg-item[aria-selected="true"] .k { color: #1D3A24; }
/* 瓦片 = 皿盖：圆角收成菌落轮廓 */
html[data-skin="petri"] .tile {
  background: var(--paper-2);
  border: 1.5px solid var(--line-soft);
  border-radius: 46% 54% 42% 58% / 55% 45% 60% 40%;
}
html[data-skin="petri"] .tile[aria-pressed="true"] {
  background: radial-gradient(circle at 50% 38%, #F9E9C2 0 26%, #CFE3B4 100%);
  color: var(--ink);
  border-color: var(--pine);
}
html[data-skin="petri"] .tile[aria-pressed="true"] .mark { color: var(--pine-deep); }
html[data-skin="petri"] .tile[aria-pressed="true"] .label,
html[data-skin="petri"] .tile[aria-pressed="true"] .tiny,
html[data-skin="petri"] .tile[aria-pressed="true"] .faint { color: #1D3A24; opacity: 1; }

html[data-skin="petri"] .btn { border-color: transparent; font-weight: 600; }
/* 钮底用平色不用径向高光：初稿的 radial 亮端把白字拉到 2~3:1；
   皿沿感改由 inset 环承担，底色与字色逐对实算过 AA */
html[data-skin="petri"] .btn-primary {
  background: var(--pine);
  color: #F2FFE9;
  box-shadow: inset 0 0 0 1.5px rgba(242, 255, 233, 0.3), 0 6px 16px rgba(47, 122, 61, 0.35);
}
html[data-skin="petri"] .btn-accent {
  background: var(--vermillion);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1.5px rgba(242, 239, 251, 0.3), 0 6px 16px rgba(91, 79, 160, 0.35);
}
html[data-skin="petri"] .btn-ghost { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
html[data-skin="petri"] .tier-cell { background: var(--paper-2); border: 1.5px solid var(--line-soft); }
html[data-skin="petri"] .tier-cell[aria-pressed="true"] {
  background: var(--vermillion);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1.5px rgba(242, 239, 251, 0.3), 0 0 0 3px rgba(91, 79, 160, 0.22);
}
html[data-skin="petri"] .tier-cell[aria-pressed="true"] .v,
html[data-skin="petri"] .tier-cell[aria-pressed="true"] .k { color: var(--on-accent); }

html[data-skin="petri"] .q-num { color: var(--ink); }
/* 编号下面一道"生长底线" */
html[data-skin="petri"] .q-num::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--pine);
  margin-top: 2px;
}

/* 票根 = 皿中滤纸：双环皿沿 + 滴染圆章 */
html[data-skin="petri"] .ticket {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3.5px rgba(47, 122, 61, 0.34), var(--shadow-lift);
  background: var(--paper-2);
}
html[data-skin="petri"] .ticket-stamp {
  border: 0;
  border-radius: 50%;
  width: 46px;
  padding: 8px 2px;
  color: var(--on-accent);
  background: radial-gradient(circle at 34% 28%, #8578C8 0 24%, #5B4FA0 96%);
  box-shadow: 0 0 0 3px rgba(91, 79, 160, 0.2);
  font-weight: 700;
  opacity: 1;
}
html[data-skin="petri"] .ticket-blessing {
  background: rgba(214, 245, 194, 0.55);
  border: 1.5px dashed rgba(47, 122, 61, 0.5);
  font-style: normal;
  color: var(--ink);
  opacity: 1;
}
html[data-skin="petri"] .family-tag {
  background: var(--pine);
  color: var(--on-tag);
  box-shadow: inset 0 0 0 1.5px rgba(242, 255, 233, 0.35), var(--shadow-tag);
}

html[data-skin="petri"] .lib-bar { background: linear-gradient(180deg, #5B4FA0, #D8A434, #2F7A3D); }
/* 进度条 = 移液管：末端液滴球 */
html[data-skin="petri"] .progress { position: relative; height: 8px; background: var(--paper-3); }
html[data-skin="petri"] .progress > i { position: relative; background: var(--pine); }
html[data-skin="petri"] .progress > i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pine);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
/* 徽章 = 单菌落：中心乳突 + 外圈晕环 */
html[data-skin="petri"] .badge {
  border-radius: 50%;
  border: 1.5px solid var(--line-soft);
  background: radial-gradient(circle at 46% 40%, #FFFFFF 0 24%, var(--paper-3) 80%);
  color: var(--ink-faint);
}
html[data-skin="petri"] .badge.is-owned {
  border-color: transparent;
  background: radial-gradient(circle at 40% 34%, #FFEFC2 0 26%, #D8A434 92%);
  color: #4A3208;
  box-shadow: 0 0 0 3px rgba(216, 164, 52, 0.25);
}
html[data-skin="petri"] .stat { background: var(--paper-2); border: 1.5px solid var(--line-soft); border-radius: 18px; }
html[data-skin="petri"] .toast { background: rgba(23, 37, 28, 0.92); }
html[data-skin="petri"] .level-num { color: var(--vermillion); }
html[data-skin="petri"] .check-box { border: 2px solid var(--pine-deep); border-radius: 50%; }
html[data-skin="petri"] .why { border-left: 3px solid var(--pine); }
html[data-skin="petri"] .safety { border-left: 3px solid var(--vermillion); }
html[data-skin="petri"] .radar__ring-stroke { stroke: rgba(47, 82, 64, 0.5); }
html[data-skin="petri"] .radar__dot { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }

/* ---------- 4. 绿萝藤蔓：浮在页面之上慢慢攀爬（024 批注） ---------- */
html[data-skin="petri"] .app::before,
html[data-skin="petri"] .app::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;           /* 不吃任何操作 */
  z-index: 20;                    /* 高于内容(0)与 tabbar(10)，低于抽屉(40)/弹窗(50)/toast(60) */
  background-repeat: no-repeat;
  background-size: auto 68vh;
  opacity: 0.55;                  /* 氛围浓度：看得见是"场"，不是贴纸 */
  -webkit-mask-image: linear-gradient(to top, #000 0 40%, transparent 60%);
  mask-image: linear-gradient(to top, #000 0 40%, transparent 60%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;     /* 初始：mask 透明区盖住视口 = 藤还没长出来 */
  mask-position: 0 0;
  animation: petri-vine 90s linear forwards;
}
html[data-skin="petri"] .app::before {
  background-image: url("../../assets/skins/vine-flip.svg");
  background-position: left bottom;
  animation-duration: 110s;       /* 两条错开节奏，像真的在各自找光 */
}
html[data-skin="petri"] .app::after {
  background-image: url("../../assets/skins/vine.svg");
  background-position: right bottom;
}
@keyframes petri-vine {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}
/* 降级：静止 = 直接全现，不闪不藏 */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="petri"] .app::before,
  html[data-skin="petri"] .app::after {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- 5. tabbar = 墨绿培养台 + 皿白胶囊选中；图标换菌落符号 ---------- */
html[data-skin="petri"] .tabbar {
  background: #17251C;
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-skin="petri"] .tab { color: #7E8F82; }
html[data-skin="petri"] .tab[aria-current="page"] {
  color: #17251C;
  background: #CFE3B4;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(47, 122, 61, 0.5);
}
html[data-skin="petri"] .tab .i { font-size: 0; }
html[data-skin="petri"] .tab .i::before {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}
html[data-skin="petri"] .tab[data-tab="home"] .i::before    { content: "\25CD"; }  /* ◍ 皿 */
html[data-skin="petri"] .tab[data-tab="quest"] .i::before   { content: "\273F"; }  /* ✿ 花繁 */
html[data-skin="petri"] .tab[data-tab="library"] .i::before { content: "\2742"; }  /* ❂ 集落 */
html[data-skin="petri"] .tab[data-tab="profile"] .i::before { content: "\2618"; }  /* ☘ 自然 */
/* 031：第五枚「广场」——环抱菌落记号（⊛ 培养语系） */
html[data-skin="petri"] .tab[data-tab="plaza"] .i::before  { content: "\229B"; }

/* ---------- 6. 暗色变体：紫外透射台（菌落发荧光） ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="petri"] {
    --paper: #0F1712;
    --paper-2: #14201A;
    --paper-3: #1A2920;
    --ink: #DFF3E2;
    --ink-soft: #9FC2A9;
    --ink-faint: #7FA289;

    --vermillion: #A99BF0;
    --pine: #45C174;
    --pine-deep: #7CFFB2;
    --gold: #F2C860;

    --line: rgba(124, 255, 178, 0.42);
    --line-soft: rgba(124, 255, 178, 0.20);

    --dot: rgba(124, 255, 178, 0.06);
    --tape: rgba(124, 255, 178, 0.26);
    --scrim: rgba(0, 0, 0, 0.66);
    --on-accent: #17102E;
    --on-tag: #07130C;
    --vermillion-soft: rgba(169, 155, 240, 0.45);
    --flow-night: #1E5C32;
    --check-idle: #7CFFB2;
    --thumb-paper: #14201A;

    --shadow-paper: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.55);
    --shadow-tag: 2px 2px 0 rgba(0, 0, 0, 0.55);
    --shadow-thumb: 2px 2px 0 rgba(0, 0, 0, 0.5);
  }
  html[data-skin="petri"] body::after {
    background-image:
      linear-gradient(rgba(15, 23, 18, 0.82), rgba(15, 23, 18, 0.9)),
      url("../../assets/skins/petri-bg.jpg");
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
  }
  html[data-skin="petri"] body::before {
    background-image:
      radial-gradient(rgba(124, 255, 178, 0.10) 2px, transparent 2.6px),
      radial-gradient(rgba(169, 155, 240, 0.08) 1.6px, transparent 2px),
      radial-gradient(rgba(242, 200, 96, 0.08) 1.4px, transparent 1.8px);
  }
  html[data-skin="petri"] .card, html[data-skin="petri"] .ticket {
    background: var(--paper-2);
    box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3.5px rgba(124, 255, 178, 0.28), var(--shadow-paper);
  }
  html[data-skin="petri"] .chip, html[data-skin="petri"] .seg,
  html[data-skin="petri"] .tile, html[data-skin="petri"] .tier-cell,
  html[data-skin="petri"] .stat { background: var(--paper-2); }
  html[data-skin="petri"] .chip[aria-pressed="true"] { background: #1E3B2A; color: #7CFFB2; }
  html[data-skin="petri"] .seg-item[aria-pressed="true"] { background: #1E3B2A; color: #7CFFB2; box-shadow: inset 0 0 0 1.5px rgba(124, 255, 178, 0.4); }
  html[data-skin="petri"] .seg-item[aria-selected="true"] { background: #1E3B2A; color: #7CFFB2; box-shadow: inset 0 0 0 1.5px rgba(124, 255, 178, 0.4); }
  html[data-skin="petri"] .seg-item[aria-pressed="true"] .k { color: #7CFFB2; }
  html[data-skin="petri"] .seg-item[aria-selected="true"] .k { color: #7CFFB2; }
  html[data-skin="petri"] .tile[aria-pressed="true"] { background: radial-gradient(circle at 50% 38%, #22382B 0 26%, #1E3B2A 100%); color: #7CFFB2; }
  html[data-skin="petri"] .tile[aria-pressed="true"] .mark,
  html[data-skin="petri"] .tile[aria-pressed="true"] .label,
  html[data-skin="petri"] .tile[aria-pressed="true"] .tiny,
  html[data-skin="petri"] .tile[aria-pressed="true"] .faint { color: #7CFFB2; opacity: 1; }
  html[data-skin="petri"] .btn-ghost { background: var(--paper-2); color: var(--ink); }
  html[data-skin="petri"] .btn-primary { background: var(--pine); color: #07130C; }
  html[data-skin="petri"] .btn-accent { background: var(--vermillion); color: #17102E; }
  html[data-skin="petri"] .tier-cell[aria-pressed="true"] { background: var(--vermillion); color: #17102E; }
  html[data-skin="petri"] .tier-cell[aria-pressed="true"] .v,
  html[data-skin="petri"] .tier-cell[aria-pressed="true"] .k { color: #17102E; }
  html[data-skin="petri"] .tabbar { background: #0A120D; }
  html[data-skin="petri"] .tab { color: #5A7564; }
  html[data-skin="petri"] .tab[aria-current="page"] { background: #1E3B2A; color: #7CFFB2; box-shadow: inset 0 0 0 1.5px rgba(124, 255, 178, 0.5); }
  html[data-skin="petri"] .app::before, html[data-skin="petri"] .app::after { opacity: 0.4; }
}

/* ---------- 9. specs/025 支线页特色装饰 ----------
   这一档已经有一条全页绿萝藤（挂在 .app），支线页再加两层“培养箱里的气”：
   上缘一批漂浮孢子，下缘一弯皿沿反光（皿盖内壁那一圈高光）。
   纪律同前：.quest-body 伪元素 / z-index:-1 / pointer-events:none / reduced-motion 静止。 */
html[data-skin="petri"] .quest-body::before,
html[data-skin="petri"] .quest-body::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -10px;
  right: -10px;
}
html[data-skin="petri"] .quest-body::before {
  top: 4px;
  height: 150px;
  background:
    radial-gradient(circle, var(--pine) 0 2.4px, transparent 3px) 6% 18% / 48px 40px,
    radial-gradient(circle, var(--pine) 0 1.6px, transparent 2.4px) 52% 6% / 38px 34px,
    radial-gradient(circle, var(--gold) 0 1.8px, transparent 2.6px) 82% 26% / 56px 46px;
  background-repeat: repeat;
  -webkit-mask: linear-gradient(#000 0 55%, transparent);
  mask: linear-gradient(#000 0 55%, transparent);
  opacity: .34;
  animation: petri-spores 21s ease-in-out infinite alternate;
}
@keyframes petri-spores {
  from { transform: translate3d(-6px, 0, 0); }
  to   { transform: translate3d(10px, 12px, 0); }
}
html[data-skin="petri"] .quest-body::after {
  bottom: 6px;
  height: 62px;
  background:
    radial-gradient(120% 100% at 50% 118%, transparent 0 58%, var(--pine) 59% 60.2%, transparent 61.4%),
    radial-gradient(120% 100% at 50% 118%, transparent 0 66%, var(--gold) 67% 67.9%, transparent 69%);
  opacity: .4;
  animation: petri-rim 11s ease-in-out infinite alternate;
}
@keyframes petri-rim {
  from { opacity: .26; transform: translateY(2px); }
  to   { opacity: .46; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="petri"] .quest-body::before,
  html[data-skin="petri"] .quest-body::after { animation: none; }
}