/* ==========================================================================
   君兰绘学岛 · 主题层 v3.0（横版 + 蓝/粉双主题 + 道具/装扮）
   --------------------------------------------------------------------------
   引入顺序：style.css → pet-anim.css → theme-v2.css → theme-v3.css（末位）
   口径：本文件只「重指向变量 + 追加覆盖」，不删 theme-v2.css 任何规则
        → 删掉本行 <link> 即整体回滚。
   切换：<html data-theme="blue|pink">（默认 pink，与旧档默认粉一致；见文件末兜底）
   规格来源：docs/art-landscape-v3.0.md §二.5 / §三.4 / §四 / §五 / §六
             docs/ux-landscape-v3.0.md §二 A / §三 B / §五 D.5
   ========================================================================== */

/* ---------- L3 结构层：两主题共用，永不随主题变（保证"像同一个游戏"） ---------- */
:root{
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --bd:3px; --bd-lg:5px; --bd-xl:7px;
  --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;
  --nav-h:62px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px);    --safe-r:env(safe-area-inset-right,0px);
  /* L2 功能语义层：两主题守恒（状态色是认知锚点） */
  --st-feed:#4E9BD8; --st-mood:#E8556E; --st-energy:#8FBF6E; --st-exp:#F0C060;
  --ok:#6FA856; --ok-soft:#E7F1DC;
  --bad:#D4453A; --bad-soft:#F9DED8;
  --warn:#E0913C; --warn-soft:#FBEBD0;
  --gold:#F0C060; --gold-2:#F7D98C; --gold-soft:#FBEFD2;
}

/* ---------- L1 氛围层 · 蓝版（art §三.2） ---------- */
html[data-theme="blue"]{
  --jl-bg-1:#EAF3FB; --jl-bg-2:#D5E7F6; --jl-bg-3:#F6FBFF;
  --jl-line-1:#2F4A66; --jl-line-2:#7E9DBB; --jl-line-3:#C4DAEC;
  --jl-primary:#2A6FB0; --jl-primary-2:#4E97D8; --jl-primary-dk:#1D5183; --jl-primary-soft:#DCEBF9;
  --jl-accent:#6EC1E4; --jl-accent-2:#A9E1F2;
  --jl-ink:#2E3B4A; --jl-ink-2:#5C7085; --jl-ink-3:#93A6B8;
  --jl-shadow:rgba(46,74,102,.26);
  --jl-gold:#F0C060; --jl-gold-2:#F7D98C; --jl-gold-dk:#C99A3F;
  --jl-green:#6FB39A; --jl-green-dk:#3F7C68;
  --jl-img:url('../art/final/bg_land_blue.jpg');
}

/* ---------- L1 氛围层 · 粉版（art §三.3） ---------- */
html[data-theme="pink"]{
  --jl-bg-1:#FDEEF3; --jl-bg-2:#F9DCE7; --jl-bg-3:#FFF7FA;
  --jl-line-1:#7A4553; --jl-line-2:#C08D9E; --jl-line-3:#F0D2DC;
  --jl-primary:#BE4772; --jl-primary-2:#D4658C; --jl-primary-dk:#8F3355; --jl-primary-soft:#FBE0EA;
  --jl-accent:#EFA24E; --jl-accent-2:#F7C77E;
  --jl-ink:#5A3340; --jl-ink-2:#8A6472; --jl-ink-3:#BC9DA8;
  --jl-shadow:rgba(122,69,83,.24);
  --jl-gold:#F0C060; --jl-gold-2:#F7D98C; --jl-gold-dk:#C99A3F;
  --jl-green:#8FBF6E; --jl-green-dk:#5C8A46;
  --jl-img:url('../art/final/bg_land_pink.jpg');
}

/* ---------- 兜底：data-theme 缺失/非法 → 视为粉（与旧档默认粉一致） ---------- */
:root:not([data-theme]),
:root[data-theme=""]{ --jl-bg-1:#FDEEF3; --jl-bg-2:#F9DCE7; --jl-bg-3:#FFF7FA;
  --jl-line-1:#7A4553; --jl-line-2:#C08D9E; --jl-line-3:#F0D2DC;
  --jl-primary:#BE4772; --jl-primary-2:#D4658C; --jl-primary-dk:#8F3355; --jl-primary-soft:#FBE0EA;
  --jl-accent:#EFA24E; --jl-accent-2:#F7C77E;
  --jl-ink:#5A3340; --jl-ink-2:#8A6472; --jl-ink-3:#BC9DA8;
  --jl-shadow:rgba(122,69,83,.24);
  --jl-green:#8FBF6E; --jl-green-dk:#5C8A46;
  --jl-img:url('../art/final/bg_land_pink.jpg'); }

/* ---------- 别名回填：让 theme-v2.css 的旧令牌名继续可用（类名零改动） ----------
   art §三.1：把旧名全部改为「别名」指向新角色令牌 → 所有既有类名零改动完成换肤 */
:root, html[data-theme]{
  --jl-cream-1:var(--jl-bg-1); --jl-cream-2:var(--jl-bg-2); --jl-cream-3:var(--jl-bg-3);
  --jl-wood-1:var(--jl-line-1); --jl-wood-2:var(--jl-line-2); --jl-wood-3:var(--jl-line-3);
  --jl-red:var(--jl-primary);   --jl-red-2:var(--jl-primary-2);
  --jl-blue:var(--st-feed);     --jl-blue-2:#7ED0E8;   /* 饱食度色不变（L2 守恒） */
  --jl-pink:#F2A0B4;            --jl-lilac:var(--jl-accent);
  --bg:var(--jl-bg-1); --bg2:var(--jl-bg-2);
  --paper:var(--jl-bg-3); --paper-2:var(--jl-bg-3);
  --wood:var(--jl-line-2); --wood-dk:var(--jl-line-1); --wood-lt:var(--jl-line-3); --wood-line:var(--jl-line-1);
  --cloth:var(--jl-bg-2); --cloth-dk:var(--jl-line-3);
  --ink:var(--jl-ink); --ink2:var(--jl-ink-2); --ink3:var(--jl-ink-3);
  --ink-outline:var(--jl-shadow);
  --rouge:var(--jl-primary); --rouge-2:var(--jl-primary-2); --rouge-soft:var(--jl-primary-soft);
  --moss:var(--jl-green); --moss-2:var(--jl-accent-2); --moss-soft:var(--jl-primary-soft);
  --brand:var(--jl-primary); --brand2:var(--jl-primary-2); --brand-soft:var(--jl-primary-soft);
  --rose:var(--jl-primary); --rose2:var(--jl-primary-2); --rose-soft:var(--jl-primary-soft);
  --card:var(--jl-bg-3);
  --sh:0 6px 16px var(--jl-shadow);
  --sh-sm:0 3px 8px var(--jl-shadow);
  --sh-lg:0 12px 30px var(--jl-shadow);
  --sh-in:inset 0 2px 5px var(--jl-shadow);
}

/* ---------- 背景图随主题切（覆盖 theme-v2 §9.1 / §9.2 的固定 url） ---------- */
.crt-home .pet-scene{
  background-color:var(--jl-bg-2);
  background-image:var(--jl-img), linear-gradient(180deg, var(--jl-bg-2) 0%, var(--jl-bg-3) 100%);
  background-position:center 54%, center;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
}

/* ---------- 主题切换的即时过渡（避免生硬跳变；尊重 reduced-motion） ---------- */
html{ transition:background-color .28s ease; }
@media (prefers-reduced-motion: no-preference){
  .crt-home .pet-scene{ transition:background-image .28s ease; }
}

/* ==========================================================================
   §A · 横版全尺寸自适应（docs/ux-landscape-v3.0.md §二 A）
   一层「壳」铺满 + 两列「舞台」；deletes theme-v2 §9.2 的 420 定宽
   ========================================================================== */

/* ---------- A.4 铺满基座（覆盖 style.css 的 #game-shell）
   ★ P1-G 步骤6（ux-singlepage-v3.1.md A.2）：nav 行删除 →
   grid-template-rows 由 auto minmax(0,1fr) auto 改为 auto minmax(0,1fr)。
   --nav-h 变量保留供旧 calc() 兜底，但不再参与 #game-shell 布局。 ---------- */
#game-shell{
  width:100vw; min-width:0;
  height:100dvh; max-height:none;
  display:grid; grid-template-rows:auto minmax(0,1fr);   /* topbar / view（nav 已删） */
  border-radius:0; box-shadow:none; z-index:auto;
}
body{ display:block; align-items:stretch; padding:0; min-height:0; }

/* ---------- A.6 基态：竖屏 / 窄屏（单列 + 铺满；手机 390×844 逐像素兼容） ---------- */
.crt-home.wrap{ padding:0; max-width:none; height:100%; }
.crt-stage{ display:grid; height:100%;
  grid-template-rows:minmax(0,1fr) auto;          /* 场景 / 坞 */
  gap:8px; padding:8px; }
.crt-dock{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.crt-dock .crt-doors{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; position:static; inset:auto; }
/* ★ P0 热修（真机点击全哑）：theme-v2.css:357 `.crt-doors{pointer-events:none}` 是 P1-E
   「门牌叠在场景里」时代的旧规则；P1-F 把门牌移进 .crt-dock 时只覆盖了 position/inset/display，
   漏了 pointer-events —— 而 pointer-events 是**继承属性**，五个 .door-tile 全部继承 none，
   真实点击永远命中不了（el.click() 绕过命中测试，所以冒烟全绿但真机全哑）。此处恢复 auto。 */
.crt-dock .crt-doors{ pointer-events:auto; }
.crt-dock .crt-doors .door-tile{ pointer-events:auto; }
/* 兜底：坞内所有可交互件显式恢复 auto（防同类继承回归：姐妹互照顾牌 / 回路条） */
.crt-dock .crt-sib{ pointer-events:auto; }
#view:has(> .crt-home){ overflow:hidden; }

/* ---------- A.6 横屏（≥640px 宽且宽>高）：双列 ---------- */
@media (min-width:640px) and (min-aspect-ratio:1/1){
  .crt-stage{ grid-template-rows:none;
    grid-template-columns:minmax(0,1fr) var(--dock-w);
    padding:10px; gap:10px; }
  .crt-home .pet-scene{ height:100%; min-height:0; aspect-ratio:auto; }
  .crt-dock .crt-doors{ grid-template-columns:repeat(2,1fr); }
  #view:has(> .crt-home){ overflow:hidden; }
  :root{ --dock-w:clamp(300px,30vw,380px); }   /* ★ P1-G 步骤6：--nav-h 覆盖已删（nav 不复存在） */
}
/* ---------- 桌面加大坞宽 ---------- */
@media (min-width:1100px){ :root{ --dock-w:clamp(340px,26vw,420px); } }
/* ---------- 超矮横屏（手机横屏）：圆角降档 ---------- */
@media (min-width:640px) and (min-aspect-ratio:4/3) and (max-height:560px){
  .crt-home .pet-scene{ border-radius:var(--r); }
  .crt-status{ max-width:230px; padding:5px; gap:7px; }
  .crt-status .np-emo{ width:40px; height:40px; }
  .cs-brand{ min-height:70px; font-size:11.5px; letter-spacing:2px; }
  .cs-bar{ height:9px; min-width:96px; }
  .crt-dock .crt-loopbar{ font-size:10.5px; letter-spacing:0; }
}
/* ---------- A.5 位图背景按形态给死 background-position ---------- */
@media (orientation:portrait){ .crt-home .pet-scene{ background-position:center 38%, center; } }
@media (min-aspect-ratio:2/1){ .crt-home .pet-scene{ background-position:center 74%, center; } }

/* ---------- A.7 入口门牌（5 枚统一形态 .door-tile） ---------- */
.crt-dock .crt-doors .door-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:0; height:56px; padding:4px 2px; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg, var(--wood-lt,#F0D2DC) 0%, var(--wood,#C08D9E) 100%);
  border:3px solid var(--wood-dk,#7A4553);
  box-shadow:0 3px 0 var(--wood-dk,#7A4553), inset 0 0 0 2px rgba(255,255,255,.5);
  -webkit-tap-highlight-color:transparent; position:relative;
  transition:transform .1s ease, box-shadow .1s ease;
}
.crt-dock .crt-doors .door-tile:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--wood-dk), inset 0 0 0 2px rgba(255,255,255,.5); }
@media (hover:hover){ .crt-dock .crt-doors .door-tile:hover{ transform:translateY(-2px); } }
.crt-dock .crt-doors .door-tile .dt-ico{ font-size:26px; line-height:1; }
.crt-dock .crt-doors .door-tile .dt-ico svg{ width:30px; height:30px; display:block; }
.crt-dock .crt-doors .door-tile .dt-lbl{ font-size:12px; font-weight:800; color:var(--wood-dk,#7A4553); }
.door-tile.primary{ background:linear-gradient(180deg,#FFE9AE 0%, var(--gold,#F0C060) 100%); border-color:var(--jl-gold-dk,#C99A3F); }
.door-tile .door-dot{ position:absolute; right:6px; top:6px; width:11px; height:11px; border-radius:50%;
  background:#E85540; box-shadow:0 0 0 2px #fff; animation:door-dot-pulse 1.4s ease-in-out infinite; }
@keyframes door-dot-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.25); opacity:.75; } }
/* 学习门首刷高亮（沿用存档字段 p.ux3.door） */
.door-tile.door-guide{ animation:door-guide-glow 1.4s ease-in-out infinite; }
@keyframes door-guide-glow{ 0%,100%{ box-shadow:0 3px 0 var(--wood-dk), 0 0 0 0 rgba(240,192,96,.7), inset 0 0 0 2px rgba(255,255,255,.5); }
  50%{ box-shadow:0 3px 0 var(--wood-dk), 0 0 0 8px rgba(240,192,96,0), inset 0 0 0 2px rgba(255,255,255,.5); } }
.door-tile .door-arr{ position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid var(--gold,#F0C060);
  animation:door-arr-bounce .9s ease-in-out infinite; }
@keyframes door-arr-bounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }

/* ---------- A.3 视口高度矮的横屏：允许场景最小高 ---------- */
.crt-home .pet-scene{ min-height:200px; }

/* ==========================================================================
   §二.5 留白补丁：背景之上、UI 之下，把状态面板/导航角位压淡
   ========================================================================== */
.crt-home .pet-scene::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(130% 100% at 0% 0%,   var(--jl-bg-1) 16%, transparent 58%),
    radial-gradient(120% 95%  at 100% 0%, var(--jl-bg-1) 12%, transparent 52%),
    radial-gradient(120% 95%  at 100% 100%,var(--jl-bg-1) 14%, transparent 55%),
    linear-gradient(0deg,  var(--jl-bg-1) 0%, transparent 15%);
  opacity:.86;
}

/* ==========================================================================
   §六 横版增量 · 状态面板 / 门牌 / 导航（art §六.2；不含 shell 尺寸，已由 §A 接管）
   ========================================================================== */
@media (orientation: landscape) and (min-width:640px){
  .crt-status{
    left:calc(14px + var(--safe-l));
    top:calc(14px + var(--safe-t));
    max-width:300px; padding:7px; gap:9px; border-radius:16px;
  }
  .crt-status .np-emo{ width:52px; height:52px; border-radius:12px; }
  .cs-brand{ min-height:88px; font-size:13.5px; letter-spacing:4px; }
  .cs-mid{ gap:5px; }
  .cs-bar{ height:12px; min-width:132px; border-radius:6px; }
  .cs-bar u{ border-radius:6px; }
  .cs-row em{ font-size:11px; min-width:36px; }
  .cs-name b{ font-size:12.5px; }
  .cs-word{ font-size:12px; padding:2px 8px; }
  .jl-notice{ max-width:260px; white-space:normal; }
  .nav-bar{ padding-bottom:var(--safe-b); }
}
/* 手机横屏窄屏（<640）：紧凑档 */
@media (orientation: landscape) and (max-width:639px){
  .crt-status{ left:calc(8px + var(--safe-l)); top:calc(8px + var(--safe-t)); max-width:210px; padding:5px; gap:6px; }
  .crt-status .np-emo{ width:40px; height:40px; }
  .cs-brand{ min-height:64px; font-size:11.5px; letter-spacing:2px; }
  .cs-bar{ height:9px; min-width:88px; }
  .jl-notice{ max-width:200px; font-size:10.5px; }
}
/* 矮窗口兜底：横版高度很矮时，允许场景压缩 */
@media (orientation: landscape) and (max-height:420px){
  .crt-home .pet-scene{ min-height:180px; }
}

/* ==========================================================================
   §D.5 图片题（SVG 钟面 / 图形辨认 / 角度图）渲染约定
   ========================================================================== */
.qfigwrap{ display:flex; justify-content:center; margin:6px 0 10px; }
svg.qfig{ width:clamp(140px,34vw,220px); height:auto; display:block; }
.qcard .qtext svg.qfig{ display:block; margin:8px auto 0; }
.qcard .qtext{ white-space:normal; }

/* ==========================================================================
   §D.1#7 · 三选项栅格（删 ≠ 后比大小只剩 3 项，严格三连排）
   ========================================================================== */
.opts.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:520px){ .opts.three{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } }

/* ==========================================================================
   §C 道具卡 · 四等级（art §四.3 / §四.4 / §四.5）
   宿主：<span class="oki r2"><span class="oki-ic">🍓</span><i class="oki-n">×3</i></span>
   ========================================================================== */
.oki{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%, var(--jl-bg-3,#F6FBFF) 100%);
  border:3px solid var(--ok-line, #9AA6B2);
  box-shadow:0 3px 0 var(--ok-lip, rgba(90,106,122,.32)), inset 0 0 0 2px rgba(255,255,255,.72);
  transition:transform .1s ease, box-shadow .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.oki:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ok-lip), inset 0 0 0 2px rgba(255,255,255,.72); }
.oki-ic{
  font-size:29px; line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color",sans-serif;
  filter:drop-shadow(0 1px 1px rgba(40,50,60,.25));
}
.oki-ic svg{ display:block; width:34px; height:34px; }
.oki-n{
  position:absolute; right:2px; bottom:2px; font-style:normal;
  min-width:15px; height:15px; padding:0 4px; border-radius:8px;
  font-size:10px; font-weight:800; line-height:15px; text-align:center;
  color:#fff; background:rgba(46,58,72,.78); box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.oki-tag{
  position:absolute; left:-1px; top:-1px; padding:1px 5px 2px;
  font-size:9.5px; font-weight:800; color:#fff; border-radius:9px 4px 9px 4px;
  background:linear-gradient(180deg,#FF8A8A,#E85540);
}
.oki.r1{ --ok-line:#9AA6B2; --ok-lip:rgba(90,106,122,.34); }
.oki.r2{
  --ok-line:#4E9BD8; --ok-lip:rgba(42,111,176,.42);
  box-shadow:0 3px 0 var(--ok-lip), inset 0 0 0 2px rgba(255,255,255,.78), 0 0 10px rgba(78,155,216,.45);
}
.oki.r3{
  --ok-line:#9B6BD9; --ok-lip:rgba(97,58,160,.46);
  box-shadow:0 3px 0 var(--ok-lip), inset 0 0 0 2px rgba(255,255,255,.8), 0 0 12px rgba(155,107,217,.5);
  animation:oki-pulse 2.4s ease-in-out infinite;
}
@keyframes oki-pulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.14) saturate(1.12); } }
.oki.r4{
  --ok-line:#E8B23C; --ok-lip:rgba(150,105,20,.5);
  box-shadow:0 3px 0 var(--ok-lip), inset 0 0 0 2px rgba(255,255,255,.85), 0 0 14px rgba(240,192,96,.62);
}
.oki.r4::before{ content:""; position:absolute; inset:3px; border-radius:11px; pointer-events:none; border:1.5px solid rgba(240,192,96,.85); }
.oki.r4::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.88) 46%, rgba(255,255,255,.18) 54%, transparent 70%);
  background-size:260% 100%; background-position:180% 0;
  animation:oki-sheen 2.6s linear infinite;
}
@keyframes oki-sheen{ 0%{ background-position:180% 0; } 100%{ background-position:-80% 0; } }
.oki.sel{ outline:3px solid var(--jl-primary,#2A6FB0); outline-offset:2px; }
.oki[disabled], .oki.lock{ filter:grayscale(.55) brightness(.98); opacity:.62; pointer-events:none; }
.oki.lock::before{ content:"🔒"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:18px; background:rgba(20,26,34,.28); border-radius:inherit; }

/* ---------- 隐藏稀有道具（art §四.4） ---------- */
.oki.secret{ --ok-line:#7B6F9E; --ok-lip:rgba(58,48,84,.5); background:linear-gradient(180deg,#4B4160 0%, #2F2940 100%); }
.oki.secret::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(155,107,217,.55) 0%, rgba(155,107,217,0) 70%);
  animation:oki-mist 3s ease-in-out infinite;
}
@keyframes oki-mist{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
.oki.secret .oki-ic{ filter:brightness(0) opacity(.34); }
.oki.secret .oki-q{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#F1E9FF; opacity:.92; text-shadow:0 1px 3px rgba(30,20,50,.75); }
.oki.secret.hint{ --ok-line:#E8B23C; --ok-lip:rgba(150,105,20,.5); background:linear-gradient(180deg,#4B4160 0%, #2F2940 100%); }
.oki.reveal{ animation:oki-reveal .7s cubic-bezier(.34,1.5,.5,1) both; }
@keyframes oki-reveal{
  0%  { transform:scale(.7) rotate(-8deg); filter:brightness(2); }
  55% { transform:scale(1.16) rotate(4deg); }
  100%{ transform:scale(1) rotate(0); filter:brightness(1); }
}
@media (prefers-reduced-motion: reduce){
  .oki.r3{ animation:none; }
  .oki.r4::after{ animation:none; background-position:46% 0; }
  .oki.secret::after{ animation:none; }
  .oki.reveal{ animation:none; }
}

/* ---------- 商店/背包网格（art §四.5） ---------- */
.oki-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width:520px){ .oki-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } }
.oki-cell{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px;
  background:linear-gradient(180deg, var(--jl-bg-3,#FFF) 0%, var(--jl-bg-2,#EEF) 100%);
  border:var(--bd,3px) solid var(--jl-line-3,#C4DAEC); border-radius:var(--r,18px);
  box-shadow:0 3px 0 var(--jl-line-2,#7E9DBB);
}
.oki-cell b{ font-size:12.5px; color:var(--jl-ink,#2E3B4A); font-weight:800; }
.oki-price{
  display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:999px;
  font-size:11.5px; font-weight:800; color:#7A5210;
  background:linear-gradient(180deg,#FFF3CF,#F7D98C);
  border:2px solid var(--jl-gold,#F0C060);
}
.oki-cell .oki-buy{ margin-top:2px; }

/* ==========================================================================
   §D 装扮部件（art §五.3 / §五.6 / §五.8）
   ========================================================================== */
/* ---------- 五.3 阶段 → 锚点变量 ----------
   ★★ 双足接入（2026-10-06）：锚点数值已迁移到 wardrobe.js 的 ACC_ANCHORS 单一数据源
   （docs/biped-anchor-v1.0.md §二，羊/猪 × S2–S6），模块加载时注入 <style id="acc-anchor-css">，
   按 .pet-layers[data-kind][data-stage] 生效。本文件不再写锚点数值，防两处漂移。
   改锚点 = 只改 wardrobe.js ACC_ANCHORS。 */
/* 蛋期：装扮与化妆整体隐藏（保留数据，蛋破壳后自动生效） */
.pet-layers[data-stage="1"] .pet-acc,
.pet-layers[data-stage="1"] .pet-makeup{ display:none; }

/* ---------- 五.6 槽位挂点 ---------- */
.pet-acc-back, .pet-acc-front{ position:absolute; inset:0; pointer-events:none; }
.pet-acc{ position:absolute; pointer-events:none; }
.pet-acc svg, .pet-acc img{ display:block; width:100%; height:auto; }
/* ★ 双足接入：--acc-gap = 部件 PNG bbox 垂直边距（accSpanHTML 按件内联下发），
   把「720 方图内容居中」的 padding 从锚点运算里剥掉 → 内容边贴锚而非盒边贴锚。 */
.pet-acc.att-bottom{ left:var(--acc-x,50%); top:var(--acc-head-y,20%); transform:translate(-50%,calc(-100% + var(--acc-gap,0%))) scale(var(--acc-s,1)); transform-origin:50% 100%; }
.pet-acc.att-top   { left:var(--acc-x,50%); top:var(--acc-neck-y,46%); transform:translate(-50%,calc(0% - var(--acc-gap,0%))) scale(var(--acc-s,1)); transform-origin:50% 0%; }
.pet-acc.att-center{ left:var(--acc-x,50%); top:var(--acc-face-y,33%); transform:translate(-50%,-50%) scale(var(--acc-s,1)); transform-origin:50% 50%; }

/* 按槽微调挂点（art §五.6）
   ★ 双足接入：hair 改用独立 --acc-hair-y（双足头顶 y=7%，旧公式 calc(head−12%) 会算出负值）；
   scarf 直接贴 --acc-neck-y（biped 锚点表已实测颈线，不再 −2% 上提）。
   ★ v1.2：glasses 横向改吃 --acc-face-x（双眼心，wardrobe.js 注入时已换算成画布%）——
   羊双眼心在体宽 42.7%（画布 ~44.4%）、猪 57.3%（画布 ~56.0%），都不在体中心，
   沿用 50% 会整体偏 5–7% 体宽（羊镜圈滑向鼻梁 / 猪镜圈骑上猪鼻）。 */
.pet-acc.slot-hat    { --acc-x:50%; --acc-y:var(--acc-head-y); }
.pet-acc.slot-hair   { --acc-x:var(--acc-hair-x, 44%); --acc-y:var(--acc-hair-y); }   /* ★v1.4 两物种均注入 --acc-hair-x（羊44/猪50 画布%） */
.pet-acc.slot-scarf  { --acc-x:50%; --acc-y:var(--acc-neck-y); }
.pet-acc.slot-cape   { --acc-x:50%; --acc-y:var(--acc-cape-y); }   /* ★v1.6 back-y → cape-y（颈基+1.5） */
.pet-acc.slot-halo   { --acc-x:50%; --acc-y:var(--acc-halo-y); }
.pet-acc.slot-hand   { --acc-x:var(--acc-hx, var(--acc-hand-x)); --acc-y:var(--acc-hy, var(--acc-hand-y)); }   /* ★v1.7 grip：--acc-hx/hy 由 accSpanHTML 按件内联下发，缺省回退爪位 */
.pet-acc.slot-glasses{ --acc-x:var(--acc-face-x, 50%); --acc-y:calc(var(--acc-face-y) + var(--acc-gl-dy, 0%)); }   /* ★v1.7 猪 +2 观感位（--acc-gl-dy 只加在 glasses 槽 y；face-y/mk-y 表值不动） */
/* 槽位覆盖通用模式（用 --acc-y 覆盖 top） */
.pet-acc.slot-hat, .pet-acc.slot-halo{ top:var(--acc-y); }
.pet-acc.slot-hair, .pet-acc.slot-scarf, .pet-acc.slot-cape{ top:var(--acc-y); }
.pet-acc.slot-hand, .pet-acc.slot-glasses{ top:var(--acc-y); left:var(--acc-x); }
/* ★ v1.4：hand 左手镜像 —— x = 100% − --acc-hand-x（组件中心，画布%；S6 羊 68.4→31.6 / 猪 70.5→29.5，
   CSS calc 随锚点表自动换算），组件水平翻转。画布%下镜像公式才成立（体宽%口径下 100−x 无意义）。 */
.pet-acc.slot-hand.acc-mirror{ left:calc(100% - var(--acc-hx, var(--acc-hand-x))); }
.pet-acc.slot-hand.acc-mirror img{ transform:scaleX(-1); }

/* 各槽层序 */
.pet-acc-front .slot-cape   { z-index:1; }   /* ★v1.6：cape 移入前层短披肩（压本体、垫围巾之下） */
.pet-acc-front .slot-hair   { z-index:2; }
.pet-acc-front .slot-scarf  { z-index:3; }
.pet-acc-front .slot-hat    { z-index:5; }
.pet-acc-front .slot-glasses{ z-index:8; }
.pet-acc-front .slot-hand   { z-index:9; }
.pet-acc-back  .slot-halo   { z-index:1; }
/* ★ v1.2：围巾背层（__back 绕颈后片）住背层；★v1.6 起 cape 已移前层，背层仅 halo + scarf__back */
.pet-acc-back  .slot-scarf  { z-index:2; }

/* ---------- 五.6b 接触阴影（C 方案 · 全件受益 · 纯增量） ----------
   视觉目标：让前层装扮件读起来是「坐着 / 贴着」本体，而不是平贴覆盖上去。
   做法：只给前层（.pet-acc-front 下的 .pet-acc）加两层柔性投影 ——
     · 近层（小偏移小模糊）= 接触暗线，落点即部件与本体贴合处；
     · 远层（大偏移大模糊）= 环境落影，制造「离面」纵深。
   投影随部件自身 alpha 轮廓走（drop-shadow 用 alpha，不产生矩形边），
   落在其下方本体上 → 产生遮挡错觉（这正是「覆盖感」的解药）。
   纯 CSS / 零 DOM / 零布局；随 --pet-size（继承自 .pet-stage 的渲染框）等比；
   后层件（cape/halo 在 .pet-acc-back，被本体挡住）不加，避免无效合成开销；
   低性能模式（.perf-low 挂 html 或 .pet-scene）下关闭 —— filter 在低端机是昂贵合成。 */
.pet-acc-front > .pet-acc{
  filter:
    drop-shadow(0 calc(var(--pet-size, 96px) * .009) calc(var(--pet-size, 96px) * .008) rgba(92, 66, 52, .36))
    drop-shadow(0 calc(var(--pet-size, 96px) * .022) calc(var(--pet-size, 96px) * .020) rgba(92, 66, 52, .18));
}
.perf-low .pet-acc-front > .pet-acc{ filter:none; }

/* 尺寸：部件宽度 = DB 宽度的百分比
   ★ P1-2 修复：宽度必须定在 .pet-acc「本体」上，而不是内层 svg。
   - 定在本体 → 本体盒 = 部件尺寸，translate(-50%,-100%) 按【部件自身盒】位移，锚点正确；
   - 若定在 svg 上（旧写法）+ wardrobe.js 又给本体内联 100%，本体盒被撑成整幅立绘高，
     translate(-100%) 便错用立绘盒高（≈338px）→ 帽子/光环被抬起整整一个身位，眼镜/斗篷同理错位。 */
.pet-acc{ height:auto; }
/* ★ v1.6：兜底宽随分物种终值同步（取羊列；猪列由 accSpanHTML 经 wKind 内联覆盖，
   inline 按件计算（盒宽 = w/(bb宽/100)）始终为准，此处仅兜底防漂移）
   hat 44.6 / halo 54 / hair 17 / scarf 34 / cape 40 / glasses 30 / hand 18.5
   ★ v1.7(B1)：hair w 羊17/猪22；围巾 split 件新增 wBack 羊41/猪47（仅背层，inline 覆盖，此处兜底不变） */
.pet-acc.slot-hat    { width:44.6%; }
.pet-acc.slot-halo   { width:54%; }
.pet-acc.slot-hair   { width:17%; }
.pet-acc.slot-scarf  { width:34%; }
.pet-acc.slot-cape   { width:40%; }
.pet-acc.slot-glasses{ width:30%; }
.pet-acc.slot-hand   { width:18.5%; }
/* 空槽不占资源 */
.pet-acc.acc-off{ display:none; }

/* ---------- 五.8 化妆层 ----------
   ★ v1.6（§六 妆面层重定规格）：妆层几何由四足时代遗留改为**锚双足真眼线**——
   · --acc-mk-y = 真眼线 − 7（wardrobe.js 注入；羊五阶段同 35.4，猪 27.8/29.0/26.0/24.1/23.9）：
     眼影 SVG 内 y=40% + (mkY−33)% 恰落真眼线；旧 42–36 是 +7% 补偿值（猪例错位 ~10pp，作废）。
   · --acc-mk-x = face-x 画布% 终值（羊 44.4 / 猪 56.1）：横向从「对称居中 50%」改为跟随脸中轴。
   · SVG 源腮红 cy 150→142（app.js，缩短与眼影的相对距，避免新值腮红遮嘴）。 */
.pet-makeup{ position:absolute; inset:0; pointer-events:none; z-index:5;
  transform-origin:50% 100%;
  transform:translateX(calc(var(--acc-mk-x, 50%) - 50%)) translateY(calc(var(--acc-mk-y, 33%) - 33%)) scale(var(--acc-s,1));
  transition:transform .18s ease; }
@media (prefers-reduced-motion: reduce){ .pet-makeup{ transition:none; } }
.pet-makeup .mk{ fill:var(--mk-c, transparent); opacity:var(--mk-a, .55); }
.pet-makeup .mk-blush{ --mk-c:#FF7FA8; --mk-a:.5; mix-blend-mode:multiply; filter:blur(3px); }
.pet-makeup .mk-eye{ --mk-c:#B48FD4; --mk-a:.4; mix-blend-mode:screen; filter:blur(4px); }
/* 预设：只改两个变量，零 DOM 变更 */
.pet-look[data-blush="pink"]  .pet-makeup .mk-blush{ --mk-c:#FF7FA8; --mk-a:.5; }
.pet-look[data-blush="peach"] .pet-makeup .mk-blush{ --mk-c:#FF9A73; --mk-a:.5; }
.pet-look[data-blush="coral"] .pet-makeup .mk-blush{ --mk-c:#FF6F8B; --mk-a:.58; }
.pet-look[data-blush="none"]  .pet-makeup .mk-blush{ --mk-a:0; }
.pet-look[data-eye="none"]  .pet-makeup .mk-eye{ --mk-a:0; }
.pet-look[data-eye="lilac"] .pet-makeup .mk-eye{ --mk-c:#B48FD4; --mk-a:.4; }
.pet-look[data-eye="blue"]  .pet-makeup .mk-eye{ --mk-c:#6EC1E4; --mk-a:.38; }
.pet-look[data-eye="gold"]  .pet-makeup .mk-eye{ --mk-c:#F0C060; --mk-a:.42; }
.pet-look[data-eye="rose"]  .pet-makeup .mk-eye{ --mk-c:#E8556E; --mk-a:.36; }

/* ---------- 五.7 锚点标尺（?accdebug=1 → html.acc-debug） ---------- */
html.acc-debug .pet-layers::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:99;
  background:
    repeating-linear-gradient(180deg, rgba(255,0,80,.55) 0 1px, transparent 1px 10%),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(0,160,255,.8) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
html.acc-debug .pet-layers::before{
  content:"head 30/24/20/17/14  face 46/38/33/27"; position:absolute; left:4px; top:4px; z-index:100;
  font:11px/1.3 monospace; color:#fff; background:rgba(20,26,34,.7); padding:3px 6px; border-radius:6px; pointer-events:none;
}

/* ==========================================================================
   §E 横版答题页微调（题卡/选项在高分辨率桌面下不撑太宽）
   ========================================================================== */
@media (min-width:900px){
  #view > .qhead, #view > #qbox{ max-width:820px; margin-left:auto; margin-right:auto; }
}

/* ==========================================================================
   §F 功能坞内元素 + 齿轮菜单「主题」行（P1-F 接线）
   ========================================================================== */
.crt-dock .crt-loopbar{ margin:0; }

/* 齿轮菜单主题行 */
.gm-theme{ display:flex; align-items:center; gap:10px; padding:8px 10px; margin:2px 0 8px;
  background:linear-gradient(180deg, var(--jl-bg-3) 0%, var(--jl-bg-2) 100%);
  border:2px solid var(--jl-line-3); border-radius:14px; }
.gm-theme .gm-theme-lbl{ font-size:13px; font-weight:800; color:var(--jl-ink-2); flex:0 0 auto; }
.gm-swatches{ display:flex; gap:8px; margin-left:auto; }
.gm-swatch{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  background:var(--jl-bg-3); border:2px solid var(--jl-line-3); cursor:pointer; font-size:12px; font-weight:800;
  color:var(--jl-ink-2); box-shadow:0 2px 0 var(--jl-line-2); }
.gm-swatch:active{ transform:translateY(1px); box-shadow:none; }
.gm-swatch i{ width:16px; height:16px; border-radius:50%; display:block; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
.gm-swatch.sw-pink i{ background:linear-gradient(180deg,#F0739A,#E24B7A); }
.gm-swatch.sw-blue i{ background:linear-gradient(180deg,#5A93E8,#2E6FD6); }
.gm-swatch.on{ border-color:var(--jl-gold); box-shadow:0 2px 0 var(--jl-gold-dk,#C99A3F); color:var(--jl-ink); }
.gm-swatch.on::after{ content:"✓"; font-weight:900; color:var(--jl-gold-dk,#C99A3F); }

/* ==========================================================================
   §G P1-8 · 学习页（同步学习）古风化
   科目卡 → 木作门牌 .gate（ui-style-v2.0 §四.3，骨架照抄，仅换皮）；
   诊断牌沿用同款胭脂木作，避免学习页残留"教育 App 扁平风"。
   ========================================================================== */
.crt-study .gate-emblem{ background:radial-gradient(circle at 35% 30%,#fff,var(--gold-soft)); }
.crt-study .gate-info b{ letter-spacing:1px; }
/* 诊断牌（学习页专属）：胭脂渐变 + 木作边影（与首页同款观感，作用域限定 .crt-study） */
.crt-study .diagcard{ background:linear-gradient(135deg,var(--rouge),var(--rouge-2)); color:#fff;
  border:none; border-radius:var(--r-lg); box-shadow:0 5px 0 #9E4651, var(--sh); }
.crt-study .diagcard .dico{ background:rgba(255,255,255,.22); border-radius:13px; }
.crt-study .diagcard .dinfo b{ color:#fff; text-shadow:0 1px 0 rgba(120,40,55,.5); }
.crt-study .diagcard .dinfo small{ color:rgba(255,255,255,.94); }
.crt-study .diagcard .darrow{ color:rgba(255,255,255,.8); }

/* ==========================================================================
   §H P1-7 · 姐妹互照顾（坞内小牌 + 照顾弹层）
   ========================================================================== */
.crt-dock .crt-sib{ display:flex; align-items:center; gap:8px; width:100%; margin:2px 0 6px;
  padding:8px 12px; border-radius:14px; cursor:pointer; font-weight:800; font-size:13px;
  background:linear-gradient(180deg,#FFF0F5 0%, #FBD9E4 100%);
  border:2px solid var(--wood-dk,#7A4553); color:var(--wood-dk,#7A4553);
  box-shadow:0 3px 0 var(--wood-dk,#7A4553); }
.crt-dock .crt-sib:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--wood-dk,#7A4553); }
.crt-dock .crt-sib .cs-ico{ font-size:16px; line-height:1; }
.crt-dock .crt-sib small{ margin-left:auto; font-weight:700; font-size:11px; color:var(--jl-ink-3); }
/* 竖屏坞整条时，姊妹牌收窄居中，避免抢主入口 */
@media (orientation:portrait) and (max-width:639px){
  .crt-dock .crt-sib{ width:auto; align-self:center; }
}
/* 矮横屏（手机横屏 ≤480px 高）：坞高度只够 5 门牌 + 回路条 → 收起姊妹牌
   （ux §二：横屏纵向寸土寸金；照顾功能竖屏 / 平板 / 桌面仍可用） */
@media (orientation:landscape) and (max-height:480px){
  .crt-dock .crt-sib{ display:none; }
}

/* 照顾弹层 */
.sib-care{ text-align:center; }
.sib-care .sc-pet{ width:150px; height:150px; margin:6px auto 2px; }
.sib-care .sc-pet svg, .sib-care .sc-pet img{ width:100%; height:100%; display:block; }
.sib-care .sc-name{ font-weight:900; font-size:16px; color:var(--jl-ink); }
.sib-care .sc-hi{ font-size:13px; color:var(--jl-ink-2); margin:6px 0 14px; line-height:1.5; }
.sib-care .sc-acts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.sib-care .sc-act{ padding:12px 6px; border-radius:14px; cursor:pointer; font-weight:800; font-size:13px;
  color:var(--jl-ink-2); background:linear-gradient(180deg,var(--jl-bg-3),var(--jl-bg-2));
  border:2px solid var(--jl-line-3); box-shadow:0 3px 0 var(--jl-line-2); }
.sib-care .sc-act:active{ transform:translateY(2px); box-shadow:none; }
.sib-care .sc-act b{ display:block; font-size:22px; margin-bottom:3px; }

/* ==========================================================================
   §I 弹层兜底（P1-1）· toast 吸顶（P2-⑤）
   P1-1 现象：商店/装扮 modal 高 1675–2094px，被 #game-shell{overflow:hidden} 裁切，
        垂直居中后两端溢出且不可滚 → 手机横屏只见约 1/4 商品。
   修法（三保险，任一形态都能滚到最后一件）：
        ① overlay 自身纵向可滚（内容超高时可滑动）；
        ② align-items:flex-start + modal margin:auto —— 装得下仍居中，装不下则从顶部起滚；
        ③ modal 限高 min(86dvh,640px) 并自身 overflow-y:auto（移动端惯性滚动）。
   ========================================================================== */
.overlay{
  align-items:flex-start;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.overlay .modal{
  max-height:min(86vh, 640px);
  max-height:min(86dvh, 640px);
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  margin:auto;
}
/* 弹层内商品网格：底留一点余量，滚到底不贴边 */
.overlay .oki-grid:last-child{ margin-bottom:2px; }

/* P2-⑤：toast 原 top:18% 落在页面中部遮挡科目卡 → 上移到顶栏之下（吸顶），不再挡内容 */
.toast{ top:calc(env(safe-area-inset-top, 0px) + 68px); }
.toast.mini{ top:auto; }


/* ==========================================================================
   §J 纯云模式首屏 / 同步态（P1-C · docs/cloud-only-architecture-v1.0.md §4）
   - .jlskeleton：拉云期间的骨架屏（方案 A：无本地镜像 → 一律骨架屏等待，拉失败给错误页）
   - .jlsyncbar ：顶部极细同步状态条（同步中 / 待同步），不拦截点击
   ========================================================================== */
.jlskeleton{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center;
  background:linear-gradient(180deg,#f6ead2,#efdcc0);
  color:#6b4a2a; font-weight:800;
}
html[data-theme="pink"] .jlskeleton{ background:linear-gradient(180deg,#fdeef3,#f7dde6); color:#8a4b63; }
.jlskeleton .sk-box{ text-align:center; }
.jlskeleton .sk-spin{
  display:inline-block; width:42px; height:42px; border-radius:50%;
  border:4px solid rgba(0,0,0,.15); border-top-color:currentColor;
  animation:jlspin .9s linear infinite;
}
.jlskeleton .sk-txt{ margin-top:14px; font-size:14px; letter-spacing:.05em; }
@keyframes jlspin{ to{ transform:rotate(360deg); } }

.jlsyncbar{
  position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 8px);
  transform:translate(-50%,-140%); z-index:9500; pointer-events:none;
  padding:4px 12px; border-radius:999px; white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.04em; color:#fff;
  background:rgba(42,111,176,.92); box-shadow:0 4px 12px rgba(0,0,0,.18);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
html[data-theme="pink"] .jlsyncbar{ background:rgba(190,71,114,.92); }
.jlsyncbar.on{ opacity:1; transform:translate(-50%,0); }
.jlsyncbar.warn{ background:rgba(199,122,22,.95); }

/* ---------- P1-G 步骤6（ux-singlepage-v3.1.md C.2/A.3）：学习面板次级行 + 齿轮菜单版本行 ----------
   .sp-row：古诗词 / 学习诊断 / 课外拓展（2~3 枚 auto-fit 均分，非妹妹身份 2 枚）
   .sp-mini：复用 .sp-gw 的木作语汇但紧凑（次级行，不与四科主门牌抢层级）
   .gm-ver：齿轮菜单底部 12px 教材版本小字（原设置一级页信息并入） ---------- */
.study-panel .sp-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:10px; margin-top:12px; }
.sp-mini{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 8px; border-radius:14px; border:3px solid var(--wood-dk);
  background:var(--paper); box-shadow:0 3px 0 var(--wood-dk); cursor:pointer;
  font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.sp-mini:active{ transform:translateY(3px); box-shadow:0 0 0 var(--wood-dk); }
.sp-mini .sp-mini-ico{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; }
.sp-mini .sp-mini-ico svg{ width:22px; height:22px; }
.sp-mini .sp-mini-txt{ font-size:15px; font-weight:800; color:var(--wood-dk); letter-spacing:1px; }
/* F-7：学习面板四科门牌内嵌各科进度条（分母=教材口径，A.7） */
.sp-gate .sp-prog{
  display:block; margin-top:6px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.35); overflow:hidden;
}
.sp-gate .sp-prog u{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#ffd76e,#f5a623); transition:width .3s ease; }
.sp-gate .sp-progtxt{ display:block; margin-top:3px; font-size:11px; font-weight:700;
  color:rgba(255,255,255,.92); text-shadow:0 1px 0 rgba(0,0,0,.18); }
.gear-menu .gm-ver{
  margin-top:12px; padding-top:8px; border-top:1px dashed rgba(154,107,60,.35);
  font-size:12px; line-height:1.6; color:#9a6b3c; text-align:center;
}
/* ---------- nav 删除连带（A.2）：悬浮件底距不再让位已删除的导航条 ----------
   style.css 里 .pet-mini / .rest-tip / .fb 的 bottom 都以 var(--nav-h) 起算
   （当年要叠在导航条上方）；nav 没了之后会悬空 62px。此处收回该让位。 ---------- */
.pet-mini{ bottom:calc(var(--safe-b) + 12px); }
.rest-tip{ bottom:calc(var(--safe-b) + 12px); }
.fb{ bottom:calc(var(--safe-b) + 6px); }

/* ---------- P1-3 竖屏门牌被场景盖住修复（P1-G 主理人批准）：theme-v2.css:341 的
   height:calc(100dvh - nav - 92px) 为 P1-E 时代公式，v3:142 的 height:100% 重置只在横屏
   命中 → 竖屏场景底边压过门牌行。此块在末尾覆盖，保证同特异性靠后胜。 ---------- */
@media (orientation:portrait) and (max-width:759px){
  .crt-home .pet-scene{ height:100%; min-height:0; }
}

/* ==========================================================================
   §H P1 迭代（ux-iteration-v1.0）：商城全屏页 / 道具详情抽屉 / 任务三态 /
       睡觉 / 进食徽章 —— 2026-10-06 寇豆码
   ========================================================================== */

/* ---------- H.1 商城全屏页（§1.1：弹窗 → Router 页 #/shop） ---------- */
.shop-page{ padding:10px 14px 30px; }
/* 分区标题吸顶：#view 是滚动容器（style.css:26），滚动时当前分区名常显 */
.shop-page .shop-zone{
  position:sticky; top:0; z-index:6;
  background:linear-gradient(180deg, var(--jl-bg-1,#FFF9F0) 78%, rgba(255,249,240,0));
  margin:0 -6px; padding:4px 6px;
}
/* 栅格（§1.1）：竖屏单列分区、道具卡 2 列；横屏分区双列、道具卡 3 列 */
.shop-page .oki-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:760px){
  .shop-page .oki-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
/* 图区点击层（→ 详情抽屉）：整块可点，按钮区在下方行为不变 */
.oki-ov{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0; border:none; background:none; cursor:pointer; font:inherit;
}
.oki-ov:active{ transform:scale(.96); }
/* 已购态正反馈徽标（§4.2：价格位「✓ 已拥有」） */
.oki-owned{
  display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:999px;
  font-size:11.5px; font-weight:800; color:#3d7a46;
  background:linear-gradient(180deg,#EAF7EC,#CDE9D2);
  border:2px solid #8FBF6E;
}

/* ---------- H.2 道具详情抽屉（§1.2：半屏抽屉，不新开 hash，关闭回货架） ---------- */
.item-drawer-wrap{ position:fixed; inset:0; z-index:95; background:rgba(20,26,34,.42); }
.item-drawer{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(560px,100%); max-height:86dvh; overflow-y:auto;
  background:var(--jl-bg-1,#FFFDF6);
  border:3px solid var(--jl-line-2,#B98A5E); border-bottom:none;
  border-radius:22px 22px 0 0;
  padding:16px 18px calc(22px + var(--safe-b,0px));
  box-shadow:0 -8px 24px rgba(60,40,20,.25);
  animation:kf-drawer-up .26s cubic-bezier(.3,.9,.3,1) both;
}
@keyframes kf-drawer-up{ from{ transform:translateX(-50%) translateY(40%); opacity:.4; } to{ transform:translateX(-50%) translateY(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .item-drawer{ animation:none; } }
.id-close{
  position:absolute; right:12px; top:12px; width:32px; height:32px; border-radius:50%;
  border:2px solid var(--jl-line-2,#B98A5E); background:#fff; font-size:14px; font-weight:800;
  color:var(--jl-ink,#2E3B4A); cursor:pointer;
}
.id-bigbox{ display:flex; justify-content:center; align-items:center; min-height:150px; margin-bottom:6px; }
.id-big{ width:min(230px,58vw); height:auto; }
.id-big-oki{ width:120px; height:120px; font-size:56px; }
.id-big-oki .oki-ic{ font-size:56px; }
.id-name{ font-size:17px; font-weight:800; color:var(--jl-ink,#2E3B4A); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.id-name .tag{ font-size:11px; }
.id-fam{ margin-top:4px; font-size:12.5px; font-weight:700; color:#9a6b3c; }
.id-desc{ margin-top:6px; font-size:13px; line-height:1.65; color:var(--jl-ink-2,#4a5568); }
.id-meta{
  margin-top:8px; display:inline-block; padding:4px 12px; border-radius:999px;
  font-size:12.5px; font-weight:800; color:#7A5210;
  background:linear-gradient(180deg,#FFF3CF,#F7D98C); border:2px solid var(--jl-gold,#F0C060);
}
.id-prev{ margin-top:14px; padding-top:12px; border-top:2px dashed rgba(154,107,60,.30); text-align:center; }
.id-prevnote{ margin-top:8px; font-size:11.5px; color:#9a6b3c; }
.id-note{
  margin-top:12px; padding:10px 12px; border-radius:14px; font-size:12.5px; line-height:1.6;
  color:#7A5210; background:linear-gradient(180deg,#FFF7E4,#FBEBC4); border:2px dashed var(--jl-gold,#F0C060);
}
/* 试穿预览宠（§1.3 layer：复用 .pet-layers 机制，独立小尺寸容器） */
.acc-preview .acc-prev-pet{ width:190px; height:190px; margin:0 auto; position:relative; }
.acc-preview .acc-prev-pet .pet-img{ width:100%; height:100%; object-fit:contain; }
/* 满装图 + 高亮框（§1.3 fulldress：scarf 件专用，无双围巾） */
.fd-box{ position:relative; display:inline-block; }
.fd-img{ width:min(250px,64vw); border-radius:16px; border:3px solid var(--jl-line-3,#C4DAEC); display:block; }
.fd-hint{
  position:absolute; width:60px; height:22px; margin:-11px 0 0 -30px;
  border:3px dashed #E8556E; border-radius:50%; pointer-events:none;
  animation:kf-fd-pulse 1.6s ease-in-out infinite;
}
@keyframes kf-fd-pulse{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.18); opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .fd-hint{ animation:none; } }

/* ---------- H.3 任务面板三态（§3.1） ---------- */
.tp-item{ display:flex; align-items:center; gap:8px; }
.tp-item.todo{ opacity:1; }
.tp-go{
  margin-left:auto; padding:5px 12px; border-radius:999px; border:none; cursor:pointer;
  font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#FF9ABB,#F76E9C);
  box-shadow:0 2px 0 #d9547f;
}
.tp-go:active{ transform:translateY(1px); box-shadow:none; }
.tp-wait{ margin-left:auto; font-size:11.5px; font-weight:700; color:#9aa4b2; }
.tp-got{ margin-left:auto; font-size:11.5px; font-weight:800; color:#3d7a46; }

/* ---------- H.4 睡觉 / 进食徽章（§2.1/§2.2） ---------- */
/* 「🍚 进食中」徽章：头顶小胶囊，refreshPetHUD 按 feedUntil 显隐 */
.pet-eat-badge{
  position:absolute; left:50%; top:-24px; transform:translateX(-50%);
  z-index:7; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:800; font-style:normal; white-space:nowrap;
  color:#7A5210; background:rgba(255,255,255,.96);
  border:2px solid var(--jl-gold,#F0C060);
  box-shadow:0 3px 8px rgba(120,90,20,.15);
  animation:kf-eat-badge 2.2s ease-in-out infinite;
}
.pet-eat-badge.hide{ display:none; }
@keyframes kf-eat-badge{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .pet-eat-badge{ animation:none; } }
/* 宠物详情弹层进食行 */
.pd-eat{
  margin:6px auto 0; display:inline-block; padding:3px 12px; border-radius:999px;
  font-size:12px; font-weight:800; color:#7A5210;
  background:linear-gradient(180deg,#FFF3CF,#F7D98C); border:2px solid var(--jl-gold,#F0C060);
}

/* ==========================================================================
   §K 装扮面板 dressMode（docs/ux-dress-panel-v1.0.md）
   横屏：接替右坞（.crt-dock 内，门下折叠成一行小图标）；竖屏：fixed 底部抽屉。
   ★ 宠物缩放/上移只落在 .pet-dressstage（唯一不与 PetMotion 覆写 transform 冲突的层）；
     横屏该层不产生任何位移 → 宠物像素级不动。
   ★ 命中区硬线：Tab / 候选件 / 按钮一律 ≥44px（验收 #5 走 elementFromPoint）。
   ========================================================================== */

/* ---------- K.1 宠物缩放/上移宿主（无条件铺满 .pet-stage，保持 .pet-actor 坐标原点不变） ---------- */
.crt-home .pet-dressstage{ position:absolute; inset:0; }
/* 竖屏：缩幅 ≤15%（.88）+ 上移 6%（下巴线以上留出抽屉） */
@media (max-width:639px), (max-aspect-ratio:1/1){
  .crt-home.dressmode .pet-dressstage{
    transform:translateY(-6%) scale(.88);
    transition:transform .26s cubic-bezier(.34,0,.64,1);
  }
  /* 竖屏装扮态：底栏留在布局里（保住场景高度 → 宠物不挪位）但内容藏起来，由抽屉覆盖 */
  .crt-home.dressmode .crt-dock{ visibility:hidden; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
  .crt-home.dressmode .pet-dressstage{ transition:none; }
}

/* ---------- K.2 面板骨架（横竖屏共用） ---------- */
.dress-panel{ display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0; }
.dp-head{ position:relative; display:flex; align-items:center; gap:8px; min-height:44px; flex:0 0 auto; }
.dp-grip{ display:none; }
.dp-title{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; color:var(--jl-ink-1,#5A4632); }
.dp-setname{ font-size:11px; font-weight:700; color:var(--jl-ink-3,#9A8B7A);
  background:var(--jl-bg-3,#F3E7DA); border-radius:999px; padding:1px 8px; }
.dp-done{ margin-left:auto; min-height:44px; padding:0 14px; border-radius:999px; cursor:pointer;
  font-weight:800; font-size:13px; color:#fff; border:none;
  background:linear-gradient(180deg,#8FD08A,#5FAF5A); box-shadow:0 3px 0 #4A8F46;
  -webkit-tap-highlight-color:transparent; transition:transform .1s ease, box-shadow .1s ease; }
.dp-done:active{ transform:translateY(2px); box-shadow:0 1px 0 #4A8F46; }
.dp-sleep{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:#7A6A9A;
  background:#EFE9FA; border-radius:10px; padding:3px 10px; }

/* Tab 行：8 枚（7 槽 + 化妆）。flex + min-width 44 → 挤不下则横滑，命中区始终 ≥44 */
.dp-tabs{ display:flex; gap:4px; flex:0 0 auto; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.dp-tabs::-webkit-scrollbar{ display:none; }
.dp-tab{ flex:1 1 0; min-width:44px; min-height:44px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; cursor:pointer;
  border-radius:12px; background:#fff; border:2px solid var(--jl-line,#E6D8C8);
  -webkit-tap-highlight-color:transparent; }
.dp-tab-ic{ font-size:18px; line-height:1; }
.dp-tab-lb{ font-size:10.5px; font-weight:800; color:var(--jl-ink-2,#7A6858); white-space:nowrap; }
.dp-tab.on{ background:linear-gradient(180deg,#FFF3CF,#F7D98C); border-color:var(--jl-gold,#F0C060); }
.dp-tab:disabled{ opacity:.45; }

/* 主体区（网格 / 化妆 / 蛋期禁用）独立滚动 */
.dp-body{ flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
.dp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:2px; }
.dp-cell{ min-height:85px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:4px; border-radius:14px; cursor:pointer; background:#fff;
  border:2px solid var(--jl-line,#E6D8C8); position:relative;
  -webkit-tap-highlight-color:transparent; }
.dp-cell.sel{ border-color:var(--jl-gold,#F0C060); background:linear-gradient(180deg,#FFF9E6,#FCEFC4); }
.dp-cell-ic{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:26px; }
.dp-cell-ic img{ max-width:100%; max-height:100%; object-fit:contain; }
.dp-cell-nm{ max-width:100%; font-size:11px; font-weight:800; color:var(--jl-ink-1,#5A4632);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-cell.lock{ filter:grayscale(.78); opacity:.6; cursor:default; }
.dp-cell.lock .dp-cell-nm{ color:var(--jl-ink-3,#9A8B7A); }
.dp-lock{ position:absolute; right:4px; top:4px; font-size:12px; font-style:normal; }
.dp-on{ position:absolute; right:4px; top:4px; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-style:normal;
  font-weight:900; color:#fff; background:#5FAF5A; }
.dp-cell.dp-none{ border-style:dashed; }
.dp-cell.dp-none .dp-cell-ic{ font-size:30px; color:#C6B7A6; }

/* 化妆 Tab */
.dp-mk-wrap{ display:flex; flex-direction:column; gap:14px; padding:6px 2px; }
.dp-mk-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dp-mk-lb{ flex:0 0 auto; font-size:12px; font-weight:800; color:var(--jl-ink-2,#7A6858); }
.dp-mk-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.dp-mk-opt{ display:flex; align-items:center; gap:6px; min-height:44px; min-width:44px; padding:0 12px;
  border-radius:12px; cursor:pointer; font-weight:800; font-size:12px; color:var(--jl-ink-1,#5A4632);
  background:#fff; border:2px solid var(--jl-line,#E6D8C8); -webkit-tap-highlight-color:transparent; }
.dp-mk-opt.sel{ border-color:var(--jl-gold,#F0C060); background:linear-gradient(180deg,#FFF9E6,#FCEFC4); }
.dp-mk-sw{ width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(0,0,0,.12);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#BBA; }

/* 底部操作行：成套试穿 + 存为形象 + 形象条（横滑） */
.dp-foot{ flex:0 0 auto; display:flex; align-items:center; gap:8px; min-height:52px;
  overflow-x:auto; padding:2px; scrollbar-width:none; }
.dp-foot::-webkit-scrollbar{ display:none; }
.dp-sets{ display:flex; gap:8px; flex:0 0 auto; }
.dp-setbtn{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:4px 12px; border-radius:12px; cursor:pointer;
  font-weight:800; font-size:12px; color:var(--jl-ink-1,#5A4632); white-space:nowrap;
  background:linear-gradient(180deg,#FFF6EE,#F6E7D6); border:2px solid var(--jl-line,#E6D8C8);
  -webkit-tap-highlight-color:transparent; }
.dp-setbtn:active{ transform:translateY(1px); }
.dp-miss{ font-size:10px; font-weight:700; color:#C97A2E; font-style:normal; }
.dp-full{ font-size:10px; font-weight:700; color:#5FAF5A; font-style:normal; }
.dp-save{ flex:0 0 auto; min-height:44px; min-width:44px; padding:0 12px; border-radius:12px; cursor:pointer;
  font-weight:800; font-size:12px; color:#7A6A9A; background:#EFE9FA; border:2px solid #DAD0F0;
  white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.dp-looks{ display:flex; gap:6px; flex:0 0 auto; }
.dp-look{ min-height:44px; min-width:44px; padding:0 12px; border-radius:12px; cursor:pointer;
  font-weight:800; font-size:12px; color:var(--jl-ink-2,#7A6858); white-space:nowrap;
  background:#fff; border:2px dashed var(--jl-line,#E6D8C8); -webkit-tap-highlight-color:transparent; }
.dp-disabled{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; text-align:center; font-size:14px; font-weight:800; color:var(--jl-ink-2,#7A6858); }
.dp-disabled small{ font-size:11.5px; font-weight:600; color:var(--jl-ink-3,#9A8B7A); }

/* ---------- K.3 横屏：接替右坞（门牌折叠成一行 32–40px 小图标） ---------- */
@media (min-width:640px) and (min-aspect-ratio:1/1){
  .crt-home.dressmode .crt-dock{ gap:6px; }
  .crt-home.dressmode .crt-dock .crt-sib,
  .crt-home.dressmode .crt-dock .crt-loopbar{ display:none; }
  .crt-home.dressmode .crt-dock .crt-doors{ grid-template-columns:repeat(5,1fr); gap:6px; }
  .crt-home.dressmode .crt-dock .crt-doors .door-tile{ height:40px; border-radius:12px; }
  .crt-home.dressmode .crt-dock .crt-doors .door-tile .dt-lbl{ display:none; }
  .crt-home.dressmode .crt-dock .crt-doors .door-tile .dt-ico{ font-size:20px; }
  .crt-home.dressmode .crt-dock .crt-doors .door-tile .dt-ico svg{ width:22px; height:22px; }
  .crt-home.dressmode .dress-panel{ flex:1 1 auto; min-height:0; }
  .crt-home.dressmode .dress-panel .dp-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; overflow:visible; }
  .crt-home.dressmode .dress-panel .dp-tab{ flex-direction:row; gap:4px; min-height:44px; }
  .crt-home.dressmode .dress-panel .dp-tab-lb{ font-size:11px; }
  .crt-home.dressmode .dress-panel .dp-grid{ grid-template-columns:repeat(3,1fr); }
  .crt-home.dressmode .dress-panel .dp-cell{ min-height:100px; }
}

/* ---------- K.4 竖屏：fixed 底部抽屉（从场景下沿拉起） ---------- */
@media (max-width:639px), (max-aspect-ratio:1/1){
  .dress-panel.is-drawer{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    /* ★ 43dvh（游有方批准区间 42–46dvh）：实测 390×844 参考机上 46dvh 会切到下巴线
       （下巴 468 vs 抽屉上沿 456），43dvh 上沿 481 → 下巴留 ~13px。§四.3 硬要求 #1 优先。 */
    height:clamp(300px,43dvh,420px);
    padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,#FFFBF4,#F7EEDF);
    border-top:3px solid var(--wood-dk,#7A4553);
    border-radius:20px 20px 0 0;
    box-shadow:0 -10px 30px rgba(90,60,40,.22);
    animation:dp-drawer-in .24s cubic-bezier(.2,.9,.3,1);
  }
  .dress-panel.is-drawer .dp-grip{
    display:block; position:absolute; left:50%; top:7px; transform:translateX(-50%);
    width:40px; height:4px; border-radius:2px; background:#D8C7B4; }
  .dress-panel.is-drawer .dp-head{ min-height:44px; margin-top:6px; }
  /* 8 枚 Tab 贴合 390 宽：8×44 + 7×2 = 366 = 390 − 24（抽屉左右 padding 12） */
  .dress-panel.is-drawer .dp-tabs{ gap:2px; }
}
@keyframes dp-drawer-in{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .dress-panel.is-drawer{ animation:none; } }

/* 超窄屏（<360）：网格降到 3 列（§八 风险 1） */
@media (max-width:359px){ .dress-panel .dp-grid{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   §J P1-I · 被照顾轻提示 #sibTy（进庭院右上浮条 · docs/ux-sib-tip-v1.0.md）
   「姐姐帮你照顾了宠物」——被动态，与坞内主动态小牌 .crt-sib 是亲兄弟，
   故视觉语言照抄（同一条信息应长得像一家人）。场景内右上角 → 天然不遮挡宠物。
   ========================================================================== */
.pet-scene > .sib-ty{
  position:absolute; top:12px; right:12px; z-index:6;
  display:flex; align-items:center; gap:7px; max-width:66%;
  padding:8px 12px; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg,#FFF0F5 0%, #FBD9E4 100%);
  border:2px solid var(--wood-dk,#7A4553); color:var(--wood-dk,#7A4553);
  box-shadow:0 3px 0 var(--wood-dk,#7A4553);
  opacity:0; transform:translateY(-8px);
  transition:opacity .22s ease-out, transform .22s ease-out;
}
.pet-scene > .sib-ty.show{ opacity:1; transform:translateY(0); }
.pet-scene > .sib-ty.out{ opacity:0; transform:translateY(-6px); transition-duration:.30s; }
.sib-ty .st-ico{ font-size:16px; line-height:1; flex:0 0 auto; }
.sib-ty .st-tx{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.sib-ty .st-tx b{ font-weight:800; font-size:13px; }
.sib-ty .st-tx small{ font-weight:700; font-size:11px; color:var(--jl-ink-3); }

/* ==========================================================================
   ★ P1-F：庭院装饰套组主题（bamboo 默认；sakura 粉调 / star 蓝夜，靠色罩呈现氛围变化，本轮不出新 SVG）
   装饰套切换写 pet.decorSet → renderCourtyard 在 .crt-home 上增删 .ds-* ；切套后庭院明显变色。
   ========================================================================== */
.crt-home.ds-sakura .pet-scene::after{ content:''; position:absolute; inset:0; pointer-events:none; background: rgba(255,150,190,.16); mix-blend-mode:multiply; }
.crt-home.ds-star   .pet-scene::after{ content:''; position:absolute; inset:0; pointer-events:none; background: rgba(80,120,255,.20); mix-blend-mode:multiply; }
@media (prefers-reduced-motion: reduce){ .pet-scene > .sib-ty{ transition:none; } }