:root{
  --ink:#3b2416;
  --muted:#7a5840;
  --cream:#fff6e6;
  --paper:#ffeecb;
  --gold:#f4c45a;
  --gold-deep:#d48a24;
  --wood:#c56a2e;
  --red:#e24b3c;
  --jade:#2db89a;
  --sky:#7ec8e8;
  --line:#f0c56a;
}
*{box-sizing:border-box}
html,body{height:100%;max-height:100%;overflow:hidden}
html:not(.embedded),html:not(.embedded) body{
  height:100%;
  max-height:100dvh;
  overflow:hidden;
}
body{
  margin:0;
  min-height:100%;
  color:var(--ink);
  font:15px/1.45 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(circle at 82% 6%, rgba(255,255,255,.55), transparent 26%),
    radial-gradient(circle at 12% 14%, rgba(70,210,190,.28), transparent 24%),
    linear-gradient(180deg,#7ec8e8 0%,#b9e4f4 16%,#ffe7b0 46%,#f3c57a 100%);
}
.app{
  position:relative;
  width:100%;
  max-width:480px;
  height:100%;
  margin:auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 0, rgba(255,248,220,.7), transparent 32%),
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.35), transparent 22%),
    linear-gradient(180deg,#8fd3ee 0 92px,#f7d7a4 92px 100%);
}
html.embedded .app{max-width:none}
html:not(.embedded) .app{
  max-width:none;
  height:100%;
  height:100dvh;
}
@media(min-width:760px){
  html:not(.embedded) .app{
    max-width:640px;
    box-shadow:0 0 0 3px rgba(243,196,90,.85), 0 18px 40px rgba(80,30,10,.22);
  }
}
html:not(.embedded):fullscreen .app,
html:not(.embedded):-webkit-full-screen .app,
html:not(.embedded).immersive .app,
html:not(.embedded).standalone-mobile .app{
  max-width:none;
  border:0;
  box-shadow:none;
}
button{font:inherit;border:0;cursor:pointer;background:none;color:inherit}
img{max-width:100%}
.ico{width:22px;height:22px;object-fit:contain;flex:none;display:inline-block;vertical-align:middle}

.landing,.game{flex:1;min-height:0;width:100%}
.landing[hidden],.game[hidden],.view[hidden],.modal-mask[hidden],.toast[hidden]{display:none!important}
.zxsj-auth-bar{display:none!important}

.landing{
  padding:10vh 24px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.brand-mark{
  width:86px;height:86px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#fff8d8,#ffd27a);
  border:3px solid #fff;
  box-shadow:0 6px 0 #e09a3a, 0 10px 18px rgba(140,60,20,.2);
  border-radius:50%;
}
.brand-mark img{width:64px;height:64px;object-fit:contain}
.eyebrow{font-size:11px;letter-spacing:2px;color:#b06020;margin:22px 0 6px;font-weight:700}
.landing h1{font-size:clamp(42px,12vw,60px);line-height:.98;margin:0;letter-spacing:3px;color:#3b1f10;text-shadow:0 2px 0 #fff3c8}
.landing h1 em{font-style:normal;color:#d94838}
.intro{color:var(--muted);max-width:26em;margin:18px 0}
.notice{
  width:100%;padding:12px 14px;
  border:2px solid #f0c56a;border-radius:16px;
  background:linear-gradient(#fff8e6,#ffe7b8);
  box-shadow:0 4px 0 #e0a24a;
  display:grid;gap:2px;
}
.notice b{color:#c43a28}
.notice span,.login-note{font-size:12px;color:var(--muted)}
.landing-actions{display:grid;gap:10px;width:100%;margin-top:auto;padding-top:36px}
.site-back,.open-standalone{
  display:inline-block;margin-top:12px;color:#8a4a12;font-size:13px;font-weight:700;text-decoration:none;
  border-bottom:1px dashed rgba(138,74,18,.45);
}
.login-note{width:100%;text-align:center;margin:12px 0 0}

.primary,.ghost{
  min-height:52px;border-radius:16px;font-weight:800;letter-spacing:.5px;
}
.primary{
  background:linear-gradient(#ffe98a,#f0b43a);
  color:#5a2e08;
  border:2px solid #fff3c4;
  box-shadow:0 4px 0 #c47a18, 0 8px 14px rgba(140,60,20,.18);
}
.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #c47a18}
.primary:disabled,.tiny:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ghost{
  border:2px solid #f0c56a;
  background:linear-gradient(#fffdf6,#ffe9c2);
  color:var(--ink);
  box-shadow:0 3px 0 #e0a84a;
}

.game{display:flex;flex-direction:column;overflow:hidden;background:transparent}
.view{flex:1;min-height:0;overflow:auto;padding-bottom:8px}
.tabbar{flex-shrink:0}

.topbar{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px 8px;
  background:linear-gradient(#fff6dc,#ffdba8);
  border-bottom:3px solid #e8b050;
  box-shadow:0 4px 0 rgba(200,120,30,.18);
  flex-shrink:0;
}
.avatar{
  width:44px;height:44px;flex:0 0 44px;padding:0;
  border-radius:50%;overflow:hidden;
  background:#fff3c8;border:3px solid #fff;
  box-shadow:0 3px 0 #e09a3a;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.frame-bronze{border-color:#c47a32;box-shadow:0 0 0 2px #8a4a12,0 3px 0 #e09a3a}
.avatar.frame-silver{border-color:#d8e4f0;box-shadow:0 0 0 2px #6a7a8a,0 3px 0 #e09a3a}
.avatar.frame-gold{border-color:#ffe08a;box-shadow:0 0 0 2px #c48a12,0 3px 0 #e09a3a}
.avatar.frame-jade{border-color:#8fe0c8;box-shadow:0 0 0 2px #1a7a5a,0 3px 0 #e09a3a}
.avatar.frame-crimson{border-color:#ff8a7a;box-shadow:0 0 0 2px #a32222,0 3px 0 #e09a3a}
.avatar.frame-night{border-color:#6a5ab0;box-shadow:0 0 0 2px #2a1a5a,0 3px 0 #e09a3a}
.topbar .who{min-width:0;flex:1 1 72px;overflow:hidden}
.topbar b,.topbar small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar b{display:flex;align-items:center;gap:4px;min-width:0;font-size:15px;color:#3b1f10}
.topbar small{display:block;font-size:11px;color:var(--muted)}
.topbar #nickname{min-width:0;overflow:hidden;text-overflow:ellipsis}
.title-tag{
  flex:0 0 auto;display:inline-block;padding:1px 6px;border-radius:99px;
  background:linear-gradient(#fff4d0,#f0c56a);color:#8a4a12;font-size:10px;font-style:normal;font-weight:800;
  line-height:1.4;
}
.settings{margin-left:0;flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:linear-gradient(#fff8e6,#ffdca8);border:2px solid #f0c56a;position:relative}
.settings img{width:22px;height:22px;object-fit:contain;display:block;margin:auto}
.mail-badge{
  position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:#e24b3c;color:#fff;font-size:10px;font-style:normal;font-weight:800;
  line-height:16px;text-align:center;box-shadow:0 1px 0 #9a2018;
}
.fs-btn{font-size:18px;line-height:1;color:#8a4a12;font-weight:800}
html.fs-active .topbar,html.immersive .topbar,html.standalone-mobile .topbar{
  padding-top:max(8px, env(safe-area-inset-top, 0px));
}
html.immersive,html.immersive body,html.immersive .app,
html:fullscreen,html:fullscreen body,html:fullscreen .app,
html:-webkit-full-screen,html:-webkit-full-screen body{
  width:100%;height:100%;max-width:none;max-height:none;
}

.mini-res{margin-left:auto;display:flex;gap:4px;flex:0 1 auto;max-width:58%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mini-res::-webkit-scrollbar{display:none}
.mini-res span{
  display:inline-flex;align-items:center;gap:3px;
  min-height:28px;padding:2px 7px 2px 3px;
  background:linear-gradient(#fffdf4,#ffe7b4);
  border:2px solid #f0c56a;border-radius:999px;
  box-shadow:0 2px 0 #e09a3a;
  color:#8a4a12;font-size:11px;font-weight:800;white-space:nowrap;
}
.mini-res img{width:18px;height:18px;object-fit:contain}

.hero-card{
  margin:14px 14px 10px;
  padding:14px 16px;
  display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;
  border:3px solid #fff2c4;border-radius:22px;
  background:linear-gradient(135deg,#ff8a62,#e24b3c 55%,#c43a32);
  box-shadow:0 6px 0 #a32a22, 0 12px 18px rgba(140,30,20,.18);
  color:#fff;
}
.hero-card img.hero-ico{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18))}
.hero-card p{margin:0;color:#ffe7a8;letter-spacing:2px;font-size:11px;font-weight:700}
.hero-card h2{font-size:26px;margin:2px 0 4px;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.hero-card span{color:#ffe8d2;font-size:13px;display:block}
.hero-card .hall-rank-btn{
  display:inline-flex;align-items:center;margin-top:8px;
  background:rgba(255,248,220,.2);color:#fff;border:2px solid #ffe7a8;
  border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800;
}
.hero-card .hall-rank-btn:active{transform:translateY(1px)}
.office-board{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.office-board li{
  display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;
  padding:8px 10px;border-radius:14px;
  background:linear-gradient(#fffdf6,#ffe7b4);border:2px solid #f0c56a;
}
.office-board li.me{border-color:#e24b3c;background:linear-gradient(#fff3e0,#ffd0a8)}
.office-board li.marshal{box-shadow:inset 0 0 0 1px #c43a28}
.office-board .no{font-size:15px;color:#c43a28}
.office-board .who-line{min-width:0}
.office-board .who-line b,.office-board .who-line small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.office-board .who-line small{font-size:11px;color:var(--muted);margin-top:2px}
.office-board em{font-style:normal;font-weight:800;color:#8a4a12;font-size:13px;text-align:right}

.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px}
.quick-actions button{
  padding:8px 2px 10px;
  background:linear-gradient(#fffdf6,#ffe7b4);
  color:var(--ink);
  border:3px solid #f3c45a;
  border-radius:18px;
  box-shadow:0 4px 0 #d4922a;
  font-size:12px;font-weight:800;
}
.quick-actions button:active{transform:translateY(2px);box-shadow:0 2px 0 #d4922a}
.nav-ico{width:28px;height:28px;object-fit:contain;display:block;margin:0 auto 4px;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12))}
.quick-actions .nav-ico{width:56px;height:56px;margin-bottom:4px}

.panel{
  margin:12px 14px;
  padding:14px;
  border:3px solid #f3c45a;border-radius:20px;
  background:linear-gradient(#fffaf0,#ffe9c0);
  box-shadow:0 5px 0 #e09a3a;
}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:2px dashed rgba(212,138,36,.35)}
.panel h3{margin:0;font-size:16px;color:#3b1f10}
.panel-head span{font-size:12px;color:#c43a28;font-weight:800;background:#fff3c8;border:2px solid #f0c56a;border-radius:999px;padding:2px 8px}
.panel-head h3{display:flex;align-items:center;gap:8px}
.panel-head h3 img,.modal h2 img{width:28px;height:28px;object-fit:contain}

.resource-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:12px}
.resource{
  padding:10px 4px 8px;text-align:center;
  background:linear-gradient(#fff,#ffe7b0);
  border:2px solid #f0c56a;border-radius:16px;
  box-shadow:inset 0 2px 0 #fff, 0 3px 0 #e0a84a;
}
.resource img{width:44px;height:44px;object-fit:contain;display:block;margin:0 auto 4px;pointer-events:none}
.resource b{display:block;color:#c43a28;font-size:16px}
.resource small{display:block;color:var(--muted);font-size:11px}
.panel-actions{padding-top:12px}
.panel-actions .primary,.campaign-actions .primary{width:100%}
.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-actions .primary,.form-actions .ghost{width:100%}

.warrior-list{display:flex;gap:10px;padding-top:12px;overflow:auto}
.warrior{
  position:relative;
  flex:0 0 104px;min-height:148px;padding:6px 6px 10px;
  display:flex;flex-direction:column;
  border-radius:16px;text-align:center;
  background:linear-gradient(#fffdf8,#ffe7b8);
  border:3px solid #f3c45a;
  box-shadow:0 4px 0 #d4922a;
  color:var(--ink);
}
.warrior b{display:block;font-size:14px;margin-top:2px}
.warrior small{color:#c43a28;font-size:11px;font-weight:800}
.dev-note{padding:4px 22px 18px;color:var(--muted);font-size:12px;text-align:center}

.tiny{
  min-height:34px;padding:0 12px;border-radius:12px;font-size:12px;font-weight:800;
  background:linear-gradient(#fff8e6,#ffd27a);color:#8a4a12;border:2px solid #f0c56a;
}
.hint{margin:10px 0 0;color:var(--muted);font-size:12px}
.chips{display:flex;gap:6px;padding-top:12px;flex-wrap:wrap}
.chips button{
  min-height:34px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:700;
  background:#fff6e0;color:var(--muted);border:2px solid #f0c56a;
}
.chips button.on{color:#fff;background:linear-gradient(#ff8a62,#e24b3c);border-color:#fff2c4;box-shadow:0 2px 0 #a32a22}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:12px}
.wcard{
  position:relative;
  min-height:148px;padding:8px 6px;border-radius:16px;text-align:center;
  border:3px solid #f3c45a;color:var(--ink);
  background:linear-gradient(#fffdf8,#ffe7b8);
  box-shadow:0 4px 0 #d4922a;
}
.wcard.locked{opacity:.55;filter:grayscale(.2) brightness(.96)}
.wcard .mark{width:42px;height:54px;margin:0 auto 6px;display:grid;place-items:center;border-radius:10px;font-weight:800;font-size:20px;color:#fff}
.wcard b{display:block;font-size:14px}
.wcard small{display:block;color:#c43a28;font-size:11px;margin-top:4px;font-weight:700}
.wcard.tired,.warrior.tired{border-color:#c43a28}
.rarity-tag{
  position:absolute;top:6px;left:6px;z-index:4;
  padding:1px 6px;border-radius:999px;border:1px solid #fff;
  font-size:10px;font-style:normal;font-weight:800;line-height:1.35;
  pointer-events:none;letter-spacing:.5px;
}
.rarity-tag.epic{background:linear-gradient(#c9a6ff,#7b4bb8);color:#fff;box-shadow:0 1px 0 #4a2278}
.rarity-tag.rare{background:linear-gradient(#8ec8ff,#2b6cb0);color:#fff;box-shadow:0 1px 0 #1a4a80}
.rarity-tag.inline{position:static;display:inline-flex;align-items:center;margin:0;pointer-events:auto}
.wcard.rarity-epic,.warrior.rarity-epic,.fslot.rarity-epic,.pick-w.rarity-epic,.draw-card.rarity-epic{
  border-color:#9b6dff;
  background:linear-gradient(#fbf4ff,#ead6ff);
  box-shadow:0 4px 0 #6b3aa8;
}
.wcard.rarity-rare,.warrior.rarity-rare,.fslot.rarity-rare,.pick-w.rarity-rare,.draw-card.rarity-rare{
  border-color:#5aa0e8;
  background:linear-gradient(#f4f9ff,#d4e8ff);
  box-shadow:0 4px 0 #2b6cb0;
}
.wcard.rarity-epic > b,.warrior.rarity-epic > b,.fslot.rarity-epic b,.pick-w.rarity-epic b,.draw-card.rarity-epic b{color:#5a2a9a}
.wcard.rarity-rare > b,.warrior.rarity-rare > b,.fslot.rarity-rare b,.pick-w.rarity-rare b,.draw-card.rarity-rare b{color:#1f4f8a}
.wcard.rarity-epic .portrait,.warrior.rarity-epic .portrait,.fslot.rarity-epic .portrait,.pick-w.rarity-epic .portrait,.draw-card.rarity-epic .portrait{
  background:linear-gradient(#c9a8ff,#fff0d0);
}
.wcard.rarity-rare .portrait,.warrior.rarity-rare .portrait,.fslot.rarity-rare .portrait,.pick-w.rarity-rare .portrait,.draw-card.rarity-rare .portrait{
  background:linear-gradient(#8ec8f0,#fff1c8);
}
.wcard.tired.rarity-epic,.warrior.tired.rarity-epic,.fslot.tired.rarity-epic,.pick-w.tired.rarity-epic{border-color:#c43a28}
.gear-line{
  display:flex;flex-direction:column;gap:1px;
  margin-top:4px;width:100%;min-width:0;text-align:left;
}
.gear-line em{
  display:block;font-style:normal;font-size:10px;font-weight:800;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fat-wait{
  display:block;margin-top:3px;font-size:10px;line-height:1.3;
  color:#8a1c14;font-style:normal;font-weight:800;
}
.pick-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  max-height:52vh;overflow:auto;margin:8px 0 12px;padding:2px;
}
.pick-w{
  position:relative;
  min-height:132px;padding:6px 4px 8px;border-radius:14px;text-align:center;
  border:3px solid #f3c45a;color:var(--ink);
  background:linear-gradient(#fffdf8,#ffe7b8);box-shadow:0 3px 0 #d4922a;
}
.pick-w.on{border-color:#c43a28;box-shadow:0 3px 0 #8a1c14}
.pick-w.tired{border-color:#c43a28;background:linear-gradient(#fff4ea,#ffd4b8)}
.pick-w b{display:block;font-size:13px;margin-top:2px}
.pick-w small{display:block;color:#c43a28;font-size:10px;font-weight:800;line-height:1.3}
.wcard[data-faction="魏"] .mark{background:#3d6cad}
.wcard[data-faction="蜀"] .mark{background:#3f9a55}
.wcard[data-faction="吴"] .mark{background:#d25a42}
.wcard[data-faction="群"] .mark{background:#7a5aa8}

.formation{display:grid;gap:8px;padding-top:12px}
.form-row{display:grid;gap:8px}
.form-row.front{grid-template-columns:1fr 1fr;padding:0 12%}
.form-row.back{grid-template-columns:repeat(3,1fr)}
.fslot{
  position:relative;
  min-height:118px;padding:6px 4px;overflow:visible;
  border:2px dashed #e0a84a;border-radius:16px;
  background:rgba(255,255,255,.35);
  display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted);font-size:12px;
}
.fslot b{color:var(--ink);display:block;font-size:14px}
.fslot small{display:block;font-size:10px;line-height:1.25;color:#c43a28;font-weight:800}
.fslot.on{border-style:solid;border-color:#f3c45a;background:linear-gradient(#fffdf8,#ffe7b8);box-shadow:0 3px 0 #d4922a}
.fslot.on.rarity-epic{
  border-color:#9b6dff;
  background:linear-gradient(#fbf4ff,#ead6ff);
  box-shadow:0 4px 0 #6b3aa8;
}
.fslot.on.rarity-rare{
  border-color:#5aa0e8;
  background:linear-gradient(#f4f9ff,#d4e8ff);
  box-shadow:0 4px 0 #2b6cb0;
}
.fslot.tired{border-color:#c43a28;background:linear-gradient(#fff4ea,#ffd4b8)}
.fslot .gear-line em,.warrior .gear-line em,.pick-w .gear-line em{font-size:9px}
.fslot .rarity-tag,.warrior .rarity-tag,.pick-w .rarity-tag,.draw-card .rarity-tag{top:4px;left:4px;font-size:9px;padding:0 5px}

.beast-card{
  margin:14px;padding:10px 16px 16px;display:grid;gap:6px;
  border-radius:22px;border:3px solid #fff2c4;
  background:linear-gradient(145deg,#ff8a62,#c43a32);
  box-shadow:0 6px 0 #a32a22;
  color:#fff;text-align:center;
}
.beast-card h2{margin:4px 0 10px}
.beast-card .beast-art{
  width:100%;height:158px;object-fit:contain;justify-self:center;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.22));
}
.boss-hero{margin:-4px -4px 8px;text-align:center}
.boss-hero .boss-art{
  width:100%;height:168px;object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(180,40,10,.35));
}
.hpbar{height:12px;border-radius:99px;background:rgba(0,0,0,.28);overflow:hidden;border:2px solid rgba(255,255,255,.35)}
.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#ffe98a,#f0b43a)}
.beast-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:10px;color:#ffe8d2;font-size:12px}
.beast-meta span{display:inline-flex;align-items:center;gap:4px}
.beast-meta img{width:18px;height:18px}
.boss-board{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.18);color:#ffe8d2}
.boss-board h4,.boss-rewards h4{margin:0 0 8px;font-size:13px;color:#ffe98a}
.boss-board.last{background:rgba(80,30,10,.28)}
.boss-rank{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.boss-rank li{display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;gap:0 8px;align-items:center;font-size:12px}
.boss-rank b{grid-row:1 / span 2;width:24px;height:24px;border-radius:99px;display:grid;place-items:center;background:#c43a28;color:#fff;font-size:11px}
.boss-rank span{font-weight:800;color:#fff6e8}
.boss-rank em{font-style:normal;color:#ffe98a}
.boss-rank small{grid-column:2 / span 2;color:#ffd0b8;font-size:11px}
.boss-rewards{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.18);color:#ffe8d2;display:grid;gap:6px}
.boss-rewards div{display:flex;justify-content:space-between;gap:8px;font-size:12px;align-items:flex-start}
.boss-rewards b{flex:0 0 auto;color:#ffe98a}
.boss-rewards span{text-align:right}
.floor-mod{
  margin:8px 0 0;padding:8px 10px;border-radius:12px;
  background:rgba(0,0,0,.22);color:#ffe8d2;font-size:12px;line-height:1.45;
}
.floor-mod b{display:block;color:#ffe98a;margin-bottom:2px}
.floor-mod.warn{color:#ffd0b8;background:rgba(160,40,20,.28)}
.fatigue-tag{
  position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:99px;
  background:#c43a28;color:#fff;font-size:10px;font-style:normal;line-height:1.4;
}
.campaign-actions{padding:0 14px 8px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.campaign-actions .ghost{width:auto;min-width:118px;position:relative}
#milestoneBtn{position:relative}
.ms-dot{
  position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:#c43a28;color:#fff;font-size:10px;font-style:normal;
  display:grid;place-items:center;box-shadow:0 2px 0 #8a1c14
}
.ms-list{display:grid;gap:8px;margin:10px 0 14px;max-height:48vh;overflow:auto}
.ms-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:14px;background:#fff6e8;border:2px solid transparent}
.ms-row.ready{border-color:#f0b43a;background:#fff4d4}
.ms-row.claimed{opacity:.62}
.ms-row div{min-width:0}
.ms-row b,.ms-row small{display:block}
.ms-row small{color:#8a5a32;font-size:12px;margin-top:3px}
.ms-row em{font-size:12px;color:#8a5a32;flex-shrink:0;font-style:normal}
.energy-bar{margin-top:10px}
.energy-bar .energy-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.energy-bar .energy-head strong{font-variant-numeric:tabular-nums}
.energy-bar .track{height:10px;border-radius:99px;background:rgba(0,0,0,.28);overflow:hidden;border:2px solid rgba(255,255,255,.28);margin-top:4px}
.energy-bar .track i{display:block;height:100%;background:linear-gradient(90deg,#7dffb3,#3ecf7a)}
.energy-bar small{display:block;margin-top:4px;opacity:.88;font-size:11px}
.panel .energy-bar .track{border-color:rgba(90,60,20,.18);background:rgba(0,0,0,.08)}
.idle-pending{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.idle-pending span{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;min-width:0;
  background:#fff6e8;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:700
}
.idle-pending img{width:18px;height:18px;object-fit:contain;flex:none}
.camp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.camp-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
  min-height:92px;padding:6px 4px;border:2px dashed #e8b050;border-radius:14px;
  background:#fffdf8;color:#8a5a32;font:inherit;line-height:1.2
}
.camp-slot.on{border-style:solid;background:#fff4d4}
.camp-slot.empty b{font-size:22px;line-height:1}
.camp-slot small{font-size:10px}
.camp-slot b{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-slot .portrait,.camp-portrait{height:56px;margin:0 0 2px;border-radius:10px;width:100%}
.camp-log-head{margin-top:8px}
.camp-log{
  display:grid;gap:6px;margin:6px 0 4px;max-height:min(38vh,280px);
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-right:2px;scrollbar-width:thin;scrollbar-color:#c9a24a transparent;
}
.camp-ev{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:#fff6e8;font-size:12px}
.camp-ev.wait{outline:2px solid #f0b43a;background:#fff4d4}
.camp-ev div{display:flex;flex-direction:column;gap:2px;min-width:0}
.camp-ev small{color:#8a5a32}
.camp-ev em{font-size:11px;color:#8a5a32;flex-shrink:0}
.camp-choices{display:grid;gap:8px;margin:8px 0 14px}
.play-hints{margin:8px 0 0;padding-left:18px;font-size:12px;line-height:1.6;color:#5a4630}
.play-hints li{margin:2px 0}
.equip-slots{display:grid;gap:6px;margin:10px 0;font-size:13px}
.equip-slot{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff6e8;border-radius:12px;padding:6px 10px}
.equip-row span{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.equip-row.on{outline:2px solid #f0b43a}
.craft-box{margin:12px 0;padding:10px;background:#fff8ee;border-radius:14px}
.forge-level-pick{display:grid;gap:6px;margin:8px 14px;font-size:12px;font-weight:800;color:#8a5a32}
.forge-level-pick select{
  width:100%;padding:10px;border-radius:12px;border:2px solid #f0c56a;background:#fffdf8;color:#3b1f10;font:inherit;
}
.craft-mats,.craft-charms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.craft-charms{grid-template-columns:repeat(2,1fr)}
.craft-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:76px;padding:8px 4px;border:2px dashed #e8b050;border-radius:14px;
  background:#fffdf8;color:#8a5a32;font:inherit;line-height:1.2
}
.craft-add b{font-size:18px}
.craft-add small,.craft-add em{font-size:10px;color:#8a5a32}
.craft-add.on{border-style:solid;background:#fff4d4}
.craft-add.charm{min-height:88px}
.craft-add.charm img{width:28px;height:28px;object-fit:contain}
.picker-list{display:grid;gap:8px;max-height:46vh;overflow:auto;margin:8px 0 14px}
.picker-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;padding:10px 12px;border-radius:12px;background:#fff6e8;color:#3b1f10;font:inherit
}
.picker-item small{color:#8a5a32;font-size:12px}
.hero-equip-board{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 76px;
  grid-template-rows:78px minmax(140px,1fr) auto;
  gap:6px;margin:0 0 10px
}
.hero-equip-art{grid-column:2;grid-row:1 / 3;min-height:200px;border-radius:16px;overflow:hidden}
.hero-equip-art .modal-portrait{height:100%;margin:0}
.eq-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:5px 4px;border:2px dashed #e8b050;border-radius:12px;background:#fffdf8;
  color:#8a5a32;font:inherit;line-height:1.2;min-height:0
}
.eq-cell.tl{grid-column:1;grid-row:1}
.eq-cell.tr{grid-column:3;grid-row:1}
.eq-cell.ml{grid-column:1;grid-row:2}
.eq-cell.mr{grid-column:3;grid-row:2}
.eq-cell.bc{grid-column:2;grid-row:3;min-height:76px;padding:8px 10px;justify-content:flex-start}
.eq-cell small,.eq-cell b,.eq-cell em,.eq-cell-actions{flex-shrink:0}
.eq-cell small{font-size:9px;opacity:.85}
.eq-cell b{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-cell.bc b{white-space:normal;overflow:visible;text-overflow:unset;line-height:1.25;text-align:center}
.eq-cell.empty b{font-size:20px;line-height:1}
.eq-cell.filled{border-style:solid;background:#fff4d4}
.eq-cell-actions{display:flex;gap:4px;margin-top:4px}
.eq-cell-actions .tiny{padding:3px 8px;font-size:11px}
.modal.hero-sheet{width:min(100%,400px);max-height:88vh;overflow:auto;padding:14px}
.charm-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;font-size:12px}
.charm-row label{display:inline-flex;align-items:center;gap:4px}
.charm-row img{width:22px;height:22px;object-fit:contain}
.recipe-box{margin-top:12px;font-size:12px}
.recipe-line{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px dashed rgba(90,60,20,.15)}
.equip-warriors{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}

.tabbar{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  padding:8px 4px calc(10px + env(safe-area-inset-bottom));
  border-top:3px solid #e8b050;
  background:linear-gradient(#fff4d4,#f0c888);
  box-shadow:0 -6px 16px rgba(140,60,20,.12);
}
.tabbar button{background:transparent;color:#8a5a32;font-size:10px;font-weight:700;padding:4px 0}
.tabbar button.on{color:#c43a28}
.tabbar button.on .nav-ico{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 3px 0 rgba(196,58,40,.25))}
.tabbar .nav-ico{width:40px;height:40px;margin-bottom:2px}
.tabbar i{display:none}

.has-ico,.tiny.has-ico{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.has-ico img,.tiny.has-ico img{width:32px;height:32px;object-fit:contain;pointer-events:none}
.tiny.has-ico img{width:24px;height:24px}

.bag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-top:14px}
.bag-item{
  min-height:108px;padding:12px;
  border:3px solid #f3c45a;border-radius:16px;
  background:linear-gradient(#fffdf8,#ffe7b8);
  box-shadow:0 4px 0 #d4922a;
}
.bag-item img{width:52px;height:52px;object-fit:contain;display:block;margin-bottom:6px;pointer-events:none}
.bag-item b,.bag-item strong,.bag-item small{display:block}
.bag-item strong{color:#c43a28;font-size:24px;margin:4px 0}
.bag-item small{color:var(--muted);font-size:11px}

.mail-alert{cursor:pointer}
.mail-alert .panel-head h3{color:#c43a28}
.guide-panel .panel-head{cursor:pointer}
.guide-steps{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.guide-steps li{
  display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;
  padding:10px 12px;border-radius:14px;border:2px solid #f0c56a;
  background:linear-gradient(#fffdf8,#ffe9c4);
}
.guide-steps li b{grid-column:1;font-size:14px}
.guide-steps li small{grid-column:1;color:var(--muted);font-size:12px;line-height:1.45}
.guide-steps li .tiny{grid-column:2;grid-row:1 / span 2}
.guide-steps em{color:#c43a28;font-style:normal;font-weight:800}
.guide-panel.min .guide-steps{display:none}
.guide-panel.min .panel-head span::before{content:"已收起 · "}
.mail-tabs{display:flex;gap:8px;padding:4px 0 0}
.mail-row{width:100%;text-align:left;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:2px dashed rgba(212,138,36,.28);background:transparent}
.mail-row.unread b{color:#c43a28}
.mail-row small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.mail-row .mail-meta{flex:1;min-width:0}
.mail-dot{flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:#e24b3c}
.mail-body{white-space:pre-wrap;word-break:break-word;margin:10px 0;line-height:1.55}
#view-mail input,#view-mail textarea{
  width:100%;margin:6px 0;padding:10px 12px;border-radius:12px;border:2px solid #f0c56a;
  background:#fffdf8;font:inherit;color:inherit;resize:vertical;
}

.system-content{padding-top:12px}
.empty-system{margin-top:14px;padding:26px 12px;text-align:center;border:2px dashed #e0a84a;border-radius:16px;color:var(--muted);background:rgba(255,255,255,.35)}
.task-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:2px dashed rgba(212,138,36,.28)}
.task-row b,.task-row small{display:block}
.task-row small{color:var(--muted);font-size:11px;margin-top:3px}
.pvp-log .pvp-result{font-style:normal;font-size:12px;font-weight:800;flex:0 0 auto}
.pvp-log .pvp-result.win{color:#1f8a5a}
.pvp-log .pvp-result.lose{color:#c43a28}
.claimed{color:#2db89a;font-size:12px;font-weight:800}
.task-progress{color:#c43a28;font-size:12px;font-weight:800}
.forge-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.forge-actions .tiny{display:inline-flex;align-items:center;gap:6px}
.forge-actions img{width:24px;height:24px;object-fit:contain}
.workshop-hero{
  margin:0 0 10px;padding:14px 16px;
  display:grid;gap:8px;
  border:3px solid #fff2c4;border-radius:18px;
  background:linear-gradient(135deg,#c56a2e,#d48a24 55%,#f4c45a);
  color:#fff;box-shadow:0 5px 0 #8a3a12;
}
.workshop-hero p{margin:0;letter-spacing:1px;font-size:11px;font-weight:700;color:#ffe7a8}
.workshop-hero h2{margin:2px 0 4px;font-size:22px;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.workshop-hero span{font-size:13px;color:#fff3d2}
.workshop-meta{display:grid;gap:2px}
.workshop-meta small{color:#fff6dc;font-size:11px}
.forge-slots{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}
.forge-slot{
  padding:12px;border-radius:16px;border:3px solid #f0c56a;
  background:linear-gradient(#fffdf8,#ffe7b8);box-shadow:0 3px 0 #d4922a;
}
.forge-slot small{display:block;color:#8a5a32;font-size:11px;font-weight:800}
.forge-slot b{display:block;margin:4px 0;color:#3b1f10}
.forge-slot p{margin:4px 0 0;color:var(--muted);font-size:12px}
.forge-slot.empty{opacity:.78;border-style:dashed}
.forge-slot.busy{background:linear-gradient(#fff8e6,#ffd27a)}
.forge-slot.ready{border-color:#e24b3c;background:linear-gradient(#fff6e6,#ffd0c4)}
.forge-bar{height:8px;margin:8px 0 6px;border-radius:99px;background:rgba(140,60,20,.12);overflow:hidden}
.forge-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f4c45a,#e24b3c);border-radius:99px}
.q-基础{color:#8a5a32}
.q-传说{color:#2b6cb0}
.q-史诗{color:#7b4bb8}
.q-神话{color:#c43a28}
.announce{margin:8px 0 0;padding:8px 0;border-bottom:2px dashed rgba(212,138,36,.25)}
.announce b,.announce small{display:block}
.announce small{color:var(--muted);margin-top:4px}
.gift-row{display:flex;gap:8px;align-items:center;margin:12px 0}
.gift-row input{flex:1;padding:10px;border-radius:12px;border:2px solid #f0c56a;background:#fffdf8;font:inherit}
h4{margin:14px 0 6px;font-size:14px;color:#3b1f10}

.modal-mask{position:absolute;inset:0;background:rgba(40,18,8,.55);z-index:10;display:grid;place-items:center;padding:18px}
.modal{
  width:min(100%,380px);padding:20px;
  border:3px solid #f3c45a;border-radius:22px;
  background:linear-gradient(#fffaf0,#ffe7b8);
  box-shadow:0 8px 0 #d4922a, 0 20px 40px rgba(80,30,10,.28);
}
.modal.wide{width:min(100%,420px);max-height:82vh;overflow:auto}
.modal h2{margin:0 0 8px;font-size:22px;display:flex;align-items:center;gap:8px;color:#3b1f10}
.modal p{color:var(--muted);margin:0 0 16px}
.modal .warn{color:#c43a28}
.modal input{
  width:100%;margin:5px 0 14px;padding:13px;border-radius:12px;
  border:2px solid #f0c56a;background:#fffdf8;color:var(--ink);font:inherit;
}
.modal-actions{display:grid;gap:9px}
.modal .close{background:transparent;color:var(--muted);padding:8px}
.draw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:8px 0 16px}
.draw-card{
  position:relative;
  padding:10px 8px;border-radius:16px;text-align:center;
  background:linear-gradient(#fff,#ffe7b0);border:3px solid #f3c45a;
  animation:drawPop .34s cubic-bezier(.2,1.15,.32,1) both;
}
.draw-card:nth-child(1){animation-delay:.02s}
.draw-card:nth-child(2){animation-delay:.08s}
.draw-card:nth-child(3){animation-delay:.14s}
.draw-card:nth-child(4){animation-delay:.2s}
.draw-card:nth-child(5){animation-delay:.26s}
.draw-card.dup{opacity:.8;border-style:dashed}
@keyframes drawPop{
  from{opacity:0;transform:translateY(12px) scale(.92)}
  to{opacity:1;transform:none}
}
.battle-log{max-height:240px;overflow:auto;background:#fff8e8;border:2px solid #f0c56a;border-radius:12px;padding:10px;font-size:12px;color:#5a3a22;line-height:1.55;white-space:pre-wrap}
.modal.battle-stage{
  width:min(100%,420px);max-height:90vh;overflow:auto;padding:12px;
  background:linear-gradient(#1c3a4a 0 42%, #fff6e0 42% 100%);
  border-color:#f3c45a
}
.modal.battle-stage h2{color:#fff8e0;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.modal.battle-stage .bf-end h2{color:#3b1f10;text-shadow:none}
.bf-stage{position:relative}
.bf-top{display:grid;place-items:center;min-height:150px;padding:6px 8px 10px}
.bfight{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:72px}
.bfight.enemy b{color:#fff8e0;font-size:14px}
.bfight.ally b{font-size:11px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfight .hpbar{width:76px;height:8px}
.bfight.enemy .hpbar{width:120px;height:10px;border-color:rgba(255,255,255,.45)}
.bfight .hpnum{font-size:10px;color:#ffe8d2}
.bfight.ally .hpnum{color:#8a5a32}
.bfight.dead{filter:grayscale(.8) brightness(.75);opacity:.7}
.bf-boss-art{width:188px;height:148px;display:grid;place-items:center;filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))}
.bf-boss-ico,.bf-boss-sprite{width:188px;height:148px;object-fit:contain}
.bf-portrait{height:72px;width:72px;margin:0;border-radius:12px}
.bfight.enemy .bf-portrait{height:110px;width:110px}
.bf-allies{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 4px 4px}
.bf-caption{
  min-height:40px;margin:0 0 8px;padding:8px 10px;border-radius:12px;
  background:rgba(255,248,232,.92);color:#5a3a22;font-size:13px;text-align:center
}
.bf-controls{display:flex;gap:8px;justify-content:center;margin-top:8px}
.bf-end{margin-top:8px;padding:12px;border-radius:16px;background:linear-gradient(#fffdf8,#ffe7b8);text-align:center}
.bf-end[hidden]{display:none!important}
.bf-fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.bf-float{
  position:absolute;left:50%;top:18%;z-index:5;font-weight:800;font-style:normal;
  font-size:18px;color:#c43a28;text-shadow:0 2px 0 #fff6e0;pointer-events:none;
  animation:bf-float 0.85s ease-out forwards
}
.bf-float.crit{font-size:22px;color:#c43a28;animation-name:bf-crit}
.bf-float.miss{color:#2b6cb0;font-size:16px}
.bf-float.heal{color:#2db89a}
.bf-float.win{color:#f0b43a;font-size:20px}
.bfight.strike{animation:bf-lunge .32s ease}
.bfight.hurt{animation:bf-hurt .32s ease}
.bfight.heal-flash{animation:bf-heal .4s ease}
.scene-play{text-align:center;padding:12px 8px 4px}
.scene-art{height:96px;display:grid;place-items:center;animation:scene-pop .7s ease}
.scene-ico{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18))}
.scene-play.trap .scene-art{animation:bf-hurt .5s ease infinite}
.scene-play.treasure .scene-art{animation:scene-pop .8s ease}
.scene-caption{color:#5a3a22}
@keyframes bf-lunge{
  0%{transform:translate(0,0)}
  35%{transform:translate(10px,-8px) scale(1.06)}
  100%{transform:translate(0,0)}
}
@keyframes bf-hurt{
  0%,100%{transform:translate(0,0);filter:none}
  30%{transform:translate(7px,2px);filter:brightness(1.8) saturate(.4)}
}
@keyframes bf-heal{
  0%,100%{filter:none}
  40%{filter:brightness(1.3) saturate(1.4)}
}
@keyframes bf-float{
  0%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-38px) scale(1.15)}
}
@keyframes bf-crit{
  0%{opacity:1;transform:translate(-50%,0) scale(.75)}
  35%{transform:translate(-50%,-8px) scale(1.35)}
  100%{opacity:0;transform:translate(-50%,-42px) scale(1.05)}
}
@keyframes scene-pop{
  0%{transform:scale(.4);opacity:.2}
  55%{transform:scale(1.12)}
  100%{transform:scale(1);opacity:1}
}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.stat-grid div{background:#fff;border:2px solid #f0c56a;border-radius:12px;padding:8px}
.stat-grid b{display:block;color:#c43a28}
.grow-compare{
  margin:10px 0 12px;padding:8px;
  border:2px solid #f0c56a;border-radius:16px;
  background:linear-gradient(#fffdf8,#ffe9c4);
}
.grow-head,.grow-row{
  display:grid;grid-template-columns:52px 1fr 1fr;gap:6px;align-items:center;
}
.grow-head{padding:4px 4px 8px;border-bottom:2px dashed rgba(212,138,36,.35);margin-bottom:4px}
.grow-head b{font-size:12px;color:#8a4a12;text-align:center}
.grow-row{padding:5px 4px;border-bottom:1px dashed rgba(212,138,36,.22)}
.grow-row:last-child{border-bottom:0}
.grow-row span{font-size:12px;color:var(--muted);font-weight:700}
.grow-row b{font-size:14px;text-align:center}
.grow-row b:last-child{color:#c43a28}
.delta{display:inline-block;margin-left:4px;font-size:11px;font-style:normal;font-weight:800}
.delta.up{color:#2db89a}
.delta.down{color:#c43a28}
.delta.same{color:#a08060;font-weight:700}

.toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 40px);
  padding:10px 14px;border-radius:14px;
  background:linear-gradient(#ffe98a,#f0b43a);color:#5a2e08;
  border:2px solid #fff3c4;box-shadow:0 4px 0 #c47a18;
  z-index:20;font-size:13px;font-weight:700;
}

.portrait{position:relative;width:100%;height:96px;margin:0 auto 6px;overflow:hidden;pointer-events:none;border-radius:14px;background:linear-gradient(#9ad7ea,#fff1c8)}
.portrait .mark{position:absolute;inset:0;margin:0;width:100%;height:100%;display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;z-index:0;border-radius:0}
.portrait-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12))}
.portrait:has(.portrait-img) .mark{opacity:0}
.portrait .spine-player{position:absolute!important;inset:0;z-index:2;width:100%;height:100%;background:transparent!important;opacity:0}
.portrait .spine-player-canvas{width:100%!important;height:100%!important;display:block}
.portrait.js-spine-live .spine-player{opacity:1;transition:opacity .28s ease}
.portrait.js-spine-live .mark,.portrait.js-spine-live .portrait-img{opacity:0;transition:opacity .28s ease}
.wcard .portrait{height:102px}
.warrior .portrait{height:88px;margin-bottom:4px}
.fslot .portrait{height:58px;margin-bottom:2px}
.pick-w .portrait{height:72px;margin-bottom:2px}
.modal-portrait{height:236px;margin:0 0 12px;background:linear-gradient(#8fd3ee,#fff1c8)}
.draw-card .portrait{height:112px}
.spine-player-controls,.spine-player-error{display:none!important}
.wcard.locked .portrait{filter:grayscale(.45) brightness(.9)}

@media(max-width:430px){
  .hero-card{margin:10px;padding:12px;grid-template-columns:56px 1fr;gap:10px}
  .hero-card img.hero-ico{width:56px;height:56px}
  .hero-card h2{font-size:22px}
  .quick-actions{gap:6px;padding:0 10px}
  .quick-actions .nav-ico{width:44px;height:44px}
  .panel{margin:10px;padding:12px}
  .resource-list{grid-template-columns:repeat(2,1fr)}
  .tabbar{padding:6px 2px calc(8px + env(safe-area-inset-bottom));gap:0}
  .tabbar .nav-ico{width:32px;height:32px}
  .tabbar button{font-size:9px}
}

.conquest-card{
  margin:14px 14px 10px;padding:14px 16px;display:grid;gap:6px;
  border-radius:22px;border:3px solid #fff2c4;
  background:linear-gradient(145deg,#3d6b4a,#1e4a32);
  box-shadow:0 6px 0 #143322;
  color:#fff;
}
.conquest-card h2{margin:2px 0 4px;font-size:20px}
.conquest-card p{margin:0;color:#d7f0dc;font-size:12px}
.conquest-card .cq-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;color:#ffe8d2;font-size:12px}
.conquest-card .cq-go{margin-top:8px}
.cq-root{padding:0 0 12px}
.cq-head{margin:14px 14px 8px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.cq-head h2{margin:0;font-size:20px}
.cq-head small{display:block;color:var(--muted);margin-top:4px}
.cq-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 14px 10px}
.cq-stat{padding:10px 12px;border-radius:14px;background:#fff6e8;border:2px solid #f0c56a}
.cq-stat b,.cq-stat small{display:block}
.cq-stat small{color:#8a5a32;font-size:11px;margin-top:2px}
.cq-troops{margin:0 14px 10px}
.cq-troops .track{height:12px;border-radius:99px;background:#efe0c4;overflow:hidden;border:2px solid #e8b050}
.cq-troops .track i{display:block;height:100%;background:linear-gradient(90deg,#7dffb3,#3ecf7a)}
.cq-map{display:grid;gap:10px;margin:0 14px}
.cq-hud{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 14px 8px}
.cq-hud .gold{font-weight:800;color:#8a4a10;background:#fff4d0;border:2px solid #e8b050;border-radius:99px;padding:4px 10px;font-size:13px}
.cq-chaps{display:flex;gap:6px;align-items:center}
.cq-chaps i{width:10px;height:10px;border-radius:50%;background:#d8c4a0;display:block;border:2px solid #b89050}
.cq-chaps i.on{background:#e8a030;box-shadow:0 0 8px #ffe08a}
.cq-chaps i.done{background:#3ecf7a;border-color:#2a9a58}
.cq-land{
  position:relative;margin:8px 12px 10px;height:520px;
  border-radius:18px;overflow:hidden;
  background:#c4a878 center/cover no-repeat;
  border:3px solid #c9a24a;box-shadow:0 6px 0 #5a3a18;
}
.cq-land::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(20,10,0,.38) 100%);
}
.cq-land svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.cq-land svg line{stroke:#f6e6b8;stroke-width:.7;stroke-dasharray:1.4 1.6;opacity:.75;filter:drop-shadow(0 0 1px #5a3a18)}
.cq-ding{
  position:absolute;left:8px;top:10px;z-index:4;width:64px;border:0;background:transparent;padding:0;color:#f6e6b8;
  font-size:11px;font-weight:800;text-shadow:0 1px 2px #000;
}
.cq-ding img{width:56px;height:56px;display:block;margin:0 auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.cq-spot{
  position:absolute;transform:translate(-50%,-90%);
  width:56px;border:0;background:transparent;padding:0;z-index:2;
  color:#f6e6b8;text-align:center;
}
.cq-spot .cq-mark{
  width:44px;height:44px;display:block;margin:0 auto -4px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  pointer-events:none;
}
.cq-spot.open .cq-mark{animation:cqPulse 1.6s ease-in-out infinite}
.cq-spot.boss .cq-mark{width:54px;height:54px}
.cq-spot.final .cq-mark{width:60px;height:60px}
@keyframes cqPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cq-flag{
  display:inline-block;writing-mode:vertical-rl;letter-spacing:2px;
  background:linear-gradient(#2c1a10,#140c08);color:#f6e6b8;
  border:1px solid #c9a24a;padding:7px 3px;font-size:11px;font-style:normal;font-weight:800;
  box-shadow:0 3px 0 rgba(0,0,0,.35);
}
.cq-spot small{display:block;margin-top:3px;font-size:9px;font-weight:800;color:#fff8dc;text-shadow:0 1px 2px #000}
.cq-spot.cleared{opacity:.55;filter:grayscale(.55)}
.cq-spot.cleared .cq-mark{animation:none}
.cq-spot.skipped{opacity:.38;filter:grayscale(1)}
.cq-spot.fork.open .cq-flag{box-shadow:0 0 0 2px #ffe08a, 0 3px 0 rgba(0,0,0,.35)}
.cq-pin{
  position:absolute;transform:translate(-50%,-50%);
  width:46px;min-height:46px;padding:4px 2px 6px;border-radius:16px;
  border:2px solid #fff2c4;background:linear-gradient(#fffdf4,#ffe7b4);
  color:#3b1f10;box-shadow:0 3px 0 rgba(0,0,0,.25);
  font-size:10px;font-weight:800;line-height:1.15;text-align:center;z-index:1;
}
.cq-map-bar{display:flex;gap:8px;align-items:center;margin:0 14px 8px;flex-wrap:wrap}
.cq-party{display:flex;gap:6px;overflow:auto;margin:0 14px 8px;padding-bottom:4px}
.cq-party-slot{flex:0 0 56px;text-align:center;font-size:10px;font-weight:800;color:#3b1f10}
.cq-party-slot .portrait{width:56px;height:72px;border-radius:10px}
.cq-party-slot b{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-party-slot.extra b{color:#1a6b3a}
.cq-party-slot.empty{flex:0 0 56px;height:72px;border:2px dashed #c8a060;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#8a5a32;background:#fff8e8}
.cq-draft{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 14px}
.cq-draft-card{position:relative;padding-bottom:8px}
.cq-draft-card .tiny{width:calc(100% - 16px);margin:6px 8px 0}
.cq-kind-tag{display:inline-block;padding:3px 8px;border-radius:99px;background:#fff4d0;border:1px solid #e8b050;font-size:12px;font-weight:800}
.cq-giveup{display:grid;align-content:center;min-height:140px;min-width:72px;background:rgba(40,24,12,.72);color:#f6e6b8;border:2px solid #c9a24a;border-radius:14px}
.cq-giveup b,.cq-giveup small{display:block}
.cq-inspect{text-align:center}
.cq-inspect .cq-mark{width:72px;height:72px}
.cq-node{
  display:grid;gap:4px;padding:14px 12px;border-radius:16px;text-align:left;
  border:3px solid #e8b050;background:linear-gradient(#fffdf4,#ffe7b4);
  color:#3b1f10;box-shadow:0 4px 0 #e09a3a;
}
.cq-node b{font-size:16px}
.cq-node small{color:#8a5a32}
.cq-node.elite{background:linear-gradient(#fff4ea,#ffd0a8)}
.cq-node.boss{background:linear-gradient(#ffd0c4,#f08a62);border-color:#c43a28;color:#5a1208}
.cq-node.recruit{background:linear-gradient(#e8f8ff,#c8e4ff)}
.cq-node.shop{background:linear-gradient(#fff8d8,#ffe08a)}
.cq-node.chest{background:linear-gradient(#f4e8ff,#e0c8ff)}
.cq-relics{display:flex;flex-wrap:wrap;gap:6px;margin:8px 14px}
.cq-relics span{padding:4px 8px;border-radius:99px;background:#fff4d0;border:1px solid #f0c56a;font-size:11px;font-weight:700}
.cq-draft button.on{outline:3px solid #3ecf7a}
.cq-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0;align-items:stretch}
.cq-picks button{text-align:left;padding:12px 10px;border-radius:14px;min-height:132px;background:linear-gradient(#fffaf0,#f3d9a0);border:2px solid #c9a24a;color:#3b1f10}
.cq-picks button b,.cq-picks button small{display:block}
.cq-pick-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.modal-mask.cq-sheet-mask{padding:0}
.modal.cq-sheet{
  width:100%;height:100%;max-width:none;max-height:none;overflow:hidden;padding:12px 10px 10px;
  display:flex;flex-direction:column;border-radius:0;
  background:linear-gradient(#f7ead0,#ead4a4);
}
.cq-market{display:grid;grid-template-columns:58px 1fr;gap:8px;min-height:0;flex:1;text-align:left;align-items:stretch}
.cq-market-side{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.cq-market-title{
  writing-mode:vertical-rl;letter-spacing:10px;font-size:26px;font-weight:900;line-height:1;
  color:#c48a22;text-shadow:0 1px 0 #fff6d8, 0 2px 0 #8a5a18;padding:6px 0 2px;
}
.cq-market-tabs{display:flex;flex-direction:column;gap:6px;width:100%}
.cq-market-tabs button{
  writing-mode:horizontal-tb;letter-spacing:0;padding:10px 2px;min-height:44px;
  border:2px solid #b8893a;background:linear-gradient(#efe0c4,#d8c090);color:#3b1f10;font-weight:800;font-size:13px;border-radius:8px;
}
.cq-market-tabs button.on{background:linear-gradient(#ffe98a,#f0b43a);border-color:#e0a020;box-shadow:inset 0 -3px 0 #c98a20}
.cq-market-main{min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px;flex:1}
.cq-market-head{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none}
.cq-market-head .gold{
  font-weight:800;color:#8a4a10;background:#fff4d0;border:2px solid #e8b050;border-radius:99px;
  padding:3px 10px 3px 8px;font-size:14px;
}
.cq-market-head .gold::before{content:"";display:inline-block;width:12px;height:12px;margin-right:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#d4922a 62%,#8a5a10);vertical-align:-1px}
.cq-mx{width:28px;height:28px;padding:0;border-radius:50%;font-size:20px;line-height:1;
  background:#6a2a12;color:#f6e6b8;font-weight:800}
.cq-market-note{margin:8px 0 0;color:#8a5a32;font-size:12px;text-align:center;flex:none}
.cq-market-cards{
  display:grid;grid-template-columns:repeat(auto-fill,140px);justify-content:center;align-content:start;
  gap:12px 10px;flex:1;min-height:0;overflow:auto;padding:4px 2px 8px;
  scrollbar-width:thin;scrollbar-color:#c9a24a transparent;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.cq-market-cards::-webkit-scrollbar{width:6px;height:6px}
.cq-market-cards::-webkit-scrollbar-thumb{background:#c9a24a;border-radius:99px}
.cq-msku{
  width:140px;appearance:none;-webkit-appearance:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;color:#3b1f10;
}
.cq-mcard{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:140px;
  min-height:196px;padding:26px 8px 12px;text-align:center;
  background:linear-gradient(#fffdf6,#f4e2b8);border:2px solid #c9a24a;border-radius:14px;
  box-shadow:0 4px 0 #c4923a;
}
.cq-mkind{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(#7b4bb8,#5a2e90);color:#fff;padding:3px 12px;border-radius:0 0 8px 8px;
}
.cq-mcard b{font-size:17px;line-height:1.2}
.cq-mcard small{
  color:#6a4a28;font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;min-height:4.4em;flex:1;
}
.cq-mprice{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:76px;
  background:linear-gradient(#3b2416,#5a2a12);color:#f6e6b8;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:800;
}
.cq-mprice em{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a0,#d4922a 62%,#8a5a10);flex:none}
.cq-msku.poor .cq-mprice{background:linear-gradient(#6a5840,#4a3a28)}
.cq-msku.sold{opacity:.42;filter:grayscale(.35)}
.cq-mcard .cq-rec{
  position:absolute;left:-2px;top:12px;transform:rotate(-18deg);z-index:1;
  background:#c43a28;color:#fff;font-size:11px;font-style:normal;font-weight:800;padding:3px 10px;
}
.cq-micon{width:56px;height:56px;margin:6px auto 0;display:block;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.cq-mcard .portrait{width:68px;height:84px;margin:6px auto 0;border-radius:10px}
.cq-shop-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px dashed #e8c48a}
.cq-shop-row:last-child{border-bottom:0}
.cq-board li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:6px 0}
.cq-board .me{font-weight:800}