:root {
  font-family: Tahoma, "Microsoft YaHei", sans-serif;
  color: #e9edff;
  background: #090c18;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
button,
select {
  font: inherit;
}
button {
  color: #c9d4ff;
  background: #172665;
  border: 1px solid #5265a4;
  cursor: pointer;
  padding: 7px 15px;
}
button:hover,
button:focus-visible {
  color: white;
  background: #284392;
  border-color: #ccd8ff;
  outline: 2px solid #788ed7;
  outline-offset: 1px;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  color: #a8ff9c;
  border-color: #91c78b;
  background: #183c62;
  font-weight: bold;
}
button[hidden],
[hidden] {
  display: none !important;
}
a {
  color: #adbfff;
}
select {
  width: 100%;
  color: white;
  border: 1px solid #536298;
  background: #14204c;
  padding: 6px;
  min-height: 31px;
}
label {
  display: block;
  color: #aebde8;
  font-size: 12px;
  line-height: 1.6;
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  font-size: 22px;
  letter-spacing: 2px;
}
h2 {
  font-size: 26px;
  letter-spacing: 3px;
}
.cabinet {
  width: min(920px, 100%);
  border: 3px solid #768197;
  border-top-color: #c5cddb;
  border-left-color: #bec7d7;
  box-shadow: 0 22px 80px #0008;
  background: #101f64;
}
.titlebar {
  background: linear-gradient(90deg, #0b1745, #334b85);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 4px 10px;
  height: 31px;
  font-size: 12px;
  font-weight: bold;
}
.titlebar div {
  display: flex;
  gap: 4px;
}
.titlebar button {
  padding: 0;
  width: 24px;
  height: 22px;
  color: #111;
  background: #afb9cd;
  border: 2px outset #d5dce7;
}
.screen {
  position: relative;
  aspect-ratio: 794/550;
  overflow: hidden;
  background: #11216c;
}
.page {
  position: absolute;
  inset: 0;
}
.home {
  background: radial-gradient(ellipse at 50% 38%, #1c3589, #11216c 64%);
}
.game-title {
  position: absolute;
  top: 9%;
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 3px 4px #07113d;
}
.game-title > span {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(32px, 5.8vw, 66px);
  font-weight: bold;
  letter-spacing: -3px;
}
.game-title strong {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(52px, 8vw, 92px);
  margin-left: 10px;
}
.game-title p {
  font-size: 12px;
  color: #a1b4ec;
  letter-spacing: 5px;
}
.main-menu {
  position: absolute;
  top: 37%;
  left: 31%;
  width: 38%;
  padding: 12px 15px;
  border: 3px ridge #6579be;
  background: #182c7b;
  box-shadow: 3px 4px 0 #080d31;
}
.main-menu button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  padding: 8px 4px;
  background: transparent;
  font-size: 16px;
  letter-spacing: 2px;
}
.main-menu button:hover {
  background: #263e92;
  color: #aaff92;
}
.main-menu small {
  font: 9px Tahoma;
  letter-spacing: 0.5px;
  color: #788fd5;
}
.home-credits {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  font: 11px/1.7 Tahoma;
  color: #7f94d2;
}
.home-credits span:last-child {
  text-align: right;
}
.setup {
  padding: 19px 23px;
  background: linear-gradient(#142570, #101c50);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.section-heading h1 {
  color: #d2ddff;
}
.selection-content {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 20px;
}
.eyebrow {
  font: bold 10px Tahoma;
  letter-spacing: 2px;
  color: #92a5df;
  margin-bottom: 10px;
}
.roster {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.roster button {
  padding: 3px;
  background: #0c163e;
  border: 2px solid #263c7d;
  position: relative;
  min-width: 0;
  line-height: 1;
}
.roster img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  image-rendering: pixelated;
  background: #000;
}
.roster span {
  display: block;
  font: bold 10px Tahoma;
  color: #bfcbee;
  margin: 5px 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster button.selected {
  border-color: #9ff486;
  background: #2f6559;
  box-shadow: 0 0 0 1px #9ff486;
}
.roster button.selected:after {
  content: "1P";
  position: absolute;
  top: 4px;
  left: 3px;
  color: #aaff92;
  font: bold 10px Tahoma;
  text-shadow: 1px 1px black;
}
.setup-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portrait {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 6px;
}
.portrait img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: black;
  border: 2px solid #6885c4;
  image-rendering: pixelated;
}
.portrait strong {
  font-size: 19px;
}
.check {
  display: flex;
  align-items: center;
  gap: 5px;
}
.selection-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #344981;
}
.selection-footer p {
  font-size: 11px;
  line-height: 1.8;
  color: #91a7e1;
  max-width: 75%;
}
.selection-footer button {
  white-space: nowrap;
  font-size: 17px;
}
.settings {
  padding: 38px 70px;
}
.settings p {
  font-size: 12px;
  line-height: 2;
  color: #9cafe7;
  margin: 13px 0;
}
#key-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 30px;
  margin: 25px 0;
}
#key-settings label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}
#key-settings button {
  min-width: 100px;
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
#key-error {
  color: #ff9999;
  min-height: 24px;
}
.gameplay {
  background: #000;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* pixelated 只有在整数倍缩放下才是对的：非整数倍会把源像素映射成宽窄不一的块，
   精灵每移动一像素、取整边界就跳一次，在像素画上表现为频闪（全屏后比例变了就不闪，
   正是这个原因）。所以只在非整数倍时交给浏览器平滑插值，整数倍仍保持锐利。 */
.gameplay.smooth-scale canvas {
  image-rendering: auto;
}
.hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  background: linear-gradient(#10235bf5, #111f58dd);
}
.fighter-hud {
  padding: 6px 8px;
  display: flex;
  gap: 6px;
  border: 1px solid #2d4688;
  min-width: 0;
}
.fighter-hud img {
  width: 32px;
  height: 36px;
  object-fit: contain;
  background: #070d29;
  image-rendering: pixelated;
}
.fighter-hud > div {
  flex: 1;
  min-width: 0;
}
.fighter-hud strong {
  font: bold 10px Tahoma;
  display: block;
  margin-bottom: 4px;
  color: #aabce8;
}
.fighter-hud.human strong {
  color: #a9ff89;
}
.meter {
  height: 7px;
  background: #500f23;
  margin-bottom: 3px;
  border: 1px solid #8393b24f;
}
.meter i {
  display: block;
  height: 100%;
  background: #f25159;
}
.meter.mp {
  background: #0c1646;
}
.meter.mp i {
  background: #5a78ff;
}
.stage-banner {
  position: absolute;
  top: 22%;
  left: 18px;
  color: #e6f0ff;
  font: bold 12px Tahoma;
  text-shadow: 1px 2px black;
}
.go {
  position: absolute;
  right: 25px;
  top: 39%;
  font: bold italic 30px Tahoma;
  color: #ffda72;
  text-shadow: 2px 3px #502205;
  animation: blink 1s steps(2) infinite;
}
#game-tools {
  position: absolute;
  bottom: 10px;
  right: 10px;
  opacity: 0.7;
}
#game-tools button {
  font-size: 10px;
  padding: 4px 8px;
}
.shade {
  position: absolute;
  inset: 0;
  background: #020719b0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.dialog {
  background: #14296e;
  border: 4px ridge #6b81b6;
  box-shadow: 4px 5px 0 #0007;
  width: min(440px, 85%);
  padding: 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dialog h2 {
  color: #d5e8ff;
}
.dialog p {
  font-size: 13px;
  line-height: 1.8;
  color: #b0bee8;
}
.dialog.result {
  width: min(530px, 90%);
}
.result h2 {
  color: #aaff92;
}
.result table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.result td,
.result th {
  padding: 6px;
  border-bottom: 1px solid #364b85;
  text-align: right;
}
.result td:first-child,
.result th:first-child {
  text-align: left;
}
progress {
  width: 100%;
  accent-color: #9cafec;
  height: 10px;
}
footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 10px;
  color: #93a6d5;
  background: #111a39;
  border-top: 2px ridge #485474;
  gap: 12px;
}
#status {
  color: #a4cf91;
}
.diagnostics {
  font-size: 10px;
  background: #0f1730;
  color: #8998bc;
  padding: 7px 10px;
}
.diagnostics summary {
  cursor: pointer;
}
.diagnostics output {
  white-space: pre-wrap;
  font: 10px/1.6 monospace;
  display: block;
  padding: 8px 0;
}
.diagnostics p {
  line-height: 1.7;
}
.backgroundScroll {
  display: none;
}
/* 触屏虚拟按键：覆盖在战斗画面上，不挤压 794x550 的原始画面。 */
#touch-controls {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  touch-action: none;
  pointer-events: none;
  z-index: 5;
}
#touch-controls .dpad,
#touch-controls .actions {
  pointer-events: auto;
}
#touch-controls .dpad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 52px);
  gap: 4px;
}
#touch-controls .actions {
  display: grid;
  grid-template-columns: repeat(2, 64px);
  grid-template-rows: repeat(2, 64px);
  gap: 8px;
  align-items: end;
}
#touch-controls .actions button:nth-child(1) {
  grid-area: 2 / 1;
}
#touch-controls .actions button:nth-child(2) {
  grid-area: 1 / 2;
}
#touch-controls .actions button:nth-child(3) {
  grid-area: 2 / 2;
}
#touch-controls button {
  border-radius: 8px;
  user-select: none;
  touch-action: none;
  font-size: 18px;
  color: #dbe4ff;
  background: #16244fcc;
  border: 1px solid #6f82bfaa;
  backdrop-filter: blur(2px);
}
#touch-controls button.held {
  background: #3a5ac0dd;
  border-color: #cddafc;
}
#touch-controls .dpad-center {
  background: transparent;
  border-color: transparent;
}
#touch-controls .actions button {
  font-size: 20px;
  font-weight: bold;
}
#touch-controls .actions button[data-dir="att"] {
  color: #ffbb9a;
  border-color: #b68886aa;
}
#touch-controls .actions button[data-dir="jump"] {
  color: #a8ff9c;
  border-color: #91c78baa;
}
#cabinet:fullscreen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #070b16;
  border: 0;
}
#cabinet:fullscreen .titlebar,
#cabinet:fullscreen footer {
  width: 100%;
}
#cabinet:fullscreen .screen {
  height: calc(100dvh - 82px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 794/550;
}
#cabinet:fullscreen .diagnostics {
  display: none;
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}
@media (max-width: 650px) {
  body {
    padding: 0;
    align-items: flex-start;
  }
  .cabinet {
    border-width: 1px;
    margin-top: env(safe-area-inset-top);
  }
  .screen {
    aspect-ratio: 794/650;
  }
  .game-title {
    top: 8%;
  }
  .main-menu {
    left: 23%;
    width: 54%;
    top: 31%;
    padding: 8px;
  }
  .main-menu button {
    font-size: 13px;
    padding: 7px;
  }
  .main-menu small {
    font-size: 8px;
  }
  .home-credits {
    font-size: 8px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .setup {
    padding: 10px;
  }
  .section-heading {
    margin-bottom: 10px;
  }
  h1 {
    font-size: 16px;
  }
  .selection-content {
    grid-template-columns: 1fr 115px;
    gap: 10px;
  }
  .roster {
    gap: 3px;
  }
  .roster span {
    font-size: 8px;
    margin: 3px 0;
  }
  .roster button {
    border-width: 1px;
    padding: 1px;
  }
  .setup-options {
    gap: 4px;
  }
  .portrait img {
    width: 36px;
    height: 36px;
  }
  .portrait strong {
    font-size: 12px;
  }
  .portrait {
    gap: 6px;
  }
  label {
    font-size: 9px;
  }
  select {
    font-size: 10px;
    padding: 3px;
    min-height: 24px;
  }
  .selection-footer {
    margin-top: 8px;
    padding-top: 6px;
  }
  .selection-footer p {
    font-size: 9px;
  }
  .selection-footer button {
    font-size: 12px;
    padding: 7px;
  }
  .settings {
    padding: 20px;
  }
  .settings p {
    font-size: 10px;
  }
  .settings #key-settings {
    gap: 8px;
    margin: 12px 0;
  }
  .settings #key-settings label {
    font-size: 11px;
  }
  .settings #key-settings button {
    min-width: 62px;
    font-size: 10px;
  }
  .fighter-hud {
    padding: 3px;
    gap: 3px;
  }
  .fighter-hud img {
    width: 20px;
    height: 24px;
  }
  .fighter-hud strong {
    font-size: 8px;
    margin-bottom: 2px;
  }
  .meter {
    height: 5px;
    margin-bottom: 2px;
  }
  footer {
    font-size: 8px;
  }
  #key-hint {
    max-width: 65%;
    text-align: right;
  }
  .dialog {
    gap: 8px;
    padding: 16px;
  }
  .dialog h2 {
    font-size: 20px;
  }
  .dialog p {
    font-size: 11px;
  }
  .gameplay canvas {
    object-fit: contain;
  }
  .stage-banner {
    font-size: 10px;
  }
  .titlebar {
    font-size: 10px;
  }
  .result td,
  .result th {
    padding: 4px;
  }
  .eyebrow {
    font-size: 8px;
  }
}
/* Keep the original 794:550 battle viewport and its 128px status panel. */
.screen:has(#play:not([hidden])) {
  aspect-ratio: 794/550;
}
.hud {
  min-height: 23.27%;
  align-content: start;
}
.fighter-hud {
  min-height: 53px;
}
.gameplay canvas {
  object-fit: fill;
}
@media (max-width: 650px) {
  .fighter-hud {
    min-height: 32px;
  }
  .stage-banner {
    top: 25%;
  }
}

/* 原版菜单画布：按原始 794x550 渲染，整体缩放到屏幕区域。 */
.menu-screen {
  background: #000;
}
.menu-screen canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: manipulation;
  cursor: default;
}

/* 原版 HUD / 暂停 / 结算叠加层，与战斗画面同为 794x550。 */
.gameplay .overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}


/* 视口不够高时按高度收缩，保持 794x550 比例，任何设备都不出现竖向溢出。 */
@media (max-height: 780px) {
  body {
    padding: 6px;
  }
  .cabinet {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 按可用高度反推宽度，避免 width:auto 在绝对定位子元素下塌成 0。 */
    width: min(920px, 100%, calc((100dvh - 96px) * 794 / 550));
  }
  .titlebar,
  footer,
  .diagnostics {
    align-self: stretch;
  }
  .screen {
    width: 100%;
    aspect-ratio: 794/550;
  }
  .diagnostics {
    display: none;
  }
}

/* 手机与触屏：机身铺满视口，横屏时画面按 794x550 的比例尽量放大，虚拟按键覆盖其上。 */
@media (pointer: coarse) {
  body {
    padding: 0;
    align-items: stretch;
  }
  .cabinet {
    width: 100%;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100dvh;
    background: #050914;
    margin: 0 auto;
  }
  .titlebar,
  footer {
    align-self: stretch;
  }
  .titlebar {
    padding-top: env(safe-area-inset-top);
    height: auto;
    font-size: 11px;
  }
  footer {
    font-size: 10px;
  }
  .diagnostics {
    display: none;
  }
  .screen {
    width: 100%;
  }
}
@media (pointer: coarse) and (orientation: landscape) {
  .cabinet {
    width: min(100%, calc((100dvh - 52px) * 794 / 550));
  }
  .screen {
    width: 100%;
    aspect-ratio: 794/550;
  }
  #touch-controls .dpad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
  }
  #touch-controls .actions {
    grid-template-columns: repeat(2, 56px);
    grid-template-rows: repeat(2, 56px);
  }
}
/* 竖屏提示转横屏，原版是 794x550 的横向画面。 */
#rotate-hint {
  display: none;
}
@media (pointer: coarse) and (orientation: portrait) {
  #rotate-hint {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: #050914ee;
    color: #c9d4ff;
    font-size: 15px;
    line-height: 1.8;
    z-index: 30;
  }
}