/* ── 陀螺激斗 · 热血番战斗HUD ─────────────────────────────
   墨黑 #12141C · 夜蓝 #1B2436 · 电光青 #3EE6D8
   炽橙 #FF6B35 · 硫黄 #FFD23F · 米白 #F2EDE4          */

:root {
  --ink: #12141C;
  --navy: #1B2436;
  --cyan: #3EE6D8;
  --orange: #FF6B35;
  --yellow: #FFD23F;
  --paper: #F2EDE4;
  --skew: -8deg;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--paper);
  user-select: none;
}

#gl, #fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
}
#fx { pointer-events: none; z-index: 5; }

.screen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hidden { display: none !important; }
.screen button { pointer-events: auto; }

/* ── 组装界面 ── */
.hud-title { position: absolute; top: 34px; left: 44px; }
.hud-title h1 {
  font-size: 56px; font-weight: 900; font-style: italic;
  letter-spacing: 6px; line-height: 1;
  text-shadow: 4px 4px 0 rgba(0,0,0,.55);
}
.hud-title .accent { color: var(--cyan); }
.hud-title .sub {
  margin-top: 10px; font-size: 13px; letter-spacing: 5px; opacity: .55;
}

#assembly-panel {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 18px; pointer-events: auto;
}
.part-group {
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  border-left: 4px solid var(--cyan);
  padding: 12px 16px 14px;
  transform: skewX(var(--skew));
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
}
.part-group > * { transform: skewX(calc(var(--skew) * -1)); }
.slot-label {
  font-size: 14px; font-weight: 800; letter-spacing: 4px;
  color: var(--cyan); margin-bottom: 10px;
}
.part-options { display: flex; gap: 10px; }
.part-btn {
  min-width: 96px; padding: 9px 12px;
  background: var(--ink); color: var(--paper);
  border: 2px solid #3A4560; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  font-family: inherit;
  transition: border-color .12s, transform .12s, background .12s;
}
.part-btn:hover { transform: translateY(-2px); border-color: #5A6A90; }
.part-btn.active {
  border-color: var(--cyan); background: #12303A;
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(62,230,216,.35);
}
.part-btn .part-tag { display: block; font-size: 10px; opacity: .55; margin-top: 3px; font-weight: 400; }

#stats-panel {
  position: absolute; left: 44px; bottom: 120px; width: 300px;
  pointer-events: auto;
}
.stat-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.stat-name { width: 36px; font-size: 13px; font-weight: 800; letter-spacing: 2px; opacity: .8; }
.stat-bar {
  flex: 1; height: 12px; background: #232B40;
  transform: skewX(var(--skew));
  overflow: hidden;
}
.stat-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan), #8FF7EE);
  transition: width .25s cubic-bezier(.2,.9,.3,1.2);
}
#effect-badges { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.effect-badge {
  padding: 5px 12px; font-size: 12px; font-weight: 800; letter-spacing: 2px;
  background: var(--orange); color: var(--ink);
  transform: skewX(var(--skew));
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
.effect-badge.passive { background: var(--yellow); }

/* ── 模式 / 地图选择 ──
   用 left/right 双约束替代固定坐标：左侧让出属性栏（止于344px），
   右侧让出部件面板（约510px宽），空间不足时行内换行，永不重叠 */
#setup-panel {
  position: absolute; left: 380px; right: 560px; bottom: 118px;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: auto;
}
.setup-row { display: flex; align-items: flex-start; gap: 12px; }
#mode-options, #map-options { flex-wrap: wrap; }
.setup-label { padding-top: 8px; }
.setup-label {
  width: 40px; font-size: 13px; font-weight: 800; letter-spacing: 4px;
  color: var(--cyan); text-align: right;
}
#mode-options, #map-options { display: flex; gap: 8px; }
.mode-btn, .map-card {
  padding: 8px 16px;
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  color: var(--paper);
  border: 2px solid #3A4560; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  font-family: inherit;
  transform: skewX(var(--skew));
  transition: border-color .12s, background .12s, transform .12s;
}
.mode-btn:hover, .map-card:hover { transform: skewX(var(--skew)) translateY(-2px); border-color: #5A6A90; }
.mode-btn.active, .map-card.active {
  border-color: var(--cyan); background: #12303A; color: var(--cyan);
  box-shadow: 0 0 12px rgba(62,230,216,.3);
}
.map-card .map-desc { display: block; font-size: 10px; opacity: .55; margin-top: 3px; font-weight: 400; max-width: 150px; }

#btn-battle {
  position: absolute; left: 44px; bottom: 40px;
  padding: 16px 58px;
  font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: 10px;
  font-family: inherit;
  color: var(--ink); background: var(--cyan);
  border: none; cursor: pointer;
  transform: skewX(var(--skew));
  box-shadow: 8px 8px 0 rgba(0,0,0,.45);
  transition: transform .12s, box-shadow .12s, background .12s;
}
#btn-battle:hover {
  transform: skewX(var(--skew)) translate(-2px,-2px);
  box-shadow: 12px 12px 0 rgba(0,0,0,.45);
  background: #6FF0E5;
}
#hint-keys {
  position: absolute; left: 46px; bottom: 14px;
  font-size: 12px; letter-spacing: 2px; opacity: .45;
}

/* ── 战斗HUD：N 人转速条 ── */
#gauge-list {
  position: absolute; top: 28px; left: 36px; right: 36px;
  display: flex; justify-content: space-between; pointer-events: none;
}
#gauge-col-p { width: min(340px, 32vw); }
#gauge-col-e { width: min(300px, 28vw); display: flex; flex-direction: column; gap: 12px; text-align: right; }
.gauge-name {
  font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: 2px;
  margin-bottom: 6px; text-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.gauge-track {
  height: 14px; background: rgba(18,20,28,.75);
  border: 2px solid rgba(242,237,228,.25);
  transform: skewX(var(--skew)); overflow: hidden;
}
#gauge-col-e .gauge-track { transform: skewX(calc(var(--skew) * -1)); }
.gauge-track i { display: block; height: 100%; width: 100%; transition: width .18s ease-out; }
#gauge-col-e .gauge-track i { float: right; }
.gauge-rpm { margin-top: 5px; font-size: 11px; letter-spacing: 2px; opacity: .7; font-variant-numeric: tabular-nums; }
.gauge.dead { opacity: .35; filter: grayscale(.8); }

/* VS 界面对手列表 */
#vs-opponents .vs-opp { margin-bottom: 14px; }
#vs-opponents .vs-opp:last-child { margin-bottom: 0; }
#vs-opponents .vs-name { font-size: 17px; }
#vs-opponents .vs-effects { margin-top: 6px; }

#countdown {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
  font-size: 150px; font-weight: 900; font-style: italic;
  color: var(--yellow);
  -webkit-text-stroke: 5px var(--ink);
  text-shadow: 10px 10px 0 rgba(0,0,0,.5);
}
#countdown.pop { animation: cd-pop .82s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes cd-pop {
  0% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
  30% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

#effect-toast {
  position: absolute; top: 24%; left: 50%; transform: translate(-50%,-50%) skewX(var(--skew));
  padding: 10px 34px;
  font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: 8px;
  background: var(--orange); color: var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5);
}
#effect-toast.show { animation: toast-in .9s ease-out both; }
@keyframes toast-in {
  0% { opacity: 0; transform: translate(-50%,-50%) skewX(var(--skew)) scale(1.6); }
  20% { opacity: 1; transform: translate(-50%,-50%) skewX(var(--skew)) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 结算 ── */
#screen-result { background: rgba(10,12,20,.55); }
#result-word {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%,-50%);
  font-size: 130px; font-weight: 900; font-style: italic; letter-spacing: 20px;
  -webkit-text-stroke: 6px var(--ink);
  text-shadow: 12px 12px 0 rgba(0,0,0,.55);
  animation: word-slam .5s cubic-bezier(.2,1.5,.4,1) both;
}
#result-word.win { color: var(--yellow); }
#result-word.lose { color: #7A86A8; }
@keyframes word-slam {
  0% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
#result-desc {
  position: absolute; top: 52%; left: 50%; transform: translateX(-50%);
  font-size: 17px; letter-spacing: 3px; opacity: .8;
}
.result-actions {
  position: absolute; top: 71%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 22px;
}
.result-actions button {
  padding: 13px 44px; font-size: 19px; font-weight: 900; font-style: italic;
  letter-spacing: 6px; font-family: inherit; cursor: pointer;
  transform: skewX(var(--skew));
  border: none; box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  transition: transform .12s;
}
.result-actions button:hover { transform: skewX(var(--skew)) translate(-2px,-2px); }
#btn-rematch { background: var(--cyan); color: var(--ink); }
#btn-rebuild { background: var(--paper); color: var(--ink); }

/* ── 暗角 ── */
#vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(6,8,14,.55) 100%);
}

/* ── VS 开场 ── */
#screen-vs { background: rgba(8,10,18,.45); }
.vs-panel {
  position: absolute; top: 26%; width: min(420px, 38vw);
  padding: 26px 34px 30px;
  background: color-mix(in srgb, var(--navy) 92%, transparent);
  box-shadow: 8px 8px 0 rgba(0,0,0,.45);
  transform: skewX(var(--skew));
}
.vs-panel > * { transform: skewX(calc(var(--skew) * -1)); }
.vs-left { left: 6%; border-left: 5px solid var(--cyan); animation: vs-in-l .4s cubic-bezier(.2,1.3,.4,1) both; }
.vs-right { right: 6%; border-right: 5px solid var(--orange); text-align: right; animation: vs-in-r .4s cubic-bezier(.2,1.3,.4,1) both .12s; }
@keyframes vs-in-l { from { transform: translateX(-80vw) skewX(var(--skew)); } to { transform: translateX(0) skewX(var(--skew)); } }
@keyframes vs-in-r { from { transform: translateX(80vw) skewX(var(--skew)); } to { transform: translateX(0) skewX(var(--skew)); } }
.vs-side { font-size: 13px; font-weight: 800; letter-spacing: 6px; opacity: .6; margin-bottom: 8px; }
.vs-left .vs-side { color: var(--cyan); }
.vs-right .vs-side { color: var(--orange); }
.vs-name { font-size: 21px; font-weight: 900; font-style: italic; letter-spacing: 1px; line-height: 1.5; }
.vs-effects { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.vs-right .vs-effects { justify-content: flex-end; }
.vs-effects .effect-badge { font-size: 11px; padding: 4px 10px; }
#vs-mark {
  position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%);
  font-size: 110px; font-weight: 900; font-style: italic;
  color: var(--yellow);
  -webkit-text-stroke: 5px var(--ink);
  text-shadow: 9px 9px 0 rgba(0,0,0,.5);
  animation: word-slam .45s cubic-bezier(.2,1.5,.4,1) both .24s;
}
#launch-box {
  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  width: min(560px, 70vw); text-align: center;
  pointer-events: auto; cursor: pointer;
}
.launch-label { font-size: 17px; font-weight: 800; letter-spacing: 4px; margin-bottom: 14px; }
.launch-label b { color: var(--yellow); }
#launch-track {
  position: relative; height: 26px;
  background: rgba(18,20,28,.8);
  border: 2px solid rgba(242,237,228,.3);
  transform: skewX(var(--skew)); overflow: hidden;
}
#launch-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #17A99C, var(--cyan), var(--yellow));
}
#launch-sweet {
  position: absolute; top: 0; bottom: 0; left: 78%; width: 14%;
  background: rgba(255,210,63,.28);
  border-left: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
}
#launch-box.locked #launch-track { border-color: var(--yellow); box-shadow: 0 0 18px rgba(255,210,63,.5); }

/* ── 冲刺技能图标 ── */
#skill-dash {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%) skewX(var(--skew));
  width: 118px; padding: 10px 0 12px;
  background: color-mix(in srgb, var(--navy) 90%, transparent);
  border: 2px solid rgba(62,230,216,.5);
  text-align: center; overflow: hidden;
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
}
#skill-dash > span { display: block; transform: skewX(calc(var(--skew) * -1)); position: relative; z-index: 1; }
.skill-key { font-size: 11px; letter-spacing: 3px; color: var(--yellow); font-weight: 800; }
.skill-name { font-size: 18px; font-weight: 900; font-style: italic; letter-spacing: 6px; margin-top: 2px; }
#skill-cd {
  position: absolute; inset: 0;
  background: rgba(10,12,20,.78);
  transform-origin: bottom; transform: scaleY(0);
}
#skill-dash.ready { border-color: var(--cyan); box-shadow: 0 0 14px rgba(62,230,216,.45), 5px 5px 0 rgba(0,0,0,.4); }

/* ── 伤害数字 ── */
#dmg-layer { position: absolute; inset: 0; overflow: hidden; }
.dmg-num {
  position: absolute; transform: translate(-50%,-50%);
  font-size: 26px; font-weight: 900; font-style: italic;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  pointer-events: none; white-space: nowrap;
}
.dmg-num.on-e { color: var(--yellow); }
.dmg-num.on-p { color: #FF7B6B; }
.dmg-num.crit { font-size: 40px; color: var(--orange); }
.dmg-num.heal { color: #7BF0A8; font-size: 20px; }

/* ── 芯片槽 ── */
#chip-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 460px; }
#chip-count { opacity: .6; font-size: 11px; margin-left: 6px; }
.chip-btn {
  padding: 6px 4px; text-align: center;
  background: var(--ink); color: var(--paper);
  border: 2px solid #3A4560; cursor: pointer;
  font-size: 11px; font-weight: 700;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.chip-btn .chip-icon { display: block; font-size: 17px; margin-bottom: 2px; }
.chip-btn:hover { border-color: #5A6A90; }
.chip-btn.active {
  border-color: var(--yellow); background: #33290F; color: var(--yellow);
  box-shadow: 0 0 10px rgba(255,210,63,.3);
}
.chip-btn.locked { opacity: .35; cursor: not-allowed; }

#btn-tower {
  position: absolute; left: 300px; bottom: 40px;
  padding: 16px 34px;
  font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: 6px;
  font-family: inherit;
  color: var(--yellow); background: transparent;
  border: 3px solid var(--yellow); cursor: pointer;
  transform: skewX(var(--skew));
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  transition: transform .12s, background .12s, color .12s;
}
#btn-tower:hover {
  transform: skewX(var(--skew)) translate(-2px,-2px);
  background: var(--yellow); color: var(--ink);
}

/* ── 爬塔层数徽章 ── */
#tower-badge {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%) skewX(var(--skew));
  padding: 8px 26px;
  background: var(--yellow); color: var(--ink);
  font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: 4px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
}

/* ── 强化三选一 ── */
#screen-draft { background: rgba(8,10,18,.72); pointer-events: auto; }
#draft-title {
  position: absolute; top: 14%; left: 50%; transform: translate(-50%,-50%);
  font-size: 52px; font-weight: 900; font-style: italic; letter-spacing: 10px;
  color: var(--yellow);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 7px 7px 0 rgba(0,0,0,.5);
  animation: word-slam .4s cubic-bezier(.2,1.5,.4,1) both;
}
#draft-sub {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  font-size: 15px; letter-spacing: 6px; opacity: .7;
}
#draft-cards {
  position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 26px;
}
.perk-card {
  width: 240px; padding: 24px 22px 20px;
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  border: 2px solid #3A4560; border-top: 5px solid var(--cyan);
  cursor: pointer; text-align: left;
  font-family: inherit; color: var(--paper);
  transform: skewX(var(--skew));
  box-shadow: 8px 8px 0 rgba(0,0,0,.45);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.perk-card > * { transform: skewX(calc(var(--skew) * -1)); }
.perk-card:hover {
  transform: skewX(var(--skew)) translateY(-8px);
  border-color: var(--yellow); border-top-color: var(--yellow);
  box-shadow: 0 0 24px rgba(255,210,63,.25), 8px 12px 0 rgba(0,0,0,.45);
}
.perk-icon { display: block; font-size: 34px; margin-bottom: 10px; }
.perk-name { display: block; font-size: 19px; font-weight: 900; font-style: italic; letter-spacing: 2px; margin-bottom: 8px; }
.perk-desc { display: block; font-size: 13px; line-height: 1.6; opacity: .85; min-height: 60px; }
.perk-syn { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.perk-syn span {
  font-size: 10px; padding: 2px 8px; letter-spacing: 1px;
  background: #232B40; opacity: .7;
}
.perk-syn span.hit { background: var(--orange); color: var(--ink); opacity: 1; font-weight: 800; }
.perk-stack { display: block; margin-top: 8px; font-size: 11px; color: var(--yellow); letter-spacing: 2px; }

/* ── 状态图标行 ── */
.gauge-status { margin-top: 4px; font-size: 14px; letter-spacing: 3px; min-height: 18px; }
.gauge-status .st-shield { font-size: 11px; color: #BFE8FF; letter-spacing: 1px; }

#result-build {
  position: absolute; top: 61%; left: 50%; transform: translateX(-50%);
  font-size: 15px; letter-spacing: 2px; opacity: .85; text-align: center;
  max-width: 640px; line-height: 1.9;
}

#result-stats {
  position: absolute; top: 57%; left: 50%; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 3px; opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* ── 桌面布局·矮视口（手机虚拟视口 1180×~545）：右面板压缩密度，保证完整入画 ── */
@media (min-width: 1151px) and (max-height: 660px) {
  #assembly-panel { gap: 9px; }
  .part-group { padding: 8px 12px 9px; }
  .slot-label { font-size: 13px; margin-bottom: 6px; letter-spacing: 3px; }
  .part-btn { min-width: 84px; padding: 6px 9px; font-size: 12px; }
  .part-btn .part-tag { font-size: 9px; margin-top: 2px; }
  #chip-options { grid-template-columns: repeat(7, 1fr); }
  .chip-btn { font-size: 10px; padding: 4px 2px; }
  .chip-btn .chip-icon { font-size: 14px; margin-bottom: 1px; }
  .hud-title h1 { font-size: 44px; }
  #stats-panel { bottom: 104px; }
  #setup-panel { bottom: 104px; }
  #btn-battle { padding: 12px 44px; font-size: 22px; bottom: 32px; }
  #btn-tower { padding: 12px 26px; font-size: 18px; bottom: 32px; left: 280px; }
  #hint-keys { bottom: 8px; }
}

/* ── 竖屏提示（仅触屏设备横屏锁） ── */
#rotate-hint {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.rotate-icon { font-size: 64px; animation: rotate-wiggle 1.6s ease-in-out infinite; }
@keyframes rotate-wiggle {
  0%, 55%, 100% { transform: rotate(0); }
  20%, 35% { transform: rotate(90deg); }
}
.rotate-text {
  font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: 6px;
  color: var(--cyan);
}
.rotate-sub { font-size: 12px; letter-spacing: 3px; opacity: .5; }
@media (orientation: portrait) {
  body.touch #rotate-hint { display: flex; }
}

/* ── 触屏控制（body.touch 时启用） ── */
html, body { touch-action: none; overscroll-behavior: none; }
#touch-zone { position: absolute; inset: 0; pointer-events: none; }
body.touch #touch-zone { pointer-events: auto; }
#joy-base {
  position: absolute; width: 128px; height: 128px; border-radius: 50%;
  border: 3px solid rgba(62,230,216,.5);
  background: rgba(18,20,28,.35);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 12;
}
#joy-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(62,230,216,.75);
  box-shadow: 0 0 16px rgba(62,230,216,.5);
  transform: translate(-50%, -50%);
}
#btn-dash-touch {
  position: absolute; right: 26px; bottom: 42px;
  width: 96px; height: 96px; border-radius: 50%;
  border: 3px solid var(--yellow);
  background: rgba(18,20,28,.55);
  color: var(--yellow);
  font-size: 19px; font-weight: 900; font-style: italic; letter-spacing: 3px;
  font-family: inherit;
  pointer-events: auto; z-index: 12; overflow: hidden;
}
#btn-dash-touch span { position: relative; z-index: 1; }
#dash-cd-touch {
  position: absolute; inset: 0;
  background: rgba(10,12,20,.8);
  transform-origin: bottom; transform: scaleY(0);
}
#btn-dash-touch.ready { box-shadow: 0 0 20px rgba(255,210,63,.55); background: rgba(51,41,15,.7); }
body.touch #skill-dash { display: none; }
/* 虚拟视口(1180)会整体缩小，触屏控件按比例放大保证物理尺寸可按 */
body.touch #joy-base { width: 196px; height: 196px; }
body.touch #joy-knob { width: 78px; height: 78px; }
body.touch #btn-dash-touch { width: 140px; height: 140px; font-size: 26px; right: 40px; bottom: 56px; }

/* ── 紧凑布局：窄窗口/矮屏（含横屏手机）——组装界面改为可滚动的栅格流，
   结构与桌面一致（标题→部件→属性/模式地图→按钮），永不重叠 ── */
@media (max-width: 1150px), (max-height: 498px) {
  #screen-assembly {
    overflow-y: auto; pointer-events: auto;
    display: flex; flex-flow: row wrap; align-content: flex-start;
    gap: 12px 14px;
    padding: 16px 16px 36px;
    touch-action: pan-y;
  }
  .hud-title, #assembly-panel, #stats-panel, #setup-panel, #btn-battle, #btn-tower, #hint-keys {
    position: static; transform: none; left: auto; right: auto; top: auto; bottom: auto;
  }
  .hud-title { width: 100%; order: 0; }
  .hud-title h1 { font-size: 32px; }
  .hud-title .sub { font-size: 11px; letter-spacing: 3px; margin-top: 4px; }
  #assembly-panel { width: 100%; order: 1; display: flex; flex-flow: row wrap; gap: 10px; }
  .part-group { flex: 1 1 46%; min-width: 300px; transform: none; padding: 10px 12px; }
  .part-group > * { transform: none; }
  #chip-group { flex: 1 1 100%; }
  .part-options { flex-wrap: wrap; gap: 7px; }
  .part-btn { min-width: 0; flex: 1 1 40%; font-size: 12px; padding: 8px 6px; }
  #chip-options { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); max-width: none; }
  #stats-panel { flex: 1 1 44%; min-width: 280px; order: 2; }
  #setup-panel { flex: 1 1 48%; min-width: 300px; order: 3; }
  .setup-row { flex-wrap: wrap; }
  #btn-battle, #btn-tower {
    order: 4; flex: 1 1 46%; min-width: 240px;
    transform: skewX(var(--skew)) scale(.97);
    padding: 14px 0; font-size: 21px; text-align: center;
  }
  #hint-keys { width: 100%; order: 6; text-align: center; }
}

/* ── 小屏对战界面（窄屏或横屏手机）：HUD/VS/选卡/结算收紧 ── */
@media (max-width: 900px), (max-height: 498px) {
  /* 战斗 HUD 收紧 */
  #gauge-list { top: 12px; left: 12px; right: 12px; }
  #gauge-col-p { width: 42vw; }
  #gauge-col-e { width: 40vw; gap: 7px; }
  .gauge-name { font-size: 12px; letter-spacing: 1px; margin-bottom: 4px; }
  .gauge-track { height: 10px; }
  .gauge-rpm { font-size: 9px; margin-top: 3px; }
  #tower-badge { top: 84px; bottom: auto; font-size: 11px; padding: 6px 14px; letter-spacing: 2px; }
  #skill-dash { display: none; }   /* 小屏一律用触屏按钮位 */

  /* VS：改为纵向卡片流（停用横向滑入动画，小屏会飞出屏幕） */
  #screen-vs {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 20px 16px; gap: 8px;
  }
  .vs-panel {
    position: static; width: auto; max-height: 30vh; overflow: hidden;
    padding: 12px 16px 14px;
    transform: skewX(var(--skew)) scale(.96);
    animation: none;
  }
  .vs-name { font-size: 15px; line-height: 1.4; }
  .vs-side { margin-bottom: 4px; font-size: 11px; }
  .vs-effects { margin-top: 6px; }
  #vs-opponents .vs-opp { margin-bottom: 8px; }
  #vs-opponents .vs-name { font-size: 13px; }
  #vs-mark {
    position: static; transform: none; animation: none;
    font-size: 38px; text-align: center; line-height: 1.1;
    -webkit-text-stroke: 2px var(--ink);
    text-shadow: 4px 4px 0 rgba(0,0,0,.5);
  }
  #launch-box { bottom: 7%; width: 88vw; }
  .launch-label { font-size: 13px; letter-spacing: 2px; }
  #launch-track { height: 30px; }
  #countdown { font-size: 92px; }
  #effect-toast { font-size: 19px; padding: 8px 20px; letter-spacing: 4px; }
  #draft-title { font-size: 30px; letter-spacing: 5px; top: 9%; -webkit-text-stroke: 1.5px var(--ink); }
  #result-word { -webkit-text-stroke: 3px var(--ink); }
  #draft-sub { top: 15%; font-size: 12px; }
  #draft-cards {
    top: 20%; bottom: 4%; flex-direction: column; gap: 12px;
    overflow-y: auto; touch-action: pan-y; padding: 0 8px;
  }
  .perk-card { width: 78vw; padding: 14px 16px; }
  .perk-icon { font-size: 24px; margin-bottom: 5px; }
  .perk-name { font-size: 16px; }
  .perk-desc { font-size: 12px; min-height: 0; }
  #result-word { font-size: 58px; letter-spacing: 8px; }
  #result-desc { font-size: 13px; width: 90vw; text-align: center; }
  #result-stats { font-size: 11px; }
  #result-build { font-size: 12px; width: 90vw; top: 63%; }
  .result-actions { flex-direction: column; gap: 12px; top: 72%; width: 70vw; }
  .result-actions button { font-size: 16px; padding: 11px 0; }
  .dmg-num { font-size: 19px; }
  .dmg-num.crit { font-size: 28px; }
  #btn-dash-touch { width: 84px; height: 84px; font-size: 16px; right: 18px; bottom: 30px; }
}
/* ── 横屏手机（矮屏）：进一步压缩密度 ── */
@media (max-height: 460px) {
  .hud-title h1 { font-size: 26px; letter-spacing: 3px; }
  .hud-title .sub { display: none; }
  .part-btn { flex: 1 1 22%; }
  #chip-options { grid-template-columns: repeat(7, 1fr); }
  #countdown { font-size: 64px; }
  #vs-mark { font-size: 26px; }
  .vs-panel { max-height: 26vh; padding: 8px 14px 10px; }
  #launch-box { bottom: 4%; }
  #btn-dash-touch { width: 68px; height: 68px; font-size: 13px; right: 14px; bottom: 16px; }
  #result-word { font-size: 44px; }
  #result-desc { top: 46%; }
  #result-build { top: 56%; }
  .result-actions { flex-direction: row; top: 70%; width: auto; gap: 14px; }
  .result-actions button { padding: 10px 26px; font-size: 14px; }
  #draft-title { top: 22px; transform: translateX(-50%); font-size: 20px; letter-spacing: 4px; animation: none; -webkit-text-stroke: 1px var(--ink); }
  #draft-sub { top: 46px; font-size: 11px; }
  #draft-cards {
    top: 64px; bottom: 10px; left: 12px; right: 12px;
    transform: none; height: auto;
    flex-direction: row; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
  }
  .perk-card { width: 40vw; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; transition-duration: .01s !important; }
}