* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: #1a1208; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; }
body { display: flex; justify-content: center; }
#app { width: 100%; max-width: 480px; height: 100%; background: #0d0a06; position: relative; overflow: hidden; display: flex; flex-direction: column; }
button { font-family: inherit; border: none; cursor: pointer; background: transparent; color: inherit; }
#topbar {
  background: linear-gradient(180deg, #2f2213, #181109);
  border-bottom: 2px solid #5a4322;
  padding: 6px 8px;
  flex-shrink: 0;
  position: relative;
  user-select: none;
}
#topbar .row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
}
.topbar-row.row-hero {
  margin-bottom: 5px;
}
.topbar-row.row-assets {
  margin-bottom: 0;
}
.hero-id-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.hero-id-badge:hover {
  background: rgba(255, 217, 74, 0.12);
}
.cls-icon {
  font-size: 13px;
  line-height: 1;
}
.namebadge {
  background: #2b1f14;
  color: #ffdb8b;
  border: 1px solid #7a5c32;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.mini-bar-wrap {
  flex: 1;
  max-width: 120px;
  min-width: 65px;
  height: 14px;
  background: rgba(18, 12, 4, 0.9);
  border: 1px solid #5a4322;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.mini-bar-lbl {
  position: absolute;
  left: 5px;
  top: 0;
  line-height: 12px;
  font-size: 8px;
  font-weight: 800;
  color: #ffd94a;
  text-shadow: 0 1px 1px #000;
  z-index: 2;
}
.mini-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}
.mini-bar-fill.hp {
  background: linear-gradient(180deg, #ff5b4a, #a01810);
}
.mini-bar-num {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: 12px;
  font-size: 8px;
  color: #ffe9b0;
  text-shadow: 0 1px 1px #000;
  z-index: 2;
  white-space: nowrap;
}
.power-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(180deg, #2a1f10, #171008);
  border: 1px solid #c9a227;
  border-radius: 12px;
  padding: 1px 7px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 0 5px rgba(255, 215, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.power-badge:hover {
  border-color: #ffd700;
  transform: translateY(-1px);
}
.power-icon {
  font-size: 11px;
  line-height: 1;
}
.power-lbl {
  font-size: 10px;
  color: #d8c9a8;
  font-weight: 700;
  margin-right: 1px;
}
.power-val {
  font-size: 12px;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  font-family: Consolas, "Courier New", monospace;
  white-space: nowrap;
}
.exp-bar-wrap {
  flex: 1;
  min-width: 80px;
  height: 15px;
  background: rgba(18, 12, 4, 0.95);
  border: 1px solid #5a4322;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.exp-lbl {
  position: absolute;
  left: 6px;
  top: 0;
  line-height: 13px;
  font-size: 8.5px;
  font-weight: 800;
  color: #ffd94a;
  text-shadow: 0 1px 1px #000;
  z-index: 2;
}
.exp-bar-fill {
  height: 100%;
  background: linear-gradient(180deg, #ffd94a, #a87d10);
  border-radius: 7px;
  transition: width 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 217, 74, 0.4);
}
.exp-num {
  position: absolute;
  right: 6px;
  top: 0;
  line-height: 13px;
  font-size: 8.5px;
  color: #fff8e7;
  text-shadow: 0 1px 2px #000;
  z-index: 2;
  white-space: nowrap;
}
.asset-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(22, 16, 8, 0.85);
  border: 1px solid #4a361e;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.asset-pill:hover {
  background: rgba(40, 28, 14, 0.95);
  border-color: #7a5c32;
}
.asset-ico {
  font-size: 11px;
  line-height: 1;
}
.bag-txt {
  color: #e0d5be;
  font-size: 11px;
}
.bag-pill.warn .bag-txt {
  color: #ff9800;
  font-weight: 700;
}
.bag-pill.full .bag-txt {
  color: #ff4d4f;
  font-weight: 700;
  animation: blink 1s infinite;
}
.party-txt {
  color: #8ed0ff;
  font-size: 11px;
  font-weight: 700;
}
.top-right-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.lvbadge { background: linear-gradient(180deg,#c9a227,#8a6d1a); color:#fff; font-weight:700; font-size:12px; padding:2px 8px; border-radius:10px; border:1px solid #e8c95a; white-space:nowrap; }
.bar-wrap { flex: 1; height: 14px; background: #120c04; border: 1px solid #5a4322; border-radius: 7px; position: relative; overflow: hidden; }
.bar-wrap .lbl { position: absolute; left: 6px; top: 0; line-height: 12px; font-size: 9px; color: #ffe9b0; text-shadow: 0 1px 1px #000; z-index: 1; }
.bar-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.bar-fill.hp { background: linear-gradient(180deg,#ff5b4a,#a01810); }
.bar-fill.mp { background: linear-gradient(180deg,#4a9bff,#103a8a); }
.bar-fill.exp { background: linear-gradient(180deg,#ffd94a,#a87d10); }
.bar-num { position: absolute; right: 6px; top: 0; line-height: 12px; font-size: 9px; color: #ffe9b0; text-shadow: 0 1px 1px #000; z-index: 1; }
.gold { color: #ffd94a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pts-tip { background: #a01810; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 1px solid #ff8a7a; white-space: nowrap; display: none; }
.pts-tip.on { display: inline-block; animation: blink 1.2s infinite; }
.ver-tag { margin-left: auto; font-size: 10px; color: rgba(216,201,168,.45); letter-spacing: .5px; white-space: nowrap; }
.ver-sub { color: #ffd94a; opacity: .75; }
.brand-tag { flex-shrink: 0; font-size: 12px; font-weight: 900; color: #ffd94a; letter-spacing: 2px; text-shadow: 0 0 6px rgba(255,217,74,.45), 0 1px 2px #000; white-space: nowrap; }
@keyframes blink { 50% { opacity: .55; } }
#scene { flex: 1; position: relative; overflow: hidden; z-index: 1; }
#mapbg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.monster-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; }
.monster-node .mimg { width: 54px; height: auto; max-height: 70px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)) drop-shadow(0 0 4px rgba(255,217,74,.9)) drop-shadow(0 0 1px #000); transition: transform .15s; transform: scale(var(--ms, 1)); }
.monster-node::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%,-50%); border-radius: 50%; }
.monster-node.drawn-node { width: 86px; height: 86px; }
.monster-node.drawn-node .mname { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; }
.monster-node.drawn-node::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(255,217,74,0); transition: border-color .15s; }
.monster-node.drawn-node:hover::before { border-color: rgba(255,217,74,.85); }
.monster-node .mname { margin-top: 2px; font-size: 10px; color: #ffe9b0; text-shadow: 0 1px 2px #000, 0 0 4px #000; background: rgba(12,8,3,.9); border: 1px solid rgba(255,217,74,.55); padding: 0 4px; border-radius: 4px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.9); position: relative; z-index: 2; }
.monster-node.danger .mimg { filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(192,57,43,.95)) drop-shadow(0 0 1px #000); }
.monster-node.danger .mname { color: #ff8a7a; border-color: rgba(255,120,100,.6); }
.monster-node.npc-node .mimg.npcimg { width: auto; height: 58px; max-width: 86px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)); }
.monster-node.npc-node .mimg.npcimg.tallfig { height: 52px; max-width: 74px; }
.monster-node:active .mimg { transform: scale(calc(var(--ms, 1) * .88)); }
#bottombar { flex-shrink: 0; display: flex; gap: 8px; padding: 8px 10px; background: linear-gradient(0deg,#3a2a15,#241a0c); border-top: 2px solid #5a4322; }
.navbtn { flex: 1; padding: 10px 0; font-size: 14px; font-weight: 700; border-radius: 8px; background: linear-gradient(180deg,#5a4322,#3a2a15); border: 1px solid #8a6d3a; color:#ffe9b0; }
.navbtn:active { filter: brightness(1.3); }
#battle { position: absolute; inset: 0; display: none; flex-direction: column; background: #0d0a06; z-index: 20; padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; overflow: hidden; height: 100%; height: 100dvh; }
#battle.on { display: flex; }
#battle-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.35); }
.b-top { position: relative; flex: 1 1 auto; height: 35%; max-height: 38%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4px; min-height: 110px; }
.b-back { position: absolute; right: 10px; top: 10px; z-index: 30; padding: 7px 12px; font-size: 12px; font-weight: 800; border-radius: 8px; background: linear-gradient(180deg,#5a4322,#3a2a15); border: 1px solid #8a6d3a; color: #ffe9b0; }
.b-back:active { filter: brightness(1.3); }
.enemy-name { font-size: 15px; font-weight: 700; color: #ffb3a0; text-shadow: 0 1px 3px #000; margin-bottom: 2px; }
.enemy-img { width: 40%; max-width: 155px; max-height: 135px; height: auto; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.monster-node.elite-node .mimg { filter: drop-shadow(0 0 8px rgba(255,200,60,.9)); }
.monster-node.elite-node .mname.ename { color: #ffd94a; font-weight: 700; }
.monster-node.chief-node .mimg { filter: drop-shadow(0 0 10px rgba(255,110,190,.95)); }
.monster-node.chief-node .mname.cname { color: #ff9ad5; font-weight: 700; }
.enemy-name.is-elite { color: #ffd94a; }
.enemy-name.is-chief { color: #ff9ad5; }
.enemy-img.elite-scale { transform: scale(1.12); }
.enemy-img.is-elite { filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,200,60,.85)); }
.enemy-img.is-chief { filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(255,110,190,.95)); }
#bt-mons { position: relative; flex: 0 0 auto; height: 40%; display: none; flex-direction: row; align-items: flex-end; justify-content: center; gap: 8px; padding: 6px 8px 16px; min-height: 180px; }   
.mcard { display: flex; flex-direction: column; align-items: center; width: 23%; max-width: 120px; min-width: 64px; transition: opacity .35s; }
.mcard-name { font-size: 11px; font-weight: 700; color: #ffb3a0; text-shadow: 0 1px 3px #000; margin-bottom: 2px; text-align: center; line-height: 1.25; }
.mcard-img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.mcard-target .mcard-img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(255,120,60,.6)); }
.mcard-name.is-elite { color: #ffd94a; }
.mcard-name.is-chief { color: #ff9ad5; }
.mcard-elite .mcard-img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,200,60,.75)); }
.mcard-chief .mcard-img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 11px rgba(255,150,220,.9)); }
.mcard .bar-wrap { flex: 0 0 auto; margin-top: 2px; }
.mcard-tag { font-size:9.5px; font-weight:800; letter-spacing:1.5px; padding:1px 7px; border-radius:3px;
  margin-bottom:2px; line-height:1.45; text-shadow:none; }
.mcard-tag.tag-brk { background:#7a2a1c; color:#ffd9cc; }
.mcard-tag.tag-asl { background:#14515b; color:#cdf1f8; }
.mcard-tag.tag-boss { background:#4a3a12; color:#ffe9a8; box-shadow:0 0 0 1px #a8862c inset; }
.mcard-brk .mcard-img { transform:scale(1.10); transform-origin:50% 88%; }
.mcard-boss .mcard-img { transform:scale(1.12); transform-origin:50% 88%; }
#bt-relic { position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:center; gap:8px; width:90%; margin:6px auto 0; padding:5px 9px;
  border-radius:8px; background:linear-gradient(180deg,#2a1f10,#17110a); border:1px solid #6b5420;
  box-shadow:0 3px 12px -6px #000; transition:border-color .25s, box-shadow .25s; box-sizing:border-box; }
#bt-relic.relic-low { border-color:#a8342a; box-shadow:0 0 14px -3px #a8342a; animation:relicPulse 1.1s ease-in-out infinite; }
.relic-ico { width:26px; height:26px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 0 7px rgba(120,180,255,.6)); }
.relic-main { flex:1 1 auto; min-width:0; }
.relic-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:3px; }
.relic-name { font-size:10.5px; font-weight:800; color:#bfe4ff; letter-spacing:1px; white-space:nowrap; flex:0 0 auto; }
.relic-nums { font-size:10px; color:#9fd0f0; white-space:nowrap; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.relic-nums b { color:#e8f4ff; font-weight:800; }
.relic-sep { color:#6b5420; margin:0 4px; }
.relic-bar { position:relative; height:12px; width:100%; background:#0d0a05; border:1px solid #5a4322;
  border-radius:6px; overflow:hidden; }
.bar-fill.relic { height:100%; border-radius:5px; background:linear-gradient(90deg,#2f7fd0,#7cc6f5); transition:width .3s; }
@keyframes relicPulse { 0%,100% { opacity:1 } 50% { opacity:.68 } }
.mcard-target .mcard-name { color: #ffd94a; }
.mcard-dead { opacity: .22; filter: grayscale(1); }
.loot-badge { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 9px; vertical-align: middle; letter-spacing: 1px; }
.loot-badge.elite-b { color: #ffd94a; border: 1px solid rgba(255,200,60,.55); }
.loot-badge.chief-b { color: #ff9ad5; border: 1px solid rgba(255,110,190,.55); }
.b-mid { position: relative; height: 80px; margin: 3px 10px; background: rgba(0,0,0,.45); border: 1px solid #5a4322; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
#battle-log { padding: 6px 10px; font-size: 12px; line-height: 1.6; color: #d8c9a8; height: 100%; overflow-y: auto; }
#battle-log .hit { color: #ffd94a; }
#battle-log .crit { color: #ff7a4a; font-weight: 700; }
#battle-log .hurt { color: #ff6b5a; }
#battle-log .heal { color: #6bd97a; }
#battle-log .miss { color: #7ac0ff; }
#battle-log .exhit { color: #ffd94a; font-weight: 700; }
.dmgnum { position: absolute; font-size: 20px; font-weight: 900; text-shadow: 0 2px 3px #000; pointer-events: none; animation: floatUp 1s ease-out forwards; z-index: 5; }
.dmgnum.player { color: #fff; }
.dmgnum.enemy { color: #ff5b4a; }
.dmgnum.heal { color: #6bd97a; }
.dmgnum.miss { color: #7ac0ff; font-size: 16px; }
.dmgnum.fx-crit { font-size: 27px; color: #4aa8ff; }
.dmgnum.fx-ex { font-size: 30px; color: #5ce06a; }
.dmgnum.fx-pierce { font-size: 29px; color: #c77aff; }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-64px); opacity: 0; } }
.b-bottom { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 3px 10px 5px; flex-shrink: 0; }
.hero-layers { position: relative; width: 96px; height: 96px; flex: none; }
.char-herobox { position: relative; flex: none; width: min(120px, 100%); height: 113px; margin: 4px auto 2px; }
.hero-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.hero-wing { position: absolute; width: 156.25%; height: 156.25%; left: -33.4%; top: -40.2%; z-index: 0; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.hero-bars { flex: 1; }
.hero-bars .bar-wrap { flex: none; margin-bottom: 4px; }
.hero-lvbadge { position: absolute; left: 0; top: 0; z-index: 2; background: linear-gradient(180deg,#c9a227,#8a6d1a); color: #fff; font-weight: 700; font-size: 11px; line-height: 1.4; padding: 1px 6px; border-radius: 9px; border: 1px solid #e8c95a; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hero-bars .exp-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.hero-bars .exp-lbl { font-size: 9px; font-weight: 700; color: #ffd94a; white-space: nowrap; text-shadow: 0 1px 1px #000; }
.hero-bars .exp-wrap { height: 6px; margin-bottom: 0; flex: 1; }
.hero-bars .exp-wrap .bar-fill { border-radius: 4px; }
.hero-bars .exp-val { font-size: 9px; color: #ffe9b0; white-space: nowrap; text-shadow: 0 1px 1px #000; }
.b-actions { position: relative; display: flex; gap: 6px; padding: 0 10px 5px; flex-shrink: 0; }
.actbtn.attack { padding: 10px 0 !important; font-size: 15px !important; }
.actbtn { flex: 1; padding: 13px 0; font-size: 16px; font-weight: 800; border-radius: 10px; border: 1px solid #5a4322; background: linear-gradient(180deg, #3a2a15, #1f160a); color: #fff; letter-spacing: 2px; white-space: nowrap; }
.actbtn.attack { background: linear-gradient(180deg,#c0392b,#7a1f14); border-color: #e06a4a; }
.actbtn.small { flex: 0 0 74px; font-size: 13px; letter-spacing: 0; background: linear-gradient(180deg,#3a5a8a,#1f3a5a); border-color: #5a8ac0; }
.actbtn.skill { background: linear-gradient(180deg,#8a5aa8,#4a2a6a); border-color: #b07ad0; }
.actbtn.flee { flex: 0 0 74px; font-size: 13px; letter-spacing: 0; background: linear-gradient(180deg,#5a5a52,#33332c); border-color: #8a8a7a; }
.actbtn.bagbtn { flex: 0 0 62px; font-size: 13px; letter-spacing: 0; background: linear-gradient(180deg,#7a5a2a,#4a3216); border-color: #c9a227; color: #ffe9b0; }
.actbtn.skipgold { flex: 1 1 auto; max-width: 340px; font-size: 13px; letter-spacing: 0; font-weight: 700;
  background: linear-gradient(180deg,#caa12a,#8a6a12); border-color: #ffd94a; color: #fff8e0;
  box-shadow: 0 0 8px rgba(255,217,74,.45); }
.kalon-sel { padding: 7px 10px; font-size: 13px; font-weight: 600; border-radius: 7px; cursor: pointer;
  background: rgba(38,28,14,.62); border: 1px solid #6b5228; color: #d8c9a8; }
.kalon-sel.on { background: linear-gradient(180deg,#5a4318,#352708); border-color: #ffd94a; color: #ffd94a;
  font-weight: 700; box-shadow: 0 0 8px rgba(255,217,74,.5); }
.sell-panel { font-size: 13px; }
.sellchk { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; background: rgba(58,46,24,.55); border: 1px solid #4a3a20; cursor: pointer; }
.sellchk:hover { background: rgba(90,67,34,.5); }
.sellchk input { width: 16px; height: 16px; accent-color: #c9a227; cursor: pointer; flex-shrink: 0; }
.sellchk .sc-name { flex: 0 0 92px; font-weight: 700; color: #ffe9b0; }
.sellchk .sc-cnt { color: #9a8a6a; font-size: 12px; }
.sell-sum { margin-top: 9px; padding-top: 9px; border-top: 1px solid #3a2e18; color: #d8c9a8; line-height: 1.7; font-size: 13px; }
.inv-bagmode { padding: 6px 14px; font-size: 12px; color: #e3c8ff; background: rgba(120,60,160,.3); border-bottom: 1px solid #6a4a8a; text-align: center; }
.actbtn:active { filter: brightness(1.35); }
.actbtn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.actbtn .cnt { font-size: 11px; font-weight: 400; opacity: .85; margin-left: 2px; }
.skpick { position: absolute; left: 12px; right: 12px; bottom: 108px; z-index: 30;
  background: linear-gradient(180deg, rgba(40,28,14,.97), rgba(24,16,8,.97));
  border: 2px solid #8a6d3a; border-radius: 10px; box-shadow: 0 -4px 18px rgba(0,0,0,.6); padding: 8px; }
.skpick-head { font-size: 13px; font-weight: 800; color: #ffd94a; letter-spacing: 1px; margin-bottom: 6px; display: flex; }
.skpick-head .skpick-tip { margin-left: auto; font-size: 10px; font-weight: 400; color: #9a8a6a; letter-spacing: 0; }
.skpick-list { display: flex; gap: 8px; }
.skopt { flex: 1; padding: 8px 6px; border-radius: 8px; border: 1px solid #5a4322;
  background: linear-gradient(180deg,#3a2e18,#241a0c); color: #e8dcc0; font-size: 12px; cursor: pointer; text-align: center; }
.skopt:active { filter: brightness(1.3); }
.skopt .sk-name { display: block; font-size: 14px; font-weight: 800; color: #f0e2b8; margin-bottom: 3px; }
.skopt .sk-desc { display: block; font-size: 10px; color: #9a8a6a; line-height: 1.4; }
.skopt .sk-mp { display: block; font-size: 10px; color: #6ab4ff; margin-top: 3px; }
.skopt.sel { border-color: #ffd94a; background: linear-gradient(180deg,#4a3a18,#2e2410); box-shadow: 0 0 8px rgba(255,217,74,.35); }
.skopt.sel .sk-name { color: #ffd94a; }
.skopt.nomp { opacity: .5; }
.skopt .sk-use { display: block; margin-top: 5px; font-size: 11px; font-weight: 800; color: #7fe07f; }
.b-actions3 { padding: 0 10px 8px !important; gap: 4px !important; display: flex; align-items: center !important; flex: none !important; flex-shrink: 0 !important; }
.b-actions3 .actbtn.auto-btn,
.b-actions3 .actbtn.auto-set {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 6px 1px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.b-actions3 .actbtn.small.auto-gear {
  flex: 0 0 32px !important;
  min-width: 32px !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
}
@media (max-width: 380px) {
  .b-actions3 {
    gap: 2px !important;
    padding: 0 6px 6px !important;
  }
  .b-actions3 .actbtn.auto-btn,
  .b-actions3 .actbtn.auto-set {
    font-size: 10px !important;
    padding: 5px 0 !important;
  }
}   
.actbtn.small.auto-gear { flex: 0 0 40px; letter-spacing: 0; font-size: 15px; }   
.actbtn.auto-btn { flex: 1; padding: 7px 2px; font-size: 11px; letter-spacing: 0; background: linear-gradient(180deg,#2e3a4a,#1c2430); border-color: #4a5a6a; color: #9ab0c4; }
.actbtn.auto-set { flex: 0 0 56px; padding: 7px 2px; font-size: 11px; letter-spacing: 0; background: linear-gradient(180deg,#3a3a52,#242436); border-color: #5a5a7a; color: #a8a8c8; }
.actbtn.auto-btn.on { background: linear-gradient(180deg,#c8a02b,#8a6a12); border-color: #ffd94a; color: #fff8e0; box-shadow: 0 0 8px rgba(255,217,74,.55); }
.actbtn.auto-btn.on .cnt { opacity: 1; font-weight: 700; }
.b-actions3.disabled { opacity: .45; }
.auto-thresh-pop { position: absolute; right: 12px; bottom: calc(100% + 6px); z-index: 40; width: 180px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(180deg,#2e2110,#1a1208); border: 1px solid #8a6d3a; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.auto-thresh-pop .atp-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d8c9a8; }
.auto-thresh-pop .atp-lbl { flex: 1; }
.auto-thresh-pop .atp-btn { width: 26px; height: 24px; line-height: 1; font-size: 15px; font-weight: 700; border-radius: 5px; border: 1px solid #4a5a6a; background: linear-gradient(180deg,#2e3a4a,#1c2430); color: #cfe0f0; cursor: pointer; }
.auto-thresh-pop .atp-btn:active { transform: translateY(1px); }
.auto-thresh-pop .atp-val { min-width: 42px; text-align: center; font-weight: 800; color: #ffd94a; }
.auto-sell-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); z-index: 41; padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 7px; background: linear-gradient(180deg,#2e2110,#1a1208); border: 1px solid #8a6d3a; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.auto-sell-pop .asp-title { font-size: 12px; font-weight: 800; color: #ffd94a; letter-spacing: 1px; }
.auto-sell-pop .asp-sub { font-size: 11px; font-weight: 700; color: #9a8a6a; margin-top: 2px; }
.auto-sell-pop .asp-gname { font-size: 11px; color: #7d6f54; margin-top: 1px; }
.auto-sell-pop .asp-types { display: flex; flex-wrap: wrap; gap: 5px; }
.auto-sell-pop .asp-chk { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: rgba(58,46,24,.55); border: 1px solid #4a3a20; font-size: 12px; color: #e8d9b8; cursor: pointer; }
.auto-sell-pop .asp-chk input { width: 14px; height: 14px; accent-color: #c9a227; }
.auto-sell-pop .asp-chk.mode-on { border-color: #c9a227; background: rgba(201,162,39,.22); color: #ffd94a; }
.auto-sell-pop .asp-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.auto-sell-pop .asp-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d8c9a8; }
.auto-sell-pop .asp-row .atp-lbl { flex: 1; }
.auto-sell-pop .asp-row .atp-btn { width: 26px; height: 24px; line-height: 1; font-size: 15px; font-weight: 700; border-radius: 5px; border: 1px solid #4a5a6a; background: linear-gradient(180deg,#2e3a4a,#1c2430); color: #cfe0f0; cursor: pointer; }
.auto-sell-pop .asp-row .atp-val { min-width: 42px; text-align: center; font-weight: 800; color: #ffd94a; }
.auto-sell-pop .asp-note { font-size: 11px; color: #9a8a6a; line-height: 1.5; }
#dung-auto-row { align-items: center; }
.dung-auto-tip { flex: 1; font-size: 10px; color: #8a7a5a; line-height: 1.3; }
@keyframes lungeR { 0%,100% { transform: translateX(0); } 40% { transform: translateX(26px); } }
@keyframes lungeL { 0%,100% { transform: translateX(0); } 40% { transform: translateX(-26px); } }
@keyframes shakeX { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes flashW { 0%,100% { filter: none; } 50% { filter: brightness(2.6) drop-shadow(0 0 12px #fff); } }
@keyframes dieDown { to { transform: translateY(26px) rotate(10deg); opacity: 0; } }
.anim-lungeR { animation: lungeR .35s ease; }
.anim-lungeL { animation: lungeL .35s ease; }
.anim-shake { animation: shakeX .4s ease; }
.anim-flash { animation: flashW .35s ease; }
.anim-die { animation: dieDown .6s ease forwards; }
.fx-layer { position: absolute; pointer-events: none; z-index: 4; }
@keyframes fxWpnIn {
  0%   { transform: translate(var(--sx), var(--sy)) rotate(var(--r0, 206deg)) scale(.42); opacity: 0; }
  14%  { opacity: 1; }
  74%  { transform: translate(var(--ex), var(--ey)) rotate(var(--r1, 226deg)) scale(.88); opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)) rotate(var(--r2, 230deg)) scale(.92); opacity: 0; }
}
.fx-wpn { position: absolute; object-fit: contain; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 0 9px rgba(255,226,150,.85));
  animation: fxWpnIn .42s cubic-bezier(.35,0,.72,1) forwards; }
@keyframes fxFlameUp {
  0%   { transform: scale(.32,.1); opacity: 0; }
  18%  { transform: scale(1.07,.9); opacity: 1; }
  46%  { transform: scale(1,1.05); opacity: 1; }
  100% { transform: scale(.7,1.24); opacity: 0; }
}
.fx-flame { position: absolute; object-fit: contain; pointer-events: none; z-index: 4;
  transform-origin: 50% 100%; filter: drop-shadow(0 0 10px rgba(255,130,40,.65));
  animation: fxFlameUp .6s cubic-bezier(.2,.68,.42,1) forwards; }
@keyframes fxArrowIn {
  0%   { transform: translate(var(--sx), var(--sy)) rotate(var(--ra, 9deg)) scale(.62); opacity: 0; }
  16%  { opacity: 1; }
  82%  { transform: translate(var(--ex), var(--ey)) rotate(var(--rb, 0deg)) scale(1); opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)) rotate(var(--rb, 0deg)) scale(1); opacity: 0; }
}
.fx-arrow { position: absolute; object-fit: contain; pointer-events: none; z-index: 4;
  transform-origin: 100% 50%;                
  filter: drop-shadow(0 0 7px rgba(255,226,150,.7));
  animation: fxArrowIn .32s cubic-bezier(.3,0,.65,1) forwards; }
@keyframes fxFlare {
  0%   { transform: scale(.22); opacity: 0; }
  26%  { transform: scale(.92); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
.fx-flare { position: absolute; border-radius: 50%; pointer-events: none; z-index: 4;
  width: var(--fs, 96px); height: var(--fs, 96px);
  margin-left: calc(var(--fs, 96px) * -0.5); margin-top: calc(var(--fs, 96px) * -0.5);
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,228,140,.8) 34%, rgba(255,140,50,0) 72%);
  animation: fxFlare .36s ease-out forwards; }
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; z-index: 50; padding: 18px; }
.overlay.on { display: flex; }
.namebadge { font-size: 12px; color: #ffd94a; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#ov-name .panel { max-width: 400px; }
.name-ask { font-size: 16px; color: #f0e2bc; text-align: center; margin: 6px 0 14px; letter-spacing: 1px; }
.name-input { width: 100%; box-sizing: border-box; background: #1a1206; border: 1px solid #6b5426; border-radius: 8px; color: #ffd94a;
  font-size: 17px; padding: 11px 12px; outline: none; text-align: center; letter-spacing: 3px; font-family: inherit; }
.name-input:focus { border-color: #ffd94a; }
.name-err { color: #e08a8a; font-size: 12px; min-height: 17px; margin: 7px 0 0; text-align: center; }
.name-tip { color: #9a8c6c; font-size: 12px; text-align: center; margin: 0; }
.sq-wait-title { font-size: 19px; font-weight: 800; color: #caa12a; text-align: center; padding: 12px 0 4px; text-shadow: 0 2px 4px #000; }
.sq-wait-sub { font-size: 13px; color: #e6d6b4; text-align: center; padding: 0 12px 12px; line-height: 1.6; }
.sq-wait-actions { display: flex; gap: 10px; padding: 0 14px 14px; }
.sq-wait-actions .bigbtn { flex: 1; }
#ov-bag { align-items: flex-start; }
#ov-bag .inv-panel { margin-top: 2vh; max-height: 90%; }   
.panel { width: 100%; max-width: 400px; max-height: 86%; background: linear-gradient(180deg,#2e2110,#1a1208); border: 2px solid #8a6d3a; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
#ov-char .panel { max-width: 460px; max-height: 92%; }
#ov-char .panel-body { padding: 10px 16px 16px; }
#ov-npc .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #5a4322; }
.panel-title { font-size: 16px; font-weight: 800; color: #ffd94a; letter-spacing: 2px; }
.panel-close { width: 30px; height: 30px; border-radius: 50%; background: #5a2a1a; border: 1px solid #a05a3a; color: #ffb3a0; font-size: 15px; line-height: 1; }
.panel-body { padding: 12px 14px; overflow-y: auto; }
.panel-foot { flex-shrink: 0; padding: 10px 14px; border-top: 1px solid #5a4322; display: flex; gap: 8px; }
.bigbtn { flex: 1; padding: 12px 0; font-size: 15px; font-weight: 800; border-radius: 8px; background: linear-gradient(180deg,#c9a227,#8a6d1a); border: 1px solid #e8c95a; color: #fff; }
.bigbtn.gray { background: linear-gradient(180deg,#5a5a52,#33332c); border-color: #8a8a7a; }
.bigbtn.danger { background: linear-gradient(180deg,#c0392b,#7a1f15); border-color: #e08a7a; }
.bigbtn:active { filter: brightness(1.3); }
.cf-row { font-size: 15px; color: #e8dcc0; line-height: 1.5; margin: 8px 0; }
.cf-hl { color: #ffd94a; font-size: 17px; }
.cf-note { font-size: 12px; color: #9a8c6c; margin-top: 10px; line-height: 1.5; }
#ov-intro .panel { max-width: 560px; }
#intro-body { max-height: 74vh; }
.intro-sec { margin-bottom: 14px; }
.intro-sec:last-child { margin-bottom: 0; }
.intro-h { font-size: 15px; font-weight: 800; color: #ffd94a; margin: 2px 0 7px; padding-left: 9px; border-left: 3px solid #8a6d3a; }
.intro-h.warn { color: #ff8a8a; border-left-color: #a05a3a; }
.intro-p { font-size: 13px; line-height: 1.85; color: #d8c9a8; margin: 0; }
.intro-ul { margin: 0; padding-left: 18px; }
.intro-ul li { font-size: 13px; line-height: 1.9; color: #d8c9a8; margin-bottom: 3px; }
.intro-note { font-size: 12px; line-height: 1.8; color: #9a8c6c; background: rgba(0,0,0,.25); padding: 8px 10px; border-radius: 8px; margin: 8px 0 0; }
.intro-btns { display: flex; gap: 8px; margin-top: 10px; }
#ov-saveio .panel { max-width: 560px; }
.saveio-info { font-size: 12px; line-height: 1.8; color: #9a8c6c; background: rgba(0,0,0,.25); padding: 8px 10px; border-radius: 8px; margin: 8px 0; }
.saveio-info b { color: #ffd94a; }
.saveio-code { width: 100%; height: 108px; box-sizing: border-box; background: rgba(0,0,0,.4); border: 1px solid #5a4322; border-radius: 8px; color: #d8c9a8; font-size: 11px; line-height: 1.5; padding: 8px; resize: vertical; font-family: monospace; word-break: break-all; }
.saveio-code:focus { outline: none; border-color: #8a6d3a; }
.saveio-file { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.saveio-file .bigbtn { flex: 0 0 auto; padding: 10px 14px; font-size: 13px; }
.saveio-fname { font-size: 12px; color: #9a8c6c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ov-cls .panel { max-width: 620px; }
.cls-grid { display: flex; gap: 10px; padding: 6px 2px 4px; }
.cls-grid.wrap2 { flex-wrap: wrap; }
.cls-grid.wrap2 .cls-card { flex: 1 1 calc(50% - 10px); }
.cls-grid.wrap2 .cls-card img { width: 86px; height: 86px; }
.cls-grid.wrap2 .cls-name { font-size: 16px; letter-spacing: 2px; }
.cls-card { flex: 1; min-width: 0; background: linear-gradient(180deg,#3a2b14,#1d1409); border: 2px solid #8a6d3a; border-radius: 12px; padding: 12px 10px 10px; text-align: center; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.cls-card:hover, .cls-card:focus { border-color: #ffd94a; box-shadow: 0 0 14px rgba(255,217,74,.35); transform: translateY(-2px); outline: none; }
.cls-card img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.cls-name { font-size: 18px; font-weight: 900; color: #ffd94a; letter-spacing: 3px; margin: 8px 0 2px; }
.cls-sub { font-size: 11px; color: #c9b888; letter-spacing: 1px; }
.cls-tag { font-size: 11px; color: #9a8c6c; line-height: 1.75; margin-top: 8px; text-align: left; }
.cls-tag b { color: #ffe9b0; }
.cls-stats { font-size: 11px; color: #9affa0; line-height: 1.75; margin-top: 6px; text-align: left; }
.cls-tip { font-size: 12px; color: #c9b888; text-align: center; line-height: 1.8; margin: 2px 0 6px; }
.cls-card.locked { filter: grayscale(.75) brightness(.6); cursor: not-allowed; }
.cls-card.locked:hover, .cls-card.locked:focus { border-color: #6b5228; box-shadow: none; transform: none; }
.cls-lock { display: none; margin-top: 8px; font-size: 11px; font-weight: 700; line-height: 1.6; color: #ffb454; background: rgba(0,0,0,.5); border: 1px dashed #8a6d3a; border-radius: 8px; padding: 6px 4px; }
.cls-card.locked .cls-lock { display: block; }
.char-slot.locked { filter: grayscale(.75) brightness(.65); }
.char-slot.locked .bigbtn { cursor: not-allowed; }
.char-slot { display: flex; align-items: center; gap: 12px; padding: 10px; margin-top: 8px; background: linear-gradient(180deg,#2e2210,#191007); border: 2px solid #6b5228; border-radius: 12px; }
.char-slot.cur { border-color: #ffd94a; box-shadow: 0 0 12px rgba(255,217,74,.25); }
.char-slot .cs-img { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.char-slot .cs-info { flex: 1; min-width: 0; }
.char-slot .cs-name { font-size: 15px; font-weight: 900; color: #ffd94a; letter-spacing: 2px; }
.char-slot .cs-cur { font-size: 10px; color: #0e0a04; background: #ffd94a; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; letter-spacing: 0; }
.char-slot .cs-sub { font-size: 11px; color: #9a8c6c; line-height: 1.7; margin-top: 3px; }
.char-slot .bigbtn { flex-shrink: 0; min-width: 86px; padding: 8px 10px; font-size: 13px; }
.item-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid rgba(90,67,34,.4); }
.item-row:last-child { border-bottom: none; }
.item-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; border: 2px solid #6b5228; background: rgba(0,0,0,.4); object-fit: contain; padding: 2px; }
.item-ico.q1 { border-color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.item-ico.q2 { border-color: #4a9ae8; box-shadow: 0 0 8px rgba(74,154,232,.5); }
.item-ico.q3 { border-color: #4a9ae8; box-shadow: 0 0 8px rgba(74,154,232,.5); }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 14px; font-weight: 700; color: #e8dcc0; }
.item-name.q1 { color: #7dffa8; }
.item-name.q2 { color: #6ab4ff; }
.item-name.q3 { color: #6ab4ff; }
.item-sub { font-size: 11px; color: #9a8a6a; margin-top: 2px; }
.item-sub .lack { color: #ff6b5a; }
.item-tags { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; border: 1px solid; }
.tag.t-ex { color: #ffd94a; border-color: #8a6d1a; background: rgba(255,217,74,.12); }
.tag.t-luck { color: #6ab4ff; border-color: #2a5a8a; background: rgba(74,155,255,.12); }
.tag.t-add { color: #c77aff; border-color: #6a2a8a; background: rgba(176,74,255,.12); }
.tag.t-plus { color: #ff9a3a; border-color: #8a4a1a; background: rgba(255,154,58,.14); }
.tag.t-req { color: #9a8a6a; border-color: #5a4a2a; }
.item-act { display: flex; gap: 6px; flex-shrink: 0; }
.minibtn { padding: 7px 11px; font-size: 12px; font-weight: 700; border-radius: 6px; background: linear-gradient(180deg,#4a7a3a,#2a4a1a); border: 1px solid #6aaa5a; color: #fff; }
.minibtn.sell { background: linear-gradient(180deg,#7a5a2a,#4a3a1a); border-color: #aa8a4a; }
.minibtn.equipped { background: #333; border-color: #555; color: #888; }
.minibtn:active { filter: brightness(1.3); }
.empty-tip { text-align: center; color: #7a6a4a; font-size: 13px; padding: 30px 0; }
#map-name { position: absolute; top: 10px; left: 10px; z-index: 5; background: rgba(20,14,6,.72); border: 1px solid #8a6d3a; border-radius: 8px; padding: 6px 14px; font-size: 15px; font-weight: 800; color: #ffd94a; letter-spacing: 2px; text-shadow: 0 1px 2px #000; pointer-events: none; }
.world-card { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.35); border: 1px solid #5a4322; border-radius: 10px; padding: 10px; margin-bottom: 10px; cursor: pointer; }
.world-card.cur { border-color: #ffd94a; background: rgba(255,217,74,.08); }
.world-card img { width: 64px; height: 114px; object-fit: cover; border-radius: 6px; border: 1px solid #5a4322; flex-shrink: 0; }
.world-card .wc-info { flex: 1; }
.world-card .wc-name { font-size: 15px; font-weight: 800; color: #ffd94a; }
.world-card .wc-sub { font-size: 12px; color: #b0a080; margin-top: 4px; line-height: 1.5; }
.world-card .wc-here { display: inline-block; font-size: 11px; color: #7fe07f; border: 1px solid #3a7a3a; border-radius: 4px; padding: 1px 6px; margin-top: 5px; }
.monster-node.door-node .door-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 900; color: #7a5200; background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5c542 70%); border: 2px solid #b8860b; animation: doorPulse 1.6s ease-in-out infinite; }
@keyframes doorPulse { 0%,100% { box-shadow: 0 0 8px rgba(245,197,66,.5); } 50% { box-shadow: 0 0 22px rgba(245,197,66,.95); } }
.monster-node .mname.dname { color: #ffd94a; font-weight: 700; }
.monster-node.npc-node .npc-mark { position: absolute; top: calc(-6px - (var(--ms, 1) - 1) * 29px); right: calc(-8px - (var(--ms, 1) - 1) * 29px); width: 18px; height: 18px; border-radius: 50%; background: #ffd94a; color: #7a5200; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 1px solid #b8860b; animation: doorPulse 1.6s ease-in-out infinite; }
.monster-node .mname.nname { color: #ffe9a8; font-weight: 700; }
.monster-node.npc-node .mname.nname { top: calc((var(--ms, 1) - 1) * 29px); }
.monster-node.dung-node .dung-ico { position: relative; width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, #e6d2ff 0%, #b06aff 30%, #6a2ac8 62%, #2a0a5a 100%); border: 3px solid #d9b8ff; animation: dungPulse 1.8s ease-in-out infinite; }
.monster-node.dung-node .dung-ico::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,.65) 18%, transparent 34%, rgba(214,170,255,.55) 55%, transparent 72%, rgba(255,255,255,.4) 90%, transparent 100%); animation: dungSpin 3s linear infinite; }
.monster-node.dung-node .dung-ico::after { content: '副本'; position: relative; z-index: 1; font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 1px; text-shadow: 0 0 8px #b06aff, 0 1px 2px #000; }
.monster-node.dung-node .dung-ring { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); width: 86px; height: 24px; border-radius: 50%; border: 2px solid rgba(214,170,255,.55); background: radial-gradient(ellipse at center, rgba(176,74,255,.32), transparent 68%); animation: dungPulse 1.8s ease-in-out infinite; }
@keyframes dungSpin { to { transform: rotate(360deg); } }
@keyframes dungPulse { 0%,100% { box-shadow: 0 0 12px rgba(176,74,255,.75), 0 0 26px rgba(106,42,200,.35), inset 0 0 12px rgba(255,255,255,.28); } 50% { box-shadow: 0 0 24px rgba(224,190,255,.95), 0 0 50px rgba(150,80,255,.55), inset 0 0 20px rgba(255,255,255,.45); } }
.monster-node .mname.dungname { color: #d9b8ff; font-weight: 700; }
.monster-node.qlm-node {
  z-index: 8;
  -webkit-tap-highlight-color: transparent;
}
.qlm-node .qlm-shadow {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 78%);
  border-radius: 50%;
  pointer-events: none;
  animation: qlmShadowScale 2.4s ease-in-out infinite;
}
.qlm-node .qlm-bob {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: qlmFloat 2.4s ease-in-out infinite;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qlm-node:active .qlm-bob {
  transform: translateY(5px) scale(0.9, 0.88);
}
.qlm-node .qlm-core {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #fff;
  box-shadow: 
    0 8px 18px rgba(0,0,0,0.38),
    inset 0 3px 6px rgba(255,255,255,0.85),
    inset 0 -4px 8px rgba(0,0,0,0.3);
  overflow: hidden;
}
.qlm-node .qlm-shine {
  position: absolute;
  top: 2px;
  left: 6px;
  right: 6px;
  height: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.1) 100%);
  border-radius: 14px 14px 20px 20px / 12px 12px 6px 6px;
  pointer-events: none;
  z-index: 5;
}
.qlm-node .qlm-halo {
  position: absolute;
  inset: -7px;
  border-radius: 28px;
  opacity: 0.8;
  pointer-events: none;
  animation: qlmPulse 2s ease-in-out infinite;
}
.qlm-node .qlm-svg {
  width: 38px;
  height: 38px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}
.qlm-node .mname.qlm-badge {
  position: relative;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 8px 2.5px 4.5px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24, 20, 16, 0.95) 0%, rgba(10, 8, 6, 0.97) 100%);
  border: 1.5px solid rgba(255, 217, 74, 0.7);
  box-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.4);
  white-space: nowrap;
  z-index: 3;
  transition: transform 0.15s ease;
}
.qlm-node:active .mname.qlm-badge {
  transform: scale(0.95);
}
.qlm-node .qlm-tag {
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 12px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.qlm-node .qlm-txt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px #000;
}
.qlm-node.qlm-city .qlm-core {
  background: radial-gradient(circle at 40% 30%, #fff9e6 0%, #ffd043 45%, #ff8c1a 90%, #e65c00 100%);
  border-color: #fffaf0;
  box-shadow: 0 6px 18px rgba(255, 140, 26, 0.45), inset 0 3px 6px rgba(255,255,255,0.9), inset 0 -3px 6px rgba(180,60,0,0.35);
}
.qlm-node.qlm-city .qlm-halo {
  background: radial-gradient(circle, rgba(255, 179, 0, 0.38) 0%, rgba(255, 179, 0, 0) 70%);
}
.qlm-node.qlm-city .mname.qlm-badge {
  border-color: #f6b93b;
  box-shadow: 0 4px 12px rgba(0,0,0,0.65), 0 0 10px rgba(246, 185, 59, 0.35);
}
.qlm-node.qlm-city .qlm-tag {
  background: linear-gradient(180deg, #fffcf0 0%, #ffc048 100%);
  color: #633600;
  border: 1px solid #ffd32a;
}
.qlm-node.qlm-city .qlm-txt {
  color: #fff9e8;
}
.qlm-node.qlm-portal .qlm-core {
  background: radial-gradient(circle at 40% 30%, #eafcff 0%, #00d8d6 38%, #0984e3 80%, #0652DD 100%);
  border-color: #f0fdff;
  box-shadow: 0 6px 18px rgba(0, 180, 255, 0.48), inset 0 3px 6px rgba(255,255,255,0.9), inset 0 -3px 6px rgba(9, 70, 150, 0.4);
}
.qlm-node.qlm-portal .qlm-halo {
  background: radial-gradient(circle, rgba(0, 216, 214, 0.38) 0%, rgba(0, 216, 214, 0) 70%);
}
.qlm-node.qlm-portal .mname.qlm-badge {
  border-color: #48dbfb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.65), 0 0 10px rgba(72, 219, 251, 0.38);
}
.qlm-node.qlm-portal .qlm-tag {
  background: linear-gradient(180deg, #e8fcff 0%, #48dbfb 100%);
  color: #0c355c;
  border: 1px solid #00d2d3;
}
.qlm-node.qlm-portal .qlm-txt {
  color: #e6f9ff;
}
.qlm-node.qlm-portal .qlm-swirl {
  animation: qlmRotate 4.5s linear infinite;
  transform-origin: 24px 24px;
}
.qlm-node.qlm-dungeon .qlm-core {
  background: radial-gradient(circle at 40% 30%, #fdf4ff 0%, #d946ef 35%, #9333ea 72%, #581c87 100%);
  border-color: #fdf2f8;
  box-shadow: 0 6px 18px rgba(217, 70, 239, 0.52), inset 0 3px 6px rgba(255,255,255,0.9), inset 0 -3px 6px rgba(60, 10, 110, 0.45);
}
.qlm-node.qlm-dungeon .qlm-halo {
  background: radial-gradient(circle, rgba(217, 70, 239, 0.42) 0%, rgba(217, 70, 239, 0) 70%);
}
.qlm-node.qlm-dungeon .mname.qlm-badge {
  border-color: #e879f9;
  box-shadow: 0 4px 12px rgba(0,0,0,0.65), 0 0 10px rgba(232, 121, 249, 0.42);
}
.qlm-node.qlm-dungeon .qlm-tag {
  background: linear-gradient(180deg, #fdf4ff 0%, #d946ef 100%);
  color: #3b0764;
  border: 1px solid #f0abfc;
}
.qlm-node.qlm-dungeon .qlm-txt {
  color: #fce7f3;
}
@keyframes qlmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes qlmShadowScale {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.65; }
  50% { transform: translateX(-50%) scale(0.78); opacity: 0.32; }
}
@keyframes qlmPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.18); opacity: 0.88; }
}
@keyframes qlmRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.monster-node.dung-target .mimg { border-color: #c77aff; box-shadow: 0 0 14px rgba(199,122,255,.9); }
.monster-node.dung-target .mname { color: #e3c8ff; font-weight: 700; }
.monster-node.dung-target .dung-arrow { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #e3c8ff; text-shadow: 0 0 6px #b06aff; animation: dungBounce .8s ease-in-out infinite; }
@keyframes dungBounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-5px); } }
.monster-node.dung-locked { opacity: .5; filter: grayscale(.5); }
.monster-node.drawn-node .dung-fx { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.monster-node.drawn-node.dung-locked .dung-fx { background: radial-gradient(circle, rgba(8,6,3,.62) 0%, rgba(8,6,3,.42) 62%, rgba(8,6,3,0) 100%); }
.monster-node.drawn-node.dung-target .dung-fx { box-shadow: 0 0 0 3px rgba(199,122,255,.9), 0 0 20px 5px rgba(199,122,255,.65); }
.dung-desc { font-size: 12px; color: #b0a080; line-height: 1.8; background: rgba(0,0,0,.3); border: 1px solid #5a4322; border-radius: 8px; padding: 10px 12px; margin-bottom: 4px; }
.dung-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid rgba(90,67,34,.4); }
.dung-row:last-child { border-bottom: none; }
.dung-row .dung-no { width: 20px; text-align: center; color: #9a8a6a; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.dung-row .dung-img { width: 38px; height: 38px; border-radius: 8px; border: 1px solid #5a4322; object-fit: cover; flex-shrink: 0; }
.dung-row .dung-mn { flex: 1; min-width: 0; font-size: 13px; color: #e8dcc0; }
.dung-row .dung-mn i { font-style: normal; color: #9a8a6a; font-size: 11px; margin-left: 2px; }
.dung-row .dung-st { font-size: 11px; flex-shrink: 0; }
.dung-row.todo { opacity: .75; }
.dung-row.todo .dung-st { color: #7a6a4a; }
.dung-row.done { opacity: .5; }
.dung-row.done .dung-st { color: #7fe07f; }
.dung-row.cur { background: rgba(199,122,255,.12); border-radius: 8px; }
.dung-row.cur .dung-st { color: #c77aff; font-weight: 800; }
.dung-row.cur .dung-no { color: #c77aff; }
.store-cols { display: flex; gap: 10px; align-items: flex-start; }
.store-col { flex: 1; min-width: 0; }
.store-col .char-sec { margin-top: 0; }
.store-col .item-row { padding: 7px 4px; }
.store-col .item-ico { width: 38px; height: 38px; }
.store-col .item-name { font-size: 12px; }
.store-col .item-sub { font-size: 11px; }
.store-col .minibtn { padding: 5px 8px; font-size: 11px; }
.loot-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.loot-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.35); border: 1px solid #5a4322; border-radius: 8px; padding: 8px 10px; }
.loot-row .item-ico { width: 40px; height: 40px; }
.stg-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 6px; }
.stg-head .item-ico { width: 52px; height: 52px; }
.stg-route { padding: 9px 2px 7px; border-top: 1px solid rgba(90,67,34,.4); }
.stg-r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stg-rname { font-size: 13px; font-weight: 700; color: #e8dcc0; }
.stg-rgo { font-size: 13px; font-weight: 700; color: #ffd94a; }
.stg-r2 { font-size: 11px; color: #9a8a6a; margin-top: 3px; }
.stg-r2 .good { color: #8fd18f; }
.stg-r2 .warn { color: #ff9a6b; }
.stg-act { margin-top: 6px; text-align: right; }
.stg-lock { opacity: .55; }
.stg-lockwhy { font-size: 11px; color: #9a8a6a; }
.char-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 2px; border-bottom: 1px solid rgba(90,67,34,.4); font-size: 14px; color: #d8c9a8; }
.char-line b { color: #ffd94a; }
.char-line .effect { font-size: 11px; color: #9a8a6a; margin-left: 6px; }
.rbtag { font-size: 10px; color: #c9a0ff; margin-left: 5px; padding: 0 4px; border-radius: 3px; background: rgba(201,160,255,.15); }
.char-line .valcol { display: flex; align-items: center; gap: 8px; }
.plusbtn { width: 32px; height: 32px; border-radius: 7px; font-size: 17px; font-weight: 900; line-height: 1; background: linear-gradient(180deg,#4a7a3a,#2a4a1a); border: 1px solid #6aaa5a; color: #fff; }
.plusbtn.w10 { width: 46px; font-size: 13px; background: linear-gradient(180deg,#5a8f47,#31541f); border-color: #7fc46a; }
.plusbtn.w100 { width: 52px; font-size: 12px; background: linear-gradient(180deg,#6aa050,#3a6326); border-color: #8fd47a; }
.plusbtn:disabled { filter: grayscale(.9) brightness(.5); }
.plusbtn:active { filter: brightness(1.4); }
.char-sec { font-size: 12px; font-weight: 800; color: #8a9ab0; letter-spacing: 2px; margin: 12px 0 4px; }
#toast { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.85); border: 1px solid #8a6d3a; color: #ffd94a; font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 10px; z-index: 99; display: none; text-align: center; pointer-events: none; }
#toast.on { display: block; animation: toastIn 2s ease forwards; }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%,10px); } 12% { opacity: 1; transform: translate(-50%,0); } 82% { opacity: 1; } 100% { opacity: 0; } }
.inv-panel { position: relative; background: linear-gradient(180deg,#2e2110,#1a1208); }
.inv-topbar { position: relative; height: 54px; flex-shrink: 0; background: url('游戏素材/UI/ui_topbar.webp') center/100% 100% no-repeat; display: flex; align-items: center; justify-content: center; }
.inv-title { font-size: 15px; font-weight: 800; color: #f0e2b8; letter-spacing: 3px; text-shadow: 0 2px 4px #000; }
.inv-close { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: url('游戏素材/UI/ui_close.webp') center/contain no-repeat; border: none; cursor: pointer; }
.inv-close:active { filter: brightness(1.3); }
.inv-sellall { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); padding: 6px 10px; font-size: 12px; font-weight: 700; border-radius: 6px; background: linear-gradient(180deg,#7a5a2a,#4a3a1a); border: 1px solid #aa8a4a; color: #ffe9b0; cursor: pointer; }
.inv-sellall:active { filter: brightness(1.3); }
.inv-sort { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); padding: 6px 10px; font-size: 12px; font-weight: 700; border-radius: 6px; background: linear-gradient(180deg,#2e4a5a,#1c2e3a); border: 1px solid #4a7a9a; color: #cfe0f0; cursor: pointer; }
.inv-sort:active { filter: brightness(1.3); }
.inv-stone { position: absolute; top: 58px; bottom: 52px; width: 20px; background-repeat: repeat-y; background-position: center top; background-size: 100% auto; pointer-events: none; }
.inv-stone-l { left: 0; background-image: url('游戏素材/UI/ui_stone_l.webp'); }
.inv-stone-r { right: 0; background-image: url('游戏素材/UI/ui_stone_r.webp'); }
.inv-body { padding: 10px 24px 8px; overflow-y: auto; flex: 1 3 auto; min-height: 0; }   
.inv-sec { font-size: 12px; font-weight: 800; color: #8a9ab0; letter-spacing: 2px; margin: 10px 0 6px; }
.inv-grid .inv-sec:first-child, .inv-sec:first-child { margin-top: 0; }
.inv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.inv-slot { position: relative; aspect-ratio: 1; background: linear-gradient(180deg,#3a332a,#241d15); border: 1px solid #7a6238; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }   
.inv-slot:active { filter: brightness(1.25); }
.inv-slot img { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.inv-slot.sel { outline: 2px solid #ffd94a; outline-offset: -2px; }
.inv-slot.q1 { border-color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.inv-slot.q2 { border-color: #4a9ae8; box-shadow: 0 0 6px rgba(74,154,232,.5); }
.inv-slot.q3 { border-color: #4a9ae8; box-shadow: 0 0 6px rgba(74,154,232,.5); }
.inv-slot .cnt { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.inv-slot .lv { position: absolute; left: 3px; top: 1px; font-size: 10px; font-weight: 800; color: #ffd94a; text-shadow: 0 1px 2px #000; }
.inv-slot .ex { position: absolute; right: 3px; top: 1px; font-size: 10px; font-weight: 900; color: #c77aff; text-shadow: 0 1px 2px #000; }
.inv-sec-title { font-size: 12px; font-weight: 800; color: #ffd94a; letter-spacing: 3px; margin: 2px 0 8px; text-shadow: 0 1px 2px #000; }
.inv-sep { height: 1px; margin: 14px 0 12px; background: linear-gradient(90deg, transparent, rgba(255,217,74,.45) 15%, rgba(255,217,74,.45) 85%, transparent); }
.eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.eq-slot { position: relative; aspect-ratio: 1; background: linear-gradient(180deg,#3a332a,#241d15); border: 1px solid #7a6238; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.eq-slot img { width: 66%; height: 66%; object-fit: contain; pointer-events: none; }
.eq-slot .eq-tag { font-size: 10px; font-weight: 700; color: #9a8a6a; letter-spacing: 1px; margin-top: 2px; }
.eq-slot .eq-q { position: absolute; left: 4px; top: 2px; font-size: 10px; font-weight: 800; color: #ffd94a; text-shadow: 0 1px 2px #000; }
.eq-slot.locked { opacity: .45; cursor: default; }
.eq-slot.locked .eq-tag { color: #6a5a3a; }
.eq-slot:active { filter: brightness(1.25); }
.eq-slot.q-lucky { border-color: #4a9ae8; box-shadow: 0 0 6px rgba(74,154,232,.5); }
.eq-slot.q-excellent { border-color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.eq-slot.q-lucky .eq-q { color: #7ec0ff; }
.eq-slot.q-excellent .eq-q { color: #7dffa8; }
.inv-coinbar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px; border-top: 1px solid #5a4322; flex-shrink: 0; }
.coin-ico { width: 30px; height: 26px; object-fit: contain; }
.coin-num { color: #ffd94a; font-weight: 800; font-size: 15px; letter-spacing: 1px; }
.inv-actbar { min-height: 56px; flex-shrink: 0; max-height: calc(90vh - 151px); overflow-y: auto; display: flex; align-items: center; gap: 10px; padding: 8px 24px; border-top: 1px solid #5a4322; }   
.inv-actbar.has-cmp { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; flex-shrink: 1; min-height: 0; }
.inv-actbar.has-cmp .actbar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; padding: 8px 16px 0; }
.inv-actbar.has-cmp .actbar-scroll > .actbar-info,
.inv-actbar.has-cmp .actbar-scroll > .eq-cmp { flex: 0 0 auto; min-height: 0; }
.inv-actbar.has-cmp .actbar-info { padding: 0 14px; }
.inv-actbar.has-cmp .actbar-btns { flex: 0 0 auto; margin-top: 0; padding: 8px 14px 12px; border-top: 1px solid #3a2e18; justify-content: flex-end; background: #1e1507; box-shadow: 0 -10px 12px -8px rgba(0,0,0,.85); }
.eq-cmp { margin: 10px 14px 2px; border-radius: 10px; background: rgba(18,12,5,.82); border: 1px solid #4a3a20; overflow: hidden; }
.cmp-head { padding: 6px 12px; background: linear-gradient(180deg, rgba(90,67,34,.42), rgba(58,46,24,.28)); border-bottom: 1px solid #3a2e18; }
.cmp-slot { font-size: 11px; font-weight: 800; color: #ffd94a; letter-spacing: 1px; }
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #3a2e18; }
.cmp-col { display: flex; align-items: center; gap: 6px; padding: 6px 12px; min-width: 0; }
.cmp-col.old { justify-content: flex-end; text-align: right; border-right: 1px solid #3a2e18; }
.cmp-col.new { justify-content: flex-start; text-align: left; }
.cmp-side { font-size: 10px; font-weight: 800; color: #9a8a6a; letter-spacing: 1px; flex-shrink: 0; }
.cmp-nm { font-size: 12px; font-weight: 800; color: #d8c9a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-nm.q1 { color: #7dffa8; }
.cmp-nm.q2, .cmp-nm.q3 { color: #6ab4ff; }
.cmp-rows { padding: 2px 0; }
.cmp-row { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; padding: 4px 0; border-top: 1px solid rgba(58,46,24,.35); }
.cmp-row:first-child { border-top: none; }
.cmp-cell { font-size: 12px; padding: 0 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-cell.old { text-align: right; color: #8fa4b8; }
.cmp-cell.new { text-align: left; color: #ffe9b0; font-weight: 700; }
.cmp-k { text-align: center; color: #9a8a6a; font-size: 11px; border-left: 1px solid #3a2e18; border-right: 1px solid #3a2e18; }
.cmp-diff { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 800; font-style: normal; }
.cmp-diff.up { color: #7dffa8; background: rgba(74,222,128,.18); }
.cmp-diff.down { color: #ff9a9a; background: rgba(255,90,90,.18); }
.cmp-diff.new { color: #9ab0c4; background: rgba(120,140,160,.18); }
.cmp-ex { border-top: 1px solid #3a2e18; }
.cmp-ex .cmp-cell { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; word-break: break-all; }
.cmp-ex .ex-row { padding: 4px 0; }
.cmp-ex .ex-row .cmp-k { color: #c9a0ff; }
.inv-actbar .actbar-tip { color: #8a7a5a; font-size: 12px; }
.actbar-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.actbar-main { flex: 1; min-width: 0; }
.actbar-name { font-size: 13px; font-weight: 800; color: #e8dcc0; }
.actbar-name.q1 { color: #ffd94a; }
.actbar-name.q2 { color: #6ab4ff; }
.actbar-name.q3 { color: #c77aff; }
.actbar-sub { font-size: 11px; color: #9a8a6a; margin-top: 2px; }
.actbar-req { flex-shrink: 0; font-size: 11px; color: #b8a67f; text-align: right; line-height: 1.55; white-space: nowrap; }
.actbar-req .lack { color: #ff7a6a; font-weight: 700; }
.actbar-btns { display: flex; gap: 6px; flex-shrink: 0; }
.actbar-x { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #5a2a1a;
  border: 1px solid #a05a3a; color: #ffb3a0; font-size: 15px; line-height: 1; padding: 0; }
.actbar-x:hover { background: #6a3220; color: #fff; }
.actbar-x:active { filter: brightness(1.3); }
#ov-guildcult .panel { max-width: 460px; }
.gc-sub { flex: 0 0 auto; padding: 8px 16px 8px; color: #b9a37a; font-size: 11.5px; border-bottom: 1px solid #5a4322; }
.gc-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 16px; }
#ov-guildquest .panel { max-width: 520px; }
.gq-body { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 16px; }
.gq-head { color: #ffd94a; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gq-contrib { background: rgba(255,225,160,.12); color: #ffd94a; border-radius: 20px; padding: 2px 10px; font-size: 12px; }
.gq-sub { color: #9c8a64; font-size: 11px; }
.gq-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: rgba(255,225,160,.05); border: 1px solid #5a4322; border-radius: 9px; }
.gq-row.done { opacity: .58; } .gq-row.off { opacity: .38; }
.gq-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gq-name { color: #cdb98a; font-size: 13px; font-weight: 600; line-height: 1.4; }
.gq-meta { color: #9c8a64; font-size: 11px; }
.gq-prog { color: #7fb8d6; } .gq-ok { color: #7dffa8; font-weight: 700; } .gq-off { color: #ff8a8a; font-weight: 700; }
.gq-act { flex: 0 0 auto; display: flex; gap: 6px; }
.gq-btn { background: #b8860b; color: #fff; border: 0; border-radius: 8px; padding: 6px 11px; font-size: 12px; cursor: pointer; }
.gq-btn.off { background: #6a5c40; cursor: default; }
.gq-give { background: #7a6a4a; }
.gc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: rgba(255,225,160,.05); border: 1px solid #5a4322; border-radius: 9px; }
.gc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gc-name { color: #ffd94a; font-weight: 700; font-size: 14px; }
.gc-lv { color: #cdb98a; font-size: 11px; }
.gc-desc { color: #9c8a64; font-size: 11px; }
.gc-action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.gc-cost { font-size: 10.5px; color: #b9a37a; text-align: right; line-height: 1.15; }
.gc-up { padding: 5px 14px; border-radius: 7px; cursor: pointer; border: 1px solid #ffd94a;
  background: linear-gradient(180deg,#6a4e16,#3a2a08); color: #ffd94a; font-weight: 700; font-size: 12.5px; }
.gc-up.off { opacity: .45; cursor: not-allowed; border-color: #665; color: #998; background: #2a2418; }
.gc-up:not(.off):hover { background: linear-gradient(180deg,#8a651c,#4a3410); }
#ov-guildex .panel { max-width: 480px; }
.gx-body { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.gx-tabs { flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 14px 6px; }
.gx-tab { flex: 1; padding: 7px 0; text-align: center; border-radius: 8px; cursor: pointer;
  border: 1px solid #5a4322; background: rgba(255,225,160,.05); color: #cdb98a; font-weight: 700; font-size: 13px; }
.gx-tab.on { background: linear-gradient(180deg,#6a4e16,#3a2a08); color: #ffd94a; border-color: #ffd94a; }
.gx-grid { flex: 1 1 auto; overflow: auto; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 11px; }
.gx-set-name { color: #cdb98a; font-size: 11px; margin: 2px 0 5px; letter-spacing: 1px; }
.gx-icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gx-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px 5px; border: 1px solid #4a3720; border-radius: 8px; background: rgba(255,225,160,.04); cursor: pointer; }
.gx-cell.on { border-color: #ffd94a; box-shadow: 0 0 0 1px #ffd94a; background: rgba(255,217,74,.12); }
.gx-cell.zero { opacity: .38; }
.gx-cell img { width: 34px; height: 34px; object-fit: contain; }
.gx-cell .gx-nm { font-size: 9px; color: #d8c9a8; text-align: center; line-height: 1.05; }
.gx-cell.gx-buy { cursor: pointer; border-style: dashed; min-height: 62px; justify-content: center; }
.gx-cell.gx-buy:hover { border-color: #ffd94a; background: rgba(255,217,74,.10); }
.gx-cell .gx-price { font-size: 9px; color: #ffd94a; text-align: center; line-height: 1.1; }
.gx-badge { position: absolute; top: 2px; right: 4px; background: #ffd94a; color: #2a1c08; font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 6px; }
.gx-foot { flex: 0 0 auto; padding: 11px 14px 14px; border-top: 1px solid #5a4322; display: flex; flex-direction: column; gap: 9px; }
.gx-foot-txt { font-size: 11.5px; color: #b9a37a; line-height: 1.4; }
.gx-ex { padding: 9px 0; border-radius: 8px; cursor: pointer; border: 1px solid #ffd94a;
  background: linear-gradient(180deg,#6a4e16,#3a2a08); color: #ffd94a; font-weight: 700; font-size: 14px; }
.gx-ex.off { opacity: .45; cursor: not-allowed; border-color: #665; color: #998; background: #2a2418; }
.gb-body { flex: 1 1 auto; overflow: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.gb-sub { font-size: 11.5px; color: #b9a37a; line-height: 1.5; }
.gb-head { display: flex; align-items: center; gap: 10px; }
.gb-head img { width: 54px; height: 54px; object-fit: contain; }
.gb-cards { display: flex; gap: 10px; }
.gb-card { flex: 1 1 0; border: 1px solid #5a4322; border-radius: 10px; padding: 10px 11px;
  background: rgba(28,20,10,.55); display: flex; flex-direction: column; gap: 7px; min-height: 128px; }
.gb-card.hell { border-color: #a33; background: rgba(48,16,16,.5); }
.gb-cname { font-size: 14px; font-weight: 700; color: #ffd94a; }
.gb-card.hell .gb-cname { color: #ff7a7a; }
.gb-tag { font-size: 10.5px; color: #cdb894; }
.gb-tag b { color: #ffd94a; }
.gb-card.hell .gb-tag b { color: #ff9a9a; }
.gb-stat { font-size: 10.5px; color: #a89474; line-height: 1.5; }
.gb-stat b { color: #e8d8b0; }
.gb-go { margin-top: auto; padding: 8px 0; border-radius: 8px; cursor: pointer; border: 1px solid #ffd94a;
  background: linear-gradient(180deg,#6a4e16,#3a2a08); color: #ffd94a; font-weight: 700; font-size: 13.5px; }
.gb-go:hover { background: linear-gradient(180deg,#7d5d1c,#4a3609); }
.gb-go.off { opacity: .45; cursor: not-allowed; border-color: #665; color: #998; background: #2a2418; }
.syn-pane { padding-top: 2px; }
.syn-note { font-size: 11px; color: #b9a37a; line-height: 1.5; padding: 2px 2px 8px; border-bottom: 1px solid rgba(90,67,34,.4); margin-bottom: 2px; }
#ov-exgem .panel-body { flex: 1 1 auto; min-height: 0; }
.eg-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px;
  background: linear-gradient(180deg, #33251a, #1d1409); border: 1px solid #6a4e16; border-radius: 8px; }
.eg-head img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.eg-cnt { font-size: 13px; color: #ffd94a; font-weight: 800; }
.eg-tip { font-size: 11px; color: #b9a37a; line-height: 1.5; margin-top: 2px; }
.eg-grp { font-size: 12px; color: #c9b98a; font-weight: 700; letter-spacing: .5px;
  margin: 12px 0 6px; padding-bottom: 3px; border-bottom: 1px solid rgba(90,67,34,.4); }
.eg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.eg-cell { position: relative; aspect-ratio: 1; background: linear-gradient(180deg,#3a332a,#241d15);
  border: 1px solid #7a6238; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.eg-cell:active { filter: brightness(1.25); }
.eg-cell img { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.eg-cell.q1 { border-color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.eg-cell.q2, .eg-cell.q3 { border-color: #4a9ae8; box-shadow: 0 0 6px rgba(74,154,232,.5); }
.eg-cell .eg-tag { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; line-height: 1.6;
  text-align: center; color: #cbbf9a; background: rgba(0,0,0,.66); font-weight: 700; }
.eg-cell .eg-tag.ex { color: #9ef0b8; }
.eg-empty { font-size: 11.5px; color: #8a7a5a; padding: 10px 2px; }
.eg-foot-tip { font-size: 11px; color: #9a8c6c; line-height: 1.6; margin-top: 12px; padding-top: 8px;
  border-top: 1px solid rgba(90,67,34,.4); }
#ov-dream .panel { max-width: 460px; max-height: 92%; }
#ov-dream .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#ov-dream .panel-foot { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #5a4322; }
.dm-hero { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(180deg,rgba(120,90,200,.22),rgba(60,40,110,.10)); border: 1px solid #6a5aa8; border-radius: 10px; padding: 10px; }
.dm-hero img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.dm-say { font-size: 13px; color: #e2d8ff; line-height: 1.55; }
.dm-sub { font-size: 11px; color: #9d8fd0; margin-top: 4px; }
.dm-rules { margin-top: 10px; border: 1px solid #5a4322; border-radius: 10px; padding: 8px 10px; background: rgba(0,0,0,.18); }
.dm-r-t { font-size: 13px; font-weight: 800; color: #ffd94a; letter-spacing: 1px; margin-bottom: 6px; }
.dm-ul { margin: 0; padding-left: 16px; }
.dm-ul li { font-size: 12px; color: #ddd0b0; line-height: 1.7; }
.dm-ul b { color: #ffd94a; }
.dm-stat { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dm-s { background: rgba(0,0,0,.22); border: 1px solid #5a4322; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.dm-s span { font-size: 11px; color: #9a8c6c; }
.dm-s b { font-size: 14px; color: #ffe9a8; }
.dm-live { color: #7ce07c !important; }
.dm-done { color: #ff9a8a !important; }
.dm-gain { margin-top: 10px; border: 1px solid #8a6d3a; border-radius: 10px; padding: 8px 10px; background: linear-gradient(180deg,rgba(201,162,39,.18),rgba(0,0,0,.10)); }
.dm-gain.dm-off { border-color: #55503c; background: rgba(0,0,0,.18); }
.dm-g4 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 13px; color: #ffe9a8; }
.dm-line { font-size: 12px; color: #9a8c6c; line-height: 1.9; }
.dm-line b { color: #ffe9a8; }
.dm-g4n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; font-size: 12px; text-align: center; }
.dm-gsum { margin-top: 6px; font-size: 12px; color: #ddd0b0; }
.dm-gsum b { color: #ffd94a; font-size: 15px; }
.dm-tip { margin-top: 10px; font-size: 12px; color: #9a8c6c; line-height: 1.6; }
.dm-tip b { color: #c9a0ff; }
.dm-shop { margin-top: 10px; border: 1px solid #5a4322; border-radius: 10px; padding: 8px 10px; background: rgba(0,0,0,.18); }
.dm-buy { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(90,67,34,.65); }
.dm-buy:first-of-type { border-top: 0; padding-top: 2px; }
.dm-buy-i { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-buy-i b { font-size: 13px; font-weight: 500; color: #ffd94a; }
.dm-buy-i span { font-size: 11px; color: #9a8c6c; line-height: 1.5; }
.dm-buy-b { flex: 0 0 auto; white-space: nowrap; }
.dm-tabs { padding: 2px 0 8px; }
.dm-grp { margin-top: 8px; }
.dm-grp .gx-icons { gap: 5px; }
.dm-grp .gx-cell { padding: 5px 1px 4px; }
.dm-grp .gx-cell img { width: 30px; height: 30px; }
.dm-grp .gx-cell .gx-nm { font-size: 8.5px; }
.dm-shop-hint { margin-top: 6px; font-size: 11px; color: #9a8c6c; line-height: 1.5; }
.shard-tag { font-size: 11px; color: #c9a0ff; background: rgba(120,90,200,.25); border: 1px solid #6a5aa8; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.dreamboss-img { width: 76px; height: auto; display: block; filter: drop-shadow(0 0 8px rgba(160,120,255,.75)); }
.dreamboss-node .mname { color: #c9a0ff; }
.cloud-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 12px; }
.cloud-badge.bound { background: #166534; color: #86efac; border: 1px solid #22c55e; }
.cloud-badge.guest { background: #713f12; color: #fde047; border: 1px solid #eab308; }
.cloud-user-row { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,.35); padding: 8px 12px; border-radius: 6px; border: 1px solid #5a4322; margin-bottom: 12px; }
.cloud-user-name { font-size: 14px; font-weight: bold; color: #ffd27a; }
.cloud-backup-container { margin-top: 14px; background: rgba(0,0,0,.3); border-radius: 6px; border: 1px solid #4a381e; padding: 10px; max-height: 220px; overflow-y: auto; }
.cloud-bk-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #3d2d18; }
.cloud-bk-item:last-child { border-bottom: none; }
.cloud-bk-info { flex: 1; min-width: 0; }
.cloud-bk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.cloud-bk-cls { font-size: 12.5px; font-weight: bold; color: #ffd94a; }
.cloud-bk-time { font-size: 11px; color: #a89674; }
.cloud-bk-note { font-size: 11px; color: #8a795d; }
.cloud-btn-restore { background: linear-gradient(180deg,#7a381a,#4a200e); border: 1px solid #d97706; color: #fed7aa; padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; flex-shrink: 0; }
.cloud-btn-restore:active { filter: brightness(1.2); }
.auth-form-row { margin-bottom: 12px; }
.auth-form-row label { display: block; font-size: 12px; color: #d4b572; margin-bottom: 4px; }
.auth-input { width: 100%; box-sizing: border-box; background: #1a1208; border: 1px solid #7a6238; color: #f0e2b8; padding: 8px 10px; border-radius: 4px; font-size: 14px; outline: none; }
.auth-input:focus { border-color: #ffd94a; }
:root,
[data-theme="classic-mu"] {
  --q-bg-outer: #1a1208;
  --q-bg-app: #0d0a06;
  --q-topbar-bg: linear-gradient(180deg, #3a2a15, #241a0c);
  --q-bottombar-bg: linear-gradient(0deg, #3a2a15, #241a0c);
  --q-bar-border: #5a4322;
  --q-panel-bg: linear-gradient(180deg, #2e2110, #1a1208);
  --q-panel-border: #8a6d3a;
  --q-panel-head: #24190b;
  --q-panel-foot: #1a1208;
  --q-divider: #4a371c;
  --q-card-bg: rgba(20, 14, 6, 0.55);
  --q-card-border: #5a4322;
  --q-hud-bg: rgba(20, 14, 6, 0.86);
  --q-text-title: #ffd94a;
  --q-text-body: #e8dcc0;
  --q-text-sub: #c9b888;
  --q-text-muted: #9a8a6a;
  --q-hl-gold: #ffd94a;
  --q-hl-green: #7dffa8;
  --q-hl-blue: #6ab4ff;
  --q-hl-purple: #c77aff;
  --q-hl-red: #ff7a6a;
  --q-slot-bg: linear-gradient(180deg, #3a332a, #241d15);
  --q-slot-border: #7a6238;
  --q-input-bg: #140e06;
  --q-input-border: #6b5426;
  --q-input-text: #ffd94a;
  --q-btn-pri-bg: linear-gradient(180deg, #c9a227, #8a6d1a);
  --q-btn-pri-border: #e8c95a;
  --q-btn-pri-shadow: #523e0a;
  --q-btn-gray-bg: linear-gradient(180deg, #5a5246, #38322a);
  --q-btn-gray-border: #8a7f6d;
  --q-btn-gray-shadow: #221e18;
  --q-btn-danger-bg: linear-gradient(180deg, #c0392b, #7a1f15);
  --q-btn-danger-border: #e08a7a;
  --q-btn-danger-shadow: #4d100a;
  --q-btn-green-bg: linear-gradient(180deg, #4a7a3a, #2a4a1a);
  --q-btn-green-border: #6aaa5a;
  --q-btn-green-shadow: #182e0e;
  --q-nav-bg: linear-gradient(180deg, #5a4322, #3a2a15);
  --q-nav-border: #8a6d3a;
  --q-nav-shadow: #1f1509;
  --q-nav-text: #ffe9b0;
}
[data-theme="dreamy-star"],
[data-theme="q-dark"] {
  --q-bg-outer: #181226;
  --q-bg-app: #1C142E;
  --q-topbar-bg: linear-gradient(180deg, #3C295E, #261740);
  --q-bottombar-bg: linear-gradient(0deg, #3C295E, #261740);
  --q-bar-border: #5C3D94;
  --q-panel-bg: linear-gradient(180deg, #2B2147, #1C1530);
  --q-panel-border: #6E4FA8;
  --q-panel-head: #23193B;
  --q-panel-foot: #1C142F;
  --q-divider: #3E2D61;
  --q-card-bg: rgba(22, 14, 42, 0.62);
  --q-card-border: #523982;
  --q-hud-bg: rgba(28, 19, 48, 0.88);
  --q-text-title: #FF85B2;
  --q-text-body: #F0E8FF;
  --q-text-sub: #C4B5E6;
  --q-text-muted: #9E8DC4;
  --q-hl-gold: #FFD166;
  --q-hl-green: #3BE8B0;
  --q-hl-blue: #64D2FF;
  --q-hl-purple: #D8B4FE;
  --q-hl-red: #FF7597;
  --q-slot-bg: linear-gradient(180deg, #2D214D, #1E1536);
  --q-slot-border: #5C4094;
  --q-input-bg: #171029;
  --q-input-border: #6E4FA8;
  --q-input-text: #FFD166;
  --q-btn-pri-bg: linear-gradient(180deg, #A855F7, #7C3AED);
  --q-btn-pri-border: #C084FC;
  --q-btn-pri-shadow: #581C87;
  --q-btn-gray-bg: linear-gradient(180deg, #574B70, #3E3452);
  --q-btn-gray-border: #6E618A;
  --q-btn-gray-shadow: #282036;
  --q-btn-danger-bg: linear-gradient(180deg, #FF6584, #D6336C);
  --q-btn-danger-border: #FFA3B5;
  --q-btn-danger-shadow: #9C1B4A;
  --q-btn-green-bg: linear-gradient(180deg, #3BE8B0, #10B981);
  --q-btn-green-border: #6EE7B7;
  --q-btn-green-shadow: #059669;
  --q-nav-bg: linear-gradient(180deg, #563D87, #3B2761);
  --q-nav-border: #7F5EBC;
  --q-nav-shadow: #23163D;
  --q-nav-text: #F5E8FF;
}
[data-theme="neon-pop"],
[data-theme="q-cyber"] {
  --q-bg-outer: #0E1119;
  --q-bg-app: #131724;
  --q-topbar-bg: linear-gradient(180deg, #22293F, #151A29);
  --q-bottombar-bg: linear-gradient(0deg, #22293F, #151A29);
  --q-bar-border: #364163;
  --q-panel-bg: linear-gradient(180deg, #1C2337, #121624);
  --q-panel-border: #36446E;
  --q-panel-head: #161C2C;
  --q-panel-foot: #121624;
  --q-divider: #26304C;
  --q-card-bg: rgba(14, 18, 32, 0.65);
  --q-card-border: #2E3B5E;
  --q-hud-bg: rgba(18, 23, 38, 0.88);
  --q-text-title: #FFE600;
  --q-text-body: #EEF3FF;
  --q-text-sub: #B0C0E0;
  --q-text-muted: #8294B8;
  --q-hl-gold: #FFE600;
  --q-hl-green: #10E78F;
  --q-hl-blue: #00D2FF;
  --q-hl-purple: #C084FC;
  --q-hl-red: #FF4D79;
  --q-slot-bg: linear-gradient(180deg, #1E263D, #141929);
  --q-slot-border: #384770;
  --q-input-bg: #0D111C;
  --q-input-border: #3B4B75;
  --q-input-text: #FFE600;
  --q-btn-pri-bg: linear-gradient(180deg, #00D2FF, #0084FF);
  --q-btn-pri-border: #75E5FF;
  --q-btn-pri-shadow: #0056B3;
  --q-btn-gray-bg: linear-gradient(180deg, #3E4B69, #293247);
  --q-btn-gray-border: #57678F;
  --q-btn-gray-shadow: #1A202E;
  --q-btn-danger-bg: linear-gradient(180deg, #FF3B69, #D90429);
  --q-btn-danger-border: #FFA1B8;
  --q-btn-danger-shadow: #9E001E;
  --q-btn-green-bg: linear-gradient(180deg, #10E78F, #05B36B);
  --q-btn-green-border: #63F3B5;
  --q-btn-green-shadow: #03804C;
  --q-nav-bg: linear-gradient(180deg, #2D3856, #1B2235);
  --q-nav-border: #485987;
  --q-nav-shadow: #101420;
  --q-nav-text: #F0F4FF;
}
#topbar {
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
}
#bottombar {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 30;
}
.navbtn, .actbtn, .bigbtn, .plusbtn, .minibtn, .theme-card, .theme-quick-btn, .inv-tab, .map-radar-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.overlay.primary-ov:not(.battle-bag) {
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  padding: 10px 14px;
}
#ov-bag.primary-ov:not(.battle-bag) .inv-panel {
  margin-top: 0.5vh;
  max-height: 96%;
}
.navbtn {
  position: relative;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.nav-badge {
  position: absolute;
  top: 3px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: #ff4757;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff4757, 0 0 10px rgba(255, 71, 87, 0.8);
  font-size: 0;
  pointer-events: none;
  animation: pulseBadge 1.4s infinite ease-in-out;
}
@keyframes pulseBadge {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.3); opacity: 1; }
}
.navbtn.active {
  transform: translateY(-2px);
  border-color: var(--q-hl-gold) !important;
  box-shadow: 0 0 12px rgba(255, 217, 74, 0.4), 0 3px 0 rgba(0, 0, 0, 0.35) !important;
  filter: brightness(1.12);
}
.navbtn.active::after {
  content: '';
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: var(--q-hl-gold);
}
.overlay.on .panel {
  animation: none;
}
.actbtn:active, .bigbtn:active, .navbtn:active, .plusbtn:active, .minibtn:active {
  transform: translateY(2px) scale(0.98);
}
.inv-tabs {
  display: flex;
  gap: 6px;
  padding: 7px 20px 4px;
  flex-shrink: 0;
  background: var(--q-panel-head);
  border-bottom: 1px solid var(--q-divider);
}
.inv-tab {
  flex: 1;
  padding: 5px 4px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  background: var(--q-card-bg);
  border: 1px solid var(--q-card-border);
  color: var(--q-text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.12s ease;
}
.inv-tab .tcnt {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.78;
}
.inv-tab.on {
  background: var(--q-btn-pri-bg);
  border-color: var(--q-btn-pri-border);
  color: #FFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
@keyframes upBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.inv-slot .up-arr {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  color: #2ed573;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(46, 213, 115, 0.7);
  border-radius: 4px;
  padding: 1px 3px;
  text-shadow: 0 1px 2px #000;
  animation: upBounce 1.2s ease-in-out infinite;
  pointer-events: none;
}
.plusbtn.w1 {
  width: 34px;
  font-size: 13px;
}
.plusbtn.wall {
  width: 44px;
  font-size: 11.5px;
  background: linear-gradient(180deg, #f39c12, #d35400) !important;
  border-color: #ffd180 !important;
  color: #fff !important;
}
@keyframes valPulseAnim {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); color: #2ed573; }
  100% { transform: scale(1); }
}
.val-pulse {
  display: inline-block;
  animation: valPulseAnim 0.35s ease;
}
.map-radar-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 19;
  background: rgba(20, 14, 6, 0.88);
  border: 1.5px solid var(--q-panel-border, #8a6d3a);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #ffd94a;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.map-radar-btn:active {
  transform: scale(0.95);
}
.map-radar-pop {
  position: absolute;
  top: 44px;
  right: 10px;
  z-index: 25;
  width: 236px;
  max-height: calc(100% - 56px);
  display: flex;
  flex-direction: column;
  background: var(--q-panel-bg, linear-gradient(180deg, #2e2110, #1a1208));
  border: 2px solid var(--q-panel-border, #8a6d3a);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.mrp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--q-panel-head, rgba(0, 0, 0, 0.35));
  border-bottom: 1px solid var(--q-divider, rgba(90, 67, 34, 0.45));
  font-size: 12.5px;
  font-weight: 900;
  color: var(--q-text-title, #ffd94a);
}
.mrp-close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #c0392b;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.mrp-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
}
.mrp-sec {
  font-size: 11px;
  font-weight: 800;
  color: var(--q-hl-gold, #ffd94a);
  padding: 5px 6px 3px;
  margin-top: 4px;
  border-bottom: 1px dashed var(--q-divider, rgba(90, 67, 34, 0.45));
  text-align: left;
  letter-spacing: 0.5px;
}
.mrp-item,
.mrp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--q-card-bg, rgba(0, 0, 0, 0.45));
  border: 1px solid var(--q-card-border, #5a4322);
  color: var(--q-text-body, #e8dcc0);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.3;
}
.mrp-item:active,
.mrp-row:active {
  transform: scale(0.98);
  filter: brightness(1.2);
}
.mrp-row.locked {
  opacity: 0.45;
}
.mrp-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}
.mrp-lv,
.mrp-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  line-height: 1.2;
}
.mrp-lv.easy,
.mrp-tag.easy {
  background: rgba(34, 197, 94, 0.22);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
}
.mrp-lv.mid,
.mrp-tag.norm {
  background: rgba(234, 179, 8, 0.22);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.4);
}
.mrp-lv.hard,
.mrp-tag.hard {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.5);
}
.mrp-tag.npc {
  background: rgba(255, 168, 38, 0.2);
  color: var(--q-hl-gold, #ffd94a);
  border: 1px solid rgba(255, 168, 38, 0.45);
}
.mrp-tag.door {
  background: rgba(74, 155, 255, 0.18);
  color: var(--q-hl-blue, #6ab4ff);
  border: 1px solid rgba(74, 155, 255, 0.4);
}
.mrp-tag.dung {
  background: rgba(168, 85, 247, 0.2);
  color: var(--q-hl-purple, #c77aff);
  border: 1px solid rgba(168, 85, 247, 0.45);
}
.theme-quick-btn {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  padding: 1px 6px;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s, background .15s;
}
.theme-quick-btn:active {
  transform: scale(0.9);
  background: rgba(255,255,255,0.3);
}
.theme-active-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255,168,38,0.18);
  color: var(--q-hl-gold);
  border: 1px solid var(--q-hl-gold);
  letter-spacing: 0;
}
.theme-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}
.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--q-card-bg);
  border: 1.5px solid var(--q-card-border);
  cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .15s, background .15s;
}
.theme-card:active {
  transform: scale(0.98);
}
.theme-card.cur {
  border-color: var(--q-hl-gold);
  background: rgba(255, 168, 38, 0.12);
  box-shadow: 0 0 10px rgba(255, 168, 38, 0.22);
}
.tc-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--q-text-title);
  letter-spacing: 1px;
}
.tc-sub {
  font-size: 11px;
  color: var(--q-text-sub);
  background: rgba(128, 128, 128, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}
.theme-card.cur .tc-sub {
  color: var(--q-hl-gold);
  background: rgba(255, 168, 38, 0.18);
  font-weight: 700;
}
.tc-check {
  margin-left: auto;
  font-size: 14px;
  font-weight: 900;
  color: var(--q-hl-green);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .15s, transform .15s;
}
.theme-card.cur .tc-check {
  opacity: 1;
  transform: scale(1);
}
.tc-dots {
  display: flex;
  gap: 6px;
  margin: 2px 0;
}
.tdot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(128, 128, 128, 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.tc-desc {
  font-size: 11.5px;
  color: var(--q-text-muted);
  line-height: 1.45;
}
body { background: var(--q-bg-outer); }
#app { background: var(--q-bg-app); }
#topbar {
  background: var(--q-topbar-bg);
  border-bottom: 2px solid var(--q-bar-border);
}
.brand-tag {
  color: var(--q-text-title);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7), 0 1px 2px #000;
}
.lvbadge {
  background: var(--q-btn-pri-bg);
  border-color: var(--q-btn-pri-border);
  color: #fff;
}
.bar-wrap {
  background: var(--q-input-bg);
  border-color: var(--q-card-border);
}
.gold {
  color: var(--q-hl-gold);
  font-weight: 800;
}
#bottombar {
  background: var(--q-bottombar-bg);
  border-top: 2px solid var(--q-bar-border);
}
.navbtn {
  background: var(--q-nav-bg);
  border: 1.5px solid var(--q-nav-border);
  color: var(--q-nav-text);
  box-shadow: 0 3px 0 var(--q-nav-shadow);
  border-radius: 10px;
}
#map-name,
.map-radar-btn,
.map-party-btn {
  background: var(--q-hud-bg);
  border-color: var(--q-panel-border);
}
#map-name,
.map-radar-btn {
  color: var(--q-text-title);
}
.map-party-btn {
  color: var(--q-hl-green);
}
.map-party-btn .cnt {
  color: var(--q-hl-gold);
}
#toast {
  background: var(--q-panel-head);
  border: 1.5px solid var(--q-hl-gold);
  color: var(--q-text-title);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.panel {
  background: var(--q-panel-bg);
  border-color: var(--q-panel-border);
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65);
}
.panel-head {
  background: var(--q-panel-head);
  border-bottom: 1.5px solid var(--q-divider);
}
.panel-title {
  color: var(--q-text-title);
  font-weight: 900;
}
.panel-foot,
#ov-dream .panel-foot,
.gx-foot {
  background: var(--q-panel-foot);
  border-top: 1.5px solid var(--q-divider);
}
.panel-body {
  color: var(--q-text-body);
}
.panel-close,
.inv-close,
.actbar-x,
.mrp-close {
  background: var(--q-btn-danger-bg);
  border: 1.5px solid var(--q-btn-danger-border);
  color: #fff;
  box-shadow: 0 2px 0 var(--q-btn-danger-shadow);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
}
.panel-close,
.inv-close {
  width: 28px;
  height: 28px;
  font-size: 14px;
}
.bigbtn {
  background: var(--q-btn-pri-bg);
  border: 1px solid var(--q-btn-pri-border);
  box-shadow: 0 3px 0 var(--q-btn-pri-shadow);
  color: #fff;
}
.bigbtn.gray {
  background: var(--q-btn-gray-bg);
  border: 1px solid var(--q-btn-gray-border);
  box-shadow: 0 3px 0 var(--q-btn-gray-shadow);
  color: var(--q-text-body);
}
.bigbtn.danger {
  background: var(--q-btn-danger-bg);
  border: 1px solid var(--q-btn-danger-border);
  box-shadow: 0 3px 0 var(--q-btn-danger-shadow);
  color: #fff;
}
.plusbtn {
  background: var(--q-btn-green-bg);
  border: 1px solid var(--q-btn-green-border);
  box-shadow: 0 2px 0 var(--q-btn-green-shadow);
  color: #fff;
  font-weight: 800;
}
.minibtn,
.gc-up,
.gx-ex,
.gb-go,
.gq-btn {
  background: var(--q-btn-pri-bg);
  border: 1px solid var(--q-btn-pri-border);
  color: #fff;
}
.minibtn.sell {
  background: var(--q-btn-gray-bg);
  border-color: var(--q-btn-gray-border);
  color: var(--q-text-body);
}
.gq-btn.claim {
  background: var(--q-btn-green-bg);
  border-color: var(--q-btn-green-border);
  color: #fff;
}
.gb-card.hell .gb-go {
  background: var(--q-btn-danger-bg);
  border-color: var(--q-btn-danger-border);
  color: #fff;
}
.inv-panel {
  background: var(--q-panel-bg);
  border: 2px solid var(--q-panel-border);
  border-radius: 16px;
}
.inv-topbar {
  background: var(--q-panel-head);
  border-bottom: 1.5px solid var(--q-divider);
  height: 50px;
}
.inv-title {
  color: var(--q-text-title);
  text-shadow: 0 1px 2px #000;
  font-weight: 900;
}
.inv-stone { display: none !important; }
[data-theme="classic-mu"] .inv-stone { display: block !important; }
[data-theme="classic-mu"] .inv-panel { border: none; border-radius: 14px; }
.inv-body {
  background: transparent;
}
.inv-sec-title {
  color: var(--q-text-title);
}
.inv-sellall,
.inv-sort {
  background: var(--q-btn-gray-bg);
  border: 1px solid var(--q-btn-gray-border);
  color: var(--q-text-body);
  border-radius: 6px;
}
.inv-sellall {
  color: var(--q-hl-gold);
  border-color: var(--q-panel-border);
}
.inv-slot,
.eq-slot,
.eg-cell,
.item-ico {
  background: var(--q-slot-bg);
  border-color: var(--q-slot-border);
}
.inv-slot.sel {
  outline: 2.5px solid var(--q-hl-gold);
  outline-offset: -2px;
}
.eq-slot .eq-tag {
  color: var(--q-text-sub);
}
.inv-coinbar {
  background: var(--q-panel-head);
  border-top: 1.5px solid var(--q-divider);
}
.coin-label {
  color: var(--q-text-sub);
}
.coin-num {
  color: var(--q-hl-gold);
  font-weight: 900;
}
.inv-actbar {
  background: var(--q-panel-head);
  border-top: 1.5px solid var(--q-divider);
  color: var(--q-text-body);
}
.inv-actbar.has-cmp .actbar-btns {
  background: var(--q-panel-foot);
  border-top: 1px solid var(--q-divider);
}
.actbar-name { color: var(--q-text-body); }
.actbar-name.q1, .item-name.q1, .cmp-nm.q1 { color: var(--q-hl-green); }
.actbar-name.q2, .actbar-name.q3, .item-name.q2, .item-name.q3, .cmp-nm.q2, .cmp-nm.q3 { color: var(--q-hl-blue); }
.actbar-name.q4, .item-name.q4, .cmp-nm.q4 { color: var(--q-hl-gold); }
.actbar-sub { color: var(--q-text-sub); }
.actbar-req, .actbar-tip { color: var(--q-text-muted); }
.eq-cmp {
  background: var(--q-card-bg);
  border: 1px solid var(--q-card-border);
}
.cmp-head {
  background: var(--q-panel-head);
  border-bottom: 1px solid var(--q-divider);
}
.cmp-slot { color: var(--q-hl-gold); }
.cmp-nm { color: var(--q-text-body); }
.cmp-cols, .cmp-col.old, .cmp-row, .cmp-k {
  border-color: var(--q-divider);
}
.cmp-k {
  background: rgba(0, 0, 0, 0.2);
  color: var(--q-text-muted);
}
.cmp-cell.old { color: var(--q-text-muted); }
.cmp-cell.new { color: var(--q-text-body); }
.intro-p, .intro-ul li, .char-line {
  color: var(--q-text-body);
}
.intro-h {
  color: var(--q-text-title);
  border-left-color: var(--q-hl-gold);
}
.intro-h.warn {
  color: var(--q-hl-red);
  border-left-color: var(--q-hl-red);
}
.intro-note {
  color: var(--q-text-sub);
  background: var(--q-card-bg);
  border: 1px solid var(--q-card-border);
}
.char-sec {
  color: var(--q-text-sub);
}
.char-line {
  border-bottom: 1px solid var(--q-divider);
}
.char-line b {
  color: var(--q-hl-gold);
}
.char-line .effect {
  color: var(--q-text-muted);
}
.cls-card,
.char-slot {
  background: var(--q-card-bg);
  border: 1.5px solid var(--q-card-border);
}
.cls-card:hover,
.char-slot.cur {
  border-color: var(--q-hl-gold);
  background: rgba(255, 168, 38, 0.1);
  box-shadow: 0 0 10px rgba(255, 168, 38, 0.2);
}
.cls-name,
.char-slot .cs-name {
  color: var(--q-text-title);
}
.cls-sub,
.char-slot .cs-sub {
  color: var(--q-text-sub);
}
.cls-tag {
  color: var(--q-text-body);
}
.cls-tag b {
  color: var(--q-hl-gold);
}
.cls-stats,
.char-slot .cs-active {
  color: var(--q-hl-green);
}
.char-slot.empty .cs-name {
  color: var(--q-text-muted);
}
.item-row,
.dung-row {
  border-bottom-color: var(--q-divider);
}
.loot-row {
  background: var(--q-card-bg);
  border-color: var(--q-card-border);
}
.item-name,
.dung-row .dung-mn,
.stg-rname {
  color: var(--q-text-body);
}
.item-sub,
.dung-row .dung-mn i,
.dung-row .dung-no,
.empty-tip {
  color: var(--q-text-muted);
}
.tag.t-ex {
  color: var(--q-hl-gold);
  border-color: var(--q-hl-gold);
  background: rgba(255, 168, 38, 0.12);
}
.tag.t-luck {
  color: var(--q-hl-blue);
  border-color: var(--q-hl-blue);
}
.tag.t-add {
  color: var(--q-hl-purple);
  border-color: var(--q-hl-purple);
}
.tag.t-req {
  color: var(--q-text-muted);
  border-color: var(--q-card-border);
}
.stg-route {
  border-top-color: var(--q-divider);
}
.stg-rgo {
  color: var(--q-hl-gold);
}
.stg-r2,
.stg-lockwhy {
  color: var(--q-text-sub);
}
.stg-r2 .good {
  color: var(--q-hl-green);
  font-weight: 700;
}
.dung-desc,
.world-card {
  background: var(--q-card-bg);
  border-color: var(--q-card-border);
  color: var(--q-text-sub);
}
.world-card.cur {
  border-color: var(--q-hl-gold);
  background: rgba(255, 168, 38, 0.12);
}
.world-card .wc-name {
  color: var(--q-hl-gold);
}
.world-card .wc-sub {
  color: var(--q-text-sub);
}
.world-card .wc-here {
  color: var(--q-hl-green);
  border-color: var(--q-hl-green);
}
.gc-sub,
.gb-sub,
.gx-foot-txt,
.syn-note {
  color: var(--q-text-sub);
  border-color: var(--q-divider);
}
.gc-row,
.gq-row,
.gx-cell,
.gb-card {
  background: var(--q-card-bg);
  border-color: var(--q-card-border);
}
.gb-card.hell {
  border-color: var(--q-hl-red);
  background: rgba(239, 68, 68, 0.08);
}
.gc-name,
.gq-head,
.gb-cname,
.gx-cell .gx-price,
.gb-tag b {
  color: var(--q-hl-gold);
}
.gb-card.hell .gb-cname,
.gb-card.hell .gb-tag b {
  color: var(--q-hl-red);
}
.gq-name,
.gc-lv,
.gx-set-name,
.gx-cell .gx-nm,
.gb-stat b {
  color: var(--q-text-body);
}
.gq-meta,
.gq-sub,
.gc-desc,
.gc-cost,
.gb-tag,
.gb-stat {
  color: var(--q-text-muted);
}
.gq-ok { color: var(--q-hl-green); }
.gq-prog { color: var(--q-hl-blue); }
.gx-tab {
  background: var(--q-card-bg);
  border-color: var(--q-card-border);
  color: var(--q-text-sub);
}
.gx-tab.on {
  background: var(--q-btn-pri-bg);
  border-color: var(--q-btn-pri-border);
  color: #FFF;
}
.dm-hero {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(168, 85, 247, 0.4);
}
.dm-say { color: var(--q-text-body); }
.dm-sub { color: var(--q-hl-purple); }
.dm-rules,
.dm-s,
.dm-shop,
.eg-head {
  background: var(--q-card-bg);
  border-color: var(--q-card-border);
}
.dm-r-t,
.dm-ul b,
.dm-gsum b,
.dm-buy-i b,
.eg-cnt {
  color: var(--q-hl-gold);
}
.dm-ul li,
.dm-s b,
.dm-g4,
.dm-line b,
.dm-gsum,
.eg-grp {
  color: var(--q-text-body);
}
.dm-s span,
.dm-line,
.dm-tip,
.dm-buy-i span,
.dm-shop-hint,
.eg-tip,
.eg-empty,
.eg-foot-tip {
  color: var(--q-text-muted);
}
.dm-buy {
  border-top-color: var(--q-divider);
}
.cf-row,
.name-ask {
  color: var(--q-text-body);
}
.cf-hl,
.saveio-info b,
.cloud-user-name,
.cloud-bk-cls {
  color: var(--q-hl-gold);
}
.cf-note,
.name-tip,
.saveio-fname,
.cloud-bk-time,
.cloud-bk-note,
.auth-form-row label {
  color: var(--q-text-muted);
}
.name-input,
.saveio-code,
.auth-input {
  background: var(--q-input-bg);
  border-color: var(--q-input-border);
  color: var(--q-input-text);
}
.saveio-info,
.cloud-user-row,
.cloud-backup-container {
  background: var(--q-card-bg);
  border-color: var(--q-card-border);
  color: var(--q-text-sub);
}
.cloud-bk-item {
  border-bottom-color: var(--q-divider);
}
.b-mid {
  background: var(--q-hud-bg);
  border: 1.5px solid var(--q-panel-border);
  border-radius: 12px;
}
#battle-log {
  color: var(--q-text-body);
}
.b-back {
  background: var(--q-hud-bg);
  border-color: var(--q-panel-border);
  color: var(--q-text-title);
}
.hero-lvbadge {
  background: var(--q-btn-pri-bg);
  border-color: var(--q-btn-pri-border);
  color: #fff;
}
#bt-relic {
  background: var(--q-hud-bg);
  border-color: var(--q-panel-border);
  color: var(--q-hl-gold);
}
.skpick,
.auto-thresh-pop,
.auto-sell-pop {
  background: var(--q-panel-bg);
  border-color: var(--q-panel-border);
}
.skpick-head,
.atp-title,
.asp-title {
  color: var(--q-text-title);
  border-bottom-color: var(--q-divider);
}
.atp-sub,
.asp-sub,
.atp-hint,
.asp-hint,
.sk-sub {
  color: var(--q-text-muted);
}
.atp-lbl,
.sk-name {
  color: var(--q-text-body);
}
.skitem,
.atp-opt,
.asp-opt {
  background: var(--q-card-bg);
  border-color: var(--q-card-border);
  color: var(--q-text-body);
}
.atp-opt.on,
.asp-opt.on {
  background: var(--q-btn-pri-bg);
  border-color: var(--q-btn-pri-border);
  color: #fff;
}
.atp-close,
.asp-close {
  background: var(--q-btn-gray-bg);
  border-color: var(--q-btn-gray-border);
  color: var(--q-text-body);
}
.actbtn.attack {
  background: var(--q-btn-danger-bg);
  border-color: var(--q-btn-danger-border);
  box-shadow: 0 3px 0 var(--q-btn-danger-shadow);
}
.actbtn.skill {
  background: linear-gradient(180deg, #9C74F5, #6C3FEA);
  border-color: #D4C3FD;
  box-shadow: 0 3px 0 #4E27B8;
}
.panel [style*="color:#ffd94a"],
.panel [style*="color:#ffd27a"],
.panel [style*="color:#ffe9a8"] {
  color: var(--q-hl-gold) !important;
  border-left-color: var(--q-hl-gold) !important;
}
.panel [style*="color:#c9b888"],
.panel [style*="color:#c9b98a"],
.panel [style*="color:#d8c9a8"],
.panel [style*="color:#e8dcc0"] {
  color: var(--q-text-body) !important;
}
.panel [style*="color:#9a8c6c"],
.panel [style*="color:#9a8a6a"],
.panel [style*="color:#b8a686"] {
  color: var(--q-text-sub) !important;
}
.panel [style*="color:#7fe07f"],
.panel [style*="color:#8fd18f"],
.panel [style*="color:#9affa0"] {
  color: var(--q-hl-green) !important;
}
.panel [style*="color:#c77aff"],
.panel [style*="color:#c9a0ff"] {
  color: var(--q-hl-purple) !important;
}
.map-party-btn {
  position: absolute;
  top: 10px;
  right: 108px;
  z-index: 19;
  background: var(--q-hud-bg, rgba(20, 14, 6, 0.85));
  border: 1.5px solid var(--q-panel-border, #8a6d3a);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 800;
  color: var(--q-hl-green, #7ee787);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.map-party-btn .cnt {
  font-size: 11px;
  color: var(--q-hl-gold, #ffd94a);
  font-weight: 900;
}
.map-party-btn:active {
  transform: scale(0.95);
}
.b-actions2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 0 10px 6px !important;
  flex-shrink: 0 !important;
}
.b-actions2 .actbtn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 2px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.pot-btn-img {
  width: 22px;
  height: 22px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
  flex-shrink: 0;
}
.b-actions2 .actbtn .btn-ico {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.b-actions2 .actbtn .btn-txt {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.b-actions2 .actbtn .cnt {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  margin-left: 1px;
  opacity: 0.95;
}
.actbtn.partybtn {
  background: linear-gradient(180deg, #1f6b48, #113f2a) !important;
  border-color: #56c294 !important;
  color: #e2fff0 !important;
}
@media (max-width: 380px) {
  .b-actions2 {
    gap: 3px !important;
    padding: 0 6px 5px !important;
  }
  .b-actions2 .actbtn {
    height: 35px !important;
    padding: 0 1px !important;
    gap: 1px !important;
  }
  .pot-btn-img {
    width: 19px;
    height: 19px;
  }
  .b-actions2 .actbtn .btn-ico {
    font-size: 13px;
  }
  .b-actions2 .actbtn .btn-txt {
    font-size: 10.5px;
  }
  .b-actions2 .actbtn .cnt {
    font-size: 10px;
  }
}
.party-stage {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  transition: width .2s ease, height .2s ease;
}
.party-stage.p-2 {
  width: 130px;
  height: 98px;
  flex: 0 0 130px;
}
.party-stage.p-3 {
  width: 138px;
  height: 102px;
  flex: 0 0 138px;
}
.party-stage.p-2 #bt-hero {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78px;
  height: 78px;
  z-index: 3;
}
.party-stage.p-2 #bt-ally-0 {
  position: absolute;
  left: 0;
  top: 2px;
  width: 66px;
  height: 66px;
  z-index: 2;
  cursor: pointer;
}
.party-stage.p-3 #bt-hero {
  position: absolute;
  right: 0;
  bottom: 6px;
  width: 72px;
  height: 72px;
  z-index: 4;
}
.party-stage.p-3 #bt-ally-0 {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 58px;
  z-index: 2;
  cursor: pointer;
}
.party-stage.p-3 #bt-ally-1 {
  position: absolute;
  left: 6px;
  bottom: 0;
  width: 58px;
  height: 58px;
  z-index: 3;
  cursor: pointer;
}
.ally-layers::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 2px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(86, 194, 148, 0.45) 0%, rgba(0, 0, 0, 0) 75%);
  z-index: 0;
  pointer-events: none;
}
.hero-lvbadge.ally-lvbadge {
  font-size: 9.5px;
  padding: 0 5px;
  line-height: 1.35;
  border-radius: 7px;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  border-color: #93c5fd;
}
.ally-slot-1 .hero-lvbadge.ally-lvbadge {
  background: linear-gradient(180deg, #7c3aed, #5b21b6);
  border-color: #c4b5fd;
}
.ally-dead-mask {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(10, 6, 4, 0.62);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #ff6b6b;
  text-shadow: 0 1px 2px #000;
  letter-spacing: 1px;
}
.ally-layers.is-dead .hero-img,
.ally-layers.is-dead .hero-wing {
  filter: grayscale(0.9) brightness(0.6);
}
#battle.party-on .b-mid {
  height: 82px;
}
#battle.party-on .b-bottom {
  align-items: center;
  gap: 8px;
  padding: 4px 12px 8px;
}
.hero-bars {
  flex: 1;
  min-width: 0;
}
.main-hpmp-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#battle.party-on .hero-bars .exp-row {
  margin-bottom: 3px;
}
#battle.party-on .main-hpmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 4px;
}
#battle.party-on .main-hpmp-grid .bar-wrap {
  margin-bottom: 0;
  height: 13px;
}
.ally-bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ally-hud-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 7px;
  background: var(--q-hud-bg, rgba(18, 13, 6, 0.76));
  border: 1px solid var(--q-card-border, rgba(138, 109, 58, 0.55));
  font-size: 10.5px;
  color: var(--q-text-body, #e8dcc0);
  cursor: pointer;
}
.ally-hud-row:active {
  filter: brightness(1.18);
}
.ally-hud-row.dead {
  opacity: 0.65;
  border-color: rgba(224, 106, 74, 0.55);
}
.ally-badge {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: #1d4ed8;
  color: #fff;
  line-height: 1.2;
}
.ally-badge.s2 {
  background: #6d28d9;
}
.ally-hud-who {
  flex: 0 0 auto;
  max-width: 82px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: var(--q-text-title, #ffe9b0);
}
.ally-hud-who small {
  color: var(--q-hl-gold, #ffd94a);
  font-size: 9.5px;
  margin-left: 2px;
}
.ally-hud-bars {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.ally-mini-bar {
  position: relative;
  height: 11px;
  background: var(--q-input-bg, #120c04);
  border: 1px solid var(--q-card-border, #4a371c);
  border-radius: 5px;
  overflow: hidden;
}
.ally-mini-bar .fill {
  height: 100%;
  transition: width .25s;
}
.ally-mini-bar .fill.hp {
  background: linear-gradient(180deg, #ff5b4a, #a01810);
}
.ally-mini-bar .fill.mp {
  background: linear-gradient(180deg, #4a9bff, #103a8a);
}
.ally-mini-bar .txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 1px #000;
  white-space: nowrap;
}
.ally-hud-sk {
  flex-shrink: 0;
  font-size: 9.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(138, 90, 168, 0.35);
  border: 1px solid rgba(176, 122, 208, 0.5);
  color: #e9d5ff;
  white-space: nowrap;
}
.ally-hud-gear {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--q-hl-gold, #ffd94a);
  opacity: 0.85;
}
.party-panel {
  max-height: 88%;
}
.party-banner {
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(36, 106, 78, 0.28), rgba(28, 45, 78, 0.28));
  border: 1px solid rgba(86, 194, 148, 0.45);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--q-text-body, #e8dcc0);
  margin-bottom: 10px;
}
.party-banner b {
  color: var(--q-hl-gold, #ffd94a);
}
.party-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}
.party-slot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: var(--q-card-bg, rgba(42, 31, 16, 0.72));
  border: 1.5px solid var(--q-card-border, #5a4322);
  text-align: center;
  position: relative;
}
.party-slot-card.main {
  border-color: var(--q-hl-gold, #ffd94a);
  background: rgba(255, 168, 38, 0.1);
}
.party-slot-card.active-ally {
  border-color: #56c294;
  background: rgba(46, 213, 115, 0.08);
}
.party-slot-card.locked {
  opacity: 0.62;
  border-style: dashed;
}
.psc-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--q-hl-gold, #ffd94a);
}
.party-slot-card.active-ally .psc-tag {
  color: #7ee787;
}
.psc-ava {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 2px 0;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.psc-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--q-text-title, #ffe9b0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.psc-meta {
  font-size: 10.5px;
  color: var(--q-text-sub, #b8a686);
  margin-top: 1px;
}
.psc-pow {
  font-size: 10px;
  font-weight: 700;
  color: var(--q-hl-green, #7ee787);
  margin-top: 2px;
}
.psc-Lock {
  font-size: 10.5px;
  color: var(--q-text-muted, #9a8a6a);
  margin: 10px 0;
  line-height: 1.4;
}
.party-sec-card {
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--q-card-bg, rgba(38, 28, 14, 0.72));
  border: 1px solid var(--q-card-border, #5a4322);
  margin-bottom: 9px;
}
.party-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--q-hl-gold, #ffd94a);
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--q-divider, rgba(138, 109, 58, 0.35));
}
.party-cls-pills,
.party-opt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.party-pill {
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--q-input-bg, rgba(20, 14, 6, 0.55));
  border: 1px solid var(--q-input-border, #5a4322);
  color: var(--q-text-body, #d8c9a8);
  cursor: pointer;
}
.party-pill:active {
  transform: scale(0.97);
}
.party-pill.on {
  background: var(--q-btn-pri-bg, linear-gradient(180deg, #d99b26, #966510));
  border-color: var(--q-btn-pri-border, #ffd94a);
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 217, 74, 0.25);
}
.party-pill.create {
  border-style: dashed;
  color: var(--q-hl-blue, #7ac0ff);
}
.party-cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--q-text-body, #e8dcc0);
}
.party-cfg-row .lbl {
  color: var(--q-text-sub, #b8a686);
  font-size: 11.5px;
}
.party-step-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.party-step-btn {
  width: 24px;
  height: 22px;
  border-radius: 5px;
  background: var(--q-btn-gray-bg, linear-gradient(180deg, #3a4a5e, #202a38));
  border: 1px solid var(--q-btn-gray-border, #5a708c);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.party-step-val {
  min-width: 40px;
  text-align: center;
  font-weight: 800;
  color: var(--q-hl-gold, #ffd94a);
  font-size: 12px;
}
.party-pts-box {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 168, 38, 0.1);
  border: 1px dashed rgba(255, 168, 38, 0.5);
}
.party-pts-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--q-hl-gold, #ffd94a);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.party-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.party-stat-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 11px;
}
.party-stat-btns {
  display: inline-flex;
  gap: 3px;
}
.party-stat-btns button {
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  background: var(--q-btn-green-bg, linear-gradient(180deg, #2e8b57, #1e603a));
  border: 1px solid var(--q-btn-green-border, #5cd68d);
  color: #fff;
}
#intro-body {
  display: flex;
  flex-direction: column;
}
#intro-sec-char {
  order: -4;
  margin-top: 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--q-card-bg, rgba(42, 31, 16, 0.72));
  border: 1.5px solid var(--q-hl-gold, #ffd94a);
  margin-bottom: 10px;
}
#ov-intro .intro-btns {
  order: -3;
  margin-top: 0;
  margin-bottom: 6px;
}
#btn-intro-cloud {
  order: -3;
  margin-top: 0 !important;
  margin-bottom: 12px;
}
#intro-sec-theme {
  order: -2;
}
.char-slot-acts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.char-slot-acts .bigbtn {
  padding: 6px 10px;
  font-size: 12px;
}
.cs-party-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 5px;
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff;
  vertical-align: middle;
}
.party-roster-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--q-card-border, #5a4322);
  margin-bottom: 6px;
}
.party-roster-row.is-main {
  border-color: var(--q-hl-gold, #ffd94a);
  background: rgba(255, 168, 38, 0.1);
}
.party-roster-row.is-ally {
  border-color: #34d399;
  background: rgba(16, 185, 129, 0.1);
}
.prr-ava {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.prr-info {
  flex: 1;
  min-width: 0;
}
.prr-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--q-text-title, #ffe9b0);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.prr-sub {
  font-size: 11px;
  color: var(--q-text-sub, #b8a686);
  margin-top: 2px;
}
.prr-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.prr-btn {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  background: var(--q-btn-gray-bg, linear-gradient(180deg, #3a4a5e, #202a38));
  border: 1px solid var(--q-btn-gray-border, #5a708c);
  color: #fff;
  cursor: pointer;
}
.prr-btn.pri {
  background: var(--q-btn-pri-bg, linear-gradient(180deg, #e69d24, #a86c0c));
  border-color: var(--q-btn-pri-border, #ffd94a);
}
.prr-btn.ally {
  background: var(--q-btn-green-bg, linear-gradient(180deg, #10b981, #047857));
  border-color: var(--q-btn-green-border, #6ee7b7);
}
.prr-btn.danger {
  background: var(--q-btn-danger-bg, linear-gradient(180deg, #ef4444, #b91c1c));
  border-color: var(--q-btn-danger-border, #fca5a5);
}
.prr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#btn-hp,
.actbtn.small#btn-hp,
.actbtn.hp {
  background: linear-gradient(180deg, #b92b27, #751412) !important;
  border: 1px solid #ff6b6b !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
}
#btn-mp,
.actbtn.small#btn-mp,
.actbtn.mp {
  background: linear-gradient(180deg, #1565c0, #0d3c73) !important;
  border: 1px solid #64b5f6 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
}
#btn-flee,
.actbtn.flee {
  background: linear-gradient(180deg, #4d3c33, #2e231e) !important;
  border: 1px solid #7d6556 !important;
  color: #f0e6dc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
}
#btn-battle-bag,
.actbtn.bagbtn {
  background: linear-gradient(180deg, #c97716, #7a4306) !important;
  border: 1px solid #f59e0b !important;
  color: #fff8e6 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
}
#btn-battle-party,
.actbtn.partybtn {
  background: linear-gradient(180deg, #1f6b48, #113f2a) !important;
  border: 1.5px solid #4ade80 !important;
  color: #e6fff2 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}
#btn-battle-party:active,
.actbtn.partybtn:active {
  background: #113f2a !important;
  transform: scale(0.97);
}
#btn-battle-party .cnt,
.actbtn.partybtn .cnt {
  color: #fef08a !important;
  font-weight: 900 !important;
  margin-left: 2px;
}
#auto-row .actbtn.auto-btn,
#auto-row .actbtn.auto-set {
  background: linear-gradient(180deg, #253140, #161e27) !important;
  border: 1px solid #3d4f66 !important;
  color: #c4d3e2 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}
#auto-row .actbtn.auto-btn.on,
#auto-row .actbtn.auto-set.on {
  background: linear-gradient(180deg, #c8961e, #855e08) !important;
  border: 1px solid #ffd94a !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
  box-shadow: 0 0 10px rgba(255, 217, 74, 0.6) !important;
  font-weight: 800 !important;
}
.map-promo-btn {
  position: absolute;
  top: 48px;
  left: 10px;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--q-hud-bg, rgba(20, 14, 6, 0.88));
  border: 1px solid var(--q-panel-border, #8a6d3a);
  border-radius: 14px;
  color: var(--q-text-title, #ffd94a);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 6px rgba(255, 217, 74, 0.15);
  animation: promoPulseAnim 2.6s infinite ease-in-out;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.map-promo-btn:hover {
  border-color: var(--q-hl-gold, #ffd94a);
  box-shadow: 0 0 10px rgba(255, 217, 74, 0.5), inset 0 0 8px rgba(255, 217, 74, 0.25);
  transform: translateY(-1px);
}
.map-promo-btn:active {
  transform: scale(0.96);
}
.map-promo-btn .promo-fire {
  font-size: 12px;
  line-height: 1;
}
.map-promo-btn .promo-name {
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.map-promo-btn .promo-pill {
  font-size: 9px;
  background: linear-gradient(135deg, #ff4d4f, #d9363e);
  color: #fff;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
@keyframes promoPulseAnim {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 217, 74, 0.4);
    border-color: var(--q-panel-border, #8a6d3a);
  }
  50% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 8px 2px rgba(255, 217, 74, 0.6);
    border-color: var(--q-hl-gold, #ffd94a);
  }
}
.promo-intro-sec {
  background: var(--q-card-bg, rgba(20, 14, 6, 0.65)) !important;
  border: 1px solid var(--q-card-border, #5a4322) !important;
  border-left: 3px solid var(--q-hl-gold, #ffd94a) !important;
}
.promo-badge {
  font-size: 10px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.promo-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(255, 217, 74, 0.12), rgba(0, 0, 0, 0.35));
  border: 1.5px solid var(--q-panel-border, #8a6d3a);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.promo-link-card:hover {
  background: linear-gradient(135deg, rgba(255, 217, 74, 0.22), rgba(0, 0, 0, 0.5));
  border-color: var(--q-hl-gold, #ffd94a);
  box-shadow: 0 0 12px rgba(255, 217, 74, 0.3);
  transform: translateY(-1px);
}
.promo-link-card:active {
  transform: scale(0.98);
}
.promo-link-card .plc-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.promo-link-card .plc-icon {
  font-size: 26px;
  line-height: 1;
}
.promo-link-card .plc-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--q-hl-gold, #ffd94a);
  letter-spacing: 1px;
}
.promo-link-card .plc-url {
  font-size: 11px;
  color: var(--q-text-sub, #c9b888);
  font-family: Consolas, Monaco, monospace;
  opacity: 0.85;
}
.promo-link-card .plc-action {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--q-btn-pri-bg, linear-gradient(180deg, #c9a227, #8a6d1a));
  border: 1px solid var(--q-btn-pri-border, #e8c95a);
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}