/* 小龙大胃王 · 界面样式（ui/*.js 用）。
   风格：暖色羊皮纸面板 + 金边 + 深棕描边（和卡通描边的 3D 画面一致）；主按钮是宝石色（火龙橙红 / 海龙青蓝）。
   图标：LightAI 画的图集 img/ui/icons.webp（网址带版本号，由 ui.js 写进变量 --pi-sheet；根节点有 .pi-ok 时显示），没加载好就显示内联 SVG。
   字体：全部用思源黑体（Source Han Sans SC，本地子集 fonts/sans.woff2）；标题 800 粗，正文 500
   尺寸：--s 是整体缩放（宽屏 ≥ 480px 时 1.2），只缩放框和图标，不缩放像素字 */
.dui{
  --ink:#2a1a14; --txt:#4a2a14; --txt2:#8a6038;
  --p1:#fffaf0; --p2:#f8e8c4; --p3:#ecd29e; --p4:#c99e5e;
  --g1:#ffeaa0; --g2:#f2bd3e; --g3:#b97c18;
  --fa:#ffc061; --fb:#f2722c; --fc:#b8361c; --sa:#8ff0e2; --sb2:#26aab4; --sc:#146a8a; --gold:#ffd23f;
  --k1:var(--fa); --k2:var(--fb); --k3:var(--fc); --kt:#8a2e10;
  --s:1;
  --fT:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --fP:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --st:max(6px,env(safe-area-inset-top,0px)); --sbm:max(8px,env(safe-area-inset-bottom,0px));
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --o1:1px 0 0 var(--ink),-1px 0 0 var(--ink),0 1px 0 var(--ink),0 -1px 0 var(--ink),1px 1px 0 var(--ink),-1px 1px 0 var(--ink),1px -1px 0 var(--ink),-1px -1px 0 var(--ink);
  --o2:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),0 4px 0 var(--ink),0 6px 10px rgba(0,0,0,.3);
  --o3:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),2.2px 2.2px 0 var(--ink),-2.2px 2.2px 0 var(--ink),2.2px -2.2px 0 var(--ink),-2.2px -2.2px 0 var(--ink),0 6px 0 var(--ink),0 9px 16px rgba(0,0,0,.3);
  /* 缎带上的字：描边 + 薄一点的下沿（--o2 的 4px 下沿在 42px 高的缎带里会顶到底边，看着脏） */
  --o2r:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),0 3px 0 var(--ink);
  /* 羊皮纸：底色 + 内圈金边 + 内高光 + 下沿厚度 */
  --paper:linear-gradient(180deg,var(--p1),var(--p2) 55%,var(--p3));
  --rim:inset 0 0 0 2.5px var(--g2), inset 0 0 0 4.5px rgba(255,255,255,.55);
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5;
  color:#fff; font:500 12px/1.2 var(--fP); letter-spacing:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.dui.d-wide{ --s:1.2; }
.dui.d-narrow{ --s:.9; }
.dui.d-sea{ --k1:var(--sa); --k2:var(--sb2); --k3:var(--sc); --kt:#0e5068; }
.dui *{ box-sizing:border-box; }
.dui [hidden]{ display:none !important; }
.dui .d-probe{ position:absolute; visibility:hidden; pointer-events:none; width:0; height:0;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }

/* ---------- 图标：SVG（备用）/ 图集（.pi-ok 时） ---------- */
.dui .ic{ width:1em; height:1em; display:block; flex:none; overflow:visible; fill:currentColor; stroke:var(--ink); stroke-width:2.4; stroke-linejoin:round; paint-order:stroke; }
.dui .ic .a{ fill:#ffd34d; }
.dui .ic .d{ fill:var(--ink); stroke:none; }
.dui .ic path[fill="none"]{ fill:none; }
.dui .ic.stun{ color:var(--gold); }
.dui .ic.fb{ color:#f4e6c8; }
.dui span.ic{ position:relative; background-repeat:no-repeat; }
.dui span.ic > svg{ position:static !important; left:auto !important; top:auto !important; width:100% !important; height:100% !important; margin:0 !important; transform:none !important; }
.dui.pi-ok span.ic{ background-image:var(--pi-sheet); }
/* 看不见的标记（opacity 0）里一直跑的动画先停着（hud.js 的 setOp 加 .d-off） */
.dui .d-off,.dui .d-off *{ animation-play-state:paused !important; }
.dui.pi-ok span.ic > svg{ display:none; }

/* ---------- 按钮 ---------- */
.dui button{ font:inherit; color:inherit; margin:0; padding:0; border:0; background:none; -webkit-appearance:none; appearance:none; }
.dui .d-sbtn,.dui .d-btn,.dui .d-big,.dui .d-act,.dui .d-skill,.dui .d-card{ pointer-events:auto; touch-action:none; cursor:pointer; }
/* 角上的小按钮：羊皮纸方块 + 图标 + 两个字 */
.dui .d-sbtn{ position:absolute; top:calc(var(--st) + 6px); width:calc(54px * var(--s)); height:calc(58px * var(--s)); border-radius:16px;
  background:linear-gradient(180deg,#fbe6bc,#ecc887 55%,#d8a764); border:2.5px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:12px; line-height:12px; color:var(--txt); box-shadow:var(--rim), 0 3px 0 var(--ink), 0 5px 8px rgba(0,0,0,.2); transition:opacity .25s, transform .1s; }
.dui .d-sbtn .ic{ font-size:calc(30px * var(--s)); }
.dui .d-menu{ left:calc(var(--sl) + 8px); }
.dui .d-sound{ right:calc(var(--sr) + 8px); }
.dui .d-sbtn.off{ color:var(--txt2); }
.dui .down{ transform:translateY(2px) scale(.95); }
.dui.d-drag .d-hud .d-menu,.dui.d-drag .d-hud .d-sound{ opacity:.4; }

/* 面板按钮：羊皮纸 */
.dui .d-btn{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 18px; border-radius:16px;
  background:var(--paper); border:2.5px solid var(--ink); color:var(--txt); font-size:24px; line-height:24px;
  box-shadow:inset 0 2px 0 #fff, inset 0 -4px 0 rgba(176,120,52,.35), 0 4px 0 var(--ink), 0 6px 10px rgba(0,0,0,.18); transition:transform .1s, box-shadow .1s; }
.dui .d-btn .ic{ font-size:32px; }
.dui .d-btn span,.dui .d-big span,.dui .d-sbtn span{ white-space:nowrap; }
.dui .d-btn.down{ transform:translateY(3px); box-shadow:inset 0 2px 0 #fff, inset 0 -3px 0 rgba(176,120,52,.35), 0 1px 0 var(--ink); }
/* 主按钮：宝石色 + 金边 + 白字深描边 */
.dui .d-btn.d-main,.dui .d-big{ color:#fff; text-shadow:var(--o1);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.55),transparent 45%),linear-gradient(180deg,var(--fa),var(--fb) 58%,var(--fc));
  box-shadow:inset 0 0 0 2.5px rgba(255,236,190,.85), inset 0 -6px 0 rgba(90,20,0,.25), 0 4px 0 var(--ink), 0 7px 14px rgba(0,0,0,.25); }
.dui .d-btn.d-main.sea,.dui .d-big.sea,.dui .d-result.sea .d-btn.d-main{
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.55),transparent 45%),linear-gradient(180deg,var(--sa),var(--sb2) 58%,var(--sc));
  box-shadow:inset 0 0 0 2.5px rgba(220,255,250,.85), inset 0 -6px 0 rgba(0,40,60,.25), 0 4px 0 var(--ink), 0 7px 14px rgba(0,0,0,.25); }
.dui .d-big{ display:flex; align-items:center; justify-content:center; gap:12px; height:64px; min-width:196px; padding:0 30px; border-radius:32px; border:3px solid var(--ink);
  font-size:24px; line-height:24px; transition:transform .1s; }
.dui .d-big .ic{ font-size:36px; }
.dui .d-big.down{ transform:translateY(3px) scale(.98); }
.dui .busy{ opacity:.6; }

/* ---------- 面板 / 整屏 ---------- */
.dui .d-full{ position:absolute; inset:0; pointer-events:auto; touch-action:none; opacity:0; transition:opacity .25s; }
.dui .d-full.d-show{ opacity:1; }
.dui .d-full:not(.d-show){ pointer-events:none; }
.dui .d-dim{ background:rgba(22,14,26,.55); display:flex; align-items:center; justify-content:center; }
.dui .d-panel{ position:relative; background:var(--paper); border:3px solid var(--ink); border-radius:24px; color:var(--txt);
  box-shadow:var(--rim), 0 6px 0 var(--ink), 0 14px 30px rgba(0,0,0,.35); }
/* 面板顶上的金色缎带标题 */
.dui .d-ribbon{ position:absolute; left:50%; top:-22px; transform:translateX(-50%); display:flex; align-items:center; gap:6px; height:40px; padding:0 20px; border-radius:12px; white-space:nowrap;
  background:linear-gradient(180deg,var(--g1),var(--g2) 60%,var(--g3)); border:3px solid var(--ink); box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--ink);
  font:800 28px/1 var(--fT); color:#fff; text-shadow:var(--o2r); }
.dui .d-ribbon .ic{ font-size:30px; }

/* ---------- HUD ---------- */
.dui .d-hud{ position:absolute; inset:0; pointer-events:none; }
.dui .d-hud > *{ pointer-events:none; }
.dui .d-hud > .d-sbtn,.dui .d-hud > .d-act,.dui .d-hud > .d-skill{ pointer-events:auto; }

/* 成长条：三个阶段头像 + 两段进度 */
.dui .d-grow{ position:absolute; top:calc(var(--st) + 8px); left:calc(var(--sl) + 8px + 58px * var(--s)); right:calc(var(--sr) + 8px + 58px * var(--s));
  display:flex; flex-direction:column; align-items:center; }
.dui .d-gbar,.dui .d-cbar{ position:relative; display:flex; align-items:center; width:100%; max-width:calc(280px * var(--s)); height:calc(44px * var(--s)); padding:0 2px; }
.dui .d-node{ position:relative; z-index:1; flex:none; width:calc(40px * var(--s)); height:calc(40px * var(--s)); border-radius:50%; font-style:normal;
  background:radial-gradient(circle at 50% 35%,#fff4d8,#d9b47a); border:2.5px solid var(--ink); box-shadow:0 3px 0 var(--ink); transition:width .3s, height .3s; }
.dui .d-nh{ position:absolute; inset:-2px; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:visible; }
.dui .d-nh .ic{ font-size:calc(46px * var(--s)); color:#f4e0c0; }
.dui .d-node.cur .d-nh .ic{ font-size:calc(54px * var(--s)); }
.dui .d-node:not(.on) .d-nh{ filter:grayscale(.9) brightness(.85) contrast(.9); opacity:.8; }
.dui .d-node em{ position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); min-width:20px; height:18px; padding:0 3px; border-radius:9px;
  font:500 12px/14px var(--fP); text-align:center; color:var(--txt); background:var(--p2); border:2px solid var(--ink); }
.dui .d-node.on em{ color:#fff; background:linear-gradient(180deg,var(--k2),var(--k3)); text-shadow:var(--o1); }
.dui .d-node.cur{ width:calc(47px * var(--s)); height:calc(47px * var(--s)); box-shadow:0 0 0 3px var(--g1), 0 0 0 5px var(--ink), 0 3px 0 5px var(--ink); }
.dui .d-seg{ position:relative; flex:1; height:calc(15px * var(--s)); margin:0 -4px; border-radius:8px; overflow:hidden; background:rgba(42,26,20,.62); border:2.5px solid var(--ink); }
.dui .d-seg u{ position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); text-decoration:none; transition:transform .3s ease-out;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 50%),linear-gradient(90deg,var(--k1),var(--k2)); }
.dui .d-hurt{ position:absolute; inset:-2px; border-radius:14px; background:rgba(255,60,50,.6); opacity:0; pointer-events:none; }
.dui .d-grow.ready .d-node.cur + .d-seg{ animation:d-glow 1.2s ease-in-out infinite; }
@keyframes d-glow{ 50%{ box-shadow:0 0 10px 3px rgba(255,236,160,.85); } }
.dui .d-cbar{ display:none; gap:6px; }
.dui .d-cbic .ic{ font-size:calc(36px * var(--s)); }
.dui .d-cbar .d-seg{ margin:0; }
.dui .d-cbar .d-seg u{ background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 50%),linear-gradient(90deg,var(--g1),var(--g2)); }
.dui .d-ctxt{ font-size:12px; line-height:12px; padding:3px 5px; border-radius:8px; background:var(--p2); color:var(--txt); border:2px solid var(--ink); }
.dui .d-grow.adult .d-gbar{ display:none; }
.dui .d-grow.adult .d-cbar{ display:flex; }
/* 下一阶段：能力（灰 + 小锁）| 能吃的（剪影） */
.dui .d-next{ margin-top:calc(12px * var(--s)); display:flex; align-items:center; gap:6px; padding:3px 8px; border-radius:18px;
  background:rgba(255,248,228,.88); border:2px solid var(--ink); box-shadow:0 2px 0 var(--ink); }
.dui .d-grow.adult .d-next{ margin-top:calc(4px * var(--s)); }
.dui .d-nab,.dui .d-nsp{ display:flex; align-items:center; gap:3px; }
.dui .d-nab:not([hidden]) + .d-nsp:not([hidden]){ padding-left:6px; border-left:2px solid rgba(74,42,20,.3); }
.dui .d-abl{ position:relative; width:calc(35px * var(--s)); height:calc(35px * var(--s)); }
.dui .d-abl > .ic{ font-size:calc(35px * var(--s)); filter:grayscale(.5) brightness(.95); opacity:.8; }
.dui .d-abl > i{ position:absolute; right:-5px; bottom:-4px; }
.dui .d-abl > i .ic{ font-size:calc(16px * var(--s)); color:#e9d9b6; }
.dui .d-sil{ width:calc(30px * var(--s)); height:calc(30px * var(--s)); display:flex; align-items:center; justify-content:center; }
.dui .d-sil img{ width:100%; height:100%; object-fit:contain; filter:brightness(0); opacity:.5; }
.dui .d-sil .ic{ font-size:calc(22px * var(--s)); color:#7a5a3a; }

/* 连吃 */
.dui .d-combo{ position:absolute; top:calc(var(--st) + 116px * var(--s)); left:calc(var(--sl) + 14px); display:flex; align-items:baseline; font-family:var(--fT); text-shadow:var(--o2);
  color:var(--g1); opacity:0; visibility:hidden; transform-origin:30% 60%; }
.dui .d-combo i{ font-style:normal; font-size:28px; margin-right:1px; color:#fff; }
.dui .d-combo b{ font-weight:normal; font-size:44px; line-height:1; }

/* 小目标卡（右上，声音键下面） */
.dui .d-goal{ position:absolute; top:calc(var(--st) + 112px * var(--s)); right:calc(var(--sr) + 8px); max-width:calc(50% - 16px); height:calc(60px * var(--s));
  display:flex; align-items:center; gap:6px; padding:4px 12px 4px 5px; border-radius:18px; white-space:nowrap;
  background:var(--paper); border:2.5px solid var(--ink); box-shadow:var(--rim), 0 3px 0 var(--ink), 0 5px 8px rgba(0,0,0,.2); color:var(--txt); transform-origin:90% 50%; }
.dui .d-gpic{ position:relative; flex:none; width:calc(46px * var(--s)); height:calc(46px * var(--s)); border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,#fff,#ecd6a8); box-shadow:inset 0 0 0 2px rgba(150,100,40,.35); }
.dui .d-gpic img{ width:92%; height:92%; object-fit:contain; }
.dui .d-gpic .ic{ font-size:calc(36px * var(--s)); }
.dui .d-goal .ic.fb{ font-size:calc(30px * var(--s)); color:#7a5a3a; }
/* 海龙「撞晕后吃」：冲刺图标 + 右上角一颗小星星 */
.dui .d-gstun{ position:relative; display:flex; }
.dui .d-gstun > i{ position:absolute; right:calc(-13px * var(--s)); top:calc(-14px * var(--s)); }
.dui .d-gstun > i .ic{ font-size:calc(20px * var(--s)); }
.dui .d-x{ font:800 36px/1 var(--fT); color:var(--gold); text-shadow:var(--o2); }
/* 「长大」目标：下一阶段的头像（画的金框圆章）+ 右下角绿色上箭头；不写数字，卡片只剩头像 */
.dui .d-ggrow{ position:relative; display:flex; }
.dui .d-gpic .d-ggrow > .ic{ font-size:calc(50px * var(--s)); }
.dui .d-ggrow > i{ position:absolute; right:calc(-7px * var(--s)); bottom:calc(-5px * var(--s)); width:calc(22px * var(--s)); height:calc(22px * var(--s)); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#8ff0a0,#2fae54); border:2px solid var(--ink); box-shadow:0 2px 0 var(--ink); }
.dui .d-gpic .d-ggrow > i .ic{ font-size:calc(14px * var(--s)); color:#fff; stroke-width:3; }
.dui .d-goal.grow{ padding-right:7px; }
.dui .d-goal.grow .d-gnum{ display:none; }
.dui .d-goal.grow .d-gpic{ background:none; box-shadow:none; }
.dui .d-gnum{ display:flex; align-items:baseline; min-width:0; overflow:hidden; font-size:24px; line-height:26px; white-space:nowrap; }
.dui .d-gnum b{ font-weight:normal; display:inline-block; color:var(--kt); }
.dui .d-gnum i{ font-style:normal; color:var(--txt2); }
.dui .d-gchk{ position:absolute; right:-6px; top:-10px; width:28px; height:28px; border-radius:50%; background:linear-gradient(180deg,#7be38e,#2fae54); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.4); transition:opacity .15s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.dui .d-gchk .ic{ font-size:18px; color:#fff; }
.dui .d-goal.done{ box-shadow:inset 0 0 0 2.5px #5fd47a, inset 0 0 0 4.5px rgba(255,255,255,.55), 0 3px 0 var(--ink), 0 5px 8px rgba(0,0,0,.2); }
.dui .d-goal.done .d-gchk{ opacity:1; transform:scale(1); }

/* 屏幕上的标记（位置全靠 transform） */
.dui .d-marks{ position:absolute; inset:0; }
.dui .d-marks > div{ position:absolute; left:0; top:0; will-change:transform,opacity; visibility:hidden; }
.dui .d-arw{ width:0; height:0; }
.dui .d-arw > div{ position:absolute; left:-16px; top:-16px; width:32px; height:32px; animation:d-bob .8s ease-in-out infinite; }
.dui .d-arw .ic{ font-size:32px; color:#fff; }
.dui .d-arw.gold .ic{ color:var(--gold); }
@keyframes d-bob{ 50%{ transform:translateY(-5px); } }
.dui .d-bang{ width:0; height:0; }
.dui .d-bang > div{ position:absolute; left:-17px; top:-17px; width:34px; height:34px; border-radius:50%; background:linear-gradient(180deg,#ff7a5a,#e03424); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 2px 0 var(--ink); }
.dui .d-bang .ic{ font-size:20px; color:#fff; }
.dui .d-bang.chase > div{ animation:d-pulse .5s ease-in-out infinite alternate; }
@keyframes d-pulse{ to{ transform:scale(1.14); } }
.dui .d-tag{ width:0; height:0; }
.dui .d-tag .ic{ position:absolute; left:-13px; top:-13px; font-size:26px; color:#ffb347; }
.dui .d-tag.lk .ic{ left:-21px; color:#e8eef5; }
.dui .d-tag i{ position:absolute; left:2px; top:-11px; width:22px; height:22px; border-radius:50%; font:500 12px/18px var(--fP); font-style:normal; text-align:center;
  color:#fff; background:linear-gradient(180deg,var(--k2),var(--k3)); border:2px solid var(--ink); text-shadow:var(--o1); }
/* 锁定圈：金色四段弧 + 向内的小三角，慢转 + 轻轻呼吸，不闪 */
.dui .d-lock{ width:0; height:0; }
/* --lkw = 1 / 缩放（hud.js 写），线宽乘上它：屏幕上看总是约 4px 金线 + 7.5px 描边 */
.dui .d-lock{ --lkw:1; }
.dui .d-lkin{ position:absolute; left:-50px; top:-50px; width:100px; height:100px; animation:d-lkb 1.4s ease-in-out infinite alternate; }
.dui .d-lksp{ width:100%; height:100%; animation:d-spin 7s linear infinite; }
.dui .d-lkin svg{ display:block; width:100%; height:100%; overflow:visible; }
.dui .d-lkin .bg{ fill:none; stroke:rgba(255,240,180,.35); stroke-width:calc(2.5px * var(--lkw)); }
.dui .d-lkin .arcs path{ fill:none; stroke:var(--gold); stroke-width:calc(4px * var(--lkw)); stroke-linecap:round; }
.dui .d-lkin .arcs.ol path{ stroke:var(--ink); stroke-width:calc(7.5px * var(--lkw)); }
.dui .d-lkin .tips path{ fill:var(--gold); stroke:var(--ink); stroke-width:calc(2px * var(--lkw)); stroke-linejoin:round; paint-order:stroke; }
@keyframes d-lkb{ to{ transform:scale(1.08); } }
@keyframes d-spin{ to{ transform:rotate(360deg); } }
.dui .d-ring{ width:0; height:0; }
.dui .d-ring > svg{ position:absolute; left:-42px; top:-42px; width:84px; height:84px; transform:rotate(-90deg); overflow:visible; }
.dui .d-ring > svg circle{ fill:none; stroke-width:6; }
.dui .d-ring .tr{ stroke:rgba(42,26,20,.45); stroke-width:9; }
.dui .d-ring .pr{ stroke:#7ff0f0; stroke-linecap:round; }
.dui .d-ring.air .pr{ stroke:#fff; }
.dui .d-ring.warn .pr{ stroke:#ff4a3a; }
.dui .d-rbang{ position:absolute; left:-13px; top:-60px; width:26px; height:26px; border-radius:50%; background:#ff4a3a; border:2px solid var(--ink); display:none; align-items:center; justify-content:center; }
.dui .d-rbang .ic{ font-size:16px; color:#fff; }
.dui .d-ring.warn .d-rbang{ display:flex; }

/* 动作键（右下）：宝石圆钮 + 画的图标 + 两个字 */
.dui .d-act{ position:absolute; right:calc(var(--sr) + 18px); bottom:calc(var(--sbm) + 26px); width:calc(90px * var(--s)); height:calc(90px * var(--s)); border-radius:50%;
  --sock:radial-gradient(circle calc(27px * var(--s)) at 50% 37%,#fffaf0 0,#ffe7b8 80%,rgba(42,26,20,.55) 88%,transparent 100%);
  background:var(--sock),radial-gradient(circle at 50% 40%,var(--fa),var(--fb) 58%,var(--fc));
  border:3px solid var(--ink); box-shadow:inset 0 0 0 3px rgba(255,232,180,.8), inset 0 -8px 0 rgba(90,20,0,.25), 0 5px 0 var(--ink), 0 9px 16px rgba(0,0,0,.28);
  transition:transform .08s, filter .2s, opacity .2s; }
.dui .d-act.sea{ background:var(--sock),radial-gradient(circle at 50% 40%,var(--sa),var(--sb2) 58%,var(--sc));
  box-shadow:inset 0 0 0 3px rgba(210,255,248,.8), inset 0 -8px 0 rgba(0,40,60,.25), 0 5px 0 var(--ink), 0 9px 16px rgba(0,0,0,.28); }
.dui .d-actin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding-top:2px; font-size:24px; line-height:24px; text-shadow:var(--o1); }
.dui .d-actin .ic{ font-size:calc(44px * var(--s)); }
.dui .d-act.on{ transform:translateY(3px) scale(.95); filter:brightness(1.1); }
.dui .d-act.firing{ box-shadow:0 0 0 5px rgba(255,200,100,.5), inset 0 0 0 3px rgba(255,232,180,.8), 0 5px 0 var(--ink); }
.dui .d-act.dim{ opacity:.55; }
.dui .d-act.cool .d-actin span{ opacity:.9; }   /* 冷却时字照样看得清（图标上有暗色扇形） */
.dui .d-acr{ position:absolute; left:-10px; top:-10px; width:calc(100% + 20px); height:calc(100% + 20px); transform:rotate(-90deg); overflow:visible; pointer-events:none; }
.dui .d-acr circle{ fill:none; stroke-width:5; }
.dui .d-acr .tr{ stroke:rgba(42,26,20,.45); }
.dui .d-acr .pr{ stroke:#fff; stroke-linecap:round; transition:stroke .2s; }
.dui .d-act:not(.sea) .d-acr{ display:none; }
.dui .d-act.cool .d-acr .pr{ stroke:#bfe9ff; }
/* 第二技能键（成龙）：动作键上方，小一号，外圈 = 冷却 */
.dui .d-skill{ position:absolute; right:calc(var(--sr) + 18px + 12px * var(--s)); bottom:calc(var(--sbm) + 26px + 108px * var(--s)); width:calc(66px * var(--s)); height:calc(66px * var(--s)); border-radius:50%;
  --sock:radial-gradient(circle calc(22px * var(--s)) at 50% 39%,#fffaf0 0,#ffe7b8 80%,rgba(42,26,20,.55) 88%,transparent 100%);
  background:var(--sock),radial-gradient(circle at 50% 40%,#ffe28a,#f0a02c 58%,#a8561a);
  border:3px solid var(--ink); box-shadow:inset 0 0 0 2.5px rgba(255,240,200,.8), inset 0 -6px 0 rgba(90,40,0,.25), 0 4px 0 var(--ink), 0 7px 12px rgba(0,0,0,.25);
  transition:transform .08s, filter .25s; }
.dui .d-skill.sea{ background:var(--sock),radial-gradient(circle at 50% 40%,#bff8ff,#3fb6d8 58%,#1d5a92);
  box-shadow:inset 0 0 0 2.5px rgba(220,250,255,.8), inset 0 -6px 0 rgba(0,30,70,.25), 0 4px 0 var(--ink), 0 7px 12px rgba(0,0,0,.25); }
.dui .d-skin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:12px; line-height:12px; text-shadow:var(--o1); transition:opacity .2s; }
.dui .d-skin .ic{ font-size:calc(36px * var(--s)); }
.dui .d-skr{ position:absolute; left:-9px; top:-9px; width:calc(100% + 18px); height:calc(100% + 18px); transform:rotate(-90deg); overflow:visible; pointer-events:none; }
.dui .d-skr circle{ fill:none; stroke-width:5; }
.dui .d-skr .tr{ stroke:rgba(42,26,20,.45); }
.dui .d-skr .pr{ stroke:var(--g1); stroke-linecap:round; }
/* 冷却扇形：只盖住图标那块奶油色圆片（不压字）。--cd = 还剩几成（hud.js 写）：亮的部分和外圈进度一样从 12 点顺时针长，
   暗的部分顺时针退去，两者始终对得上 */
.dui .d-wipe{ --cd:0; --wr:calc(27px * var(--s)); position:absolute; left:50%; top:37%; width:calc(var(--wr) * 2); height:calc(var(--wr) * 2); margin:calc(var(--wr) * -1) 0 0 calc(var(--wr) * -1);
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity .2s;
  background:conic-gradient(transparent calc((1 - var(--cd)) * 360deg),rgba(28,16,30,.52) 0); }
.dui .d-skill .d-wipe{ --wr:calc(22px * var(--s)); top:39%; }
.dui .d-act.cool .d-wipe,.dui .d-skill.cool .d-wipe{ opacity:1; }
.dui .d-skill.cool{ filter:saturate(.45) brightness(.92); }
.dui .d-skill.cool .d-skin span{ opacity:.9; }
/* 好了：外面一圈淡金光慢慢呼吸（只动 opacity，不闪） */
.dui .d-skill::after{ content:''; position:absolute; inset:-7px; border-radius:50%; box-shadow:0 0 0 5px rgba(255,236,160,.6), 0 0 14px 4px rgba(255,220,120,.45); opacity:0; pointer-events:none; }
.dui .d-skill.ready::after{ animation:d-breath 1.8s ease-in-out infinite; }
@keyframes d-breath{ 50%{ opacity:1; } }
.dui .d-skill.active{ filter:brightness(1.15); }
.dui .d-skill.down{ transform:translateY(3px) scale(.94); }

/* 「新能力」卡在的时候：小目标卡往右滑走、连吃和「下一阶段」那一行隐藏（卡片紧贴成长条，少挡画面；放完再回来） */
.dui .d-goal{ transition:opacity .3s, transform .3s ease-out; }
.dui .d-next{ transition:opacity .3s; }
.dui.d-abon .d-next{ opacity:0; }
.dui.d-abon .d-goal{ opacity:0; transform:translateX(36px); }
.dui.d-left.d-abon .d-goal{ transform:translateX(-36px); }
.dui.d-abon .d-combo{ opacity:0 !important; }

/* 新物种小卡、临时角标 */
.dui .d-newsp{ position:absolute; left:calc(var(--sl) + 12px); bottom:calc(var(--sbm) + 40px); padding:5px; border-radius:18px; background:var(--paper); border:2.5px solid var(--ink);
  box-shadow:var(--rim), 0 3px 0 var(--ink); opacity:0; }
.dui .d-newsp .d-gpic{ width:60px; height:60px; }
.dui .d-temp{ position:absolute; left:calc(var(--sl) + 8px); bottom:calc(var(--sbm) + 6px); padding:3px 6px; border-radius:8px; font-size:12px; line-height:12px;
  background:rgba(200,60,40,.75); border:1.5px solid var(--ink); text-shadow:var(--o1); opacity:.85; }

/* 左手模式：动作键、技能键和小目标卡换边 */
.dui.d-left .d-act{ right:auto; left:calc(var(--sl) + 18px); }
.dui.d-left .d-skill{ right:auto; left:calc(var(--sl) + 18px + 12px * var(--s)); }
.dui.d-left .d-goal{ right:auto; left:calc(var(--sl) + 8px); transform-origin:10% 50%; }
.dui.d-left .d-combo{ left:auto; right:calc(var(--sr) + 14px); }
.dui.d-left .d-newsp{ left:auto; right:calc(var(--sr) + 12px); }
.dui.d-left .d-temp{ left:auto; right:calc(var(--sr) + 8px); }

/* ---------- 提示 ---------- */
.dui .d-hint{ position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.dui .d-hint.d-hc{ left:50%; top:min(62%, calc(100% - var(--sbm) - 168px - 100px * var(--s))); transform:translateX(-50%); }
/* 「长大后学会」：再往下一点，别压在龙的脚上（这时还没有技能键） */
.dui:not(.d-hasskill) .d-hint.d-hc.d-hb{ top:min(66%, calc(100% - var(--sbm) - 168px - 100px * var(--s))); }
.dui .d-hint.d-ha{ right:calc(var(--sr) + 16px); bottom:calc(var(--sbm) + 26px + 100px * var(--s)); flex-direction:column-reverse; }
.dui.d-hasskill .d-hint.d-ha{ bottom:calc(var(--sbm) + 26px + 188px * var(--s)); }
.dui .d-hint.d-hs{ bottom:calc(var(--sbm) + 26px + 188px * var(--s)); }
.dui.d-left .d-hint.d-ha{ right:auto; left:calc(var(--sl) + 16px); }
.dui .d-hic{ position:relative; font-size:56px; }
.dui .d-hic .ic{ stroke-width:1.8; }
.dui .d-hint.d-hb .d-hic{ font-size:56px; }
.dui .d-hdisc{ display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fffaf0,#f3dcae 75%,#e2bd7c); border:3px solid var(--ink); box-shadow:inset 0 0 0 2.5px var(--g2), 0 3px 0 var(--ink); }
.dui .d-hdisc .ic{ filter:grayscale(.35); }
.dui .d-hlk{ position:absolute; right:-8px; bottom:-4px; }
.dui .d-hlk .ic{ font-size:30px; }
.dui .h-drag .d-hic{ animation:d-drag 1.6s ease-in-out infinite; }
@keyframes d-drag{ 0%,100%{ transform:translate(0,0) scale(1); } 15%{ transform:translate(0,6px) scale(.9); } 50%{ transform:translate(-34px,6px) scale(.9); } 80%{ transform:translate(30px,6px) scale(.9); } }
.dui .h-plunge .d-hic{ animation:d-down .9s ease-in-out infinite; }
.dui .h-breach .d-hic{ animation:d-up .9s ease-in-out infinite; }
.dui .d-hb .d-hic{ animation:d-nod 1.2s ease-in-out infinite; }
@keyframes d-down{ 50%{ transform:translateY(10px); } }
@keyframes d-up{ 50%{ transform:translateY(-10px); } }
@keyframes d-nod{ 50%{ transform:translateY(-4px) rotate(-4deg); } }
.dui .d-ha .d-hic{ transform:rotate(180deg); animation:d-tapb .9s ease-in-out infinite; }
@keyframes d-tapb{ 0%,100%{ transform:rotate(180deg) translateY(0); } 50%{ transform:rotate(180deg) translateY(-10px); } }
.dui .d-pill{ display:flex; align-items:center; gap:6px; padding:7px 16px; border-radius:20px; background:var(--paper); border:2.5px solid var(--ink); color:var(--txt);
  box-shadow:var(--rim), 0 3px 0 var(--ink); font-size:24px; line-height:24px; white-space:nowrap; }
.dui .d-pab .ic{ font-size:30px; }

/* ---------- 大字（阶段名） ---------- */
.dui .d-toast{ position:absolute; z-index:3; left:0; right:0; top:30%; text-align:center; font:800 60px/1.1 var(--fT); color:#fff; opacity:0; pointer-events:none;
  text-shadow:var(--o3), 0 0 24px rgba(255,170,60,.7); }
.dui .d-toast.sea{ text-shadow:var(--o3), 0 0 24px rgba(80,240,220,.7); }

/* ---------- 「新能力」卡（不挡操作） ---------- */
.dui .d-abil{ position:absolute; z-index:4; left:0; right:0; top:calc(var(--st) + 38px + 44px * var(--s)); margin:0 auto; width:min(calc(312px * var(--s)), calc(100% - 24px)); padding:30px 14px 12px;
  border-radius:24px; background:var(--paper); border:3px solid var(--ink); color:var(--txt); pointer-events:none; transform-origin:50% 0;
  box-shadow:var(--rim), 0 6px 0 var(--ink), 0 12px 26px rgba(0,0,0,.3); }
.dui .d-abrib{ position:absolute; left:50%; top:-22px; transform:translateX(-50%); height:42px; padding:0 22px; border-radius:12px; display:flex; align-items:center; white-space:nowrap;
  background:linear-gradient(180deg,var(--g1),var(--g2) 60%,var(--g3)); border:3px solid var(--ink); box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--ink); }
.dui .d-abrib::before,.dui .d-abrib::after{ content:''; position:absolute; top:10px; width:18px; height:26px; z-index:-1; background:var(--g3); border:3px solid var(--ink); }
.dui .d-abrib::before{ left:-14px; border-radius:6px 0 0 6px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%); }
.dui .d-abrib::after{ right:-14px; border-radius:0 6px 6px 0; clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%); }
.dui .d-abrib span{ font:800 30px/1 var(--fT); color:#fff; text-shadow:var(--o2r); letter-spacing:2px; margin-top:-2px; }
.dui .d-abrows{ display:flex; flex-direction:column; gap:10px; }
.dui .d-abrow{ display:flex; align-items:center; gap:12px; }
.dui .d-abic{ position:relative; flex:none; width:calc(68px * var(--s)); height:calc(68px * var(--s)); border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(circle,#fff6d8,var(--k1) 70%,var(--k2)); border:3px solid var(--ink); box-shadow:inset 0 0 0 2.5px var(--g1); }
.dui .d-abic > .ic{ position:relative; font-size:calc(60px * var(--s)); }
.dui .d-abic{ color:#fff; }   /* 图集没加载好时的 SVG 备用图标：白色 */
/* 两个能力：并排两列（图标在上，名字和一句话在下），卡片矮一半 */
.dui .d-abil.two{ padding:28px 10px 10px; }
.dui .d-abil.two .d-abrows{ flex-direction:row; gap:8px; }
.dui .d-abil.two .d-abrow{ flex:1; min-width:0; flex-direction:column; gap:4px; text-align:center; }
.dui .d-abil.two .d-abic{ width:calc(54px * var(--s)); height:calc(54px * var(--s)); }
.dui .d-abil.two .d-abic > .ic{ font-size:calc(48px * var(--s)); }
.dui .d-abil.two .d-abtx{ align-items:center; gap:4px; }
.dui .d-abil.two .d-abtx span{ max-width:100%; }
.dui .d-abil.two .d-abtx b{ font-size:calc(28px * var(--s)); }
/* 手机宽度（< 480px）：每列「图标 + 名字」一行、一句话在下面（卡片从约 186px 高降到约 145px，不挡刚换好模型的龙头） */
.dui:not(.d-wide) .d-abil.two .d-abrow{ display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; column-gap:6px; row-gap:4px; }
.dui:not(.d-wide) .d-abil.two .d-abtx{ display:contents; }
.dui:not(.d-wide) .d-abil.two .d-abic{ width:calc(44px * var(--s)); height:calc(44px * var(--s)); }
.dui:not(.d-wide) .d-abil.two .d-abic > .ic{ font-size:calc(40px * var(--s)); }
.dui:not(.d-wide) .d-abil.two .d-abtx b{ text-align:left; }
.dui:not(.d-wide) .d-abil.two .d-abtx span{ grid-column:1 / -1; text-align:center; }
.dui .d-rays{ position:absolute; inset:-30%; background:repeating-conic-gradient(rgba(255,255,255,.55) 0 10deg,transparent 10deg 30deg); animation:d-spin 9s linear infinite; }
.dui .d-abtx{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.dui .d-abtx b{ font:800 calc(36px * var(--s))/1 var(--fT); color:var(--kt); white-space:nowrap; }
.dui .d-abtx span{ font-size:24px; line-height:26px; color:var(--txt); text-wrap:balance; }   /* 24px（像素字 12 的倍数）；折行时两行差不多长，不剩一个字 */
/* 只有一个能力：卡片放宽一点，8 个字一行放得下 */
.dui .d-abil:not(.two){ width:min(calc(330px * var(--s)), calc(100% - 24px)); }
/* 很窄的屏（< 340px）：图标小一点、边距小一点，8 个字还是一行 */
.dui.d-narrow .d-abil:not(.two){ padding-left:10px; padding-right:10px; }
.dui.d-narrow .d-abil:not(.two) .d-abrow{ gap:8px; }
.dui.d-narrow .d-abil:not(.two) .d-abic{ width:52px; height:52px; }
.dui.d-narrow .d-abil:not(.two) .d-abic > .ic{ font-size:46px; }

/* ---------- 标题 / 加载 ---------- */
.dui .d-bg{ position:absolute; inset:0; width:100%; height:100%; }
.dui .d-bgimg{ position:absolute; inset:0; background:url(../../img/ui/title_bg.webp) center 40% / cover no-repeat; }
.dui .d-title{ z-index:10; }
.dui .d-tin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:calc(var(--st) + 76px) 16px calc(var(--sbm) + 14px); }
.dui .d-logo{ position:relative; margin:0; display:flex; flex-direction:column; align-items:center; width:min(90%, 400px); font-weight:normal; }
.dui .d-limg{ display:block; width:100%; height:auto; filter:drop-shadow(0 6px 10px rgba(40,20,10,.35)); }
.dui .d-ltx{ display:flex; gap:2px; font:800 64px/1 var(--fT); text-shadow:var(--o3); letter-spacing:2px; }
.dui .d-ltx span:first-child{ color:#fff2d6; }
.dui .d-ltx span:last-child{ color:var(--g1); }
.dui .d-logo:not(.noimg) .d-ltx{ display:none; }
.dui .d-logo.noimg .d-limg{ display:none; }
.dui .d-sub{ margin-top:4px; padding:3px 14px 4px; border-radius:12px; font:800 22px/1 var(--fT); letter-spacing:1px; color:#fff; text-shadow:var(--o1);
  background:rgba(42,26,20,.55); border:2px solid rgba(255,234,180,.7); }
.dui .d-logo.sm{ width:min(80%, 340px); }
.dui .d-cards{ margin-top:auto; display:flex; gap:14px; width:100%; max-width:420px; justify-content:center; }
.dui .d-cwrap{ flex:1; max-width:200px; display:flex; flex-direction:column; align-items:center; gap:14px; transition:transform .2s; }
.dui .d-card{ position:relative; width:100%; aspect-ratio:3/4.1; border-radius:22px; overflow:hidden; border:3px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--g2), inset 0 0 0 5px rgba(255,255,255,.5), 0 5px 0 var(--ink), 0 10px 22px rgba(0,0,0,.28); transition:transform .1s; }
.dui .d-card.fire{ background:radial-gradient(circle at 50% 34%,#fff4cf,#ffbe5c 38%,#e0602c 78%,#9c3018); }
.dui .d-card.sea{ background:radial-gradient(circle at 50% 34%,#effffa,#7ee0d8 38%,#2386a2 78%,#124a6e); }
.dui .d-card::after{ content:''; position:absolute; inset:0; border-radius:19px; box-shadow:inset 0 0 0 3px var(--g2), inset 0 0 0 5px rgba(255,255,255,.45); pointer-events:none; }
.dui .d-cart{ position:absolute; inset:6px 6px 48px; display:flex; align-items:center; justify-content:center; }
.dui .d-cart .art{ width:100%; height:auto; flex:none; }
.dui .d-cimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 2px rgba(40,10,0,.35)); }
/* LightAI 画的龙卡插画：整张铺满（翅膀出血到卡边），名牌压在尾巴上 */
.dui .d-card > .d-cimg{ object-fit:cover; object-position:50% 30%; filter:drop-shadow(0 3px 2px rgba(40,10,0,.3)); }
.dui .d-card.paint .d-cart{ display:none; }
/* 备用：3D 模型渲的小图，放大、提亮，后面垫一团奶油色光 */
.dui .d-cimg.old{ transform:scale(1.35); filter:drop-shadow(0 4px 2px rgba(40,10,0,.35)) brightness(1.1) saturate(1.1); }
.dui .d-card.img .d-cart{ background:radial-gradient(circle at 50% 50%,rgba(255,246,220,.85),rgba(255,246,220,0) 62%); }
.dui .d-card.img .art{ display:none; }
.dui .d-cname{ position:absolute; z-index:1; left:50%; bottom:10px; transform:translateX(-50%); height:40px; display:flex; align-items:center; gap:4px; padding:0 14px 0 6px; border-radius:20px; white-space:nowrap;
  background:var(--paper); border:2.5px solid var(--ink); box-shadow:0 3px 0 var(--ink); font:800 30px/1 var(--fT); color:var(--txt); }
.dui .d-cname .ic{ font-size:34px; }
.dui .d-card.fire .d-cname{ color:#8a2e10; }
.dui .d-card.sea .d-cname{ color:#0e5068; }
.dui.d-wide .d-cards{ max-width:520px; }
.dui.d-wide .d-cwrap{ max-width:245px; }
.dui .d-cwrap.pick{ transform:translateY(-8px); }
.dui .d-cwrap.pick .d-card{ box-shadow:0 0 0 4px var(--g1), 0 0 0 7px var(--ink), 0 5px 0 7px var(--ink), 0 14px 26px rgba(0,0,0,.3); }
.dui .d-card.down{ transform:scale(.97); }
/* 卡片下面三个阶段小头像：到过的阶段亮 */
.dui .d-dots{ display:flex; gap:6px; }
.dui .d-dots i{ display:block; width:28px; height:28px; border-radius:50%; border:2px solid var(--ink); background:var(--p3); box-shadow:0 2px 0 var(--ink); }
.dui .d-dots i .ic{ width:100%; height:100%; font-size:28px; filter:grayscale(1) brightness(.75); opacity:.55; }
.dui .d-dots i.on .ic{ filter:none; opacity:1; }
.dui .d-tbot{ margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:18px; }
.dui .d-tcodex{ height:48px; padding:0 16px; gap:6px; }
.dui .d-tcodex .ic{ font-size:32px; }
.dui .d-cnt{ font-weight:normal; font-size:24px; color:var(--kt); margin-left:4px; }
.dui .d-load{ z-index:20; }
.dui .d-lin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding-bottom:16%; }
.dui .d-lbar{ position:relative; width:240px; max-width:70%; height:22px; border-radius:12px; overflow:hidden; background:rgba(42,26,20,.6); border:3px solid var(--ink);
  box-shadow:0 0 0 2px var(--g2), 0 3px 0 2px var(--ink); margin-top:20px; }
.dui .d-lbar u{ position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); text-decoration:none; transition:transform .25s;
  background:linear-gradient(180deg,rgba(255,255,255,.6),transparent 50%),linear-gradient(90deg,var(--g1),var(--g2) 60%,var(--fb)); }
.dui .d-ltxt{ font-size:24px; line-height:24px; text-shadow:var(--o1); }
.dui .d-lslow{ display:flex; flex-direction:column; align-items:center; gap:12px; font-size:24px; line-height:24px; text-shadow:var(--o1); color:var(--g1); }

/* ---------- 暂停菜单 ---------- */
.dui .d-pause{ z-index:12; }
.dui .d-plist{ width:248px; padding:34px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.dui .d-plist .d-btn{ justify-content:flex-start; padding-left:16px; }
.dui .d-plist .d-btn.d-main{ height:62px; justify-content:center; padding-left:18px; margin-bottom:4px; }
.dui .d-sw{ position:absolute; right:14px; top:50%; width:36px; height:22px; margin-top:-11px; border-radius:11px; background:#d9c49a; border:2.5px solid var(--ink); transition:background .2s; }
.dui .d-sw::after{ content:''; position:absolute; left:1px; top:1px; width:15px; height:15px; border-radius:50%; background:#fff; border:2px solid var(--ink); box-sizing:border-box; transition:transform .2s; }
.dui .d-tog.on .d-sw{ background:#4fc46a; }
.dui .d-tog.on .d-sw::after{ transform:translateX(13px); }

/* ---------- 图鉴 ---------- */
.dui .d-codex{ z-index:14; }
.dui .d-cxin{ width:calc(100% - 24px); max-width:440px; max-height:calc(100% - var(--st) - var(--sbm) - 40px); margin-top:14px; padding:30px 12px 14px; display:flex; flex-direction:column; gap:10px; }
.dui .d-cxn{ font-weight:normal; font:500 24px/1 var(--fP); color:#fff; text-shadow:var(--o1); margin-left:4px; }
.dui .d-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-height:0; overflow:hidden; }
.dui .d-cell{ position:relative; aspect-ratio:1/1.02; border-radius:14px; background:rgba(120,80,30,.12); border:2px solid rgba(120,80,30,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px; min-height:0; }
.dui .d-cell.got{ background:radial-gradient(circle at 50% 40%,#fff,#fbefd2); border:2px solid var(--ink); box-shadow:inset 0 0 0 2px var(--g2); }
.dui .d-cpic{ flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.dui .d-cpic img{ max-width:100%; max-height:100%; width:64px; height:64px; object-fit:contain; }
.dui .d-cpic .ic{ font-size:40px; }
.dui .d-cpic.sil img{ filter:brightness(0); opacity:.38; }
.dui .d-cpic.sil .ic{ color:#5a3a20; stroke:none; opacity:.35; }
.dui .d-cnm{ font-size:12px; line-height:12px; color:var(--txt); white-space:nowrap; }
.dui .d-ccnt{ position:absolute; left:6px; top:5px; font-weight:normal; font-size:12px; line-height:12px; color:var(--txt2); }
.dui .d-cell .ic.gold{ position:absolute; right:4px; top:4px; font-size:20px; color:var(--gold); }
.dui .d-cneed{ display:flex; align-items:center; gap:3px; height:24px; }
.dui .d-cneed .ic{ font-size:22px; }
.dui.d-narrow .d-cneed .ic,.dui.d-mid .d-cneed .ic{ font-size:20px; }
.dui .d-cneed .w-sea{ color:#4fd8ca; }
.dui .d-chip{ display:inline-block; min-width:22px; height:20px; padding:0 3px; border-radius:10px; font:500 12px/16px var(--fP); font-style:normal; text-align:center;
  color:#fff; text-shadow:var(--o1); background:linear-gradient(180deg,#b88a50,#7a5228); border:2px solid var(--ink); }
.dui .d-cxbot{ display:flex; justify-content:center; padding-top:2px; }

/* ---------- 结算卡 ---------- */
.dui .d-result{ z-index:16; }
.dui .d-rin{ width:calc(100% - 40px); max-width:360px; padding:16px 16px 18px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.dui .d-rtitle{ margin:0; font:800 60px/1.05 var(--fT); color:var(--g1); text-shadow:var(--o3), 0 0 20px rgba(255,160,60,.6); }
.dui .d-result.sea .d-rtitle{ color:#c9fff6; text-shadow:var(--o3), 0 0 20px rgba(80,240,220,.6); }
.dui .d-rshot{ position:relative; width:100%; aspect-ratio:16/11; border-radius:16px; overflow:hidden; border:3px solid var(--ink); background:#ffe2b8;
  box-shadow:0 3px 0 var(--ink); }
.dui .d-rshot::after{ content:''; position:absolute; inset:0; border-radius:13px; box-shadow:inset 0 0 0 3px var(--g2); pointer-events:none; }
.dui .d-result.sea .d-rshot{ background:#bfeef0; }
.dui .d-rshot img{ width:100%; height:100%; object-fit:cover; display:block; }
.dui .d-rshot .d-cart{ inset:0; }
.dui .d-rshot .d-cart .art{ width:80%; }
.dui .d-rstats{ width:100%; display:flex; justify-content:space-around; }
.dui .d-rstats > div{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; line-height:12px; color:var(--txt2); }
.dui .d-rstats .ic{ font-size:36px; color:#f4e0c0; }
.dui .d-rstats b{ font-weight:normal; font-size:24px; line-height:24px; color:var(--txt); }
.dui .d-rbtns{ display:flex; gap:10px; width:100%; }
.dui .d-rbtns .d-btn{ flex:1; min-width:0; gap:6px; padding:0 8px; }
.dui .d-rbtns .d-btn .ic{ font-size:28px; }
.dui.d-narrow .d-rin{ width:calc(100% - 24px); padding-left:12px; padding-right:12px; }

/* 矮屏：标题页收紧（< 760px 高：常见手机；< 600px：很矮的屏） */
.dui.d-mid .d-tin{ padding-top:calc(var(--st) + 66px); }
.dui.d-mid .d-logo{ width:min(76%, 300px); }
.dui.d-mid .d-sub{ font-size:18px; padding:2px 10px 3px; }
.dui.d-mid .d-logo{ margin-bottom:10px; }
.dui.d-mid .d-cwrap{ max-width:154px; gap:10px; }
.dui.d-mid .d-card{ aspect-ratio:3/3.9; }
.dui.d-mid .d-dots i{ width:24px; height:24px; }
.dui.d-mid .d-dots i .ic{ font-size:24px; }
.dui.d-mid .d-tbot{ gap:10px; padding-top:12px; }
.dui.d-mid .d-big{ height:56px; }
.dui.d-mid .d-tcodex{ height:44px; }
.dui.d-short .d-tin{ padding-top:calc(var(--st) + 60px); }
.dui.d-short .d-logo{ width:min(64%, 250px); }
.dui.d-short .d-sub{ display:none; }
.dui.d-short .d-cwrap{ max-width:128px; }
.dui.d-short .d-dots{ display:none; }

/* 教学小手（图片）：和原来的 56px 图标一样大 */
.dui .d-handimg{ display:block; width:48px; height:auto; filter:drop-shadow(0 2px 2px rgba(40,20,10,.35)); }

/* 小目标卡下面的说明（只在看图标不好懂的目标上出现） */
.dui .d-goal .d-gcap{ position:absolute; left:0; right:0; top:100%; margin-top:4px; text-align:center; white-space:nowrap; font:500 12px/1.4 var(--fP); color:#fff8e6; text-shadow:0 1px 0 #4a2a1a,1px 0 0 #4a2a1a,-1px 0 0 #4a2a1a,0 -1px 0 #4a2a1a; pointer-events:none; }
.dui .d-goal .d-gcap[hidden]{ display:none; }

/* 猎场：轻量的行进提示，放在小目标卡下面；能力解锁期间暂时让出画面。 */
.dui .d-hunt{ position:absolute; left:50%; top:calc(var(--st) + 180px * var(--s)); transform:translateX(-50%);
  width:min(calc(212px * var(--s)),calc(100% - 72px)); padding:6px 11px 8px; border-radius:13px; overflow:hidden;
  background:rgba(59,40,29,.78); border:1.5px solid rgba(255,222,146,.7); color:#fff4d8; pointer-events:none; }
.dui .d-hunt.sea{ background:rgba(13,57,68,.8); border-color:rgba(151,243,225,.75); color:#dcfff7; }
.dui .d-hunt-row{ display:flex; align-items:center; gap:6px; }
.dui .d-hunt-icon .ic{ font-size:22px; color:#ffdf88; }
.dui .d-hunt.sea .d-hunt-icon .ic{ color:#b4ffed; }
.dui .d-hunt-row b{ font:800 21px/24px var(--fT); letter-spacing:1px; }
.dui .d-hunt-count{ margin-left:auto; font:800 21px/24px var(--fT); color:#ffdf88; }
.dui .d-hunt.sea .d-hunt-count{ color:#b4ffed; }
.dui .d-hunt-hint{ display:block; padding-left:28px; font:500 12px/16px var(--fP); white-space:nowrap; }
.dui .d-hunt-progress{ position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.12); }
.dui .d-hunt-progress u{ position:absolute; inset:0; background:#e9c478; transform:scaleX(0); transform-origin:0 50%; transition:transform .25s linear; }
.dui .d-hunt.sea .d-hunt-progress u{ background:#87e4d1; }
.dui .d-hunt.cue .d-hunt-progress{ display:none; }
.dui .d-hunt.finale{ border-color:#fff1be; }
.dui .d-hunt.finale.sea{ border-color:#d0fff7; }
.dui.d-abon .d-hunt{ visibility:hidden; }
.dui .d-hunt-mark{ width:0; height:0; }
.dui .d-hunt-mark > span{ position:absolute; left:-14px; top:-14px; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:rgba(66,40,23,.8); border:1.5px solid #ffdf88; }
.dui .d-hunt-mark > span .ic{ color:#ffdf88; font-size:19px; }
.dui .d-hunt-mark > i{ position:absolute; left:-20px; top:-20px; width:40px; height:40px; }
.dui .d-hunt-mark > i .ic{ position:absolute; left:13px; top:-11px; font-size:14px; color:#ffdf88; }
.dui .d-hunt-mark.sea > span{ background:rgba(13,57,68,.8); border-color:#b4ffed; }
.dui .d-hunt-mark.sea .ic{ color:#b4ffed; }

/* 图鉴沿用原入口；窄屏可上下滑动，猎场印记不会挤小原来的生物格子。 */
.dui .d-codex{ touch-action:pan-y; }
.dui .d-cxscroll{ overflow-y:auto; min-height:0; overscroll-behavior:contain; touch-action:pan-y; padding:1px 1px 5px; }
.dui .d-cxscroll .d-grid{ overflow:visible; }
.dui .d-explore-title{ margin:13px 2px 7px; font:800 20px/24px var(--fT); color:var(--txt2); }
.dui .d-explore{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.dui .d-explore-entry{ position:relative; display:flex; align-items:center; gap:6px; min-height:61px; padding:7px 5px; border-radius:12px;
  background:rgba(120,80,30,.08); border:1.5px solid rgba(120,80,30,.24); }
.dui .d-explore-entry.found{ background:#fff3d5; border-color:#ba9045; }
.dui .d-explore-entry.tide.found{ background:#e0f5ed; border-color:#64a89d; }
.dui .d-explore-stamp{ display:flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border-radius:50%;
  background:rgba(145,113,72,.14); color:#b8a17a; }
.dui .d-explore-stamp .ic{ font-size:21px; }
.dui .d-explore-entry.found .d-explore-stamp{ background:#f4d886; color:#fff3bb; }
.dui .d-explore-entry.tide.found .d-explore-stamp{ background:#8dcebf; color:#e1fff6; }
.dui .d-explore-entry > div{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.dui .d-explore-entry b{ font:800 18px/20px var(--fT); color:var(--txt); white-space:nowrap; }
.dui .d-explore-entry > div > span{ font:500 12px/12px var(--fP); color:var(--txt2); white-space:nowrap; }
.dui .d-explore-check{ position:absolute; right:3px; top:3px; color:#83bd87; font-size:12px; }
.dui.d-narrow .d-explore-entry{ justify-content:center; text-align:center; padding-left:4px; padding-right:4px; }
.dui.d-narrow .d-explore-stamp{ display:none; }
.dui.d-narrow .d-explore-entry b{ font-size:16px; }
/* 猎场横幅 v2：羊皮纸卡（和小目标卡一套），标题大字、进度条金色 */
.dui .d-hunt{ width:min(calc(236px * var(--s)),calc(100% - 64px)); padding:7px 14px 10px; border-radius:16px;
  background:var(--paper); border:2.5px solid var(--ink); box-shadow:var(--rim), 0 3px 0 var(--ink), 0 6px 10px rgba(0,0,0,.22); color:var(--txt); }
.dui .d-hunt.sea{ background:var(--paper); border-color:var(--ink); color:var(--txt); }
.dui .d-hunt-icon{ display:flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; background:#ffd977; box-shadow:inset 0 -2px 0 rgba(120,70,20,.35); }
.dui .d-hunt.sea .d-hunt-icon{ background:#8fe6d6; }
.dui .d-hunt-icon .ic, .dui .d-hunt.sea .d-hunt-icon .ic{ font-size:22px; color:#6a3d1c; }
.dui .d-hunt-row b{ font:800 23px/28px var(--fT); color:var(--txt); }
.dui .d-hunt-count, .dui .d-hunt.sea .d-hunt-count{ font:800 24px/28px var(--fT); color:#d2661c; }
.dui .d-hunt.sea .d-hunt-count{ color:#16808a; }
.dui .d-hunt-hint{ padding-left:36px; font:500 12px/18px var(--fP); color:#7a5434; }
.dui .d-hunt-progress{ left:10px; right:10px; bottom:5px; height:5px; border-radius:3px; background:rgba(90,52,32,.18); overflow:hidden; }
.dui .d-hunt-progress u{ background:linear-gradient(90deg,#ffb53a,#ffd977); }
.dui .d-hunt.sea .d-hunt-progress u{ background:linear-gradient(90deg,#2bb3b0,#8fe6d6); }
.dui .d-hunt.cue{ animation:d-huntpulse 1.6s ease-in-out infinite; }
.dui .d-hunt.finale{ border-color:#c7741c; }
@keyframes d-huntpulse{ 0%,100%{ box-shadow:var(--rim), 0 3px 0 var(--ink), 0 0 0 0 rgba(255,210,90,.0); } 50%{ box-shadow:var(--rim), 0 3px 0 var(--ink), 0 0 0 6px rgba(255,210,90,.35); } }

/* 猎场：抓到时飘的「+1」、达成时的大字；达成后横幅变金边 */
.dui .d-hfloat{ position:absolute; z-index:6; pointer-events:none; white-space:nowrap; transform:translate(-50%,-50%);
  font:800 22px/1 var(--fT); color:#ffe27a; text-shadow:0 2px 0 #6a3a14,2px 0 0 #6a3a14,-2px 0 0 #6a3a14,0 -2px 0 #6a3a14; }
.dui .d-hfloat.big{ font-size:26px; color:#fff1b8; }
.dui .d-hunt.won{ border-color:#d8941c; }
.dui .d-hunt.won .d-hunt-count{ color:#e8a020; }

/* 大字提示可以两行（猎场结束：第二行是成长奖励，小一号） */
.dui .d-toast{ white-space:pre-line; }
.dui .d-toast::first-line{ font-size:60px; }