* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1030; color: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }
#app { position: fixed; inset: 0; max-width: 560px; margin: 0 auto; overflow: hidden; }
.screen { position: absolute; inset: 0; }
:root {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --content-top: calc(var(--safe-top) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --stroke: #1b1633;
  --yellow: #ffc933; --yellow2: #ff9f1a; --purple: #6f4fd8; --purple2: #4a33a8; --panel: #2b2748; --panel2: #36315a;
}
.stroke { text-shadow: 0 2px 0 var(--stroke), 2px 0 0 var(--stroke), -2px 0 0 var(--stroke), 0 -2px 0 var(--stroke), 1px 1px 0 var(--stroke), -1px -1px 0 var(--stroke), 1px -1px 0 var(--stroke), -1px 1px 0 var(--stroke); }

/* ---------- 按钮 ---------- */
.btn { position: relative; border: 3px solid var(--stroke); border-radius: 12px; padding: 8px 16px; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.25), 0 3px 0 var(--stroke); transition: transform .06s; letter-spacing: 1px; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 1px 0 var(--stroke); }
.btn:disabled { filter: grayscale(.9) brightness(.8); }
.btn-yellow { background: linear-gradient(#ffe066, var(--yellow) 45%, var(--yellow2)); color: #3b2300; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.btn-blue { background: linear-gradient(#6fd0ff, #2f9be6 55%, #1f74c2); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn-green { background: linear-gradient(#8ff08a, #3fc26a 55%, #22994c); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn-red { background: linear-gradient(#ff8a8a, #e84a5f 55%, #b8243c); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn-purple { background: linear-gradient(#a58bff, var(--purple) 55%, var(--purple2)); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn-gray { background: linear-gradient(#9aa0b5, #6c7189 55%, #4d5169); }
.btn-xl { font-size: 26px; padding: 12px 40px; border-radius: 16px; }
.btn-sm { font-size: 13px; padding: 5px 10px; border-radius: 9px; border-width: 2px; }
.dot-red::after { content: '!'; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: #ff3b4e; border: 2px solid #fff; color: #fff;
  font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; }

/* ---------- 启动页 ---------- */
.boot { background: linear-gradient(#3aa0ff, #7fd0ff 55%, #ffd89a); display: flex; flex-direction: column; align-items: center; }
.boot-sky { position: absolute; inset: 0; background:
  radial-gradient(circle at 20% 70%, rgba(255,255,255,.8) 0 40px, transparent 41px), radial-gradient(circle at 30% 72%, rgba(255,255,255,.8) 0 55px, transparent 56px),
  radial-gradient(circle at 80% 30%, rgba(255,255,255,.6) 0 35px, transparent 36px), radial-gradient(circle at 88% 32%, rgba(255,255,255,.6) 0 45px, transparent 46px); }
.boot-logo { position: relative; margin-top: calc(var(--content-top) + 60px); text-align: center; transform: rotate(-6deg); }
.boot-logo span { display: block; font-size: 64px; font-weight: 900; color: #ffd83a; letter-spacing: 4px;
  -webkit-text-stroke: 3px #1b1633; text-shadow: 0 6px 0 #1b1633, 0 10px 18px rgba(0,0,0,.35); font-style: italic; }
.boot-logo small { font-size: 16px; font-weight: 900; color: #fff; letter-spacing: 6px; text-shadow: 0 2px 0 #1b1633; }
#boot-plane { position: relative; width: 80%; max-width: 360px; margin-top: 10px; }
.boot-bottom { position: absolute; bottom: calc(var(--safe-bottom) + 16px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 20px; }
#boot-status { font-weight: 900; text-shadow: 0 2px 0 var(--stroke); }
.boot-bar { width: 70%; height: 12px; background: rgba(0,0,0,.35); border: 2px solid var(--stroke); border-radius: 8px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffe066, #ff9f1a); transition: width .2s; }
.boot-agree { font-size: 13px; font-weight: 700; text-shadow: 0 1px 0 var(--stroke); display: flex; align-items: center; gap: 6px; }
.boot-agree input { width: 18px; height: 18px; accent-color: #3fc26a; }
.boot-tip { font-size: 11px; line-height: 1.5; text-align: center; opacity: .9; text-shadow: 0 1px 0 var(--stroke); }

/* ---------- 大厅 ---------- */
#lobby { background: radial-gradient(ellipse at 50% 35%, #2e63d6 0%, #1a2e8a 45%, #0e1446 80%); display: flex; flex-direction: column; }
.topbar { padding: calc(var(--content-top) + 8px) 10px 6px; display: flex; align-items: center; gap: 8px; }
.avatar { width: 52px; height: 52px; border-radius: 10px; border: 3px solid var(--stroke); background: linear-gradient(#ffcf6b, #f59a23); display: flex; align-items: center;
  justify-content: center; font-size: 30px; position: relative; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .lv { position: absolute; bottom: -2px; left: -2px; background: #7b4fe0; font-size: 11px; font-weight: 900; padding: 0 5px; border-radius: 6px; border: 2px solid var(--stroke); }
.pinfo { flex: 1; min-width: 0; }
.pinfo .name { font-weight: 900; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinfo .expbar { height: 8px; border-radius: 5px; background: rgba(0,0,0,.4); border: 2px solid var(--stroke); margin: 3px 0; overflow: hidden; }
.pinfo .expbar i { display: block; height: 100%; background: linear-gradient(90deg, #7ef0ff, #3ab7ff); }
.pinfo .power { font-size: 12px; font-weight: 900; color: #ffd24a; }
.res { display: flex; gap: 5px; }
.res .r { display: flex; align-items: center; background: rgba(0,0,0,.45); border-radius: 14px; padding: 2px 8px 2px 2px; font-size: 13px; font-weight: 900; border: 2px solid rgba(0,0,0,.4); }
.res .r b { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-right: 2px; }
.res .r .plus { color: #7dff7d; margin-left: 3px; font-size: 14px; }
.lobby-body { flex: 1; position: relative; overflow: hidden; }
.page { position: absolute; inset: 0; overflow-y: auto; padding: 8px 12px 20px; }
.page::-webkit-scrollbar { display: none; }
.navbar { display: flex; gap: 4px; padding: 6px 6px calc(var(--safe-bottom) + 6px); background: linear-gradient(#2a2440, #17132b); border-top: 3px solid var(--stroke); }
.nav { flex: 1; height: 64px; border: 3px solid var(--stroke); border-radius: 10px; background: linear-gradient(#3b3560, #29234a); display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: 26px; position: relative; cursor: pointer; }
.nav span { font-size: 12px; font-weight: 900; margin-top: 2px; }
.nav.on { flex: 1.5; background: linear-gradient(#6f5a2a, #3a2c10); border-color: #ffc933; box-shadow: 0 0 0 2px var(--stroke), inset 0 0 18px rgba(255,201,51,.35); }

/* 战役页 */
.campaign { display: flex; flex-direction: column; align-items: center; height: 100%; padding-top: 4px; }
.side-btns { position: absolute; left: 10px; top: 8px; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.side-btns.right { left: auto; right: 10px; }
.sbtn { width: 50px; height: 50px; border-radius: 12px; border: 3px solid var(--stroke); background: linear-gradient(#ff6b7d, #d63650); display: flex; align-items: center;
  justify-content: center; font-size: 24px; position: relative; cursor: pointer; box-shadow: 0 3px 0 var(--stroke); }
.sbtn.blue { background: linear-gradient(#6fd0ff, #2f7fe6); }
.sbtn.green { background: linear-gradient(#8ff08a, #2faa5a); }
.sbtn.purple { background: linear-gradient(#b89bff, #6f4fd8); }
.sbtn small { position: absolute; bottom: -14px; font-size: 11px; font-weight: 900; white-space: nowrap; text-shadow: 0 1px 0 var(--stroke); }
.ch-title { font-size: 30px; font-weight: 900; margin-top: 6px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.4) 20%, rgba(0,0,0,.4) 80%, transparent); padding: 2px 40px; }
.ch-best { color: #ffd24a; font-weight: 900; font-size: 16px; margin-top: 2px; }
.ch-view { position: relative; width: 100%; flex: 1; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.ch-view canvas { width: min(78vw, 320px); height: min(78vw, 320px); border-radius: 50%; }
.ch-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 34px; color: #ffd24a; cursor: pointer; padding: 10px; text-shadow: 0 3px 0 var(--stroke); }
.ch-arrow.l { left: 4px; } .ch-arrow.r { right: 4px; }
.ch-arrow.disabled { opacity: .25; }
.ch-lock { position: absolute; font-size: 18px; font-weight: 900; background: rgba(0,0,0,.6); padding: 8px 16px; border-radius: 10px; }
.ch-reward { margin: 6px 0; background: linear-gradient(#5ad0ff, #2c86d8); border: 3px solid var(--stroke); border-radius: 14px; padding: 4px 20px; font-weight: 900; font-size: 13px; }
.ch-power { font-size: 12px; font-weight: 700; opacity: .85; margin-bottom: 4px; }
.ch-power.warn { color: #ff8a8a; opacity: 1; }
.start-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.btn-start { width: 170px; height: 86px; font-size: 30px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 18px; }
.btn-start small { font-size: 15px; margin-top: 4px; }
.btn-side { width: 90px; height: 64px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; padding: 0; }
.btn-side span { font-size: 13px; }

/* 通用面板 */
.panel { background: var(--panel); border: 3px solid var(--stroke); border-radius: 14px; padding: 10px; margin-bottom: 10px; box-shadow: 0 3px 0 var(--stroke); }
.panel-title { font-weight: 900; font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.page-title { font-size: 20px; font-weight: 900; margin: 2px 0 10px; display: flex; align-items: center; justify-content: space-between; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.muted { opacity: .7; font-size: 12px; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.35); }
.empty { text-align: center; opacity: .6; padding: 30px 0; font-weight: 700; }
.list-item { background: var(--panel2); border: 2px solid var(--stroke); border-radius: 12px; padding: 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.prog { height: 10px; background: rgba(0,0,0,.4); border-radius: 6px; overflow: hidden; border: 2px solid var(--stroke); }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #8ff08a, #3fc26a); }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs .t { flex: 1; text-align: center; padding: 7px 0; border-radius: 10px; font-weight: 900; background: rgba(0,0,0,.35); border: 2px solid var(--stroke); cursor: pointer; }
.tabs .t.on { background: linear-gradient(#ffe066, #ff9f1a); color: #3b2300; }

/* 装备页 */
.equip-stage { position: relative; height: 390px; background: radial-gradient(circle at 50% 55%, #3fb0ff 0, #1c5fd0 45%, #103a8f 75%); border: 3px solid var(--stroke); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.equip-stage canvas { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); }
.eslot { position: absolute; width: 70px; height: 70px; border-radius: 12px; border: 3px solid rgba(255,255,255,.35); background: rgba(10,40,110,.6); display: flex; align-items: center;
  justify-content: center; font-size: 30px; cursor: pointer; }
.eslot.filled { border-color: var(--qc, #fff); background: linear-gradient(rgba(255,255,255,.15), rgba(0,0,0,.3)); box-shadow: 0 0 12px var(--qc, transparent); }
.eslot .elv { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 900; }
.eslot .ename { position: absolute; bottom: -1px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 900; background: rgba(0,0,0,.5); border-radius: 0 0 9px 9px; }
.estats { position: absolute; bottom: 58px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.estats span { background: rgba(0,0,0,.5); padding: 3px 12px; border-radius: 14px; font-weight: 900; font-size: 14px; }
.eswitch { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.egrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.eitem { aspect-ratio: 1; border-radius: 10px; border: 3px solid var(--qc); background: linear-gradient(color-mix(in srgb, var(--qc) 35%, #2b2748), #211d3a); display: flex;
  align-items: center; justify-content: center; font-size: 26px; position: relative; cursor: pointer; }
.eitem .elv { position: absolute; top: 1px; left: 3px; font-size: 10px; font-weight: 900; }
.eitem .worn { position: absolute; top: 1px; right: 3px; font-size: 10px; color: #7dff7d; font-weight: 900; }
.eitem .lock { position: absolute; bottom: 0; right: 2px; font-size: 11px; }
.eitem.sel { outline: 3px solid #fff; }

/* 科技页 */
.tech-core { height: 210px; display: flex; align-items: center; justify-content: center; position: relative; }
.tech-orb { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0, #9fe8ff 15%, #3a8dff 45%, #2a1a8a 80%);
  box-shadow: 0 0 40px #4ab8ff, inset 0 0 30px rgba(255,255,255,.4); animation: orb 3s ease-in-out infinite; display: flex; align-items: center; justify-content: center; font-size: 56px; }
@keyframes orb { 50% { transform: scale(1.06); box-shadow: 0 0 60px #7fd0ff, inset 0 0 30px rgba(255,255,255,.5); } }
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tnode { background: var(--panel2); border: 2px solid var(--stroke); border-radius: 10px; padding: 6px 2px; text-align: center; position: relative; }
.tnode .ic { font-size: 24px; }
.tnode .nm { font-size: 11px; font-weight: 900; }
.tnode .lv { font-size: 10px; color: #ffd24a; font-weight: 900; }
.tnode.off { opacity: .45; }
.tnode.flash { animation: tflash 1s; }
@keyframes tflash { 0%, 60% { box-shadow: 0 0 0 3px #ffd24a, 0 0 20px #ffd24a; transform: scale(1.1); } }

/* 商店 */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sitem { background: linear-gradient(#4d3f8a, #2e2657); border: 3px solid var(--stroke); border-radius: 12px; padding: 8px 4px; text-align: center; position: relative; cursor: pointer; }
.sitem .ic { font-size: 34px; }
.sitem .nm { font-weight: 900; font-size: 13px; }
.sitem .pr { margin-top: 4px; background: linear-gradient(#ffe066, #ff9f1a); color: #3b2300; border-radius: 8px; font-weight: 900; font-size: 13px; padding: 2px 0; }
.sitem .badge { position: absolute; top: -6px; left: -4px; background: #ff3b4e; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 6px; border: 2px solid var(--stroke); }

/* 排行 */
.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); margin-bottom: 6px; border: 2px solid var(--stroke); }
.rank-row .no { width: 34px; text-align: center; font-weight: 900; font-size: 18px; }
.rank-row.me { background: linear-gradient(#6f5a2a, #3a2c10); border-color: #ffc933; }

/* ---------- 弹窗 ---------- */
#modal-root .mask { position: fixed; inset: 0; background: rgba(5,5,20,.7); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadein .15s; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: 100%; max-width: 420px; max-height: 86vh; display: flex; flex-direction: column; background: #3a3456; border: 3px solid var(--stroke); border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 0 var(--stroke), 0 10px 40px rgba(0,0,0,.5); animation: pop .18s cubic-bezier(.3,1.6,.6,1); }
@keyframes pop { from { transform: scale(.8); } }
.modal-head { position: relative; padding: 10px; text-align: center; font-size: 20px; font-weight: 900;
  background: repeating-linear-gradient(135deg, #7b5ce6 0 10px, #7054d8 10px 20px); border-bottom: 3px solid var(--stroke); }
.modal-close { position: absolute; right: 8px; top: 6px; width: 34px; height: 34px; border-radius: 8px; border: 3px solid var(--stroke); background: linear-gradient(#ff6b7d, #d63650);
  color: #fff; font-size: 20px; font-weight: 900; line-height: 1; cursor: pointer; }
.modal-body { padding: 12px; overflow-y: auto; }
.modal-foot { padding: 10px; display: flex; gap: 10px; justify-content: center; }
.input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--stroke); background: #d9d4c7; color: #3b2a10; font-size: 16px; font-weight: 900; text-align: center; outline: none; user-select: text; -webkit-user-select: text; }
.kv { display: flex; justify-content: space-between; align-items: center; background: #efe9da; color: #6b3f10; font-weight: 900; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.rewards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rw { width: 68px; height: 76px; border-radius: 10px; border: 3px solid var(--qc, var(--stroke)); background: linear-gradient(#4d3f8a, #2e2657); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 28px; animation: pop .3s backwards; }
.rw span { font-size: 11px; font-weight: 900; }

#toast-root { position: fixed; left: 0; right: 0; top: 40%; z-index: 99; display: flex; flex-direction: column; align-items: center; pointer-events: none; gap: 6px; }
.toast { background: rgba(10,10,30,.88); border: 2px solid rgba(255,255,255,.2); padding: 10px 18px; border-radius: 12px; font-weight: 900; max-width: 80%; text-align: center; animation: toast 2s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-20px); } }

/* ---------- 战斗 ---------- */
.battle { background: #000; touch-action: none; }
#game { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud .top { position: absolute; top: calc(var(--content-top) + 6px); left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 8px; }
.hud-pause { pointer-events: auto; width: 42px; height: 42px; border-radius: 10px; border: 3px solid var(--stroke); background: linear-gradient(#5aa8ff, #2a6fe0); font-size: 18px; font-weight: 900;
  color: #fff; display: flex; align-items: center; justify-content: center; }
.hud-mid { flex: 1; display: flex; flex-direction: column; align-items: center; }
.hud-wave { background: rgba(10,10,30,.7); padding: 2px 18px; border-radius: 8px; font-weight: 900; font-size: 15px; transform: skewX(-8deg); }
.hud-lv { width: 100%; display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.hud-lv b { font-size: 16px; font-weight: 900; font-style: italic; }
.hud-exp { flex: 1; height: 14px; background: rgba(10,10,30,.75); border: 2px solid #111; border-radius: 3px; overflow: hidden; transform: skewX(-12deg); }
.hud-exp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #aef6ff, #29d3e0); transition: width .15s; }
.hud-right { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.hud-right div { background: rgba(10,10,30,.7); padding: 2px 10px 2px 6px; border-radius: 8px; font-weight: 900; font-size: 14px; min-width: 84px; display: flex; gap: 6px; }
.hud-ult { pointer-events: auto; position: absolute; right: 14px; bottom: calc(var(--safe-bottom) + 24px); width: 70px; height: 70px; border-radius: 50%; border: 4px solid var(--stroke);
  background: conic-gradient(#ffd24a var(--p, 0%), rgba(20,20,40,.8) 0); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.hud-ult.ready { animation: ultready .8s infinite alternate; }
@keyframes ultready { to { box-shadow: 0 0 24px #ffd24a; transform: scale(1.06); } }
.hud-boss { position: absolute; top: calc(var(--content-top) + 92px); left: 30px; right: 30px; text-align: center; }
.hud-boss .bn { font-weight: 900; font-size: 14px; }
.hud-boss .bb { height: 12px; border: 2px solid #111; background: rgba(0,0,0,.6); border-radius: 6px; overflow: hidden; }
.hud-boss .bb i { display: block; height: 100%; background: linear-gradient(90deg, #ff5a6e, #ff2d46); transition: width .1s; }

#overlay { position: absolute; inset: 0; pointer-events: none; }
#overlay > * { pointer-events: auto; }
.ov { position: absolute; inset: 0; background: rgba(8,8,25,.72); display: flex; flex-direction: column; align-items: center; padding: calc(var(--content-top) + 20px) 10px calc(var(--safe-bottom) + 20px); animation: fadein .2s; }
.ov-title { margin: 6px auto 12px; padding: 6px 40px; font-size: 26px; font-weight: 900; background: #111; border: 3px solid #fff; box-shadow: -4px 0 0 #3af2ff, 4px 0 0 #ff3af2; letter-spacing: 4px; }
.ov-title.gold { border-color: #ffd24a; color: #fff; box-shadow: -4px 0 0 #ffd24a, 4px 0 0 #ffb52e; }
.skill-slots { display: flex; justify-content: space-between; width: 100%; max-width: 440px; gap: 6px; margin-bottom: 10px; }
.skill-slots .grp { display: flex; gap: 2px; background: rgba(0,0,0,.5); padding: 3px; border-radius: 6px; }
.skill-slots .s { width: 24px; height: 24px; border-radius: 4px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 16px; position: relative; }
.skill-slots .s.on { background: linear-gradient(#ffcf6b, #e38a1d); }
.skill-slots .s.evo { background: linear-gradient(#ff8af2, #9a3ae0); }
.skill-slots .s i { position: absolute; bottom: -3px; right: -2px; font-size: 9px; font-style: normal; font-weight: 900; }
.cards { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 460px; }
.card { flex: 1; max-width: 150px; min-height: 290px; background: #1e1b2e; border: 3px solid #111; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  animation: cardin .35s backwards; position: relative; }
.card:nth-child(2) { animation-delay: .07s; } .card:nth-child(3) { animation-delay: .14s; }
@keyframes cardin { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.card:active { transform: scale(.97); }
.card .cn { background: #2b2838; margin: 6px 6px 0; border-radius: 4px; text-align: center; font-weight: 900; font-size: 15px; padding: 4px 0; }
.card .ci { height: 96px; margin: 6px; border-radius: 6px; background: linear-gradient(#ffd98a, #f3b54a); display: flex; align-items: center; justify-content: center; font-size: 50px; }
.card .dots { text-align: center; background: #2b2838; margin: 0 6px; font-size: 11px; letter-spacing: 2px; padding: 2px 0; }
.card .dots .f { color: #ffd24a; } .card .dots .e { color: #666; }
.card .cd { flex: 1; padding: 8px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.card .ce { text-align: center; padding: 6px; font-size: 12px; font-weight: 900; }
.card .ce span { background: #2b2838; padding: 3px 10px; border-radius: 10px; }
.card .new { position: absolute; top: 0; right: 0; background: #e8394e; font-size: 12px; font-weight: 900; padding: 1px 8px; border-radius: 0 0 0 8px; }
.card.gold { border-color: #ffe27a; box-shadow: 0 0 18px #ffc933, inset 0 0 0 2px #ffb52e; }
.card.gold .ci { background: linear-gradient(#ffe27a, #ffb52e); }
.card.gold .cn { background: #4a3710; color: #ffe27a; }
.ov-tip { margin-top: 14px; font-weight: 900; font-size: 15px; }
.ov-tip em { color: #4ad8ff; font-style: normal; }
.ov-actions { margin-top: 14px; display: flex; gap: 10px; }
.chest-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
.chest-row { background: #1e1b2e; border: 2px solid #ffd24a; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; animation: cardin .35s backwards; }
.chest-row .ic { font-size: 30px; }
.supply { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.supply .opt { background: #1e1b2e; border: 3px solid #111; border-radius: 12px; padding: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; }
.supply .opt .ic { font-size: 40px; }
.supply .opt.disabled { opacity: .45; }
.result-box { background: #2b2748; border: 3px solid var(--stroke); border-radius: 16px; padding: 14px; width: 100%; max-width: 380px; text-align: center; }
.result-big { font-size: 40px; font-weight: 900; margin: 6px 0; }
.banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; animation: banner 2s forwards; }
.banner div { display: inline-block; padding: 8px 60px; font-size: 30px; font-weight: 900; background: linear-gradient(90deg, transparent, rgba(0,0,0,.75) 20%, rgba(0,0,0,.75) 80%, transparent); }
.banner.warn div { color: #ff4a5e; background: linear-gradient(90deg, transparent, rgba(80,0,10,.85) 20%, rgba(80,0,10,.85) 80%, transparent); font-size: 36px; letter-spacing: 6px; }
@keyframes banner { 0% { opacity: 0; transform: scaleY(0); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.mode-row { display: flex; gap: 6px; margin-bottom: 8px; }
.eitem.glow, .eslot.filled.glow { animation: eglow 1.6s ease-in-out infinite; }
@keyframes eglow { 50% { box-shadow: 0 0 16px var(--qc), inset 0 0 12px var(--qc); } }
.side-btns { gap: 18px; }
.ch-arrow { top: auto; bottom: 0; transform: none; z-index: 3; }
.ch-arrow.l { left: 20%; } .ch-arrow.r { right: 20%; }
.side-btns .sbtn { width: 46px; height: 46px; font-size: 22px; }

.ad-cover { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; align-items: center; justify-content: center; }
.ad-video { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ad-tip { position: absolute; top: calc(var(--content-top) + 12px); right: 12px; background: rgba(0,0,0,.6); padding: 6px 12px; border-radius: 16px; font-weight: 900; font-size: 14px; }
.ad-done { position: absolute; bottom: calc(var(--safe-bottom) + 40px); left: 50%; transform: translateX(-50%); font-size: 20px; padding: 12px 40px; }
.ad-more { position: absolute; bottom: calc(var(--safe-bottom) + 110px); left: 50%; transform: translateX(-50%); }

/* ---------- 触控尺寸优化：小按钮放大 ---------- */
.btn-sm { font-size: 15px; padding: 8px 14px; border-radius: 10px; border-width: 3px; min-height: 40px; }
.btn { min-height: 44px; }
.side-btns { gap: 20px; }
.side-btns .sbtn { width: 54px; height: 54px; font-size: 27px; border-radius: 14px; }
.sbtn small { font-size: 12.5px; bottom: -16px; }
.modal-close { width: 40px; height: 40px; font-size: 22px; top: 7px; }
.modal-head { font-size: 21px; padding: 12px 52px; }
.hud-pause { width: 50px; height: 50px; font-size: 20px; }
.hud-ult { width: 82px; height: 82px; font-size: 34px; }
.tabs .t { padding: 10px 0; font-size: 15px; }
.nav { height: 70px; font-size: 30px; }
.nav span { font-size: 13px; }
.res .r { font-size: 14px; padding: 3px 9px 3px 3px; }
.res .r b { width: 24px; height: 24px; font-size: 16px; }
.muted { font-size: 13px; }
.list-item { padding: 12px; }
.card .cd { font-size: 14px; }
.card .cn { font-size: 16px; }
.mode-row { width: 100%; max-width: 440px; padding: 0 8px; }
.mode-row .btn-sm { flex: 1; font-size: 15px; padding: 9px 4px; }
.kv { font-size: 15px; padding: 12px 14px; }
.rw { width: 74px; height: 82px; }
.eslot { width: 76px; height: 76px; }
.sitem .pr { font-size: 15px; padding: 5px 0; }
.ch-arrow { font-size: 42px; padding: 12px 16px; }

/* 一阶进化：两个方向不同颜色 */
.card.branch { border-color: var(--bc); box-shadow: 0 0 20px var(--bc), inset 0 0 0 2px var(--bc); }
.card.branch .ci { background: linear-gradient(color-mix(in srgb, var(--bc) 30%, #fff), var(--bc)); }
.card.branch .cn { background: color-mix(in srgb, var(--bc) 35%, #1e1b2e); color: #fff; }
.card.branch .ce span { background: var(--bc); color: #fff; }
.card.branch { animation: cardin .35s backwards, branchglow 1.4s ease-in-out infinite .4s; }
@keyframes branchglow { 50% { box-shadow: 0 0 34px var(--bc), inset 0 0 0 2px var(--bc); transform: translateY(-3px); } }