:root {
  color-scheme: dark;
  --bg: #121110;
  --panel: #1b1916;
  --line: #2f2b26;
  --line-2: #433d35;
  --text: #f1ebdd;
  --muted: #b5ab98;
  --quiet: #8b8272;
  --paper: #efe7d4;
  --paper-2: #e4d9c0;
  --ink: #1b1a17;
  --cinnabar: #b3342a;
  --cinnabar-2: #d1493c;
  --azure: #3f6f9f;
  --gold: #c9a24a;
  --brush: "Ma Shan Zheng", "STKaiti", "KaiTi", "Kaiti SC", serif;
  --heading: "Space Grotesk", "DM Sans", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --body: "DM Sans", "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  min-width: 300px;
  background:
    radial-gradient(ellipse at 85% -10%, #b3342a14, transparent 50%),
    radial-gradient(ellipse at 0% 70%, #c9a24a0a, transparent 45%),
    var(--bg);
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}

/* ---------- Top bar ---------- */
/* The bar itself is the site's shared <tipo-bar> (/tipo/tipo.css); these are the game's own buttons on it. */
.top-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.icon-btn {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #ffffff06;
  transition: background 0.2s, border-color 0.2s;
}
.icon-btn:hover {
  background: #ffffff10;
  border-color: #5a5146;
}
.icon-btn.text-btn {
  padding: 0 12px;
  font: 18px var(--brush);
  white-space: nowrap;
}
/* "Moves" is wider than 出招: a little smaller, so the shared bar still fits a phone */
html[data-lang="en"] .icon-btn.text-btn {
  font-size: 15px;
}
.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn .i-mute {
  display: none;
}
.icon-btn[aria-pressed="false"] .i-mute {
  display: block;
}
.icon-btn[aria-pressed="false"] .i-wave {
  display: none;
}
.icon-btn[aria-pressed="false"] {
  color: var(--quiet);
}

/* ---------- Layout ---------- */
.layout {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px 12px;
}
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.arena {
  position: relative;
  width: min(100%, calc((100svh - 120px) * 16 / 9));
  min-width: 288px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #0e1211;
  box-shadow: 0 30px 80px -40px #000, 0 0 0 1px #2c2822;
  container-type: size;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.stage:fullscreen {
  justify-content: center;
  background: #0b0a09;
}
.stage:fullscreen .arena {
  width: min(100vw, calc(100vh * 16 / 9));
  border-radius: 0;
}
#screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}
.pause-btn {
  position: absolute;
  z-index: 3;
  top: 16.5cqh;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: max(26px, 4.6cqh);
  height: max(26px, 4.6cqh);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1b1a17b0;
  color: var(--paper);
  opacity: 0.7;
}
.pause-btn:hover {
  opacity: 1;
}
.pause-btn svg {
  width: 60%;
  height: 60%;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.card-overlay {
  background: #0d0c0bb8;
  backdrop-filter: blur(3px);
  padding: 3cqh 3cqw;
}
.card {
  position: relative;
  width: min(92cqw, 640px);
  max-height: 100%;
  overflow: auto;
  padding: clamp(14px, 4cqh, 30px) clamp(16px, 4cqw, 34px);
  border-radius: 6px;
  background:
    linear-gradient(#ffffff0c, #ffffff00),
    var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -30px #000, inset 0 0 0 1px #00000014, inset 0 0 60px #8a6a3a22;
}
.card.narrow {
  width: min(86cqw, 400px);
}
.card h2 {
  margin: 2px 0 12px;
  font: 400 clamp(26px, 7cqh, 44px) / 1.1 var(--brush);
  letter-spacing: 0.04em;
}
.eyebrow {
  font: 600 11px var(--heading);
  letter-spacing: 0.22em;
  color: var(--cinnabar);
}
.muted {
  color: #6f6656;
}
.small {
  font-size: 13px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.stack {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: 400 20px var(--brush);
  letter-spacing: 0.08em;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.btn:hover:not(:disabled) {
  background: #1b1a1712;
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn.primary {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: var(--paper);
}
.btn.primary:hover:not(:disabled) {
  background: var(--cinnabar-2);
}
.btn.quiet {
  border-color: transparent;
  color: #6f6656;
}
.seg {
  display: inline-flex;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  overflow: hidden;
}
.seg button {
  min-width: 3.2em;
  padding: 0.28em 0.7em;
  border: 0;
  background: transparent;
  font: 400 1.05em var(--brush);
  letter-spacing: 0.05em;
}
.seg button + button {
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.seg button[aria-checked="true"] {
  background: var(--cinnabar);
  color: var(--paper);
}
.setting {
  display: flex;
  align-items: center;
  gap: 10px;
}
.setting-label {
  font: 400 1.05em var(--brush);
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  font-size: 14px;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
}
.switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #00000026;
  transition: background 0.2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px #0005;
  transition: translate 0.2s;
}
.toggle input:checked + .switch {
  background: var(--cinnabar);
}
.toggle input:checked + .switch::after {
  translate: 16px 0;
}
.toggle input:focus-visible + .switch {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
kbd {
  display: inline-block;
  min-width: 1.7em;
  margin: 1px 2px;
  padding: 1px 6px;
  border: 1px solid #1b1a1740;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fffaf0;
  font: 600 12px var(--heading);
  text-align: center;
}

/* ---------- Title ---------- */
.title {
  justify-content: space-between;
  padding: 5cqh 5cqw 4cqh;
  background:
    linear-gradient(90deg, #efe7d4f2 0%, #efe7d4d0 34%, #efe7d400 62%),
    linear-gradient(0deg, #efe7d4c0, #efe7d400 30%);
  color: var(--ink);
  align-items: flex-start;
}
.title-art {
  display: flex;
  flex-direction: column;
}
.logo {
  margin: 0;
  font: 400 26cqh / 0.95 var(--brush);
  letter-spacing: -0.04em;
  /* (the last character's tightened spacing would otherwise leave its stroke outside the box) */
  padding-right: 0.04em;
  color: var(--ink);
  text-shadow: 0.02em 0.03em 0 #1b1a1726;
}
.logo span {
  display: inline-block;
  margin-left: -0.08em;
  color: var(--cinnabar);
  transform: translateY(0.06em) rotate(4deg);
}
.sub {
  margin: 0.6cqh 0 0 0.6cqw;
  font: 600 2.3cqh var(--heading);
  letter-spacing: 0.3em;
  color: #5b5244;
}
.title-menu {
  display: grid;
  gap: 1.4cqh;
}
.title-menu button {
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  min-width: 34cqw;
  padding: 1.1cqh 1.8cqw;
  border: 0;
  border-left: 0.5cqw solid var(--ink);
  border-radius: 2px;
  background: #1b1a1708;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, translate 0.15s;
}
.title-menu button b {
  font: 400 6cqh var(--brush);
  letter-spacing: 0.06em;
}
.title-menu button span {
  font-size: max(11px, 2.3cqh);
  color: #5b5244;
}
.title-menu button:hover,
.title-menu button.focus {
  background: #1b1a1716;
  border-color: var(--cinnabar);
  translate: 0.6cqw 0;
}
.title-menu button.focus b {
  color: var(--cinnabar);
}
/* On a touch screen alone 2P has no controls: versus is off and says what it needs. */
.title-menu button .need-keys {
  display: none;
}
.title-menu button.no-2p {
  opacity: 1;
  background: #1b1a1708;
  border-color: #1b1a1738;
  translate: none;
}
.title-menu button.no-2p b {
  opacity: 0.4;
}
.title-menu button.no-2p span {
  display: none;
}
.title-menu button.no-2p span.need-keys {
  display: inline;
  color: var(--cinnabar);
}
.title-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqh 2.4cqw;
  font-size: max(12px, 2.4cqh);
}
.title-foot {
  margin: 0;
  font-size: max(11px, 2.1cqh);
  color: #5b5244;
}

/* ---------- Character select ---------- */
/* Laid out the way the arcade team fighters lay theirs: the portraits up top in two blocks with
   room between them, a small row below for both teams (the first fighters face each other across
   the VS, the rest behind them), and each side's fighter large in its own corner underneath, with
   name and style. --u is a hundredth of a 16:9 arena's height (of an upright arena's width). */
.select {
  --u: 1cqh;
  /* 2P's colour (the CPU's and the dummy's are ink grey) */
  --two: var(--azure);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head head head"
    "grid grid grid"
    "side0 teams side1"
    "side0 info side1"
    "side0 foot side1";
  align-items: center;
  column-gap: 2cqw;
  row-gap: calc(1.5 * var(--u));
  padding: calc(2.2 * var(--u)) 3cqw calc(2.2 * var(--u));
  background:
    radial-gradient(ellipse at 50% 30%, #efe7d4 0%, #e6dcc5 70%, #d8cbb0 100%);
  color: var(--ink);
}
.select:not([data-mode="versus"]) {
  --two: #3f4a52;
}
.sel-head {
  grid-area: head;
  text-align: center;
}
.sel-head h2 {
  margin: 0;
  font: 400 calc(4.4 * var(--u)) / 1 var(--brush);
  letter-spacing: 0.08em;
}
.sel-head p {
  margin: calc(0.5 * var(--u)) 0 0;
  font-size: max(11px, calc(1.9 * var(--u)));
  color: #5b5244;
}
/* The portraits: two blocks of three rows, a mounted strip each, well apart. */
.sel-grid {
  grid-area: grid;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  column-gap: 4.5cqw;
}
.sel-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1cqw;
  row-gap: 1.3cqw;
  width: 32cqw;
  padding: 0.9cqw 1.1cqw;
  border-block: 2px solid #1b1a17bf;
  background: linear-gradient(#1b1a170f, #1b1a1705);
}
.char {
  position: relative;
  padding: 0;
  border: 1.5px solid #1b1a1740;
  border-radius: 2px;
  background: #fffaf0;
  aspect-ratio: 1.25;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.char canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.char b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.1em 0 0.15em;
  background: linear-gradient(#1b1a1700, #1b1a17cc);
  color: var(--paper);
  font: 400 max(11px, calc(2.3 * var(--u))) var(--brush);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* The cursors: 1P's cinnabar brackets at the top left and bottom right corners, 2P's azure ones at
   the other two, each with its tag, so both show on one fighter. */
.char::before,
.char::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  --l: 34%;
  --w: 3px;
}
.char.c0::before {
  opacity: 1;
  background-image:
    linear-gradient(var(--cinnabar) 0 0), linear-gradient(var(--cinnabar) 0 0), linear-gradient(var(--cinnabar) 0 0), linear-gradient(var(--cinnabar) 0 0);
  background-position: left top, left top, right bottom, right bottom;
  background-size: var(--l) var(--w), var(--w) var(--l), var(--l) var(--w), var(--w) var(--l);
}
.char.c1::after {
  opacity: 1;
  background-image:
    linear-gradient(var(--two) 0 0), linear-gradient(var(--two) 0 0), linear-gradient(var(--two) 0 0), linear-gradient(var(--two) 0 0);
  background-position: right top, right top, left bottom, left bottom;
  background-size: var(--l) var(--w), var(--w) var(--l), var(--l) var(--w), var(--w) var(--l);
}
.char.c0,
.char.c1 {
  border-color: #1b1a1799;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px #000;
}
.char .cur {
  position: absolute;
  top: 0;
  z-index: 3;
  padding: 0 0.4em;
  font: 700 max(9px, calc(1.6 * var(--u))) / 1.4 var(--heading);
  color: var(--paper);
}
.char .cur.k0 {
  left: 0;
  background: var(--cinnabar);
}
.char .cur.k1 {
  right: 0;
  background: var(--two);
}
/* A fighter already in a team: its seal, in the team's colour. */
.char .who {
  position: absolute;
  bottom: 30%;
  z-index: 1;
  padding: 0 0.3em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: #fffaf0d9;
  font: 700 max(9px, calc(1.6 * var(--u))) / 1.3 var(--heading);
  rotate: -6deg;
}
.char .who.w0 {
  left: 6%;
  color: var(--cinnabar);
}
.char .who.w1 {
  right: 6%;
  color: var(--azure);
}
/* The small row in the middle: 1P's team, the VS, 2P's team. */
.sel-teams {
  grid-area: teams;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1cqw;
}
.sel-tag {
  padding: 0.15em 0.45em;
  font: 700 max(11px, calc(2 * var(--u))) var(--heading);
  color: var(--paper);
  border-radius: 2px;
}
.sel-tag.p1 {
  background: var(--cinnabar);
}
.sel-tag.p2 {
  background: var(--azure);
}
.sel-tag.cpu {
  background: #3f4a52;
}
.sel-slots {
  display: flex;
  gap: 0.6cqw;
}
.sel-slots.p1 {
  flex-direction: row-reverse;
}
.sel-slots .slot {
  position: relative;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border: 1.5px dashed #1b1a1760;
  border-radius: 3px;
  background: #fffaf060;
}
.sel-slots .slot canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.sel-slots .slot.filled {
  border-style: solid;
  border-color: var(--ink);
}
.sel-slots .slot i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  padding: 0 0.25em;
  border-radius: 2px;
  background: #fffaf0d9;
  font: 700 max(10px, calc(1.7 * var(--u))) / 1.2 var(--heading);
  font-style: normal;
}
/* 2P's team faces 1P's. */
.sel-slots.p2 .slot canvas {
  transform: scaleX(-1);
}
.sel-vs {
  padding: 0 0.5cqw;
  font: 400 calc(5.2 * var(--u)) / 1 var(--brush);
  color: var(--cinnabar);
}
/* Each side's fighter, large in its corner over a wash of its colour, facing the middle. */
.sel-side {
  grid-area: side0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(0.4 * var(--u));
  min-height: 0;
  --wash: var(--cinnabar);
}
.sel-side.right {
  grid-area: side1;
  --wash: var(--two);
}
/* Square while there's room. When the row runs short of height (an upright phone with its browser bars
   showing), the box gives some up and the fighter fits inside it whole, over a wash sized from its shorter side. */
.sel-big {
  width: min(100%, calc(31 * var(--u)));
  height: auto;
  aspect-ratio: 1;
  min-height: 0;
  object-fit: contain;
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--wash) 24%, transparent) 0 52%, transparent 100%);
}
.sel-name {
  font: 400 calc(4.8 * var(--u)) / 1 var(--brush);
  letter-spacing: 0.06em;
  min-height: 1em;
  text-align: center;
}
.sel-style {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.6em;
  min-height: 1.4em;
  font: 600 max(11px, calc(1.9 * var(--u))) var(--heading);
  color: #5b5244;
}
.sel-style .stars {
  color: var(--cinnabar);
  letter-spacing: 0.1em;
}
.sel-info {
  grid-area: info;
  align-self: start;
  font-size: max(11px, calc(1.9 * var(--u)));
  line-height: 1.45;
  text-align: center;
  color: #3e372d;
}
.sel-info b {
  display: block;
  font: 400 1.5em var(--brush);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.sel-info .bio {
  display: block;
}
.sel-info .quote {
  display: block;
  margin-top: 0.5em;
  font: 400 1.2em var(--brush);
  letter-spacing: 0.04em;
  color: #6d6252;
}
/* (a short arena keeps the room for the portraits) */
@container (max-height: 460px) {
  .sel-info .quote {
    display: none;
  }
}
/* English names run longer than two or three characters: smaller on the cards, so Thousand Faces fits, and on a
   phone's narrow cards and stage thumbnails they may take two lines */
html[data-lang="en"] .char b {
  font-size: max(9px, calc(1.8 * var(--u)));
  letter-spacing: 0;
  line-height: 1;
  white-space: normal;
}
html[data-lang="en"] .stage-list button span {
  font-size: max(8px, calc(1.5 * var(--u)));
  line-height: 1;
}
html[data-lang="en"] .stage-list button.random {
  font-size: max(9px, calc(2 * var(--u)));
}
.sel-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--u)) 2cqw;
  font-size: max(12px, calc(2.1 * var(--u)));
}
.sel-stage {
  display: flex;
  align-items: center;
  gap: 1cqw;
  min-width: 0;
}
.stage-list {
  display: flex;
  gap: 0.7cqw;
}
.stage-list button {
  position: relative;
  width: calc(10.5 * var(--u));
  height: calc(5.9 * var(--u));
  padding: 0;
  border: 2px solid #1b1a1730;
  border-radius: 3px;
  overflow: hidden;
  background: #fffaf0;
}
.stage-list button canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.stage-list button span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1b1a17a8;
  color: var(--paper);
  font: 400 max(10px, calc(1.8 * var(--u))) var(--brush);
}
.stage-list button[aria-checked="true"] {
  border-color: var(--cinnabar);
}
.stage-list button.random {
  display: grid;
  place-items: center;
  font: 400 max(13px, calc(2.6 * var(--u))) var(--brush);
}
.sel-actions {
  display: flex;
  gap: 1cqw;
}
.sel-actions .btn {
  min-height: max(32px, calc(5.6 * var(--u)));
  font-size: max(15px, calc(2.8 * var(--u)));
}
/* A short arena (a small window): the portraits keep their room and the bio and the key hints give way. */
@container (max-height: 300px) {
  .sel-info .bio,
  .sel-head p {
    display: none;
  }
  .char b {
    font-size: 9px;
    letter-spacing: 0;
  }
  html[data-lang="en"] .char b {
    font-size: 8px;
  }
}
/* An upright phone: the arena grows to the phone's height while choosing (below), the blocks turn
   three portraits wide and four deep, and the two fighters stand side by side under the teams. */
@container (orientation: portrait) {
  .select {
    --u: 1cqw;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
      "head head"
      "grid grid"
      "teams teams"
      "side0 side1"
      "info info"
      "foot foot";
    align-content: space-between;
    row-gap: 2.6cqw;
    padding: 3.5cqw 3cqw 4cqw;
  }
  .sel-head h2 {
    font-size: 6.4cqw;
  }
  /* (the keys are a keyboard's; a phone taps) */
  .sel-head p {
    display: none;
  }
  .sel-grid {
    column-gap: 4cqw;
  }
  .sel-block {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5cqw;
    row-gap: 1.8cqw;
    width: 45cqw;
    padding: 1.5cqw;
  }
  .sel-teams {
    gap: 1.6cqw;
  }
  .sel-slots {
    gap: 1.2cqw;
  }
  .sel-slots .slot {
    width: 10cqw;
    height: 10cqw;
  }
  .sel-vs {
    font-size: 7cqw;
  }
  .sel-big {
    width: min(100%, 46cqw);
  }
  .sel-name {
    font-size: 6.4cqw;
  }
  .sel-info {
    font-size: max(12px, 3.4cqw);
  }
  .sel-foot {
    gap: 3cqw;
  }
  .select .stage-list {
    gap: 1.5cqw;
  }
  .select .stage-list button {
    width: 15.5cqw;
    height: 8.7cqw;
  }
  html[data-lang="en"] .select .stage-list button span {
    font-size: max(8px, 2.2cqw);
  }
  html[data-lang="en"] .select .stage-list button.random {
    font-size: max(10px, 3cqw);
  }
}
/* A short upright arena (an iPhone in Safari, most Androids: the browser's bars take their share of the
   height): there isn't room for the bio as well, and each side names its fighter already, so the bio and
   the line give way, row and all, and the pictures take the height that's left. */
@container (orientation: portrait) and (aspect-ratio > 10 / 19) {
  .select {
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "head head"
      "grid grid"
      "teams teams"
      "side0 side1"
      "foot foot";
    row-gap: 2cqw;
    padding-block: 2.5cqw 3cqw;
  }
  .sel-info {
    display: none;
  }
}

/* While choosing on an upright phone the arena takes the screen's height under the bar, so the
   select screen above can lay out upright. */
@media (orientation: portrait) and (max-width: 600px) {
  .arena:has(#select:not([hidden])),
  .arena:has(#title:not([hidden])) {
    aspect-ratio: auto;
    height: max(540px, calc(100svh - 76px));
  }
}
/* The title on an upright phone: the name at the top, the painting the arena draws across its middle
   left clear, and the modes and settings under it, all sized by the arena's width. */
@container (orientation: portrait) {
  .title {
    align-items: stretch;
    gap: 2.4cqw;
    padding: 6cqw 5cqw 5cqw;
    /* paper over the dark bands the arena leaves above and below its 16:9 painting (28.125cqw each side of the middle) */
    background: linear-gradient(
      180deg,
      #efe7d4 calc(50% - 31cqw),
      #efe7d400 calc(50% - 24cqw),
      #efe7d400 calc(50% + 22cqw),
      #efe7d4 calc(50% + 29cqw)
    );
  }
  /* the name sits in the middle of the paper above the painting */
  .title-art {
    justify-content: center;
    height: calc(50cqh - 34cqw);
    margin-bottom: auto;
  }
  .logo {
    font-size: 24cqw;
  }
  .sub {
    margin: 1.4cqw 0 0 1cqw;
    font-size: 2.7cqw;
    letter-spacing: 0.24em;
  }
  .title-menu {
    gap: 1.8cqw;
  }
  .title-menu button {
    flex-wrap: wrap;
    column-gap: 3cqw;
    row-gap: 0.4cqw;
    min-width: 0;
    padding: 2cqw 3.4cqw;
    border-left-width: 1.2cqw;
  }
  .title-menu button:hover,
  .title-menu button.focus {
    translate: 1.2cqw 0;
  }
  .title-menu button b {
    font-size: 7cqw;
  }
  .title-menu button span {
    font-size: max(11px, 3.3cqw);
  }
  .title-opts {
    gap: 2.2cqw 5cqw;
    font-size: max(12px, 3.5cqw);
  }
  .title-foot {
    font-size: max(11px, 3cqw);
  }
}
/* A short upright phone has no room under the painting for the whole menu: the modes keep their names
   only, and the paper rises over the painting's foot so the menu stays on paper. */
@container (orientation: portrait) and (aspect-ratio > 9 / 16) {
  .title {
    gap: 1.6cqw;
    background: linear-gradient(
      180deg,
      #efe7d4 calc(50% - 31cqw),
      #efe7d400 calc(50% - 24cqw),
      #efe7d400 calc(50% + 2cqw),
      #efe7d4 calc(50% + 11cqw)
    );
  }
  .title-menu {
    gap: 1.2cqw;
  }
  .title-menu button {
    padding-block: 1.2cqw;
  }
  .title-menu button span:not(.need-keys) {
    display: none;
  }
  .title-opts {
    gap: 1.6cqw 5cqw;
  }
}

/* ---------- VS ---------- */
.vs {
  background: #121110;
}
#vsCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vs-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqh;
  color: var(--paper);
  text-align: center;
  pointer-events: none;
}
.vs-mark {
  font: 400 24cqh / 1 var(--brush);
  color: var(--cinnabar);
  text-shadow: 0 0 4cqh #000;
  animation: stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.vs-stage,
.vs-round {
  font: 400 4.2cqh var(--brush);
  letter-spacing: 0.2em;
  text-shadow: 0 0 2cqh #000;
}
@keyframes stamp {
  from {
    transform: scale(2.4) rotate(-12deg);
    opacity: 0;
  }
}

/* ---------- Result ---------- */
.result-card {
  width: min(90cqw, 560px);
}
.result-win {
  display: flex;
  align-items: center;
  gap: 16px;
}
#resultPortrait {
  width: clamp(80px, 22cqh, 140px);
  height: clamp(80px, 22cqh, 140px);
  border: 1.5px solid var(--ink);
  background: #fffaf0;
  flex-shrink: 0;
}
.result-win blockquote {
  margin: 0;
  font: 400 clamp(17px, 4cqh, 24px) / 1.4 var(--brush);
  color: #3e372d;
}
.stats {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 14px;
}
.stats th,
.stats td {
  padding: 5px 6px;
  border-bottom: 1px solid #1b1a171c;
  text-align: center;
}
.stats th:first-child,
.stats td:first-child {
  text-align: left;
  color: #6f6656;
  font-weight: 400;
}
.stats thead th {
  font: 400 17px var(--brush);
}

/* ---------- Move list & help ---------- */
.moves-card,
.help-card {
  width: min(94cqw, 760px);
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.tabs button {
  padding: 3px 9px;
  border: 1.5px solid #1b1a1740;
  border-radius: 3px;
  background: transparent;
  font: 400 18px var(--brush);
}
.tabs button[aria-selected="true"] {
  border-color: var(--cinnabar);
  background: var(--cinnabar);
  color: var(--paper);
}
.moves-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.moves-body td {
  padding: 6px 4px;
  border-bottom: 1px solid #1b1a171c;
  vertical-align: top;
}
.moves-body td:first-child {
  width: 34%;
  font: 400 18px var(--brush);
  white-space: nowrap;
}
.moves-body .cmd {
  font: 600 15px var(--heading);
  white-space: nowrap;
}
.moves-body .note {
  color: #6f6656;
  font-size: 12.5px;
}
.moves-body h3 {
  margin: 14px 0 4px;
  font: 400 20px var(--brush);
  color: var(--cinnabar);
}
.moves-body .bio {
  margin: 0 0 6px;
  color: #5b5244;
  font-size: 13.5px;
}
.moves-body .story {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-left: 3px solid #1b1a1730;
  color: #3e372d;
  font-size: 13.5px;
  line-height: 1.65;
}
.moves-body .desc {
  margin-top: 2px;
  color: #3e372d;
  font-size: 13px;
  line-height: 1.5;
}
.keys-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.keys-table th,
.keys-table td {
  padding: 5px 4px;
  border-bottom: 1px solid #1b1a171c;
  text-align: left;
}
.keys-table th {
  font: 400 16px var(--brush);
}
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.shots b {
  display: block;
  font: 400 18px var(--brush);
  color: var(--cinnabar);
}
.train-opts {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 15px;
}

/* ---------- Touch ---------- */
.touch {
  display: none;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 6px 10px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.touch.on {
  display: flex;
}
.stick-zone {
  position: relative;
  width: 132px;
  height: 132px;
  flex-shrink: 0;
}
.stick {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #efe7d440;
  background: radial-gradient(circle, #efe7d418, #efe7d408 70%);
}
.knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: #efe7d4d0;
  box-shadow: 0 4px 14px #0007;
}
.pad {
  display: grid;
  grid-template-columns: repeat(3, 62px);
  gap: 10px;
}
.t-btn {
  width: 62px;
  height: 62px;
  border: 2px solid #efe7d470;
  border-radius: 50%;
  background: #1b1a17b8;
  color: var(--paper);
  font: 400 17px var(--brush);
  touch-action: none;
}
.t-btn.on {
  background: var(--paper);
  color: var(--ink);
}
.t-btn.special {
  border-color: var(--gold);
}
.t-btn.super {
  border-color: var(--cinnabar-2);
  background: #b3342ab0;
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {
  tipo-bar,
  .foot {
    display: none;
  }
  .layout {
    padding: 0;
  }
  .arena {
    width: min(100vw, calc(100svh * 16 / 9));
    border-radius: 0;
  }
  .touch.on {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 4;
    padding: 0 calc(max(14px, env(safe-area-inset-right))) 12px calc(max(14px, env(safe-area-inset-left)));
    pointer-events: none;
    opacity: 0.85;
  }
  .touch.on .stick-zone,
  .touch.on .pad {
    pointer-events: auto;
  }
  .stick-zone {
    width: 120px;
    height: 120px;
    margin-bottom: 18px;
  }
  .pad {
    grid-template-columns: repeat(3, 54px);
    gap: 8px;
    margin-bottom: 14px;
  }
  .t-btn {
    width: 54px;
    height: 54px;
    font-size: 15px;
  }
}

/* ---------- Footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  max-width: 1680px;
  margin: 0 auto;
  padding: 10px 24px 24px;
  font: 500 11px var(--heading);
  letter-spacing: 0.08em;
  color: var(--quiet);
}

@media (max-width: 720px) {
  .layout {
    padding: 0 8px 10px;
  }
  .icon-btn {
    min-width: 36px;
    height: 36px;
  }
  .arena {
    border-radius: 8px;
  }
}
@media (max-width: 440px) {
  /* the shared bar carries five of the game's buttons beside 中 | EN: smaller ones, so the switch stays on a 360 px phone */
  .top-actions {
    gap: 4px;
  }
  .icon-btn {
    min-width: 32px;
    height: 32px;
  }
  .icon-btn svg {
    width: 18px;
    height: 18px;
  }
  .icon-btn.text-btn {
    padding: 0 5px;
    font-size: 14px;
  }
  html[data-lang="en"] .icon-btn.text-btn {
    font-size: 13px;
  }
  /* the stage thumbnails are narrow here */
  html[data-lang="en"] .stage-list button span {
    font-size: 7px;
  }
  html[data-lang="en"] .stage-list button.random {
    font-size: 8px;
  }
}
@media (max-width: 380px) {
  /* and the pad's three columns fit beside the stick */
  .pad {
    grid-template-columns: repeat(3, 54px);
    gap: 8px;
  }
  .t-btn {
    width: 54px;
    height: 54px;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vs-mark {
    animation: none;
  }
}