/* ==================================================================
   玄枢纪 · 国风仙侠视觉层
   宣纸底 / 暖木框 / 青金 / 朱红点缀，Q 版三头身，平滑绘制
   竖屏优先：375–430 逻辑宽度；桌面端居中 430px
   ================================================================== */
:root{
  --paper:#f3e8d1;
  --paper2:#e9d9ba;
  --panel:#faf1dd;
  --panel2:#f3e6c9;
  --ink:#2c281f;
  --ink2:#4e4838;
  --dim:#7d7360;
  --dim2:#9b917c;
  --line:#c6b088;
  --line2:#a98f64;
  --wood:#8a5f38;
  --wood2:#684525;
  --gold:#b7883c;
  --gold2:#d9b571;
  --cinnabar:#ac3a28;
  --cinnabar2:#c9573f;
  --jade:#2f6b58;
  --jade2:#47997c;
  --indigo:#33546b;
  --violet:#6f4a7d;
  --hp:#b8433a;
  --hp2:#d9685a;
  --mp:#3f7397;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --serif:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#d9c9a8;}
body{
  color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.4;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
#app{height:100%;}
button{font-family:inherit;color:inherit;background:none;border:none;padding:0;font-size:inherit;cursor:pointer;}
button:disabled{opacity:.42;cursor:not-allowed;}
img,svg{image-rendering:auto;}

.app{
  position:relative;margin:0 auto;max-width:430px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% 0%,#fbf4e2 0%,#f2e6ce 40%,#ead9b8 100%);
  box-shadow:inset 0 0 80px rgba(120,90,50,.16);
}
.app::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(0deg,rgba(140,110,70,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(140,110,70,.035) 0 1px,transparent 1px 5px);
  opacity:.55;
}
@media(min-width:520px){
  body{background:#cfbf9d;}
  .app{height:min(100vh,900px);margin-top:calc((100vh - min(100vh,900px))/2);
    box-shadow:0 0 0 1px #8a6b41,0 18px 50px rgba(60,40,20,.45);}
}

/* ---------------- 通用 ---------------- */
.scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{width:0;height:0;}
.pad{padding:10px 12px;}
.row{display:flex;align-items:center;}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}
.between{justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.grow{flex:1;min-width:0;}
.center{text-align:center;}
.mt6{margin-top:6px}.mt10{margin-top:10px}
.tiny{font-size:11px;color:var(--dim);line-height:1.45;}
.small{font-size:12px;}
.num{font-variant-numeric:tabular-nums;font-family:var(--sans);}
.gold{color:var(--gold);}
.jade{color:var(--jade);}
.red{color:var(--cinnabar);}
.good{color:var(--jade);}
.blue{color:var(--indigo);}
.dimc{color:var(--dim2);}
.dim2{color:var(--dim2);font-weight:400;}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 宣纸面板（卷轴式双线边框） */
.panel{
  position:relative;background:linear-gradient(180deg,#fdf6e5,#f4e7cb);
  border:1px solid var(--line2);border-radius:4px;padding:9px 10px 10px;
  box-shadow:inset 0 0 0 1px #fffdf5,0 1px 0 rgba(90,60,20,.08);
}
.panel::before,.panel::after{
  content:"";position:absolute;left:8px;right:8px;height:2px;background:
    linear-gradient(90deg,rgba(138,95,56,0),rgba(138,95,56,.45),rgba(138,95,56,0));
  pointer-events:none;
}
.panel::before{top:3px}
.panel::after{bottom:3px}
.panel+.panel{margin-top:8px;}
.sec-title{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--serif);font-size:13px;color:var(--wood2);letter-spacing:.14em;
  margin:2px 0 7px;font-weight:700;padding-left:9px;position:relative;
}
.sec-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:11px;background:var(--cinnabar);border-radius:1px;
}
.sec-title small{color:var(--dim);letter-spacing:0;font-weight:400;font-size:10.5px;}

/* 按钮 */
.btn{
  min-height:44px;padding:0 12px;border-radius:4px;
  border:1px solid var(--line2);color:var(--ink2);
  background:linear-gradient(180deg,#fcf5e4,#f1e3c6);
  box-shadow:inset 0 0 0 1px #fffdf6,0 1px 2px rgba(90,60,20,.12);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;transition:transform .08s,filter .12s;user-select:none;
}
.btn:active{transform:translateY(1px);filter:brightness(.96);}
.btn.primary{
  background:linear-gradient(180deg,#4d9a80,#2f6b58);border-color:#275849;color:#f6fbf7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 3px rgba(20,60,45,.3);
}
.btn.gold{
  background:linear-gradient(180deg,#d2a95e,#b1843a);border-color:#8d6527;color:#fff8e6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn.ghost{background:transparent;box-shadow:none;}
.btn.sm{min-height:34px;font-size:12px;padding:0 9px;}
.btn.xs{min-height:30px;font-size:11.5px;padding:0 8px;border-radius:3px;}

/* 资源条 */
.bar{position:relative;height:6px;border-radius:3px;background:#ded0b3;
  overflow:hidden;border:1px solid rgba(120,90,50,.28);}
.bar>i{display:block;height:100%;width:0;border-radius:2px;transition:width .26s ease-out;}
.bar.hp>i{background:linear-gradient(90deg,#8f2f27,#c9573f);}
.bar.mp>i{background:linear-gradient(90deg,#2f5773,#4f87ad);}
.bar.exp>i{background:linear-gradient(90deg,#b7883c,#e0bf7c);}
.bar.exp{background:#e5d7ba;}
.bar.think{height:4px;}

/* 稀有度 */
.rar0{color:#6d6555}
.rar1{color:#2f6b58}
.rar2{color:#33546b}
.rar3{color:#6f4a7d}

/* 小标签 */
.chip{font-size:10px;padding:1px 5px;border-radius:2px;border:1px solid var(--line);
  color:var(--dim);background:rgba(255,250,235,.6);white-space:nowrap;}
.chip.on,.chip.good{color:#245a49;border-color:#6aa28b;background:#e2f0e7;}
.chip.bad{color:#8d2e22;border-color:#c98a7d;background:#f7e2dc;}
.chip.gold{color:#7d571c;border-color:#c09953;background:#f6ead0;}

/* ---------------- 顶栏 ---------------- */
.top{
  position:relative;z-index:1;display:flex;align-items:center;gap:9px;
  padding:calc(6px + var(--safe-t)) 11px 7px;
  background:linear-gradient(180deg,#9a6d43,#7a5130 70%,#6a4527);
  border-bottom:2px solid #5a3a1f;color:#fbf1da;
}
.result,.top .res{display:flex;align-items:center;gap:9px;font-size:11.5px;flex:none;}
.brand{
  font-family:var(--serif);font-size:15px;letter-spacing:.16em;color:#f8e8c4;
  text-shadow:0 1px 0 rgba(0,0,0,.25);flex:none;
}
.icon-btn{
  width:30px;height:30px;border-radius:3px;border:1px solid rgba(255,240,210,.35);
  background:rgba(255,240,210,.12);color:#fbf1da;font-family:var(--serif);font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.top .tiny{color:#e4cda6;}
.top .bar.exp{background:rgba(50,30,12,.4);border-color:rgba(255,235,200,.28);}
.top .gold{color:#f4d891;}

.main{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:1;}
.view{flex:1;min-height:0;display:flex;flex-direction:column;}

/* ---------------- 底部导航 ---------------- */
.nav{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;flex:none;
  padding:6px 9px calc(7px + var(--safe-b));
  background:linear-gradient(180deg,#f3e5c6,#e6d3b0);
  border-top:1px solid var(--line2);
}
.nav .btn{min-height:44px;flex-direction:column;gap:0;font-size:12.5px;
  background:transparent;border-color:transparent;box-shadow:none;color:var(--ink2);}
.nav .btn b{font-family:var(--serif);font-weight:600;letter-spacing:.08em;}
.nav .btn span{font-size:9px;color:var(--dim2);letter-spacing:.1em;}
.nav .btn.on{background:rgba(255,251,240,.75);border-color:var(--line);
  color:var(--cinnabar);box-shadow:inset 0 -2px 0 var(--cinnabar);}

/* ---------------- 开局 ---------------- */
.start{flex:1;display:flex;flex-direction:column;padding:0 12px calc(12px + var(--safe-b));
  overflow-y:auto;position:relative;z-index:1;}
.logo{padding:18px 2px 10px;text-align:center;position:relative;}
.logo h1{
  margin:0;font-family:var(--serif);font-size:30px;letter-spacing:.34em;color:var(--wood2);
  text-shadow:0 1px 0 #fff8e7,0 2px 10px rgba(120,85,45,.2);font-weight:700;
}
.logo p{margin:5px 0 0;font-size:10.5px;letter-spacing:.42em;color:var(--dim);}
.logo .seal{
  position:absolute;right:16px;top:22px;width:34px;height:34px;line-height:16px;
  border:2px solid var(--cinnabar);color:var(--cinnabar);font-family:var(--serif);
  font-size:11px;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;
  transform:rotate(-6deg);opacity:.85;border-radius:3px;background:rgba(255,245,225,.5);
}
.lead{font-size:11.5px;color:var(--dim);text-align:center;line-height:1.6;margin:0 8px 10px;}

.cls-card{
  display:flex;gap:10px;align-items:stretch;text-align:left;width:100%;
  border:1px solid var(--line2);border-radius:4px;padding:8px 9px;margin-bottom:9px;
  background:linear-gradient(180deg,#fdf6e6,#f2e4c7);
  box-shadow:inset 0 0 0 1px #fffdf6,0 2px 6px rgba(110,80,40,.1);
  transition:transform .1s;
}
.cls-card:active{transform:scale(.985);}
.cls-art{width:76px;flex:none;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(70% 60% at 50% 75%,rgba(47,107,88,.13),transparent 70%);}
.cls-art svg{height:96px;width:auto;}
.cls-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.cname{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.cname b{font-family:var(--serif);font-size:16px;letter-spacing:.1em;color:var(--wood2);}
.tag{font-size:9.5px;padding:1px 5px;border-radius:2px;background:#e4efe8;color:#24604f;
  border:1px solid #93bfae;}
.tag2{font-size:9.5px;padding:1px 5px;border-radius:2px;background:#f6e2dc;color:#8d2e22;
  border:1px solid #d3a79c;}
.desc{font-size:11px;color:var(--ink2);margin-top:4px;line-height:1.5;opacity:.86;}
.stats{display:flex;gap:7px;margin-top:5px;font-size:10px;color:var(--dim);flex-wrap:wrap;}
.skill-mini{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;}
.skill-mini .s{font-size:9.5px;padding:1.5px 5px;border-radius:2px;background:rgba(255,252,242,.8);
  border:1px solid var(--line);color:var(--ink2);}
.skill-mini .s b{color:var(--jade);font-weight:600;}

/* ---------------- 地图 ---------------- */
.map{flex:1;min-height:0;overflow-y:auto;padding:8px 11px 10px;}
.quest-strip{
  display:flex;align-items:center;gap:7px;padding:5px 8px;margin-bottom:8px;
  border:1px solid var(--line2);border-radius:3px;font-size:11.5px;color:var(--ink2);
  background:linear-gradient(180deg,#fdf7e8,#f3e6cb);
}
.seal-sm{
  width:20px;height:20px;flex:none;border:1.5px solid var(--cinnabar);border-radius:2px;
  color:var(--cinnabar);font-family:var(--serif);font-size:11px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,245,225,.6);
}
.region{
  position:relative;border:1px solid var(--line2);border-radius:4px;margin-bottom:8px;
  overflow:hidden;background:linear-gradient(180deg,#fcf5e4,#f0e2c4);
  box-shadow:inset 0 0 0 1px #fffdf6;
}
.region.locked{opacity:.66;filter:saturate(.7);}
.region .rh{display:flex;align-items:center;gap:7px;padding:7px 9px;position:relative;overflow:hidden;}
.region .rh .banner{position:absolute;right:0;top:0;width:110px;height:34px;opacity:.9;pointer-events:none;}
.region .rh .banner svg{width:110px;height:34px;}
.region .rh .grow{position:relative;z-index:1;}
.region .rh .idx{
  width:21px;height:21px;border-radius:2px;border:1px solid #c8a271;color:#8d5c30;
  background:#f7ead0;font-family:var(--serif);font-size:11px;display:flex;align-items:center;
  justify-content:center;flex:none;z-index:1;
}
.rn{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--wood2);}
.rd{font-size:10px;color:var(--dim);margin-top:1px;}
.rs{font-size:11px;color:var(--dim);flex:none;z-index:1;padding-right:2px;}
.region .body{border-top:1px dashed var(--line);padding:5px 7px 7px;background:rgba(255,253,245,.5);}
.node{
  display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:3px;
  border:1px solid rgba(198,176,136,.5);margin-top:4px;background:rgba(255,253,243,.72);
}
.node.cur{border-color:#599b82;background:linear-gradient(90deg,#e8f4ec,#fbf6e9);}
.node.done{opacity:.72;}
.node .ic{width:16px;flex:none;font-size:11px;color:var(--dim2);text-align:center;font-family:var(--serif);}
.node.cur .ic{color:var(--jade);}
.node .nm{font-size:12px;flex:1;min-width:0;color:var(--ink);}
.node .nm small{color:var(--dim2);font-size:9.5px;margin-left:5px;}
.go{
  flex:none;min-height:30px;font-size:11px;padding:0 9px;border-radius:3px;
  border:1px solid var(--line2);color:var(--ink2);background:linear-gradient(180deg,#fbf4e2,#ecdbba);
  display:flex;align-items:center;
}
.go.on{border-color:#2f6b58;color:#f4f9f4;background:linear-gradient(180deg,#4f937b,#2f6b58);}
.go.lock{opacity:.6;}
.locked-hint{color:var(--dim2);font-size:10px;padding-top:6px;}

/* ---------------- 战斗 ---------------- */
.battle{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:4px 9px calc(6px + var(--safe-b));gap:4px;position:relative;z-index:1;}
.bhead{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink2);}
.bhead .center{font-family:var(--serif);font-size:12.5px;letter-spacing:.06em;color:var(--wood2);}
.bhead .num{font-size:11px;color:var(--dim);}

/* 自动挂机开关与速度档 */
.auto-bar{display:flex;align-items:center;gap:7px;margin:0 0 8px;}
.auto-sw{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;
  border-radius:4px;border:1px solid var(--line2);color:var(--ink2);
  background:linear-gradient(180deg,#fcf5e4,#f1e3c6);
  box-shadow:inset 0 0 0 1px #fffdf6,0 1px 2px rgba(90,60,20,.12);
  font-size:12.5px;font-weight:600;transition:transform .08s,filter .12s;}
.auto-sw .dot{width:7px;height:7px;border-radius:50%;background:#b3a488;}
.auto-sw:active{transform:translateY(1px);filter:brightness(.96);}
.auto-sw.on{background:linear-gradient(180deg,#4d9a80,#2f6b58);border-color:#275849;
  color:#f6fbf7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 1px 3px rgba(20,60,45,.3);}
.auto-sw.on .dot{background:#f6e3a8;box-shadow:0 0 6px rgba(255,238,180,.85);}
.auto-sp{min-height:44px;padding:0 10px;border-radius:4px;border:1px solid var(--line2);
  background:rgba(255,250,238,.72);font-size:12px;color:var(--wood2);}
.auto-sp:active{filter:brightness(.95);}
.auto-st{font-size:10.5px;color:var(--dim);margin-left:auto;}
.auto-sum{font-size:10.5px;color:var(--dim);margin:-3px 0 8px;padding-left:2px;line-height:1.5;}
.auto-sum.red{color:var(--cinnabar);}
.auto-sw.sm,.auto-sp.sm{min-height:36px;font-size:11px;padding:0 7px;border-radius:3px;flex:none;}
.auto-sw.sm{gap:4px;}

/* 自动加点 / 自动换装：与挂机开关同一区域，独立开关 */
.auto-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-2px 0 8px;}
.auto-sub .auto-sw{min-height:44px;padding:0 9px;font-size:11px;gap:4px;flex:none;}
.auto-lock{min-height:44px;padding:0 9px;border-radius:4px;border:1px dashed var(--line2);
  background:rgba(255,250,238,.6);font-size:11px;color:var(--dim);flex:none;}
.auto-lock:active{filter:brightness(.96);}
.auto-lock.on{border-style:solid;border-color:#2f6b58;color:#2f6b58;
  background:rgba(47,107,88,.10);font-weight:600;}

/* 自动战斗策略：可折叠小面板，不撑开挂机区 */
.auto-strat{margin:0 0 8px;}
.auto-strat-h{width:100%;display:flex;align-items:center;gap:6px;min-height:36px;
  padding:0 9px;border:1px solid var(--line2);border-radius:4px;
  background:rgba(255,250,238,.55);color:var(--ink);font-size:11.5px;}
.auto-strat-h .ttl{flex:none;font-weight:600;color:var(--wood);}
.auto-strat-h .grow{text-align:left;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.auto-strat-h .arr{flex:none;color:var(--dim);font-size:10.5px;}
.auto-strat-p{margin-top:6px;padding:8px;border:1px solid var(--line2);border-radius:4px;
  background:rgba(255,250,238,.55);display:flex;flex-direction:column;gap:8px;}
.auto-strat-p .auto-sw{width:100%;justify-content:center;min-height:44px;flex:none;}
.auto-slider{display:flex;align-items:center;gap:8px;min-height:44px;font-size:11.5px;color:var(--ink);}
.auto-slider>span{flex:none;width:88px;}
.auto-slider input[type=range]{flex:1;height:44px;margin:0;accent-color:var(--jade);}
.auto-slider .sv{flex:none;width:38px;text-align:right;font-weight:600;color:var(--jade);}

/* 挂机区域：横向滚动选择条，只列已解锁；未解锁置灰并写明解锁条件 */
.auto-regions-h{display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;color:var(--ink);}
.auto-regions{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 0 4px;
  -webkit-overflow-scrolling:touch;}
.auto-region{flex:0 0 auto;min-width:136px;min-height:50px;padding:5px 9px;
  border:1px solid var(--line2);border-radius:4px;background:rgba(255,250,238,.65);
  color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:1px;font-size:11px;}
.auto-region .rn{font-weight:600;font-size:11.5px;white-space:nowrap;}
.auto-region .ri{font-size:10px;color:var(--dim);line-height:1.35;white-space:nowrap;}
.auto-region.on{border-color:var(--jade);background:rgba(47,107,91,.08);
  box-shadow:inset 0 0 0 1px rgba(47,107,91,.35);}
.auto-region.locked{opacity:.55;border-style:dashed;}
.auto-region.locked .rn{color:var(--dim);}
.auto-reg-info{font-size:10.5px;color:var(--dim);line-height:1.4;}
.auto-reg-warn{font-size:10.5px;color:var(--cinnabar);line-height:1.4;}

.enemy-area{position:relative;padding:10px 0 0;flex:1;min-height:132px;max-height:46vh;
  display:flex;flex-direction:column;justify-content:flex-start;}
.arena-bg{position:absolute;inset:-4px -9px 0 -9px;overflow:hidden;opacity:.92;pointer-events:none;
  border-radius:0 0 8px 8px;}
.arena-bg svg{width:100%;height:100%;display:block;}
.enemies{position:relative;display:flex;gap:5px;justify-content:center;align-items:flex-start;
  padding-top:2px;min-height:112px;z-index:1;}
.efield{
  flex:1;min-width:0;max-width:124px;border:1px solid rgba(140,110,70,.55);border-radius:4px;
  background:rgba(255,251,240,.82);padding:3px 5px 4px;position:relative;
  transition:box-shadow .15s,transform .1s;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.efield.sel{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold2),0 0 0 1px rgba(183,136,60,.35);}
.efield.dead{opacity:.3;filter:grayscale(1);}
.efield.hit{animation:shake .3s;}
.efield.hit::after{
  content:"";position:absolute;inset:0;background:#fff;opacity:.5;border-radius:4px;
  animation:flash .3s;pointer-events:none;
}
@keyframes shake{0%{transform:translateX(0)}35%{transform:translateX(-2.5px)}70%{transform:translateX(2.5px)}100%{transform:translateX(0)}}
@keyframes flash{from{opacity:.55}to{opacity:0}}
.eart{height:56px;display:flex;align-items:flex-end;justify-content:center;}
.eart svg{height:56px;width:auto;max-width:100%;}
/* 首领：更大体型 + 专属朱红描金边框 */
.efield.boss{max-width:158px;flex:1.35;border-color:#9b4433;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 0 0 1px rgba(172,58,40,.28),0 2px 8px rgba(140,60,40,.16);
  background:rgba(255,248,236,.9);}
.efield.boss .eart{height:78px;}
.efield.boss .eart svg{height:78px;}
.efield.boss .en{font-size:11.5px;color:#7f2b1e;font-family:var(--serif);letter-spacing:.04em;}
.efield .en{font-size:10.5px;font-weight:600;display:flex;justify-content:space-between;gap:3px;
  align-items:baseline;color:var(--ink);}
.efield .en .lv{font-size:8.5px;color:var(--dim2);font-weight:400;}
.efield .bar.hp{margin:2px 0 2px;}
.efield .enum{font-size:9px;color:var(--dim);display:flex;justify-content:space-between;}
.efield .sts{display:flex;gap:2px;flex-wrap:wrap;min-height:12px;margin-top:2px;}
.efield .sts .chip{font-size:8px;padding:0 3px;line-height:11px;border-radius:2px;}
.tmark{
  position:absolute;top:-6px;left:-4px;font-size:8.5px;color:#fff8ea;background:var(--cinnabar);
  padding:0 4px;border-radius:2px;z-index:2;letter-spacing:.08em;
}
.pop{
  position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:15px;font-weight:700;
  color:#8d2418;text-shadow:0 1px 0 #fff6e2,0 2px 4px rgba(255,250,235,.7);pointer-events:none;
  z-index:3;animation:pop .66s ease-out forwards;
}
.pop.heal{color:#1f6b52;}
.pop.crit{color:#a1200f;font-size:18px;}
.pop.miss{color:#7d7360;font-size:12px;}
@keyframes pop{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}
  25%{opacity:1;transform:translate(-50%,-2px) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-20px) scale(1)}}

.order{
  display:flex;align-items:center;gap:3px;padding:3px 7px;min-height:24px;flex:none;
  border:1px solid var(--line2);border-radius:3px;overflow-x:auto;white-space:nowrap;
  background:linear-gradient(180deg,#fdf6e5,#f0e2c4);
  box-shadow:inset 0 0 0 1px #fffdf6;
}
.order .lb{font-size:9px;color:var(--dim2);letter-spacing:.1em;flex:none;font-family:var(--serif);}
.order .o{font-size:9.5px;padding:1px 5px;border-radius:2px;background:#efe0c1;color:var(--ink2);
  flex:none;border:1px solid rgba(169,143,100,.6);}
.order .o.ally{color:#245a49;background:#e4efe7;border-color:#9cc4b3;}
.order .o.now{border-color:var(--cinnabar);color:#8d2e22;background:#f8e4dd;}
.order .o-arrow{font-size:9px;color:var(--dim2);flex:none;}

.allies{display:flex;gap:5px;flex:none;}
.unit{
  flex:1;min-width:0;border:1px solid var(--line2);border-radius:4px;padding:3px 6px 4px;
  background:linear-gradient(180deg,rgba(255,252,242,.95),rgba(243,231,208,.95));
  position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.unit.pet{flex:0 0 38%;}
.unit.def{box-shadow:inset 0 0 0 1px #4f937b;}
.unit.dead{opacity:.38;filter:grayscale(1);}
.unit.hit{animation:shake .3s;}
.unit.hit::after{content:"";position:absolute;inset:0;background:#fff;opacity:.45;border-radius:4px;
  animation:flash .3s;pointer-events:none;}
.unit .uart{height:40px;float:left;width:32px;margin-right:4px;display:flex;align-items:flex-end;}
.unit .uart svg{height:40px;width:auto;}
.unit .un{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;gap:3px;}
.unit .un b{font-weight:600;color:var(--ink);}
.unit .un .st{font-size:8.5px;color:var(--dim2);}
.unit .bar{margin-top:2px;}
.unit .bar.hp>i{background:linear-gradient(90deg,#2f6b58,#5aa184);}
.unit .bar.mp>i{background:linear-gradient(90deg,#2f5773,#5b93b8);}
.unit .nums{font-size:8.5px;color:var(--dim);display:flex;justify-content:space-between;margin-top:1px;}
.unit .sts{display:flex;gap:2px;flex-wrap:wrap;min-height:11px;margin-top:2px;clear:both;}
.unit .sts .chip{font-size:8px;padding:0 3px;line-height:11px;}

.log{
  flex:1 1 auto;height:auto;min-height:72px;max-height:160px;overflow-y:auto;border:1px solid var(--line2);border-radius:3px;
  background:rgba(255,252,243,.72);padding:3px 7px;font-size:10px;line-height:1.5;color:var(--ink2);
  box-shadow:inset 0 1px 3px rgba(120,90,50,.1);
}
.log div{padding:.5px 0;border-bottom:1px dotted rgba(160,130,90,.18);}
.log div.hi{color:#8a5a1c;}
.log div.bad{color:#a1372a;}
.log div.good{color:#2a6b56;}
.log div.sys{color:#8a8171;}

.actions{display:flex;flex-direction:column;gap:5px;flex:none;}
.orb-row{display:flex;gap:6px;justify-content:center;align-items:stretch;}
.orb{
  position:relative;flex:1 1 0;max-width:60px;min-height:54px;border-radius:50%;
  border:1px solid #c0a270;background:radial-gradient(circle at 50% 40%,#fffaf0,#f2e3c5 70%,#e7d3ae);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  box-shadow:inset 0 0 0 1px #fffdf7,0 1px 3px rgba(100,70,30,.18);
  transition:transform .08s;
}
.orb:active{transform:scale(.95);}
.orb .bagua{position:absolute;inset:0;width:100%;height:100%;opacity:.75;pointer-events:none;}
.orb b{position:relative;font-size:10.5px;font-weight:600;color:var(--wood2);line-height:1.15;
  font-family:var(--serif);letter-spacing:.02em;}
.orb small{position:relative;font-size:8px;color:var(--dim);margin-top:0;}
.orb:disabled b{color:var(--dim2);}
.pot-row{display:flex;gap:5px;}
.potion{
  flex:1;min-height:36px;border:1px solid var(--line2);border-radius:3px;
  background:linear-gradient(180deg,#fcf5e5,#efe0bf);
  display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:inset 0 0 0 1px #fffdf6;
}
.potion b{font-size:10.5px;font-weight:600;color:var(--ink2);}
.potion em{font-style:normal;font-size:9.5px;color:var(--dim);}
.potion:disabled{opacity:.42;}
.pot-note{flex:none;align-self:center;font-size:9.5px;color:var(--dim);white-space:nowrap;}

/* ---------------- 结算 / 弹层 ---------------- */
.overlay{
  position:absolute;inset:0;z-index:20;background:rgba(46,36,22,.5);
  backdrop-filter:blur(1.5px);display:flex;align-items:center;justify-content:center;
  padding:16px 13px calc(16px + var(--safe-b));
}
.sheet{
  width:100%;max-width:352px;max-height:100%;overflow-y:auto;border-radius:5px;
  border:1px solid var(--line2);background:linear-gradient(180deg,#fdf7e7,#f3e5c8);
  box-shadow:inset 0 0 0 2px #fffdf5,0 18px 48px rgba(50,30,10,.45);padding:12px;
  position:relative;
}
.sheet::before,.sheet::after{content:"";position:absolute;left:10px;right:10px;height:3px;
  background:linear-gradient(90deg,rgba(138,95,56,0),rgba(138,95,56,.55),rgba(138,95,56,0));}
.sheet::before{top:4px}.sheet::after{bottom:4px}
.sheet h3{
  margin:0 0 8px;text-align:center;font-family:var(--serif);font-size:18px;letter-spacing:.22em;
  color:var(--wood2);font-weight:700;
}
.sheet .hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:8px 0;}
.rew-line{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);
  padding:2px 2px;border-bottom:1px dotted rgba(160,130,90,.25);}
.rew-up{margin-top:6px;padding:4px 7px;font-size:11px;color:#245a49;background:#e8f2ea;
  border:1px solid #a8c9ba;border-radius:3px;}
.loot-row{display:flex;align-items:center;justify-content:space-between;gap:6px;
  border:1px solid var(--line);border-radius:3px;padding:4px 7px;margin-top:4px;
  background:rgba(255,252,242,.8);font-size:11.5px;}
.loot-row .l{min-width:0;}
.loot-row .l .n{font-size:12px;font-weight:600;}
.loot-row .l .d{font-size:9.5px;color:var(--dim);}
.cap-box{margin-top:5px;padding:7px 8px;border:1px solid #c09a53;border-radius:4px;
  background:linear-gradient(180deg,#fdf3da,#f5e7c6);}
.confirm{font-size:11.5px;color:#8d2e22;background:#f8e4dd;border:1px solid #d3a79c;
  border-radius:3px;padding:6px 8px;margin-top:8px;line-height:1.5;}
.cls-preview{height:96px;display:flex;align-items:center;justify-content:center;}
.cls-preview svg{height:90px;}
.sk-row{padding:4px 0;border-bottom:1px dotted rgba(160,130,90,.25);}
.sk-row b{font-family:var(--serif);color:var(--wood2);margin-right:6px;}

/* ---------------- 角色 / 商店 / 概率 ---------------- */
.hero-panel{display:flex;gap:9px;align-items:center;}
.hero-art{width:66px;height:88px;flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 60% at 50% 75%,rgba(47,107,88,.13),transparent 70%);}
.hero-art svg{height:86px;}
.pet-art{width:52px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 60% at 50% 75%,rgba(47,107,88,.12),transparent 70%);}
.pet-art svg{height:52px;}
.pet-art.sm{width:40px;height:44px;}
.pet-art.sm svg{height:40px;}
.pet-row{display:flex;gap:8px;align-items:center;padding:7px 0;border-top:1px dashed var(--line);}
.pet-acts{display:flex;flex-direction:column;gap:5px;flex:none;}
.pet-pick{display:flex;gap:8px;align-items:center;padding:7px 0;border-top:1px dashed var(--line);font-size:11.5px;}
.hname{font-family:var(--serif);font-size:16px;letter-spacing:.1em;color:var(--wood2);}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.stat{background:rgba(255,251,240,.8);border:1px solid var(--line);border-radius:3px;padding:3px 6px;}
.stat .k{font-size:9px;color:var(--dim2);letter-spacing:.08em;}
.stat .v{font-size:13px;font-weight:600;color:var(--ink);}
.alloc{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px;}
.alloc .a{background:rgba(255,251,240,.8);border:1px solid var(--line);border-radius:3px;
  padding:4px 2px;text-align:center;min-height:46px;display:flex;flex-direction:column;
  justify-content:center;gap:1px;box-shadow:inset 0 0 0 1px #fffdf6;}
.alloc .a .k{font-size:11.5px;font-family:var(--serif);color:var(--wood2);font-weight:600;}
.alloc .a .v{font-size:8px;color:var(--dim);line-height:1.25;}
.alloc .a:active{filter:brightness(1.05);}
.eq-row{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:3px;
  padding:4px 7px;margin-top:4px;background:rgba(255,251,240,.8);}
.eq-row .slot{font-size:10px;color:var(--dim2);width:26px;flex:none;font-family:var(--serif);}
.eq-row .nm{font-size:12px;flex:1;min-width:0;font-weight:600;}
.eq-row .nm small{display:block;font-size:9.5px;color:var(--dim);font-weight:400;margin-top:1px;}
.bag-item{border:1px solid var(--line);border-radius:3px;padding:5px 7px;margin-top:5px;
  background:rgba(255,251,240,.8);}
.bag-item .r1{display:flex;align-items:center;gap:6px;}
.bag-item .r1 .nm{font-size:12px;flex:1;min-width:0;font-weight:600;}
.bag-item .r1 .sc{font-size:9.5px;color:var(--dim2);}
.bag-item .t{font-size:9.5px;color:var(--dim);margin-top:2px;}
.bag-item .r2{display:flex;gap:5px;margin-top:5px;}
.shop-item{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:3px;
  padding:5px 7px;margin-top:4px;background:rgba(255,251,240,.8);}
.shop-item.locked{opacity:.55;}
.shop-item .nm{flex:1;min-width:0;}
.shop-item .nm b{font-size:12px;display:block;font-weight:600;}
.shop-item .nm small{font-size:9.5px;color:var(--dim);}
.prob-h{font-size:11px;color:var(--wood2);margin:8px 0 2px;letter-spacing:.1em;font-family:var(--serif);}
.prob-row{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;padding:2px 0;
  border-bottom:1px dotted rgba(160,130,90,.22);color:var(--ink2);}
.prob-row .k{color:var(--dim);flex:1;min-width:0;}
.prob-note{font-size:9.5px;color:var(--dim2);margin-top:5px;line-height:1.6;}

/* 六技能布局：4 个/行 ×2 行，窄屏不挤出竖屏 */
.orb-row-6{flex-wrap:wrap;gap:5px;}
.orb-row-6 .orb{flex:0 0 calc(25% - 4px);max-width:none;min-height:46px;border-radius:6px;padding:2px;}
.orb-row-6 .orb b{font-size:10px;}
.orb-row-6 .orb small{font-size:8px;}
.orb.locked{opacity:.48;filter:grayscale(.45);}
.orb.locked b{color:var(--dim2);}
.orb.locked small{color:#9a6247;}
.eq-btns{display:flex;flex-direction:column;gap:3px;flex:none;}
.set-sum{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.pet-row.is-locked{background:rgba(200,182,146,.18);border-radius:3px;}
.pet-acts{display:grid;grid-template-columns:repeat(2,auto);gap:4px;flex:none;}
.pet-acts .btn{padding:0 6px;}
.pick-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 0;
  border-top:1px dashed var(--line);font-size:11.5px;}

/* Toast */
.toast{
  position:absolute;left:50%;bottom:calc(78px + var(--safe-b));transform:translateX(-50%);
  background:rgba(66,47,26,.94);border:1px solid #a98f64;color:#f9efd9;font-size:11.5px;
  padding:6px 12px;border-radius:3px;z-index:30;box-shadow:0 8px 22px rgba(40,25,10,.4);
  animation:toastIn .2s ease-out;max-width:80%;text-align:center;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ==================================================================
   横屏手游式布局（对齐 UI-SPEC.md）
   主界面：HUD / 场景 / 任务 / 右侧功能簇 / 底部日志 + 主行动
   战斗：左上回合与出手顺序、上敌下我舞台、底部轮盘与指令区
   面板：左侧纵向页签 + 右侧内容 + 底部操作条 + 右上关闭
   ================================================================== */
.app.land{max-width:none;width:100%;height:100dvh;margin:0;box-shadow:none;}
@media(min-width:520px){
  .app.land{height:100dvh;margin-top:0;box-shadow:none;}
}

/* ---------------- 主界面网格 ---------------- */
.home{
  flex:1;min-height:0;display:grid;position:relative;z-index:1;
  grid-template-columns:168px minmax(0,1fr) 104px;
  grid-template-rows:48px minmax(0,1fr) 62px;
  grid-template-areas:"hud hud hud" "quest scene rail" "bot bot rail";
  padding:var(--safe-t) 0 var(--safe-b);
}
.hud{
  grid-area:hud;display:flex;align-items:center;gap:8px;min-width:0;
  padding:0 8px;border-bottom:1px solid rgba(138,95,56,.35);
  background:linear-gradient(180deg,rgba(154,109,67,.14),rgba(154,109,67,.02));
}
.hud-hero{
  display:flex;align-items:center;gap:7px;min-height:44px;padding:0 8px 0 2px;
  border-radius:4px;flex:none;
}
.hud-hero:active{background:rgba(255,250,236,.7);}
.hud-hero .ava{width:38px;height:42px;display:flex;align-items:flex-end;justify-content:center;flex:none;}
.hud-hero .ava svg{height:42px;width:auto;}
.hinfo{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hinfo b{font-size:11.5px;font-family:var(--serif);color:var(--wood2);letter-spacing:.04em;white-space:nowrap;}
.hb{display:block;width:132px;height:6px;border-radius:3px;overflow:hidden;
  background:#ded0b3;border:1px solid rgba(120,90,50,.28);}
.hb>i{display:block;height:100%;width:100%;}
.hb.hp>i{background:linear-gradient(90deg,#8f2f27,#c9573f);}
.hb.mp>i{background:linear-gradient(90deg,#2f5773,#4f87ad);}
.exp{display:block;width:132px;height:3px;border-radius:2px;overflow:hidden;background:#e5d7ba;}
.exp>i{display:block;height:100%;background:linear-gradient(90deg,#b7883c,#e0bf7c);}
.hud-res{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none;min-width:0;}
.res-chip{display:inline-flex;align-items:baseline;gap:2px;font-size:9.5px;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;padding:1px 5px;background:rgba(255,250,235,.65);white-space:nowrap;}
.res-chip b{font-size:11px;color:var(--wood2);font-variant-numeric:tabular-nums;}
.res-chip.gold b{color:#8a6520;}
.res-chip.red{border-color:#c98a7d;background:#f8e4dd;}
.res-chip.red b{color:var(--cinnabar);}

/* ---------------- 场景（传送点 + 点地移动） ---------------- */
.scene{grid-area:scene;position:relative;overflow:hidden;cursor:pointer;
  border-bottom:1px solid rgba(138,95,56,.35);}
.scene-bg{position:absolute;inset:0;opacity:.95;pointer-events:none;}
.scene-bg svg{width:100%;height:100%;display:block;}
.scene-name{position:absolute;left:9px;top:7px;max-width:210px;z-index:4;pointer-events:none;
  background:rgba(250,241,221,.86);border:1px solid var(--line);border-radius:3px;padding:2px 7px;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.08em;color:var(--wood2);}
.scene-name small{display:block;font-size:9px;color:var(--dim);letter-spacing:0;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.portal{position:absolute;transform:translate(-50%,-50%);z-index:5;width:64px;min-height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;color:var(--ink);}
.portal .p-art{width:32px;height:32px;display:block;line-height:0;}
.portal .p-art svg{width:32px;height:32px;}
.portal .p-lock{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin:3px auto;
  border-radius:50%;border:1px dashed var(--line2);color:var(--dim);font-size:11px;background:rgba(250,241,221,.8);}
.portal .p-name{font-family:var(--serif);font-size:9.5px;white-space:nowrap;color:var(--wood2);
  background:rgba(250,241,221,.86);border-radius:2px;padding:0 3px;max-width:64px;overflow:hidden;text-overflow:ellipsis;}
.portal .p-meta{font-size:8px;white-space:nowrap;color:var(--dim);}
.portal.cur .p-name{background:var(--cinnabar);color:#fff8ee;}
.portal.cur .p-art{filter:drop-shadow(0 0 6px rgba(201,87,63,.65));}
.portal.done .p-name{color:var(--jade);}
.portal.locked{opacity:.62;}
.portal:active .p-art{transform:scale(.94);}
/* 窄场景（≤620px）：传送点收成两列五行胶囊，避免互相压住 */
.portal.dense{width:100%;max-width:76px;min-height:34px;display:grid;
  grid-template-columns:16px minmax(0,1fr);grid-template-rows:auto auto;column-gap:2px;
  align-items:center;padding:1px 3px;background:rgba(250,241,221,.7);
  border:1px solid rgba(169,143,100,.5);border-radius:12px;}
.portal.dense .p-art{grid-row:1/3;width:16px;height:16px;}
.portal.dense .p-art svg{width:16px;height:16px;}
.portal.dense .p-lock{grid-row:1/3;width:14px;height:14px;margin:0;font-size:8.5px;}
.portal.dense .p-name{grid-column:2;font-size:9px;background:none;padding:0;max-width:52px;line-height:1.25;}
.portal.dense .p-meta{grid-column:2;font-size:7.5px;max-width:52px;overflow:hidden;text-overflow:ellipsis;
  line-height:1.25;color:var(--dim);}
.portal.dense.cur .p-name{background:var(--cinnabar);border-radius:2px;padding:0 2px;}
.walker{position:absolute;z-index:3;width:32px;height:44px;transform:translate(-50%,-92%);pointer-events:none;
  transition:left .34s ease-out,top .34s ease-out;}
.walker svg{width:32px;height:44px;}
.walker.walking{animation:walkBob .42s ease-in-out;}
@keyframes walkBob{0%{transform:translate(-50%,-92%)}50%{transform:translate(-50%,-96%)}100%{transform:translate(-50%,-92%)}}

/* ---------------- 左侧任务追踪（可折叠，独立列，不遮挡传送点） ---------------- */
.quest{grid-area:quest;position:relative;z-index:2;height:100%;overflow-y:auto;
  background:linear-gradient(180deg,rgba(250,241,221,.96),rgba(243,231,206,.9));
  border-right:1px solid rgba(138,95,56,.35);}
.q-head{display:flex;align-items:center;gap:5px;min-height:44px;width:100%;padding:0 8px;
  font-family:var(--serif);font-size:12px;color:var(--wood2);
  border-bottom:1px solid rgba(160,130,90,.25);}
.q-head b{letter-spacing:.1em;}
.q-head .q-arrow{font-size:10px;color:var(--dim);}
.q-body{padding:4px 9px 10px;}
.q-cur{font-size:11px;color:var(--cinnabar);font-weight:600;margin:3px 0 3px;line-height:1.35;}
.q-line{font-size:10px;color:var(--ink2);line-height:1.6;}
.q-line .btn{margin-top:5px;width:100%;}
.quest.closed .q-head{border-bottom:0;}

/* ---------------- 右侧功能簇（4 行 2 列，全部 44px） ---------------- */
.rail{grid-area:rail;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:44px;gap:3px;
  align-content:start;padding:4px;border-left:1px solid rgba(138,95,56,.35);
  background:linear-gradient(90deg,rgba(154,109,67,.06),rgba(154,109,67,.02));}
.rail-btn{min-height:44px;min-width:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;border:1px solid var(--line2);border-radius:4px;
  background:linear-gradient(180deg,#fcf5e4,#f1e3c6);box-shadow:inset 0 0 0 1px #fffdf6;
  transition:transform .08s,filter .12s;}
.rail-btn b{font-family:var(--serif);font-size:14px;line-height:1.05;color:var(--wood2);}
.rail-btn span{font-size:8px;color:var(--dim);letter-spacing:.06em;}
.rail-btn:active{transform:translateY(1px);filter:brightness(.96);}

/* ---------------- 底部：日志 + 主行动 ---------------- */
.bot{grid-area:bot;position:relative;display:flex;align-items:stretch;gap:6px;min-width:0;
  padding:4px 6px calc(4px + var(--safe-b));border-top:1px solid rgba(138,95,56,.35);}
.blogstrip{flex:1;min-width:0;display:flex;align-items:stretch;gap:5px;overflow:hidden;
  border:1px solid var(--line2);border-radius:3px;background:rgba(255,252,243,.74);padding:2px 6px;
  box-shadow:inset 0 1px 3px rgba(120,90,50,.1);}
.blog-seal{flex:none;align-self:flex-start;margin-top:2px;width:16px;height:16px;border-radius:2px;
  background:var(--cinnabar);color:#fff6e6;font-size:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);}
.blog-lines{flex:1;min-width:0;overflow:hidden;font-size:9.5px;line-height:1.45;color:var(--ink2);}
.blog-lines div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blog-lines .bad{color:#a1372a;} .blog-lines .good{color:#2a6b56;} .blog-lines .hi{color:#8a5a1c;}
.blog-more{flex:none;align-self:flex-end;font-size:9px;color:var(--dim2);}
.blogstrip.open{position:absolute;left:6px;bottom:calc(100% + 2px);width:min(470px,60%);height:auto;
  max-height:180px;z-index:12;background:#fdf6e5;box-shadow:0 -8px 22px rgba(60,40,20,.3);}
.blogstrip.open .blog-lines{overflow-y:auto;max-height:148px;}
.actbar{flex:none;display:flex;align-items:stretch;gap:5px;}
.act-main{min-height:44px;min-width:148px;font-family:var(--serif);letter-spacing:.06em;}
.act-sub{min-height:44px;padding:0 10px;font-size:11.5px;border-radius:4px;border:1px solid var(--line2);
  background:rgba(255,250,238,.72);color:var(--wood2);}
.act-sub:active{filter:brightness(.95);}
.act-sub.gold{border-color:#8d6527;color:#8d6527;background:#f6ead0;}
.actbar .btn{white-space:nowrap;}

/* 自动策略弹层（主界面右下「策略」） */
.strat-layer{position:absolute;inset:0;z-index:14;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:8px 8px calc(68px + var(--safe-b));background:rgba(46,36,22,.3);
  animation:plFade .16s ease-out;}
.strat-card{width:min(440px,94%);max-height:100%;overflow-y:auto;padding:6px 8px 8px;
  border:1px solid var(--line2);border-radius:5px;
  background:linear-gradient(180deg,#fdf6e5,#f2e5c8);
  box-shadow:0 12px 34px rgba(50,30,10,.45),inset 0 0 0 1px #fffdf5;}
.strat-card .auto-bar{margin-bottom:5px;}
.strat-card .auto-strat{margin-top:4px;}
.strat-card .auto-strat-p{border-top:1px solid var(--line2);padding-top:5px;}
.strat-card .auto-sw,.strat-card .auto-sp,.strat-card .auto-lock,
.strat-card .auto-region,.strat-card .auto-strat-h{min-height:44px;}
.strat-card .auto-slider{min-height:44px;}
.strat-card input[type="range"]{min-height:44px;}

/* ---------------- 竖屏提示页 ---------------- */
.rotate{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:22px 18px;text-align:center;position:relative;z-index:1;}
.rotate h2{margin:0;font-family:var(--serif);font-size:25px;letter-spacing:.28em;color:var(--wood2);}
.rotate p{margin:0;font-size:12px;color:var(--dim);line-height:1.6;max-width:300px;}
.rot-mark{width:112px;height:112px;opacity:.9;}
.rot-mark svg{width:112px;height:112px;}
.rot-hint{font-size:12px;color:var(--ink2);border:1px dashed var(--line2);border-radius:4px;
  padding:7px 12px;background:rgba(255,250,238,.7);max-width:290px;line-height:1.5;}
.rot-hint span{display:inline-block;margin-right:4px;font-size:16px;vertical-align:-2px;color:var(--cinnabar);}

/* ---------------- 统一面板弹层 ---------------- */
.panel-layer{position:absolute;inset:0;z-index:20;display:flex;align-items:stretch;justify-content:center;
  padding:clamp(4px,2vh,12px);background:rgba(46,36,22,.46);animation:plFade .16s ease-out;}
@keyframes plFade{from{opacity:0}to{opacity:1}}
.pframe{position:relative;width:100%;max-width:1040px;display:grid;
  grid-template-columns:96px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 52px;
  border:1px solid var(--line2);border-radius:5px;
  background:linear-gradient(180deg,#fdf7e7,#f3e5c8);
  box-shadow:inset 0 0 0 2px #fffdf5,0 18px 48px rgba(50,30,10,.45);
  animation:pfIn .16s ease-out;overflow:hidden;}
@keyframes pfIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.ptabs{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:4px;padding:10px 7px;
  border-right:1px solid var(--line2);background:linear-gradient(180deg,#f8eed6,#ecdec1);}
.ptabs.slim{opacity:.5;}
.pframe.no-tabs{grid-template-columns:minmax(0,1fr);}
.pframe.no-tabs .pbody,.pframe.no-tabs .pfoot{grid-column:1;}
.ptab{min-height:44px;border:1px solid transparent;border-radius:4px;font-family:var(--serif);
  font-size:12.5px;color:var(--ink2);letter-spacing:.08em;display:flex;align-items:center;justify-content:center;}
.ptab.on{border-color:var(--line2);background:rgba(255,251,240,.9);color:var(--wood2);
  box-shadow:inset 0 0 0 1px #fffdf6;}
.ptab:active{filter:brightness(.96);}
.pbody{grid-column:2;grid-row:1;overflow-y:auto;overflow-x:hidden;padding:8px 46px 10px 12px;
  -webkit-overflow-scrolling:touch;}
.pbody .map{flex:none;min-height:0;overflow:visible;padding:0;}
.phead{display:flex;align-items:baseline;gap:8px;justify-content:space-between;margin:0 0 8px;
  padding:0 0 6px;border-bottom:1px solid rgba(160,130,90,.3);}
.phead b{font-family:var(--serif);font-size:15px;letter-spacing:.16em;color:var(--wood2);}
.phead small{font-size:10px;color:var(--dim);}
.pclose{position:absolute;right:5px;top:5px;width:44px;height:44px;z-index:3;border-radius:4px;
  border:1px solid var(--line2);background:rgba(255,251,240,.9);font-size:19px;line-height:1;color:var(--wood2);
  display:flex;align-items:center;justify-content:center;}
.pclose:active{filter:brightness(.95);}
.pfoot{grid-column:2;grid-row:2;display:flex;align-items:center;gap:6px;
  padding:4px 8px calc(4px + var(--safe-b));border-top:1px solid var(--line2);
  background:linear-gradient(180deg,#f8eed6,#f1e3c6);overflow-x:auto;}
.pfoot .btn{flex:none;min-height:44px;}
.pfoot .tiny{align-self:center;}

/* 技能面板与秘境一览（面板内复用） */
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:6px;}
.sk-card{border:1px solid var(--line);border-radius:4px;padding:7px 9px;
  background:rgba(255,251,240,.82);box-shadow:inset 0 0 0 1px #fffdf6;}
.sk-card.locked{opacity:.62;}
.sk-h{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.sk-h b{font-family:var(--serif);font-size:13px;color:var(--wood2);}
.sk-cost{font-size:9.5px;color:var(--dim);margin:2px 0 4px;}
.sk-desc{font-size:10.5px;color:var(--ink2);line-height:1.5;}
.rg-list{display:flex;flex-direction:column;gap:5px;}
.rg-row{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:4px;
  padding:5px 8px;background:rgba(255,251,240,.82);}
.rg-row.locked{opacity:.62;}
.rg-idx{flex:none;width:22px;height:22px;border-radius:2px;background:var(--cinnabar);color:#fff6e6;
  font-family:var(--serif);font-size:11px;display:flex;align-items:center;justify-content:center;}
.rg-n{font-size:12px;font-weight:600;font-family:var(--serif);color:var(--wood2);}
.rg-p{font-size:12px;color:var(--dim);flex:none;}

/* ---------------- 战斗（横屏舞台） ---------------- */
.battle2{flex:1;min-height:0;display:grid;gap:4px;
  grid-template-columns:clamp(104px,18vw,158px) minmax(0,1fr) clamp(150px,24vw,200px);
  grid-template-rows:44px minmax(0,1fr) 148px;
  grid-template-areas:"btop btop btop" "stage stage stage" "blog wheel bcmd";
  padding:var(--safe-t) 4px var(--safe-b);position:relative;z-index:1;}
.btop{grid-area:btop;display:flex;align-items:center;gap:7px;min-width:0;}
.bround{flex:none;font-size:9.5px;color:var(--dim);padding:0 7px;min-height:32px;display:flex;align-items:center;
  border:1px solid var(--line2);border-radius:3px;background:rgba(255,251,240,.72);}
.bround b{font-size:14px;color:var(--wood2);margin:0 2px;}
.bgrow{flex:none;display:flex;align-items:center;gap:4px;margin-left:auto;}
.bgrow .auto-sw.sm,.bgrow .auto-sp.sm{min-height:44px;}
.land .order{min-height:34px;padding:1px 5px;}
.order .o{display:inline-flex;align-items:center;gap:3px;padding:0 4px 0 0;border-radius:10px;line-height:1;
  background:transparent;border-color:transparent;}
.order .o i{flex:none;width:16px;height:16px;border-radius:50%;background:#efe0c1;
  border:1px solid rgba(169,143,100,.6);display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:8.5px;color:var(--ink2);}
.order .o.ally i{background:#e4efe7;border-color:#9cc4b3;color:#245a49;}
.order .o em{font-style:normal;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.stage{grid-area:stage;position:relative;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;border:1px solid rgba(140,110,70,.45);border-radius:5px;padding:3px 6px 2px;
  background:linear-gradient(180deg,rgba(250,243,228,.5),rgba(238,224,196,.35));}
.stage .arena-bg{position:absolute;inset:0;opacity:.9;pointer-events:none;}
.stage .arena-bg svg{width:100%;height:100%;display:block;}
.stage-cap{position:absolute;left:7px;top:2px;z-index:2;font-size:10px;font-family:var(--serif);
  color:var(--wood2);letter-spacing:.06em;background:rgba(250,241,221,.7);border-radius:2px;padding:0 5px;}
.efront{position:relative;z-index:1;display:flex;gap:5px;justify-content:center;align-items:flex-start;
  padding-top:6px;}
/* 前后排层次：中间位略靠后、两侧略靠前，形成梯形站位 */
.efront .efield:nth-child(2){transform:translateY(6px);}
.efront .efield:nth-child(3){transform:translateY(12px);opacity:.94;}
.efront .efield:nth-child(1){transform:translateY(0);}
.ground{position:relative;z-index:1;height:2px;margin:1px 10px 2px;
  background:linear-gradient(90deg,transparent,rgba(90,70,40,.4),transparent);}
.arear{position:relative;z-index:1;display:flex;gap:5px;}
.land .efield{padding:3px 4px 3px;max-width:120px;}
.land .efield .eart{height:34px;}
.land .efield .eart svg{height:34px;}
.land .efield.boss .eart{height:46px;}
.land .efield.boss .eart svg{height:46px;}
.land .efield .sts{min-height:0;}
.land .unit{padding:3px 6px 4px;}
.land .unit .uart{height:24px;width:20px;margin-right:4px;}
.land .unit .uart svg{height:24px;}
.land .unit .sts{min-height:0;}
.land .unit .un{font-size:10px;}
.land .unit .nums{font-size:8px;line-height:1.15;}

/* 战斗日志窄条（默认两行，单击展开） */
.blogwrap{grid-area:blog;min-width:0;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  border:1px solid var(--line2);border-radius:4px;background:rgba(255,252,243,.82);}
.blog-h{flex:none;display:flex;align-items:center;gap:5px;min-height:26px;padding:0 6px;
  border-bottom:1px solid rgba(160,130,90,.25);}
.blog-h .seal-sm{flex:none;}
.blog-h b{font-size:10px;font-family:var(--serif);color:var(--wood2);letter-spacing:.08em;}
.blog-h .blog-more{font-size:9px;color:var(--dim2);margin-left:auto;}
.blog-lines{flex:1;min-height:0;overflow:hidden;padding:2px 6px;font-size:9.5px;line-height:1.42;color:var(--ink2);}
.blog-lines div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blogwrap.open .blog-lines{overflow-y:auto;}
.blogwrap:not(.open) .blog-lines div:not(:nth-last-child(-n+2)){display:none;}

/* 技能轮盘 */
.wheel{grid-area:wheel;position:relative;min-width:0;overflow:visible;}
.wheel-lb{position:absolute;left:2px;bottom:0;font-size:8.5px;color:var(--dim2);letter-spacing:.16em;
  font-family:var(--serif);}
.sorb{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid #c0a270;background:radial-gradient(circle at 50% 40%,#fffaf0,#f2e3c5 70%,#e7d3ae);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  box-shadow:inset 0 0 0 1px #fffdf7,0 1px 3px rgba(100,70,30,.18);transition:transform .08s,filter .12s;}
.sorb .bagua{position:absolute;inset:0;width:100%;height:100%;opacity:.7;pointer-events:none;}
.sorb b{position:relative;font-size:9px;font-family:var(--serif);color:var(--wood2);line-height:1.1;
  text-align:center;padding:0 1px;letter-spacing:.01em;}
.sorb small{position:relative;font-size:7.5px;color:var(--dim);line-height:1.1;text-align:center;}
.sorb.main{width:62px;height:62px;border-color:#9b4433;
  background:radial-gradient(circle at 50% 40%,#fff6e9,#f3dcc0 70%,#e3c6a0);
  box-shadow:inset 0 0 0 1px #fffdf7,0 2px 8px rgba(140,60,40,.3);}
.sorb.main b{font-size:11px;}
.sorb.main small{font-size:8.5px;}
.sorb:active{transform:translate(-50%,-50%) scale(.94);}
.sorb.off{filter:grayscale(.55);opacity:.6;}
.sorb.off b{color:var(--dim2);}
.sorb.off small{color:#9a6247;}

/* 右下指令区：普攻 / 防御 / 道具 / 自动 */
.bcmd{grid-area:bcmd;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:44px;gap:4px;align-content:start;}
.cmd{min-height:44px;border:1px solid var(--line2);border-radius:4px;
  background:linear-gradient(180deg,#fcf5e4,#f1e3c6);box-shadow:inset 0 0 0 1px #fffdf6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  transition:transform .08s,filter .12s;}
.cmd b{font-size:11.5px;font-family:var(--serif);color:var(--wood2);line-height:1.1;}
.cmd small{font-size:8px;color:var(--dim);line-height:1.2;}
.cmd:active{transform:translateY(1px);filter:brightness(.96);}
.cmd.on{background:linear-gradient(180deg,#4d9a80,#2f6b58);border-color:#275849;}
.cmd.on b,.cmd.on small{color:#f6fbf7;}
.cmd-pots{position:relative;grid-column:span 2;display:flex;}
.cmd-lb{position:absolute;right:2px;top:-8px;z-index:1;font-size:8px;color:var(--dim2);
  background:#f3e8d1;padding:0 3px;border-radius:2px;}
.cmd-pots .pot-row{display:flex;gap:3px;width:100%;}
.cmd-pots .potion{min-height:44px;flex:1;min-width:0;padding:0 2px;}
.cmd-pots .potion b{font-size:9px;}
.cmd-pots .potion em{font-size:8px;}
.cmd-auto{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:4px;}

/* 竖屏（含手动横屏布局下的窄窗）兜底：不横向溢出 */
.app.land .hud-res{overflow:hidden;}
.app.land .act-main{min-width:0;}
.app.land .auto-sp.sm,.app.land .auto-sw.sm{min-width:44px;}
/* 所有可点按钮热区 ≥44px（面板内小按钮同样不例外） */
.btn.xs,.btn.sm{min-height:44px;}
/* 窄场景（手动横屏 / 430 宽）：区域标题只留一行，给两列传送点腾出上方空间 */
@media(max-width:620px){
  .scene-name{max-width:150px;font-size:11px;padding:1px 5px;line-height:1.4;}
  .scene-name small{display:none;}
}
/* 窄窗（手动横屏或大屏折叠）下压缩 HUD 与资源条，避免顶栏横向溢出 */
@media(max-width:520px){
  .app.land .home{grid-template-columns:132px minmax(0,1fr) 100px;}
  .app.land .hb,.app.land .exp{width:104px;}
  .app.land .hud-res .res-chip:nth-child(n+4){display:none;}
  .app.land .res-chip{font-size:9px;padding:1px 4px;}
}