:root {
  --bg: #0e1424;
  --panel: #18213a;
  --panel2: #212c4b;
  --line: #2d3a60;
  --text: #eef2ff;
  --muted: #8d9bc4;
  --blue: #2f7bff;
  --gold: #ffcc33;
  --red: #ff4d5e;
  --green: #3ddc84;
  --yellow: #ffd23f;
  --title-font: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: none; min-height: 44px; }
.hidden { display: none !important; }
.blue { color: #6aa5ff; font-weight: bold; }

#app { display: flex; flex-direction: column; height: 100%; }

/* ---------- HUD ---------- */
#hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; background: linear-gradient(#1c2746, #141c33); border-bottom: 1px solid var(--line); flex: none; }
.hud-block { display: flex; align-items: center; gap: 10px; }
#timer { font: 26px/1 var(--title-font); letter-spacing: 1px; min-width: 76px; }
.phase { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--panel2); color: var(--muted); white-space: nowrap; }
.phase.hot { background: #5a1f2a; color: #ffb3bb; }
.phase.cold { background: #1f3f5a; color: #bfe6ff; }
.stats { gap: 14px; flex-wrap: wrap; justify-content: center; }
.stat { font-size: 15px; white-space: nowrap; }
.stat b { font-size: 19px; font-variant-numeric: tabular-nums; display: inline-block; transition: transform .15s; }
.stat b.bump { transform: scale(1.35); color: var(--gold); }
.stat small { color: var(--muted); margin-left: 3px; font-size: 12px; }
.icon-btn { background: var(--panel2); border-radius: 8px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 16px; }

main { flex: 1; display: flex; min-height: 0; }
#mapWrap { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
#map { max-width: 100%; max-height: 100%; aspect-ratio: 16 / 10; display: block; cursor: pointer; image-rendering: auto; touch-action: manipulation; }
#mapWrap.shake { animation: shake .45s; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-9px,5px); } 30% { transform: translate(8px,-6px); } 45% { transform: translate(-6px,-4px); } 60% { transform: translate(5px,6px); } 75% { transform: translate(-3px,2px); } }

/* ---------- 侧栏 ---------- */
#side { width: 310px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow-y: auto; background: #111930; border-left: 1px solid var(--line); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.panel h3 { margin: 0 0 6px; font: 15px var(--title-font); color: var(--muted); letter-spacing: 1px; }
.feed-panel { flex: 1; min-height: 120px; }
#feed { font-size: 12px; line-height: 1.55; color: #c6cfeb; }
#feed div { animation: fadeIn .3s; }
#feed .t { color: var(--muted); margin-right: 4px; font-variant-numeric: tabular-nums; }
#feed .me { color: #8ec1ff; font-weight: bold; }
#feed .bad { color: #ff9aa5; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.lord { display: grid; grid-template-columns: 18px 30px minmax(0,1fr) auto; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 6px; font-size: 13px; transition: background .3s; }
.lord .rk { color: var(--muted); font-size: 11px; text-align: right; }
.lord .av { font-size: 18px; text-align: center; position: relative; padding-left: 6px; }
.lord .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lord .nm i { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 4px; margin-left: 3px; background: #2a3558; color: var(--muted); }
.lord .nm i.boss { background: #6b4b00; color: #ffd76a; }
.lord .nb { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lord .nb small { color: var(--muted); }
.lord .sw { width: 6px; height: 22px; border-radius: 3px; position: absolute; left: 0; top: 2px; }
.lord.me { background: rgba(47,123,255,.22); }
.lord.dead { opacity: .38; text-decoration: line-through; }
.lord.flash { background: rgba(255,204,51,.35); }
.lord .mood { font-size: 13px; margin-left: 2px; }

.ghost-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.ghost-row.me { color: #8ec1ff; font-weight: bold; }
.ghost-row .d { font-size: 11px; margin-left: 6px; }
.ghost-row .d.up { color: var(--green); }
.ghost-row .d.down { color: var(--red); }

/* ---------- 底部操作 ---------- */
#actions { flex: none; display: flex; gap: 8px; padding: 8px; background: #141c33; border-top: 1px solid var(--line); align-items: stretch; }
.act-btn { position: relative; overflow: hidden; min-width: 150px; border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 17px; font-weight: bold; box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .08s, filter .2s; }
.act-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.act-btn small { font-weight: normal; font-size: 12px; opacity: .85; position: relative; }
.act-btn .lbl { position: relative; }
.act-btn.up { background: #3a2f6b; }
.act-btn.up .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #6b4cff, #9a7bff); transition: width .2s; }
.act-btn.up.ready { animation: pulse 1s infinite; }
.act-btn.up.ready .fill { background: linear-gradient(90deg, #8a5cff, #c27bff); }
.act-btn.rec { background: linear-gradient(#2fa35a, #23824a); }
.act-btn:disabled { filter: grayscale(.6) brightness(.8); cursor: default; }
@keyframes pulse { 0%,100% { box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 0 0 rgba(170,120,255,.6); } 50% { box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 0 7px rgba(170,120,255,0); } }
.kbd { font-size: 10px; opacity: .6; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; padding: 0 3px; margin-left: 4px; font-weight: normal; }

#target { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; font-size: 14px; min-width: 0; }
#target .hint { color: var(--muted); }
#target .who { display: flex; align-items: center; gap: 6px; font-weight: bold; min-width: 0; }
#target .who .av { font-size: 26px; }
#target .tags { font-size: 11px; color: var(--gold); }
#target .vs { font-variant-numeric: tabular-nums; white-space: nowrap; }
#target .vs .a { color: #8ec1ff; font-weight: bold; }
#target .vs .d { color: #ff9aa5; font-weight: bold; }
#target .pct { font: 26px var(--title-font); min-width: 64px; text-align: center; }
#target .grow { flex: 1; }
.atk-btn { background: linear-gradient(#ff5e5e, #d93636); border-radius: 12px; padding: 10px 22px; font-size: 19px; font-weight: bold; box-shadow: 0 3px 0 rgba(0,0,0,.35); white-space: nowrap; }
.atk-btn:disabled { filter: grayscale(1) brightness(.7); }
.atk-btn.retreat { background: linear-gradient(#777f99, #565d75); }
.pg { height: 8px; background: #0b1020; border-radius: 4px; overflow: hidden; flex: 1; min-width: 80px; }
.pg > div { height: 100%; background: linear-gradient(90deg, #ff9b3d, #ff4d5e); }

/* ---------- 地图上的浮层 ---------- */
#toasts { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: 340px; z-index: 5; }
.toast { background: rgba(14,20,36,.92); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; animation: toastIn .25s ease-out; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.toast.out { animation: toastOut .4s forwards; }
.toast .av { font-size: 26px; }
.toast .q { font-size: 14px; }
.toast .q b { display: block; font-size: 11px; color: var(--muted); font-weight: normal; }
.toast.taunt { border-color: #ff6b7a; background: rgba(60,16,24,.94); }
.toast.good { border-color: #3ddc84; }
.toast.gold { border-color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-20px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-20px); } }

#banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; z-index: 6; }
#banner .b { display: inline-block; padding: 10px 28px; background: rgba(10,14,28,.85); border-radius: 14px; animation: bannerIn 2.4s forwards; border: 2px solid var(--gold); }
#banner .b .big { font: 34px var(--title-font); color: var(--gold); text-shadow: 0 2px 0 #000; }
#banner .b .small { font-size: 14px; color: #dde4ff; margin-top: 2px; }
#banner .b.red { border-color: var(--red); }
#banner .b.red .big { color: #ff7a87; }
#banner .b.ice { border-color: #9fdcff; }
#banner .b.ice .big { color: #bfe9ff; }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(1.8); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }

#stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 7; }
#stamp .s { text-align: center; animation: stampIn 2.2s forwards; }
#stamp .s .av { font-size: 70px; filter: grayscale(1); }
#stamp .s .word { font: 900 64px Impact, 'Arial Black', sans-serif; color: #ff2d44; border: 6px solid #ff2d44; padding: 0 18px; transform: rotate(-8deg); display: inline-block; text-shadow: 0 3px 0 #000; background: rgba(0,0,0,.35); letter-spacing: 3px; }
#stamp .s .who { font: 22px var(--title-font); margin-top: 10px; text-shadow: 0 2px 0 #000; }
#stamp .s .last { font-size: 14px; color: #ffd0d5; margin-top: 4px; }
#stamp .s .streak { font: 30px var(--title-font); color: var(--gold); margin-top: 6px; text-shadow: 0 2px 0 #000; }
@keyframes stampIn { 0% { opacity: 0; transform: scale(3); } 10% { opacity: 1; transform: scale(.92); } 16% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

#pauseOverlay { position: absolute; inset: 0; background: rgba(5,8,18,.7); display: flex; align-items: center; justify-content: center; text-align: center; font: 30px var(--title-font); z-index: 9; }
#pauseOverlay button { margin-top: 14px; font-size: 16px; }

/* ---------- 全屏页面 ---------- */
.screen { position: fixed; inset: 0; background: radial-gradient(ellipse at top, #24335f 0%, #0e1424 70%); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; z-index: 20; padding: 24px 16px; }
.screen.overlay { background: rgba(8,12,24,.82); backdrop-filter: blur(3px); }
.card { background: rgba(24,33,58,.96); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; max-width: 760px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.5); margin: auto; }
.card h2 { margin: 0 0 4px; font: 30px var(--title-font); text-align: center; }
.card .sub { text-align: center; color: var(--muted); margin: 0 0 16px; }
.logo { font: 54px var(--title-font); text-align: center; color: var(--gold); text-shadow: 0 4px 0 #6b4b00; letter-spacing: 2px; }
.logo-sub { text-align: center; font: 20px var(--title-font); color: var(--muted); letter-spacing: 8px; margin-top: -4px; }
.tagline { text-align: center; font-size: 17px; margin: 14px 0 18px; }
.mode-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.big-btn { background: linear-gradient(#ff7a3d, #e5512b); border-radius: 14px; padding: 12px 26px; font-size: 21px; font-weight: bold; box-shadow: 0 4px 0 rgba(0,0,0,.4); display: inline-flex; flex-direction: column; align-items: center; min-width: 200px; }
.big-btn small { font-size: 12px; font-weight: normal; opacity: .9; margin-top: 2px; }
.big-btn.alt { background: linear-gradient(#3d8bff, #2a62d1); }
.big-btn:active { transform: translateY(2px); }
.ghost-btn { background: var(--panel2); border-radius: 12px; padding: 10px 18px; font-size: 15px; min-height: 44px; }
.title-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.howto { font-size: 13px; color: #c6cfeb; line-height: 1.6; margin: 16px 0 6px; }
.footnote { font-size: 11px; color: var(--muted); margin: 0; }
.row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; border-bottom: 1px dashed #2a3558; }
.row:last-child { border-bottom: none; }
.row.me { color: #8ec1ff; font-weight: bold; }
.row .r { font-variant-numeric: tabular-nums; }
.row .new { background: var(--red); color: #fff; font-size: 10px; border-radius: 4px; padding: 0 4px; margin-left: 4px; }

#perkCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.perk { background: var(--panel2); border: 2px solid var(--line); border-radius: 14px; padding: 18px 12px; text-align: center; transition: transform .12s, border-color .12s; }
.perk:hover { transform: translateY(-4px); border-color: var(--gold); }
.perk .ic { font-size: 44px; }
.perk .nm { font: 24px var(--title-font); margin: 6px 0; }
.perk .ds { font-size: 13px; color: #c6cfeb; line-height: 1.5; }

.result-card .headline { font: 44px var(--title-font); text-align: center; margin: 0; }
.result-card .headline.win { color: var(--gold); }
.result-card .headline.lose { color: #ff7a87; }
.result-card .bigtime { font: 64px var(--title-font); text-align: center; margin: 0; line-height: 1.1; }
.result-card .subline { text-align: center; color: var(--muted); margin: 4px 0 16px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel2); border-radius: 12px; padding: 10px; text-align: center; }
.kpi .v { font: 28px var(--title-font); color: var(--gold); }
.kpi .k { font-size: 12px; color: var(--muted); }
.gap { text-align: center; font-size: 16px; margin: 4px 0 12px; }
.gap b { color: var(--red); font-size: 20px; }
.tip { background: #2b1f3f; border: 1px solid #5b3f8a; border-radius: 12px; padding: 12px 14px; margin: 12px 0; font-size: 14px; line-height: 1.6; }
.tip .tt { font: 18px var(--title-font); color: #d6b8ff; }
.result-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.copied { color: var(--green); font-size: 13px; text-align: center; height: 18px; margin-top: 6px; }

/* ---------- 手机 ---------- */
@media (max-width: 820px) {
  html, body { overflow: auto; }
  #app { height: auto; min-height: 100%; }
  #hud { flex-wrap: wrap; padding: 6px 8px; position: sticky; top: 0; z-index: 4; }
  #timer { font-size: 20px; min-width: 60px; }
  .stats { gap: 8px; order: 3; width: 100%; justify-content: space-between; }
  .stat { font-size: 13px; }
  .stat b { font-size: 15px; }
  main { flex-direction: column; }
  #mapWrap { width: 100%; }
  #map { width: 100%; height: auto; }
  #side { width: 100%; border-left: none; overflow: visible; order: 3; }
  #actions { position: sticky; bottom: 0; flex-wrap: wrap; z-index: 4; padding: 6px; gap: 6px; }
  .act-btn { min-width: 0; flex: 1; font-size: 15px; padding: 6px 8px; }
  #target { order: -1; width: 100%; flex-basis: 100%; flex-wrap: wrap; gap: 8px; padding: 6px 8px; }
  #target .pct { font-size: 20px; min-width: 48px; }
  .atk-btn { padding: 8px 16px; font-size: 16px; }
  .title-cols, .result-cols { grid-template-columns: 1fr; }
  #perkCards { grid-template-columns: 1fr; }
  .logo { font-size: 40px; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi .v { font-size: 22px; }
  .result-card .bigtime { font-size: 48px; }
  #banner .b .big { font-size: 24px; }
  #stamp .s .word { font-size: 40px; }
  #stamp .s .av { font-size: 48px; }
  .kbd { display: none; }
}

/* ---------- 多人：模式选择 / 匹配 / 段位 ---------- */
.profile-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 14px; font-size: 13px; color: var(--muted); }
.online-badge { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #66708f; display: inline-block; }
.dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.name-lbl input { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 5px 8px; width: 118px; min-height: 44px; font: inherit; font-size: 14px; user-select: text; }
.big-btn.ranked { background: linear-gradient(#ffd34d, #e59a1a); color: #2a1a00; }
.train-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 18px; }
.train-lbl { font: 15px var(--title-font); color: var(--muted); }
.mid-btn { background: linear-gradient(#3d8bff, #2a62d1); border-radius: 12px; padding: 8px 16px; font-size: 15px; font-weight: bold; box-shadow: 0 3px 0 rgba(0,0,0,.4); display: inline-flex; flex-direction: column; align-items: center; min-width: 150px; }
.mid-btn small { font-size: 11px; font-weight: normal; opacity: .85; }
.mid-btn.alt { background: linear-gradient(#4a5785, #333e66); }
.mid-btn.quick { background: linear-gradient(#ffb52e, #c66b13); color: #241300; }
.mid-btn:active { transform: translateY(2px); }
.title-cols:has(#rankPanel:not(.hidden)) { grid-template-columns: 1fr 1fr 1fr; }

.tier { --tc: #c98a55; display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--tc); border-radius: 99px; padding: 3px 10px; color: var(--text); white-space: nowrap; }
.tier .ti { font-size: 16px; }
.tier .tn { color: var(--tc); font-weight: bold; }
.tier .tp { font-variant-numeric: tabular-nums; }
.tier .tbar { width: 60px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.tier .tbar i { display: block; height: 100%; background: var(--tc); }
.tier .tnext { color: var(--muted); font-size: 11px; }
.tier.big { font-size: 17px; padding: 6px 16px; }
.tier.big .ti { font-size: 26px; }
.tier.big .tbar { width: 110px; height: 8px; }

.match-card { text-align: center; min-width: 320px; }
.match-card h2 { font: 30px var(--title-font); margin: 0 0 14px; }
.match-seats { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.match-seats .seat { width: 52px; height: 52px; border-radius: 14px; background: var(--panel2); border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: .55; transition: all .2s; }
.match-seats .seat.on { border: 2px solid var(--gold); opacity: 1; transform: scale(1.06); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--gold); margin: 0 auto 12px; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.match-card .elapsed { font: 22px var(--title-font); color: var(--muted); margin: 0 0 14px; }

.perk-timer { text-align: center; color: var(--gold); margin: 14px 0 0; font-size: 15px; min-height: 18px; }
.perk.picked { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 0 18px rgba(255,204,51,.35); }
.perk.dim { opacity: .4; }

.rank-result { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.rank-result .delta { font: 26px var(--title-font); }
.rank-result .delta.pos { color: var(--green); }
.rank-result .delta.neg { color: var(--red); }
.rank-result .promo { width: 100%; text-align: center; font: 20px var(--title-font); color: var(--gold); animation: pop .6s ease-out; }
.rank-result .promo.neg { color: var(--red); }
.rank-result .promo.dim { color: var(--muted); font-size: 14px; }
.rank-result.up .tier { animation: pop .6s ease-out; box-shadow: 0 0 22px var(--tc); }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.ghost-row .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
@media (max-width: 760px) { .title-cols:has(#rankPanel:not(.hidden)) { grid-template-columns: 1fr; } }
.kpis.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .kpis.four { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pace goal + challenge link ---------- */
.pace-panel{border-color:rgba(255,204,51,.28)}
.pace-main{font-weight:800;font-size:16px;color:var(--text);margin:2px 0 6px}
.pace-bar{height:7px;background:#0b1020;border-radius:99px;overflow:hidden;margin:5px 0}
.pace-bar i{display:block;height:100%;background:linear-gradient(90deg,#3d8bff,#ffcc33);border-radius:99px;transition:width .25s}
.pace-sub{font-size:11px;color:var(--muted);line-height:1.35}
.challenge-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;border-color:#806b20;background:rgba(100,78,12,.18)}
.challenge-banner b{color:var(--gold)}.challenge-banner span{font-size:12px;color:#d7def7}
@media(max-width:820px){.challenge-banner{flex-direction:column;align-items:flex-start}.pace-panel{order:-1}}

/* ---------- Player SVG art overlay ---------- */
#heroArt{position:absolute;z-index:4;pointer-events:none;transform:translate(-50%,-86%);transform-origin:50% 100%;overflow:visible}
#heroArt .map-player-art{width:100%;height:100%;display:block;overflow:visible}
#heroArt .ch{transform-origin:0 0}
@media (prefers-reduced-motion: reduce){#heroArt .ch *{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* 无脑模式：只留地图、兵力、领主榜；首页一个大「开始」，其余收进「更多玩法」 */
.hidden-simple, #btnRetreat, #netBox, #onlineBadge { display: none !important; }
.start-row { display: flex; justify-content: center; margin: 14px 0 10px; }
.start-btn { font-size: 26px; padding: 16px 56px; min-width: 260px; }
.more-modes { margin: 6px auto 10px; max-width: 760px; }
.more-modes > summary { cursor: pointer; color: var(--muted); font-size: 13px; text-align: center; list-style: none; padding: 6px; }
.more-modes > summary::-webkit-details-marker { display: none; }
.more-modes > summary::after { content: ' ▾'; }
.more-modes[open] > summary::after { content: ' ▴'; }
.more-modes .train-row { flex-wrap: wrap; justify-content: center; }

/* 兵线制：没有角色立绘；底部建造菜单 */
#heroArt { display: none !important; }
#target .bld { min-width: 0; flex: 1 1 0; }
#target .bld small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#waveIn { color: var(--muted); font-size: 11px; }
#target .act-btn.bld { background: linear-gradient(180deg, #2b3a66, #1d2747); color: #fff; border: 1px solid #3d4f86; padding: 6px 8px; }
#target .act-btn.bld small { color: #ffd76a; font-size: 11px; display: block; }
#target .act-btn.bld:disabled { opacity: .45; }
#target .act-btn.bld .lbl { white-space: nowrap; font-size: 15px; }
#target .act-btn.bld small.ds { color: var(--muted); font-size: 10px; }
@media (max-width: 520px) { #target .act-btn.bld small.ds { display: none; } #target .bld-hint { display: none; } }
.start-row { gap: 10px; flex-wrap: wrap; }
.start-row .big-btn { min-width: 0; flex: 1 1 150px; max-width: 220px; font-size: 22px; padding: 14px 10px; }
#techModal { z-index: 50; }
.tech-card { max-width: 560px; }
.tech-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.tech-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; }
.tech-row .ic { font-size: 28px; }
.tech-row .tx { flex: 1; display: flex; flex-direction: column; }
.tech-row .tx small { color: var(--muted); }
.tech-row .done { color: #2ecc71; font-weight: bold; }