/* ==========================================================================
   君兰绘学岛 · 古风 Q 版换皮（P1-C）· 主题层 v2.0
   依据：docs/ui-style-v2.0.md（甄塑之 / 模型总监）
   加载位置：必须在 style.css 与 pet-anim.css 之后（index.html 末位引入）。
   设计口径：本文件只新增令牌与组件样式，不删除 style.css / pet-anim.css 任何规则；
            同选择器靠“后加载”自然覆盖，便于整体回滚（删掉 index.html 一行 link 即可）。
   改动范围：仅首页（.home）+ 宠物空间（.pet / .pet-scene）视觉；逻辑/动画/数值/云登录零改动。
   ========================================================================== */

/* ---------- §二 全局设计令牌 v3.0（对标《我的花园世界》§2.5 色板，甄塑之） ---------- */
:root{
  /* 规范令牌 --jl-*（新口径，新代码引用这套） */
  --jl-cream-1:#F7E8C8; --jl-cream-2:#F0D4A8; --jl-cream-3:#FFF8E8;
  --jl-wood-1:#8B5A3C;  --jl-wood-2:#B8824F;  --jl-wood-3:#E8C89A;
  --jl-red:#D4453A;     --jl-red-2:#E8705F;
  --jl-blue:#5BA8C4;    --jl-blue-2:#7ED0E8;
  --jl-green:#8FBC55;   --jl-green-dk:#5A7A3A;
  --jl-pink:#F2A0B4;    --jl-lilac:#B48FD4;
  --jl-gold:#F0C060;    --jl-gold-2:#F7D98C;  --jl-gold-dk:#C99A3F;
  --jl-ink:#5A4632;     --jl-ink-2:#8A7250;
  --jl-shadow:rgba(139,90,60,.28);

  /* 背景与纸面（旧名 → 新值） */
  --bg:#F7E8C8; --bg2:#F0D4A8;
  --paper:#FFF8E8; --paper-2:#F7ECD4;
  /* 木质 */
  --wood:#B8824F; --wood-dk:#8B5A3C; --wood-lt:#E8C89A; --wood-line:#7A4E2E;
  /* 布艺 */
  --cloth:#F2E3C4; --cloth-dk:#D9BC8C;
  /* 文字（暖褐） */
  --ink:#5A4632; --ink2:#8A7250; --ink3:#B49A74;
  --ink-outline:rgba(120,80,50,.30);
  /* 古风三主色（朱红/苔绿/鎏金，饱和度整体上调对齐参考） */
  --rouge:#D4453A; --rouge-2:#E8705F; --rouge-soft:#FADCD5;
  --moss:#8FBC55;  --moss-2:#A8CF72;  --moss-soft:#EAF3D8;
  --gold:#F0C060;  --gold-2:#F7D98C;  --gold-soft:#FBEFD2;
  /* 状态色（饱食度=湖蓝 / 心情=红粉，对齐 img25 双条） */
  --st-energy:#8FBC55; --st-feed:#5BA8C4; --st-mood:#E8556E; --st-exp:#F0C060;
  --ok:#6FA856; --ok-soft:#E7F1DC;
  --bad:#D4453A; --bad-soft:#F9DED8;
  --warn:#E0913C; --warn-soft:#FBEBD0;
  /* 圆角 / 描边 / 阴影（沿用 v2 数值，投影基色暖化） */
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --bd:3px; --bd-lg:5px; --bd-xl:7px;
  --sh:0 6px 16px rgba(139,90,60,.20);
  --sh-sm:0 3px 8px rgba(139,90,60,.16);
  --sh-lg:0 12px 30px rgba(139,90,60,.26);
  --sh-in:inset 0 2px 5px rgba(120,80,40,.18);
  /* 字体栈（不变，禁外部字体） */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC","Source Han Sans SC",sans-serif;
  --gap:12px; --gap-lg:16px; --pad:14px; --pad-lg:18px;
  /* 旧品牌名重指向朱红体系 */
  --brand:#D4453A; --brand2:#E8705F; --brand-soft:#FADCD5;
  --rose:#D4453A;  --rose2:#E8705F;  --rose-soft:#FADCD5;
  --card:#FFF8E8;
  --nav-h:62px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}

/* ---------- §3.1 木质面板 ---------- */
.wood-panel{ position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--wood-lt) 0%,var(--wood) 52%,var(--wood-dk) 100%);
  border:var(--bd-lg) solid var(--wood-dk); border-radius:var(--r-lg);
  box-shadow:var(--sh), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -5px 9px rgba(90,60,30,.30); }
.wood-panel::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  opacity:.5; mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(180deg, rgba(120,80,40,.07) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 16% 28%, rgba(90,60,30,.20) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 66%, rgba(90,60,30,.16) 0 2.5px, transparent 3.5px); }
.wood-panel.plaque::after{ content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:8px; height:14px; background:var(--wood-dk); border-radius:0 0 4px 4px; }

/* ---------- §3.2 布艺面板 ---------- */
.cloth-panel{ position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--paper) 0%,var(--cloth) 100%);
  border:var(--bd) solid var(--cloth-dk); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm), inset 0 0 0 2px rgba(255,255,255,.55); }
.cloth-panel::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  opacity:.4;
  background:
    repeating-linear-gradient(45deg, rgba(150,120,80,.05) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-45deg, rgba(150,120,80,.05) 0 3px, transparent 3px 7px); }

/* ---------- §3.3 游戏化糖果按钮 ---------- */
.gbtn{ --c:var(--rouge); --c2:var(--rouge-2); --c-dk:#9E4651;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font); font-weight:800; font-size:16px; color:#fff; letter-spacing:.5px;
  padding:13px 18px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--c2),var(--c)); border:var(--bd) solid var(--c-dk);
  box-shadow:0 5px 0 var(--c-dk), var(--sh-sm); text-shadow:0 1px 0 rgba(0,0,0,.12);
  transition:transform .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color:transparent; }
.gbtn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--c-dk), var(--sh-sm); }
.gbtn[disabled],.gbtn.disabled{ filter:grayscale(.45) brightness(.97); opacity:.55; box-shadow:0 5px 0 var(--c-dk); pointer-events:none; }
.gbtn.sub{ --c:var(--moss); --c2:var(--moss-2); --c-dk:#5E7E47; }
.gbtn.ghost{ background:var(--paper); color:var(--wood-dk); border-color:var(--wood-dk); box-shadow:0 5px 0 var(--wood-dk), var(--sh-sm); }
.gbtn.danger{ --c:#CE5A4A; --c2:#E0846F; --c-dk:#9E3C30; }
.gbtn.block{ display:flex; width:100%; }

/* ---------- §3.4 答题题卡（竖排布局 · 古风布艺） ----------
   【2026-10-05 修复】此前的 display:flex 横排是给「图标+文字」列表卡设想的，
   但工程里 .qcard 只有答题页 Quiz 题卡一种用法（tip/题干/提示/大字等块级
   子元素），横排会把题干压成竖条、挤掉大字，完全不可读。现恢复竖排，
   并按古风规范给题卡各元素排版。 */
.qcard{ position:relative; display:block; text-align:center;
  background:linear-gradient(180deg,#fff,var(--paper)); border:var(--bd) solid var(--cloth-dk);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:16px 16px 18px; transition:transform .12s ease, box-shadow .12s ease; }
.qcard:active{ transform:translateY(1px); box-shadow:var(--sh); }
.qcard .tip{ display:inline-block; max-width:100%; padding:4px 14px; border-radius:12px;
  background:linear-gradient(180deg,var(--rouge-lt,#E8A29A),var(--rouge,#C25B66)); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:1px; box-shadow:0 2px 0 rgba(120,50,50,.25); }
.qcard .qtext{ font-size:22px; font-weight:700; line-height:1.6; color:var(--ink);
  margin:12px 2px 4px; word-break:break-word; white-space:normal; }
.qcard .qsub{ font-size:14px; line-height:1.7; color:var(--ink2); margin:8px auto 0;
  max-width:34em; background:rgba(236,220,192,.5); border-radius:12px; padding:8px 12px; }
.qcard .qbig{ font-size:60px; font-weight:800; line-height:1.25; letter-spacing:4px; margin:10px 0 2px; }
.qcard .qchar{ font-size:88px; font-weight:700; line-height:1.15; margin:8px 0 2px; }
.qcard .qpy{ font-size:20px; color:var(--moss); font-weight:700; letter-spacing:1px; margin:2px 0 4px; }
.qcard .qmedia{ font-size:15px; color:var(--ink2); margin-top:10px; line-height:1.7; }
.qcard .qunit{ font-size:11px; color:var(--ink3); margin-top:10px; padding-top:8px; border-top:1px dashed var(--cloth-dk); }
.qcard .replay{ margin:14px auto 0; padding:9px 20px; border-radius:14px; font-size:14px; font-weight:700;
  background:var(--paper); color:var(--wood-dk); border:2px solid var(--wood-dk);
  box-shadow:0 3px 0 var(--wood-dk); }
.qcard .replay:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--wood-dk); }
/* 预留：图标+文字列表卡形态（.ic/.info），与题卡竖排并存 */
.qcard.has-ic{ display:flex; align-items:center; gap:12px; text-align:left; }
.qcard .ic{ width:52px; height:52px; flex:0 0 auto; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px;
  background:radial-gradient(circle at 35% 30%, #fff, var(--gold-soft)); border:var(--bd) solid var(--gold); box-shadow:inset 0 -3px 6px rgba(150,110,40,.25); }
.qcard .info{ flex:1; min-width:0; }
.qcard .info b{ display:block; font-size:16px; color:var(--ink); }
.qcard .info small{ display:block; color:var(--ink2); font-size:12px; line-height:1.45; }

/* ---------- §3.5 气泡 / 弹窗 ---------- */
.bubble{ position:relative; background:var(--paper); color:var(--ink); border:var(--bd) solid var(--wood-dk);
  border-radius:var(--r); padding:10px 14px; font-weight:700; box-shadow:var(--sh-sm); }
.bubble::after{ content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); width:0; height:0; border:12px solid transparent; border-top-color:var(--wood-dk); }
.bubble::before{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); z-index:1; width:0; height:0; border:9px solid transparent; border-top-color:var(--paper); }
.pet-bubble{ background:linear-gradient(180deg,#fff,var(--paper)); border:var(--bd) solid var(--wood-dk);
  border-radius:18px; color:var(--ink); font-weight:700; font-size:12.5px; line-height:1.4; padding:8px 12px; white-space:nowrap;
  box-shadow:var(--sh-sm), inset 0 0 0 2px rgba(255,255,255,.6); }
.evolve-celebrate{ background:linear-gradient(180deg,var(--paper),var(--cloth)); border:var(--bd-lg) solid var(--wood-dk);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:18px; text-align:center; }
.evolve-celebrate .ec-title{ font-size:22px; font-weight:800; color:var(--rouge); }
.evolve-celebrate .ec-sub{ font-size:14px; color:var(--ink2); margin:6px 0 14px; }

/* ---------- §3.6 顶栏（木质牌匾条）+ 金币古钱挂件 ---------- */
.topbar{ background:linear-gradient(180deg,var(--wood-lt),var(--wood)); border-bottom:var(--bd-lg) solid var(--wood-dk);
  box-shadow:0 4px 14px rgba(120,80,40,.18); color:var(--wood-dk); }
.topbar h1{ color:#fff; text-shadow:0 1px 0 rgba(90,60,30,.45); font-weight:800; }
.topbar .back{ background:rgba(255,255,255,.35); color:var(--wood-dk); border:2px solid var(--wood-dk); }
.topbar .coins{ background:linear-gradient(180deg,#fff,var(--gold-soft)); color:var(--wood-dk);
  border:var(--bd) solid var(--gold); border-radius:999px; padding:5px 12px; font-weight:800; box-shadow:inset 0 -2px 4px rgba(150,110,40,.22); }
.topbar .coins .coin{ width:20px; height:20px; vertical-align:-4px; margin-right:2px; }

/* ---------- §3.7 底部导航（招牌/灯笼质感） ---------- */
.nav-bar{ background:linear-gradient(180deg,var(--wood-lt),var(--wood)); border-top:var(--bd-lg) solid var(--wood-dk);
  box-shadow:0 -4px 14px rgba(120,80,40,.18); }
.nav-btn{ color:rgba(255,255,255,.82); font-weight:700; }
.nav-btn.active{ color:#fff; }
.nav-btn .nav-ico{ width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--wood-lt),var(--wood)); border:var(--bd) solid var(--wood-dk);
  box-shadow:0 3px 0 var(--wood-dk), inset 0 1px 0 rgba(255,255,255,.32); color:var(--wood-dk); }
.nav-btn .nav-ico svg{ width:22px; height:22px; display:block; }
.nav-btn.active .nav-ico{ background:linear-gradient(180deg,var(--gold-2),var(--gold)); border-color:var(--wood-dk); color:#fff; transform:translateY(-2px);
  box-shadow:0 4px 0 var(--wood-dk), inset 0 1px 0 rgba(255,255,255,.4); }
.nav-btn:active{ transform:scale(.94); }

/* 进度环（古风化：底环布艺、进度苔绿、数字胭脂） */
.ring-wrap .ring-bg{ stroke:var(--cloth); }
.ring-wrap .ring-fg{ stroke:var(--moss); }
.ring-wrap .ring-txt b{ color:var(--rouge); }

/* ==========================================================================
   §4.3 首页专属组件（仅作用于 .home 容器）
   ========================================================================== */
.home-plaque{ margin:14px 14px 4px; padding:18px; text-align:center; }
.home-plaque .plaque-ttl{ font-size:24px; font-weight:800; color:#fff; text-shadow:0 2px 0 var(--wood-dk); letter-spacing:2px; }
.home-plaque .plaque-sub{ color:rgba(255,255,255,.92); font-size:12.5px; margin-top:4px; }
.home-plaque .ring-wrap{ margin:12px auto 0; }

/* 首页统计小牌（金币/星星/关卡） */
.home .stats{ display:flex; gap:10px; margin:10px 14px 4px; }
.home .stat{ flex:1; min-width:0; background:linear-gradient(180deg,var(--paper),var(--cloth)); border:var(--bd) solid var(--cloth-dk);
  border-radius:var(--r); padding:9px 6px; text-align:center; box-shadow:var(--sh-sm); }
.home .stat b{ display:block; font-size:17px; line-height:1.2; color:var(--rouge); }
.home .stat span{ font-size:11px; opacity:.9; color:var(--ink2); white-space:nowrap; }

/* 庭院圆窗（月亮门）：CSS 圆窗 + 厚木框，宠物居中可见，绝不遮挡 */
.home-court{ display:block; width:100%; margin:12px 0; padding:0; border:none; position:relative;
  height:208px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#cfe8ff 0%,#e9f3df 56%,#e7d9bf 100%); box-shadow:var(--sh); }
.court-sky{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:182px; height:182px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #eaf4ff 0%, #d4ecff 58%, #c3e2f6 100%);
  border:9px solid var(--wood-dk); box-shadow:0 0 0 4px var(--wood), inset 0 6px 14px rgba(90,60,30,.18); }
.court-sky::after{ content:""; position:absolute; left:18px; top:14px; width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFFCEC,#FFE49B 60%,#FFD06B); box-shadow:0 0 0 6px rgba(255,216,130,.25); }
.court-pet{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:96px; height:96px; z-index:2; }
.court-pet svg{ width:96px; height:96px; }
.court-hi{ position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:3;
  background:var(--paper); border:var(--bd) solid var(--wood-dk); border-radius:999px; padding:5px 12px;
  font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; box-shadow:var(--sh-sm); }
.court-go{ position:absolute; right:14px; bottom:12px; z-index:3; color:var(--rouge); font-weight:800; font-size:13px;
  background:rgba(251,243,227,.85); border-radius:999px; padding:3px 10px; }

/* 科目门牌 2×2 */
.gate-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 4px; }
.gate{ display:flex; align-items:center; gap:12px; text-align:left;
  background:linear-gradient(180deg,var(--wood-lt),var(--wood)); border:var(--bd-lg) solid var(--wood-dk);
  border-radius:var(--r-lg); box-shadow:0 5px 0 var(--wood-dk), var(--sh-sm); padding:14px; transition:transform .1s; }
.gate:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--wood-dk), var(--sh-sm); }
.gate-emblem{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft));
  border:var(--bd) solid var(--gold); display:flex; align-items:center; justify-content:center; }
.gate-emblem svg{ width:32px; height:32px; }
.gate-info{ flex:1; min-width:0; }
.gate-info b{ display:block; font-size:17px; color:#fff; text-shadow:0 1px 0 var(--wood-dk); }
.gate-info small{ display:block; color:rgba(255,255,255,.92); font-size:11px; line-height:1.35; }
.gate-prog{ display:block; height:6px; margin-top:6px; background:rgba(255,255,255,.4); border-radius:4px; overflow:hidden; }
.gate-prog u{ display:block; height:100%; background:var(--moss-2); }

/* 木牌快捷行 */
.wood-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0; }
.wood-chip{ display:inline-flex; align-items:center; gap:7px; background:linear-gradient(180deg,var(--paper),var(--cloth));
  border:var(--bd) solid var(--cloth-dk); border-radius:999px; padding:8px 14px 8px 8px; font-weight:700; color:var(--ink);
  font-size:13.5px; box-shadow:var(--sh-sm); }
.wood-chip:active{ transform:translateY(2px); }
.wood-chip .wc-ico{ width:26px; height:26px; border-radius:8px; background:var(--gold-soft); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; }
.wood-chip .wc-ico svg{ width:18px; height:18px; }

/* 区块小标题（古风木牌小标，仅首页/宠物页，学习页保持原样） */
.home .sec-title, .pet .sec-title{ font-size:14px; font-weight:800; color:#fff; margin:18px 8px 10px;
  background:linear-gradient(180deg,var(--wood-lt),var(--wood)); border:2px solid var(--wood-dk); border-radius:999px;
  padding:5px 14px; display:inline-block; box-shadow:0 3px 0 var(--wood-dk); }
.home .sec-title .tag, .pet .sec-title .tag{ background:var(--gold-soft); color:var(--wood-dk); border:1px solid var(--gold); }

/* 首页遗留区块重皮（结构/逻辑不动，只换视觉） */
.home .diagcard{ background:linear-gradient(135deg,var(--rouge),var(--rouge-2)); color:#fff; border:none; box-shadow:0 5px 0 #9E4651, var(--sh); }
.home .diagcard .dico{ background:rgba(255,255,255,.22); }
.home .subj-card.s-pet{ background:linear-gradient(180deg,var(--wood-lt),var(--wood)); border:var(--bd-lg) solid var(--wood-dk); box-shadow:0 5px 0 var(--wood-dk), var(--sh-sm); }
.home .subj-card.s-pet .ico{ background:rgba(255,255,255,.85)!important; border:var(--bd) solid var(--gold); }
.home .subj-card.s-pet .info b, .home .subj-card.s-pet .info small{ color:#fff; text-shadow:0 1px 0 var(--wood-dk); }
.home .src{ background:var(--paper); border:var(--bd) solid var(--cloth-dk); border-radius:var(--r-lg); color:var(--ink2); box-shadow:var(--sh-sm); }
.home .src b{ color:var(--ink); }
.home .mute{ color:var(--ink2); background:var(--paper); border:1px solid var(--cloth-dk); border-radius:var(--r-lg); padding:12px 14px; }
.home .btn.gray{ background:linear-gradient(180deg,var(--paper),var(--cloth)); color:var(--wood-dk); border:var(--bd) solid var(--wood-dk); box-shadow:0 5px 0 var(--wood-dk); }

/* ==========================================================================
   §五 宠物空间（伙伴页）古风化
   在现有 .pet-scene 五层之上叠加古风外框与陈设；
   所有装饰层 pointer-events:none、低/高 z 分层，绝不遮挡宠物(z=50) 与 HUD(z=100)。
   ========================================================================== */

/* 月亮门框（圆拱门楣 + 左右立柱），中部全透，宠物照常可见可跑 */
.moon-gate{ inset:0; z-index:90; pointer-events:none; }
.moon-gate svg{ position:absolute; inset:0; width:100%; height:100%; }
/* 灯笼挂在门柱上、悬于 HUD(z=100) 之下，避免被顶部状态牌遮挡 */
.lantern{ position:absolute; top:44px; width:34px; height:60px; z-index:92; pointer-events:none;
  transform-origin:top center; animation:kf-lantern-sway 4s ease-in-out infinite; }
.lantern.l{ left:12px; } .lantern.r{ right:12px; }
.lantern svg{ width:34px; height:60px; display:block; }
@keyframes kf-lantern-sway{ 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }

/* 加分项：竹 / 石灯 / 屏风矮墙 / 假山（纯 CSS/SVG，中景层之后、宠物之前） */
.bamboo{ left:-2px; bottom:0; width:40px; height:118px; z-index:4; pointer-events:none; }
.bamboo svg{ width:40px; height:118px; display:block; }
.stone-lamp{ left:8px; bottom:6px; width:34px; height:52px; z-index:3; pointer-events:none; }
.stone-lamp svg{ width:34px; height:52px; display:block; }
.screen{ left:0; right:0; bottom:0; height:30px; z-index:4; pointer-events:none; }
.screen svg{ width:100%; height:100%; display:block; }
.rockery{ right:6px; bottom:8px; width:54px; height:54px; z-index:3; pointer-events:none; }
.rockery svg{ width:54px; height:54px; display:block; }

/* §5.3 状态 HUD：木质圆牌挂件（保留 bad/warn 判定与数值逻辑） */
.ps-hud{ display:flex; gap:8px; top:10px; left:10px; right:10px; height:auto; pointer-events:none; z-index:100; }
.ps-stat{ display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(180deg,#fff,var(--gold-soft)); border:var(--bd) solid var(--wood-dk);
  border-radius:999px; padding:3px 10px 3px 6px; font-weight:800; color:var(--wood-dk);
  box-shadow:var(--sh-sm), inset 0 -2px 3px rgba(150,110,40,.2); }
.ps-stat .ic{ font-size:14px; width:18px; text-align:center; }
.ps-stat .v{ font-size:13px; }
.ps-stat.exp{ flex:0 0 auto; padding:3px 10px 3px 6px; }
.ps-stat.warn{ border-color:var(--warn); background:linear-gradient(180deg,#fff,var(--warn-soft)); color:var(--warn); }
.ps-stat.bad{ border-color:var(--bad); background:linear-gradient(180deg,#fff,var(--bad-soft)); color:var(--bad);
  animation:pulseBad 1s ease-in-out infinite; }
@keyframes pulseBad{ 50%{ box-shadow:0 0 0 3px rgba(192,73,47,.25); } }

/* 等级徽章：木牌吊牌 */
.ps-lv{ left:12px; bottom:12px; height:auto; padding:5px 12px;
  background:linear-gradient(180deg,var(--wood-lt),var(--wood)); border:var(--bd) solid var(--wood-dk);
  border-radius:999px; color:#fff; font-weight:800; text-shadow:0 1px 0 var(--wood-dk); box-shadow:0 3px 0 var(--wood-dk); }
.ps-tip{ background:var(--paper); color:var(--ink2); border:2px solid var(--cloth-dk); border-radius:999px; padding:4px 12px; font-size:12px; }

/* §5.4 照顾按钮拟物化（喂食/逗玩/摸头）+ 互动菜单同款 */
.ps-care{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ps-care button, .pet-menu button{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:linear-gradient(180deg,var(--paper),var(--cloth)); border:var(--bd-lg) solid var(--wood-dk);
  border-radius:var(--r-lg); padding:12px 6px; font-weight:800; color:var(--ink); font-size:13px;
  box-shadow:0 5px 0 var(--wood-dk), var(--sh-sm); transition:transform .1s; }
.ps-care button:active, .pet-menu button:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--wood-dk), var(--sh-sm); }
.ps-care button .care-ico, .pet-menu button .care-ico{
  width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft));
  border:var(--bd) solid var(--gold); display:flex; align-items:center; justify-content:center; }
.ps-care button .care-ico svg, .pet-menu button .care-ico svg{ width:30px; height:30px; }
.ps-care button[disabled]{ filter:grayscale(.4); opacity:.6; pointer-events:none; }
.pet-menu button{ flex:1 1 auto; }

/* §5.5 宠物 SVG 统一卡通粗描边（零重写、零改坐标、零破坏动画；仅 CSS 叠加） */
.pet-svg .pt-body, .pet-svg .pt-head, .pet-svg .pt-skull,
.pet-svg .pt-leg-hf, .pet-svg .pt-leg-ff,
.pet-svg .pt-leg-hn, .pet-svg .pt-leg-fn,
.pet-svg .pt-tail, .pet-svg .pt-ear-f, .pet-svg .pt-ear-n,
.pet-svg .pt-horn-f, .pet-svg .pt-horn-n,
.pet-svg .pt-snout, .pet-svg .pt-egg, .pet-svg .pt-shell{
  stroke:var(--ink-outline); stroke-width:2.4;
  vector-effect:non-scaling-stroke; paint-order:stroke;
  stroke-linejoin:round; stroke-linecap:round;
}

/* §七 场景色暖化微调（仅 3 项；其余庭院色保留） */
.pet-scene.th-sheep{ --wood:#C49A66; --wood2:#9A6B3C; --roof:#C9777E; }
.pet-scene.th-pig{   --wood:#C49A66; --wood2:#9A6B3C; --roof:#C9777E; }

/* 无障碍：尊重系统减弱动效 */
@media (prefers-reduced-motion: reduce){
  .lantern{ animation:none; }
}

/* ==========================================================================
   §八 V2.01 P1-D · 首页 = 全屏宠物庭院（沉浸场景，功能从场景里进）
   设计口径：整屏文字删除；场景内只留 3 拟物入口 + 点宠物互动；
             顶部极简（左上宠物名牌 + 右上金币）；navBar 3 键。
   命名前缀 .crt-*（courtyard）避免与既有 .home 规则冲突；旧 .home 规则本文件
   已不再被首页使用（首页 DOM 改为 .crt-home + .pet-scene 复用）。
   ========================================================================== */

/* 首页容器：去掉 .wrap 的常规内边距与底部留白，让庭院顶到导航栏上方 */
.crt-home{ padding:0 0 calc(var(--nav-h) + var(--safe-b)); max-width:none; }
/* 庭院舞台：占满视窗可用高度（顶部最小条已给金币留位），四周留白极小 */
.crt-stage{ padding:8px 8px 0; }
.crt-home .pet-scene{
  /* P1-E：多扣 34px（30px 回路提示条 + 4px 间距），给底部一句话回路让位 */
  height:calc(100dvh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 92px);
  min-height:320px; max-height:none;
  aspect-ratio:auto;                 /* 覆盖宠物页 1:0.78，庭院铺满整屏 */
  border-radius:var(--r-lg);
  border:var(--bd-lg) solid var(--wood-dk);
  box-shadow:var(--sh-lg), inset 0 0 0 3px rgba(255,255,255,.35);
}

/* §8.1 场景内 HUD：宠物名牌（左上）+ 3 拟物入口（右上 2 + 左下 1）
   层级 z=110 高于装饰层(z≤95)；宠物本体 z 在 .pet-stage(=50) 内，pointer-events
   仍由 .pet-stage 接管 —— HUD 容器 pointer-events:none，仅按钮自身 auto 接收点击，
   因此不会挡住「点草地让宠物跑过去」。 */
.crt-hud{ position:absolute; inset:0; z-index:110; pointer-events:none; }
.crt-hud button{ pointer-events:auto; }
.crt-doors{ position:absolute; inset:0; pointer-events:none; }

/* 庭院装饰双层：背景层(远/中)在宠物之下，前景层(近)在宠物之上（均 pointer-events:none 不挡点击） */
.ps-decor-bg{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:visible; }
.ps-decor-fg{ position:absolute; inset:0; pointer-events:none; z-index:95; overflow:visible; }
.ps-decor{ position:absolute; transform:translateX(-50%); pointer-events:none; line-height:0; }
.ps-decor svg{ width:100%; height:auto; display:block; overflow:visible; }
.ps-decor[data-decor="decor_sg_windmill"] svg .ps-wind{ transform-box:fill-box; transform-origin:50% 50%; animation:kf-ps-wind 7s linear infinite; }
.ps-decor.ps-bush svg{ transform-origin:50% 92%; animation:kf-ps-sway 3.6s ease-in-out infinite; }
.ps-decor[data-decor="decor_sn_campfire"] .sn-flame{ transform-box:fill-box; transform-origin:50% 100%; animation:kf-sn-flame .7s ease-in-out infinite; }
.ps-decor[data-decor="decor_sg_butterfly"] .sg-fly{ transform-box:fill-box; transform-origin:50% 50%; animation:kf-sg-fly 2.4s ease-in-out infinite; }
@keyframes kf-ps-wind{ to{ transform:rotate(360deg); } }
@keyframes kf-ps-sway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }
@keyframes kf-sn-flame{ 0%,100%{ transform:scaleY(1) scaleX(1); opacity:.95; } 50%{ transform:scaleY(1.12) scaleX(.94); opacity:1; } }
@keyframes kf-sg-fly{ 0%,100%{ transform:rotate(-6deg) translateY(0); } 50%{ transform:rotate(6deg) translateY(-3px); } }

/* 宠物名牌（小木牌：宠物名 + Lv） */
.crt-nameplate{
  position:absolute; left:10px; top:10px; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px 5px 5px; border-radius:999px;
  background:linear-gradient(180deg,var(--wood-lt),var(--wood));
  border:var(--bd) solid var(--wood-dk);
  box-shadow:0 3px 0 var(--wood-dk), var(--sh-sm);
  transition:transform .1s; }
.crt-nameplate:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--wood-dk); }
.crt-nameplate .np-emo{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft));
  border:var(--bd) solid var(--wood-dk);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.crt-nameplate .np-emo svg{ width:34px; height:34px; }
.crt-nameplate .np-txt{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.crt-nameplate .np-txt b{ font-size:15px; color:#fff; text-shadow:0 1px 0 var(--wood-dk); }
.crt-nameplate .np-txt small{ font-size:11px; color:rgba(255,255,255,.9); font-weight:800; }

/* 拟物入口按钮通用：圆木牌底 */
.crt-door{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--wood-lt),var(--wood));
  border:var(--bd) solid var(--wood-dk);
  box-shadow:0 4px 0 var(--wood-dk), var(--sh); transition:transform .1s; }
.crt-door:active{ transform:translateY(3px) scale(.97); box-shadow:0 1px 0 var(--wood-dk); }
.crt-door .door-ico{ display:flex; align-items:center; justify-content:center; }
.crt-door .door-ico svg{ display:block; }

/* 书卷门牌：左下角（更大的椭圆木牌托书卷） */
.crt-door-book{
  left:12px; bottom:14px; width:78px; height:78px;
  background:radial-gradient(circle at 38% 30%,var(--paper),var(--cloth));
  border:var(--bd-lg) solid var(--wood-dk); }
.crt-door-book .door-ico svg{ width:50px; height:50px; }

/* 右上两个：卷轴（大） + 齿轮（小）竖排 */
.crt-doors-tr{
  position:absolute; right:12px; top:10px; display:flex; flex-direction:column;
  align-items:flex-end; gap:12px; pointer-events:none; }
.crt-door-scroll{ position:relative; width:64px; height:64px;
  background:radial-gradient(circle at 38% 30%,var(--paper),var(--cloth)); }
.crt-door-scroll .door-ico svg{ width:42px; height:42px; }
.crt-door-gear{ position:relative; width:48px; height:48px; }
.crt-door-gear .door-ico svg{ width:32px; height:32px; }

/* 红点角标（任务有未读 / 奖励可领） */
.crt-door .door-dot{
  position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ff8a8a,var(--bad));
  border:2px solid var(--paper); box-shadow:0 1px 3px rgba(150,40,40,.5);
  animation:kf-dot-pulse 1.6s ease-in-out infinite; }
@keyframes kf-dot-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }

/* §8.2 通用弹层关闭按钮（学习面板 / 任务面板 / 齿轮 / 宠物详情共用） */
.ov-close{
  position:absolute; top:10px; right:12px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(180deg,var(--paper),var(--cloth));
  border:var(--bd) solid var(--wood-dk); color:var(--wood-dk);
  font-size:16px; font-weight:800; line-height:1; box-shadow:var(--sh-sm); }
.ov-close:active{ transform:translateY(2px); }

/* §8.3 学习面板（全站唯一保留文字处）：2×2 四科门牌 + 底部古诗词小牌 */
.study-panel{ padding:8px 2px 2px; }
.study-panel .sp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sp-gate{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:16px 8px 14px; text-align:center;
  background:linear-gradient(180deg,var(--wood-lt),var(--wood));
  border:var(--bd-lg) solid var(--wood-dk); border-radius:var(--r-lg);
  box-shadow:0 5px 0 var(--wood-dk), var(--sh-sm); transition:transform .1s; }
.sp-gate:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--wood-dk); }
.sp-gate .sp-emble{
  width:56px; height:56px; border-radius:16px;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft));
  border:var(--bd) solid var(--gold);
  display:flex; align-items:center; justify-content:center; }
.sp-gate .sp-emble svg{ width:40px; height:40px; }
.sp-gate .sp-info b{ display:block; font-size:26px; font-weight:800; color:#fff;
  text-shadow:0 2px 0 var(--wood-dk); letter-spacing:1px; }
.sp-gate .sp-info small{ display:block; margin-top:2px; font-size:13px; font-weight:700;
  color:rgba(255,255,255,.9); letter-spacing:2px; }

/* 古诗词闯关小牌（学习面板底部） */
.sp-gw{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  margin-top:12px; padding:12px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--paper),var(--cloth));
  border:var(--bd-lg) solid var(--wood-dk);
  box-shadow:0 4px 0 var(--wood-dk), var(--sh-sm); transition:transform .1s; }
.sp-gw:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--wood-dk); }
.sp-gw .sp-gw-ico{ width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--gold-soft); border:2px solid var(--gold); }
.sp-gw .sp-gw-ico svg{ width:24px; height:24px; }
.sp-gw .sp-gw-txt{ font-size:19px; font-weight:800; color:var(--wood-dk); letter-spacing:2px; }

/* §8.4 今日任务面板：图标 + 大字条目 */
.task-panel{ padding:8px 2px 2px; }
.task-panel .tp-ttl{ font-size:20px; font-weight:800; color:var(--ink); text-align:center; margin-bottom:12px; }
.task-panel .tp-list{ display:flex; flex-direction:column; gap:8px; }
.tp-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:linear-gradient(180deg,#fff,var(--paper)); border:var(--bd) solid var(--cloth-dk);
  border-radius:var(--r); box-shadow:var(--sh-sm); }
.tp-item .tp-ico{ font-size:22px; flex:0 0 auto; }
.tp-item .tp-txt{ font-size:18px; font-weight:800; color:var(--ink); }
.tp-item.done{ opacity:.72; }
.tp-item.done .tp-txt{ color:var(--ok); }
.tp-item.todo{ border-color:var(--gold); background:linear-gradient(180deg,#fff,var(--gold-soft)); }
.tp-claim{
  display:block; width:100%; margin-top:12px; padding:14px;
  font-size:18px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border:var(--bd-lg) solid var(--wood-dk); border-radius:var(--r-lg);
  box-shadow:0 5px 0 var(--wood-dk), var(--sh-sm); }
.tp-claim:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--wood-dk); }
.task-panel .tp-note{ margin-top:12px; text-align:center; font-size:14px; font-weight:700; color:var(--ink2); }
.task-panel .tp-note.done{ color:var(--ok); }

/* §8.5 齿轮菜单（设置 / 家长） */
.gear-menu{ padding:8px 2px 2px; }
.gear-menu .gm-ttl{ font-size:20px; font-weight:800; color:var(--ink); text-align:center; margin-bottom:12px; }
.gear-menu .gm-btn{
  display:flex; align-items:center; gap:12px; width:100%; margin-bottom:10px;
  padding:13px 14px; font-size:17px; font-weight:800; color:var(--ink); text-align:left;
  background:linear-gradient(180deg,var(--paper),var(--cloth));
  border:var(--bd-lg) solid var(--wood-dk); border-radius:var(--r-lg);
  box-shadow:0 4px 0 var(--wood-dk), var(--sh-sm); }
.gear-menu .gm-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--wood-dk); }
.gear-menu .gm-ico{ width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft));
  border:var(--bd) solid var(--gold); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gear-menu .gm-ico svg{ width:32px; height:32px; }

/* §8.6 宠物状态详情弹层：⚡🍖💗⭐ 四状态挂件 + 成长进度 */
.pet-detail{ padding:6px 2px 2px; text-align:center; }
.pet-detail .pd-ttl{ font-size:22px; font-weight:800; color:var(--ink); }
.pet-detail .pd-lv{ font-size:15px; font-weight:800; color:var(--rouge); margin:2px 0 14px; }
.pet-detail .pd-orns{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pd-orn{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px;
  background:linear-gradient(180deg,#fff,var(--gold-soft));
  border:var(--bd) solid var(--gold); border-radius:var(--r); box-shadow:var(--sh-sm); }
.pd-orn .o-ic{ font-size:20px; line-height:1; }
.pd-orn b{ font-size:16px; font-weight:800; color:var(--wood-dk); }
.pd-orn small{ font-size:11px; color:var(--ink2); }
.pet-detail .pd-grow{ margin:16px 2px 6px; height:14px; border-radius:8px; overflow:hidden;
  background:var(--cloth); border:2px solid var(--cloth-dk); box-shadow:var(--sh-in); }
.pet-detail .pd-grow i{ display:block; height:100%; border-radius:8px;
  background:linear-gradient(90deg,var(--moss-2),var(--moss)); transition:width .4s; }
.pet-detail .pd-growtxt{ font-size:13px; font-weight:700; color:var(--ink2); }

/* §8.7 弹层容器：首页弹层（学习 / 任务 / 齿轮 / 宠物详情）宽度收窄、圆角木质 */
.overlay .modal:has(.study-panel),
.overlay .modal:has(.task-panel),
.overlay .modal:has(.gear-menu),
.overlay .modal:has(.pet-detail){ max-width:340px; }

/* §8.8 首页最小顶栏：无标题、无返回，仅右上金币。
   topbar 内若只剩 .coins，让它靠右且收紧高度（孩子首页顶部极简）。 */
.topbar:not(:has(.back)):not(:has(h1)){ padding:calc(var(--safe-t) + 6px) 14px 6px; justify-content:flex-end; }

/* §8.9 进化 / 里程碑庆祝横幅（庭院首页：覆盖在场景中央，点按钮关闭） */
#view > .evolve-celebrate{
  position:fixed; left:50%; top:42%; transform:translate(-50%,-50%); z-index:120;
  width:min(78vw,320px); }

/* 无障碍：尊重系统减弱动效（红点脉冲） */
@media (prefers-reduced-motion: reduce){
  .crt-door .door-dot{ animation:none; }
}

/* ==========================================================================
   §九 V3.0 P1-E · 视觉重做（AI 资产 + 固定画布 + 状态面板 + 引导）
   依据：docs/ai-art-integration-v1.0.md（实现主依据）
        docs/ux-clarity-v3.0.md §二/§三/§四/§五/§六
        docs/pet-art-spec-v3.0.md §六/§七（令牌/门钮）
   口径：只追加与覆盖，不删旧规则；旧庭院 SVG 规则保留供 Pages._homeLegacy 回滚。
   ========================================================================== */

/* ---------- 9.1 庭院背景换 AI 位图（assets/art/final/bg_courtyard.jpg） ----------
   cover + center 30%：保顶部藤拱 + 中部空地；渐变兜底防图未加载白块。
   注意：CSS 内相对路径以本文件（assets/css/）为基准，必须 ../art/。 */
.crt-home .pet-scene{
  background:url('../art/final/bg_courtyard.jpg') center 30% / cover no-repeat,
             linear-gradient(180deg,#FFE9C8 0%,#FFF6E2 100%);
}

/* ---------- 9.2 桌面固定画布（ux-clarity §6.2 数值照抄） ----------
   仅 ≥760px 视口宽生效；手机 390×844 布局零改动（媒体查询不命中）。 */
@media (min-width:760px){
  body{
    /* 氛围底：奶油→杏色 + 四周暗角渐晕（渐晕已并入渐变，零额外节点） */
    background:
      radial-gradient(ellipse at 50% 42%, rgba(255,244,214,0) 34%, rgba(122,74,32,.20) 100%),
      linear-gradient(180deg,#F7E8C8 0%, #F0D4A8 100%);
    display:flex; align-items:center; justify-content:center;
    min-height:100dvh;
  }
  #game-shell{
    width:420px; min-width:420px;
    height:min(100dvh, 760px);
    flex:0 0 auto;
    border-radius:18px; overflow:hidden;
    box-shadow:0 24px 60px rgba(90,60,30,.35);   /* 画布"卡片"浮起感 */
    z-index:1;                                    /* 高于花瓣氛围层(z=0) */
  }
  /* 画布内高度以 shell 实际上限 760px 计（100dvh 在桌面 > 760 时防溢出）。
     扣减 128px = topbar/nav 由布局承担后，庭院还需让出 wrap padding(16) +
     stage padding(16) + loopbar(30) + 间距(8) + 富余；否则 #view 内容溢出出滚动条 */
  .crt-home .pet-scene{
    height:calc(min(100dvh, 760px) - var(--nav-h) - 128px);
  }
  /* 庭院页正好按画布高度贴合：去 .wrap 手机布局的导航让位大 padding（nav 在
     画布内是 flex 兄弟而非 fixed 覆盖，双重让位导致 67px 溢出滚动条）；
     庭院页 #view 禁内部滚动（内容已按画布算准）。其他页面 wrap 不受影响。 */
  .crt-home.wrap{ padding:8px; }
  #view:has(> .crt-home){ overflow-y:hidden; }
}
/* 矮窗口兜底：视口高 <560px 时允许页面滚动看全画布 */
@media (min-width:760px) and (max-height:559px){
  body{ align-items:flex-start; }
  #game-shell{ height:560px; }
}

/* ---------- 9.3 两侧花瓣粒子（≤8 枚，锚定画布两侧 ±240~460px 带） ----------
   只动 transform/opacity；reduced-motion 全部静止；手机不显示。 */
.jl-petals{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.jl-petal{
  position:absolute; top:-40px; width:14px; height:14px;
  border-radius:60% 40% 60% 40%;
  background:linear-gradient(135deg,#FBD3DD,#F2A0B4);
  box-shadow:0 0 6px rgba(242,160,180,.35);
  opacity:0;
  animation:kf-petal-fall linear infinite;
}
.jl-petal.p0{ left:calc(50% - 460px); width:12px; height:12px; animation-duration:14s; animation-delay:-2s; }
.jl-petal.p1{ left:calc(50% - 380px); animation-duration:11s;  animation-delay:-7s; }
.jl-petal.p2{ left:calc(50% - 300px); width:11px; height:11px; animation-duration:16s; animation-delay:-11s; }
.jl-petal.p3{ left:calc(50% - 244px); width:15px; height:15px; animation-duration:9.5s; animation-delay:-4s; }
.jl-petal.p4{ left:calc(50% + 248px); width:13px; height:13px; animation-duration:12.5s; animation-delay:-9s; }
.jl-petal.p5{ left:calc(50% + 310px); animation-duration:10s;  animation-delay:-1s; }
.jl-petal.p6{ left:calc(50% + 390px); width:11px; height:11px; animation-duration:15s; animation-delay:-13s; }
.jl-petal.p7{ left:calc(50% + 458px); width:15px; height:15px; animation-duration:13s; animation-delay:-5.5s; }
@keyframes kf-petal-fall{
  0%  { transform:translate3d(0,-6vh,0) rotate(0deg); opacity:0; }
  8%  { opacity:.85; }
  50% { transform:translate3d(-26px,52vh,0) rotate(185deg); }
  90% { opacity:.7; }
  100%{ transform:translate3d(12px,106vh,0) rotate(350deg); opacity:0; }
}
@media (max-width:759px){ .jl-petals{ display:none; } }

/* ---------- 9.4 首页图标入口：金边圆钮 + 木牌竖挂 + 文字标签（pet-art-spec §七） ---------- */
.crt-door{
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #FFF8E8 0%, #F2E0B8 58%, #E3C48E 100%);
  border:3px solid var(--jl-gold-dk);
  box-shadow:0 4px 0 var(--jl-wood-1),
             0 6px 12px var(--jl-shadow),
             inset 0 0 0 2.5px rgba(255,255,255,.65);
}
.crt-door::after{ /* 内圈金环 */
  content:""; position:absolute; inset:3px; border-radius:50%;
  border:1.5px solid rgba(240,192,96,.9); pointer-events:none;
}
.crt-door:active{ transform:translateY(3px) scale(.97); box-shadow:0 1px 0 var(--jl-wood-1), 0 3px 8px var(--jl-shadow); }

/* 任务卷轴 / 齿轮：金底文字标签（图标正下方，pointer-events:none 不挡点击） */
.crt-door .door-tag{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-11px;
  padding:2px 9px; border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border:2px solid var(--wood-dk);
  font-size:11.5px; font-weight:800; color:#fff;
  text-shadow:0 1px 0 rgba(90,50,20,.5);
  white-space:nowrap; pointer-events:none; z-index:2;
}
.crt-door .door-tag.dim{ background:linear-gradient(180deg,var(--paper),var(--cloth)); color:var(--wood-dk); text-shadow:none; }

/* 书卷门牌 → 木牌竖挂（img26 公会木牌同款：吊绳 + 金钉 + 竖排字） */
.crt-door-book{
  left:12px; bottom:16px; width:66px; height:92px; border-radius:12px;
  background:linear-gradient(180deg,#E8C89A 0%,#C99B62 55%,#A97844 100%);
  border:3px solid #8B5A3C;
  box-shadow:0 4px 0 #6E4526, 0 8px 14px rgba(90,55,25,.32),
             inset 0 2px 0 rgba(255,255,255,.4);
}
.crt-door-book::before{ /* 吊绳 */
  content:""; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:3px; height:16px; background:#8B5A3C; border-radius:2px;
}
.crt-door-book::after{ /* 四角金钉（覆盖 §9.4 通用内圈金环） */
  content:""; position:absolute; inset:5px; border-radius:8px; pointer-events:none;
  border:none;
  background:
    radial-gradient(circle 2.5px at 4px 4px, #F0C060 98%, transparent),
    radial-gradient(circle 2.5px at calc(100% - 4px) 4px, #F0C060 98%, transparent),
    radial-gradient(circle 2.5px at 4px calc(100% - 4px), #F0C060 98%, transparent),
    radial-gradient(circle 2.5px at calc(100% - 4px) calc(100% - 4px), #F0C060 98%, transparent);
}
.crt-door-book .door-txt{
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:19px; font-weight:800; letter-spacing:6px; line-height:1;
  color:#FFF8E8; text-shadow:0 2px 0 rgba(90,50,20,.55);
}

/* 红点角标（任务/奖励未读） */
.crt-door .door-dot{
  top:-4px; right:-4px; width:18px; height:18px;
  background:radial-gradient(circle at 35% 32%, #FF9A8A 0%, #E85540 62%, #C43A28 100%);
  border:2.5px solid #FFF8E8;
  box-shadow:0 2px 5px rgba(150,40,25,.5);
}

/* ---------- 9.5 学习门首刷引导：金圈光环 + 弹跳箭头（ux-clarity §4.2） ---------- */
.door-guide{ animation:kf-door-ring 2.2s ease-out infinite; }
@keyframes kf-door-ring{
  0%  { box-shadow:0 0 0 0 rgba(217,164,65,.55), 0 4px 0 #6E4526, 0 8px 14px rgba(90,55,25,.32); }
  100%{ box-shadow:0 0 0 14px rgba(217,164,65,0), 0 4px 0 #6E4526, 0 8px 14px rgba(90,55,25,.32); }
}
.door-guide .door-txt{ animation:kf-door-txt 1.1s ease-in-out infinite; }
@keyframes kf-door-txt{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.door-arr{
  position:absolute; left:50%; bottom:-24px; transform:translateX(-50%);
  width:0; height:0; border:9px solid transparent; border-top:12px solid var(--gold);
  filter:drop-shadow(0 2px 0 rgba(139,90,60,.55));
  pointer-events:none;
  animation:kf-door-arr 1.1s ease-in-out infinite;
}
@keyframes kf-door-arr{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(6px); } }

/* ---------- 9.6 状态面板（接入文档 §四：名牌+头像+双胶囊条+状态字） ---------- */
.crt-status{
  position:absolute; left:10px; top:10px; z-index:1;
  display:flex; align-items:stretch; gap:7px;
  padding:6px; border-radius:14px;
  background:rgba(255,248,235,.92);
  border:3px solid var(--wood-dk);
  box-shadow:0 3px 0 var(--wood-dk), var(--sh-sm);
  text-align:left; max-width:220px;
  transition:transform .1s;
}
.crt-status:active{ transform:translateY(2px); }
.crt-status.warn{ border-color:var(--warn); box-shadow:0 3px 0 var(--warn), var(--sh-sm); }
.crt-status.bad{ border-color:var(--bad); box-shadow:0 3px 0 var(--bad), var(--sh-sm);
  animation:pulseBad 1s ease-in-out infinite; }
/* 竖排红底金边名牌（写宠物名） */
.cs-brand{
  writing-mode:vertical-rl; text-orientation:upright;
  background:linear-gradient(180deg,var(--jl-red-2),var(--jl-red));
  border:2px solid var(--jl-gold); border-radius:6px;
  color:#FFF8E8; font-weight:800; font-size:12.5px; letter-spacing:3px;
  padding:6px 3px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 1px 0 rgba(90,30,20,.5);
}
/* 圆角木框头像（当前阶段 AI 立绘缩小 44px） */
.crt-status .np-emo{
  width:44px; height:44px; flex:0 0 auto; border-radius:10px; overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft));
  border:2px solid var(--wood-dk);
  display:flex; align-items:center; justify-content:center;
}
.crt-status .np-emo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.cs-mid{ display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; }
.cs-name{ display:flex; align-items:center; gap:5px; }
.cs-name b{ font-size:11.5px; color:var(--ink2); letter-spacing:.5px; }
.cs-word{
  font-style:normal; font-size:11px; font-weight:800; color:#fff;
  padding:1px 7px; border-radius:6px; white-space:nowrap;
}
.cs-word.w-ok{ background:var(--ok); }
.cs-word.w-blue{ background:var(--st-feed); }
.cs-word.w-warn{ background:var(--warn); }
.cs-word.w-bad{ background:var(--bad); animation:pulseBad 1.6s ease-in-out infinite; }
/* 双胶囊条：饱食=蓝青渐变 / 心情=红粉渐变（接入文档 §四.2 定值） */
.cs-row{ display:flex; align-items:center; gap:4px; }
.cs-bar{
  position:relative; flex:1 1 auto; height:9px; border-radius:5px;
  background:rgba(255,255,255,.65);
  box-shadow:inset 0 1px 2px rgba(120,80,40,.28);
  overflow:hidden; min-width:52px;
}
.cs-bar u{
  position:absolute; left:0; top:0; bottom:0; display:block; border-radius:5px;
  transition:width .45s ease;
}
.cs-bar u::after{ /* 内芯 1px 顶部高光 */
  content:""; position:absolute; left:2px; right:2px; top:1px; height:2px;
  border-radius:2px; background:rgba(255,255,255,.5);
}
.cs-bar.f u{ background:linear-gradient(180deg,#5BC8E8,#3E9FD4); }
.cs-bar.m u{ background:linear-gradient(180deg,#F26D7D,#E84A5F); }
.cs-row em{
  flex:0 0 auto; font-style:normal; font-size:9.5px; font-weight:800;
  color:var(--ink2); min-width:30px; text-align:right; line-height:1;
}

/* ---------- 9.7 底部一句话回路提示条（ux-clarity §二定稿文案） ---------- */
.crt-loopbar{
  margin:4px 8px 0; height:30px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--paper),var(--cloth));
  border:2px solid var(--cloth-dk); border-radius:999px;
  font-size:12.5px; font-weight:800; color:var(--ink2);
  letter-spacing:.5px; white-space:nowrap; overflow:hidden;
  animation:kf-loopbar-in .5s ease-out .8s both;
}
@keyframes kf-loopbar-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- 9.8 宠物 AI 立绘（<img> 模式）+ 椭圆阴影 + 容器动画 ----------
   分层（接入文档 §六，P1-F 换装接口预留）：
   .pet-actor > .pet-shadow-ell + .pet-flip > .pet-live(摇摆) > .pet-breath(呼吸)
     > .pet-layers > .pet-base > img.pet-img （+ .pet-acc ×n 预留）
   三层 transform 互不打架：PetMotion 管 .pet-actor，翻转管 .pet-flip，
   待机动画管 .pet-live/.pet-breath，点击/情绪反馈管 .pet-layers。 */
.pet-shadow-ell{
  position:absolute; left:50%; bottom:0; width:60%; height:22px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(90,60,30,.18) 0%, rgba(90,60,30,.10) 55%, rgba(90,60,30,0) 78%);
  filter:blur(8px);
  pointer-events:none;
  animation:kf-img-shadow 3.2s ease-in-out infinite;
}
@keyframes kf-img-shadow{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:1; }
  50%    { transform:translateX(-50%) scale(.94); opacity:.85; }
}
.pet-live{ position:absolute; inset:0; transform-origin:50% 100%;
  animation:kf-pet-sway 4.5s ease-in-out infinite; }
.pet-breath{ position:absolute; inset:0;
  animation:kf-pet-breathe 3.2s ease-in-out infinite; }
.pet-layers{ position:absolute; inset:0; transform-origin:50% 100%; }
.pet-base{ position:absolute; inset:0; }
img.pet-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:bottom center;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
@keyframes kf-pet-breathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes kf-pet-sway{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(1.5deg); } 70%{ transform:rotate(-1.5deg); } }
/* 点击反馈 scale .94→1.04→1（复用 PetBrain 的 is-tap 类，作用于容器） */
.pet-actor.is-tap .pet-layers{ animation:kf-img-tap .42s cubic-bezier(.34,1.4,.64,1); }
@keyframes kf-img-tap{
  0%{ transform:scale(1); } 30%{ transform:scale(.94); } 65%{ transform:scale(1.04); } 100%{ transform:scale(1); }
}
/* 情绪反馈落容器（SVG 部件动画对 img 无效，容器级补齐） */
.pet-actor.is-happy .pet-layers{ animation:kf-happy-jump .72s cubic-bezier(.28,.9,.32,1) both; }
.pet-actor.is-evolve .pet-layers{ animation:kf-evolve-body 2.4s cubic-bezier(.32,.8,.3,1) both; }
.pet-actor.is-hungry .pet-breath{ animation-duration:2.2s; }
.pet-actor.is-sad .pet-breath{ animation-duration:4.6s; }

/* ---------- 9.9 弹层收进画布（#game-shell 已 position:relative） ----------
   openOverlay 挂载点改为 #game-shell → absolute 覆盖 420 画布不出界；
   其他模块挂 body 的 .overlay（fixed）不受影响。 */
#game-shell > .overlay{ position:absolute; }
/* 进化/里程碑横幅同样落画布内（覆盖 §8.9 的 fixed） */
#view{ position:relative; }
#view > .evolve-celebrate{ position:absolute; }

/* ---------- 9.10 首次引导浮层（ux-clarity §4.1 三步图文） ---------- */
.ux3-guide{ padding:4px 4px 0; text-align:left; }
.ux3-guide .ug-ttl{
  font-size:21px; font-weight:800; color:var(--ink); text-align:center;
  margin-bottom:12px; letter-spacing:2px;
}
.ux3-guide .ug-row{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  padding:10px 12px; border-radius:var(--r);
  background:linear-gradient(180deg,#fff,var(--paper));
  border:var(--bd) solid var(--cloth-dk);
  font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.4;
}
.ux3-guide .ug-ico{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft));
  border:var(--bd) solid var(--gold);
}
.ux3-guide .ug-ok{ display:block; width:100%; margin-top:6px; }

/* ---------- 9.11 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  .jl-petal{ animation:none; opacity:0; }
  .pet-live,.pet-breath,.pet-shadow-ell{ animation:none !important; }
  .pet-actor.is-tap .pet-layers,
  .pet-actor.is-happy .pet-layers,
  .pet-actor.is-evolve .pet-layers{ animation:kf-emote-pop .3s ease-out both; }
  .door-guide{ animation:none; box-shadow:0 0 0 3px rgba(217,164,65,.75), 0 4px 0 #6E4526; }
  .door-guide .door-txt,.door-arr{ animation:none; }
  .crt-loopbar{ animation:none; }
  .crt-status.bad,.cs-word.w-bad{ animation:none; }
}