/* Character select (js/screens/select.js): an arcade select screen on the pixel kit
   (css/pixel.css). The two picks stand big on their colours at either side, turned toward
   each other; the roster is a dark wall of heads between them; VS and the map under it.
   Every piece of pixel art here is a canvas the screen sizes to whole device pixels, so this
   file only places boxes. DESIGN.md is the contract: Jersey 10, ink edges, hard drops, gold
   for "you are here", one red LOCK IN per player. */
body[data-screen="select"] { background: var(--sky1); }
body[data-screen="select"] #app { background: var(--sky-bands, var(--sky2)); background-color: var(--sky2); }

.cs-screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: calc(var(--px) * 4);
  row-gap: calc(var(--px) * 3);
  padding: calc(var(--px) * 3) calc(var(--px) * 5) calc(var(--px) * 5);
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1.1;
  color: var(--ink);
  /* diagonal speed lines over the sky, hard edged (a pattern, not a gradient) */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M0 0h8v1H0zM31 0h1v1h-1zM0 1h7v1H0zM30 1h2v1h-2zM0 2h6v1H0zM29 2h3v1h-3zM0 3h5v1H0zM28 3h4v1h-4zM0 4h4v1H0zM27 4h5v1h-5zM0 5h3v1H0zM26 5h6v1h-6zM0 6h2v1H0zM25 6h7v1h-7zM0 7h1v1H0zM24 7h8v1h-8zM23 8h8v1h-8zM22 9h8v1h-8zM21 10h8v1h-8zM20 11h8v1h-8zM19 12h8v1h-8zM18 13h8v1h-8zM17 14h8v1h-8zM16 15h8v1h-8zM15 16h8v1h-8zM14 17h8v1h-8zM13 18h8v1h-8zM12 19h8v1h-8zM11 20h8v1h-8zM10 21h8v1h-8zM9 22h8v1H9zM8 23h8v1H8zM7 24h8v1H7zM6 25h8v1H6zM5 26h8v1H5zM4 27h8v1H4zM3 28h8v1H3zM2 29h8v1H2zM1 30h8v1H1zM0 31h8v1H0z'/%3E%3C/svg%3E") 0 0 / calc(var(--px) * 32) calc(var(--px) * 32);
}
.cs-screen *, .cs-screen *::before, .cs-screen *::after { border-radius: 0 !important; box-sizing: border-box; }
.cs-screen canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.cs-screen .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the top: back, the title, the mode, the CPU level */
.cs-top { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--fp) * 6); min-width: 0; }
.cs-back.px-btn { gap: calc(var(--fp) * 3); font-size: var(--t1); min-height: calc(var(--fp) * 18); padding-inline: calc(var(--fp) * 5) calc(var(--fp) * 6); }
.cs-back-arrow { display: block; width: calc(var(--fp) * 5); height: calc(var(--fp) * 5); margin-top: calc(var(--fp) * -1); fill: currentColor; }
.cs-title { margin: 0 auto 0 calc(var(--fp) * 2); font-size: var(--t2); white-space: nowrap; }
.cs-mode.px-badge { font-size: var(--t1); }
.cs-level { display: flex; align-items: center; gap: calc(var(--fp) * 3); padding: var(--fp) calc(var(--fp) * 4) 0; min-height: calc(var(--fp) * 18); border: var(--fp) solid var(--ink); background: var(--night); color: var(--paper); box-shadow: 0 var(--fp) 0 var(--ink); }
.cs-level[hidden] { display: none; }
.cs-level-label { color: var(--stone); }
.cs-level-name { min-width: 5ch; text-align: center; text-transform: uppercase; color: var(--gold); }
.cs-level-dots { display: flex; gap: var(--fp); }
.cs-level-dots i { width: calc(var(--fp) * 4); height: calc(var(--fp) * 6); border: var(--fp) solid var(--paper); background: transparent; }
.cs-level-dots i.on { background: var(--gold); border-color: var(--gold); }
.cs-level-btn.px-btn, .cs-map-btn.px-btn { min-height: calc(var(--fp) * 14); padding: 0 calc(var(--fp) * 3); }
.cs-level-btn svg, .cs-map-btn svg { display: block; width: calc(var(--fp) * 4); height: calc(var(--fp) * 7); fill: currentColor; }

/* ---- the stands */
.cs-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--fp) * 6); min-width: 0; min-height: 0; }
.cs-side-1 { grid-column: 1; }
.cs-side-2 { grid-column: 3; }
.cs-stand {
  position: relative;
  min-height: 0;
  border: var(--fp) solid var(--ink);
  box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' fill-opacity='.13' d='M0 0h5v1h-5zM15 0h1v1h-1zM0 1h4v1h-4zM14 1h2v1h-2zM0 2h3v1h-3zM13 2h3v1h-3zM0 3h2v1h-2zM12 3h4v1h-4zM0 4h1v1h-1zM11 4h5v1h-5zM10 5h6v1h-6zM9 6h6v1h-6zM8 7h6v1h-6zM7 8h6v1h-6zM6 9h6v1h-6zM5 10h6v1h-6zM4 11h6v1h-6zM3 12h6v1h-6zM2 13h6v1h-6zM1 14h6v1h-6zM0 15h6v1h-6z'/%3E%3C/svg%3E") 0 0 / calc(var(--fp) * 16) calc(var(--fp) * 16),
    var(--hero, var(--night));
  clip-path: polygon(calc(var(--fp) * 2) 0, calc(100% - var(--fp) * 2) 0, calc(100% - var(--fp) * 2) var(--fp), calc(100% - var(--fp)) var(--fp), calc(100% - var(--fp)) calc(var(--fp) * 2), 100% calc(var(--fp) * 2), 100% calc(100% + var(--fp) * 2), 0 calc(100% + var(--fp) * 2), 0 calc(var(--fp) * 2), var(--fp) calc(var(--fp) * 2), var(--fp) var(--fp), calc(var(--fp) * 2) var(--fp));
}
/* the floor they stand on */
.cs-stand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--fp) * 12);
  border-top: var(--fp) solid var(--ink);
  background: color-mix(in srgb, var(--hero, var(--night)) 56%, var(--ink));
  box-shadow: inset 0 var(--fp) 0 color-mix(in srgb, var(--hero, var(--night)) 78%, var(--paper));
  pointer-events: none;
}
.cs-tag.px-badge { flex: none; font-size: var(--t15); min-height: calc(var(--fp) * 16); padding-inline: calc(var(--fp) * 5); color: var(--paper); }
.cs-tag[hidden] { display: none; }
.cs-tag.is-p1 { background: var(--p1); }
.cs-tag.is-p2 { background: var(--p2); }
.cs-namebox { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: calc(var(--fp) * 3); padding: calc(var(--fp) * 4) calc(var(--fp) * 4) 0; pointer-events: none; }
.cs-side-2 .cs-namebox { flex-direction: row-reverse; }
/* the lab (or BOSS) sits on the floor, in the corner away from the middle */
.cs-labrow { position: absolute; z-index: 2; left: calc(var(--fp) * 4); right: calc(var(--fp) * 4); bottom: calc(var(--fp) * 1); display: flex; flex-wrap: wrap; gap: calc(var(--fp) * 3); pointer-events: none; }
.cs-side-2 .cs-labrow { justify-content: flex-end; }
.cs-lab.px-badge { color: var(--paper); background: color-mix(in srgb, var(--hero, var(--night)) 70%, var(--ink)); }
.cs-art { position: absolute; z-index: 1; inset: 0; }
/* the hero stands toward the middle of the screen, turned to face the rival */
.cs-hero { position: absolute; bottom: calc(var(--fp) * 4); }
.cs-side-1 .cs-hero { right: max(0px, calc(50% - var(--hero-w, 136px) / 2 - var(--fp) * 16)); }
.cs-side-2 .cs-hero { left: max(0px, calc(50% - var(--hero-w, 136px) / 2 - var(--fp) * 16)); }
.cs-art-note { position: absolute; inset: 0 0 calc(var(--fp) * 12); display: grid; place-items: center; }
.cs-big-q { display: block; }
.cs-ready {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--fp) * 16);
  transform: translateX(-50%);
  padding: calc(var(--fp) * 2) calc(var(--fp) * 8) 0;
  border: var(--fp) solid var(--ink);
  background: var(--gold);
  box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--gold-deep);
  font-size: var(--t15);
  line-height: 1.1;
}
.cs-ready[hidden] { display: none; }
.cs-side.is-locked .cs-stand { box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink), inset 0 0 0 var(--fp) var(--gold); }

/* the road ahead (Arcade) */
.cs-ladder { list-style: none; margin: 0; padding: calc(var(--fp) * 4); display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--fp) * 4); align-content: center; justify-content: center; }
.cs-rung { display: grid; justify-items: center; gap: calc(var(--fp) * 2); color: var(--paper); text-transform: uppercase; }
.cs-rung-q { display: grid; place-items: center; width: calc(var(--fp) * 22); height: calc(var(--fp) * 22); border: var(--fp) solid var(--ink); background: var(--plum); color: var(--stone); font-size: var(--t15); box-shadow: 0 var(--fp) 0 var(--ink); }
.cs-rung-art { border: var(--fp) solid var(--ink); box-shadow: 0 var(--fp) 0 var(--ink), 0 0 0 calc(var(--fp) * 2) var(--gold); }
.cs-rung small { font-size: var(--t1); }

/* the info window under a stand */
.cs-info {
  position: relative;
  display: grid;
  gap: calc(var(--fp) * 4);
  align-content: start;
  padding: calc(var(--fp) * 5) calc(var(--fp) * 6) calc(var(--fp) * 6);
  border: var(--fp) solid var(--ink);
  border-bottom-width: calc(var(--fp) * 3);
  background: var(--cloud);
  box-shadow: inset 0 calc(var(--fp) * -2) 0 var(--cloud-shade);
  clip-path: polygon(calc(var(--fp) * 2) 0, calc(100% - var(--fp) * 2) 0, calc(100% - var(--fp) * 2) var(--fp), calc(100% - var(--fp)) var(--fp), calc(100% - var(--fp)) calc(var(--fp) * 2), 100% calc(var(--fp) * 2), 100% calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp)), calc(100% - var(--fp) * 2) calc(100% - var(--fp)), calc(100% - var(--fp) * 2) 100%, calc(var(--fp) * 2) 100%, calc(var(--fp) * 2) calc(100% - var(--fp)), var(--fp) calc(100% - var(--fp)), var(--fp) calc(100% - var(--fp) * 2), 0 calc(100% - var(--fp) * 2), 0 calc(var(--fp) * 2), var(--fp) calc(var(--fp) * 2), var(--fp) var(--fp), calc(var(--fp) * 2) var(--fp));
}
.cs-info p { margin: 0; }
.cs-stats { display: grid; gap: calc(var(--fp) * 2); }
.cs-stat { display: grid; grid-template-columns: calc(var(--fp) * 16) minmax(0, 1fr); align-items: center; gap: calc(var(--fp) * 3); }
.cs-stat span { color: var(--slate); line-height: 1; padding-top: var(--fp); }
.cs-stat i { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--fp); }
.cs-stat b { height: calc(var(--fp) * 5); border: var(--fp) solid var(--ink); background: var(--paper); }
.cs-stat.is-pow b.on { background: var(--p1); box-shadow: inset 0 var(--fp) 0 #ff8a8a; }
.cs-stat.is-spd b.on { background: var(--gold); box-shadow: inset 0 var(--fp) 0 var(--gold-hi); }
.cs-stat.is-def b.on { background: var(--grass3); box-shadow: inset 0 var(--fp) 0 var(--grass1); }
.cs-skill { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--fp) * 4); align-items: center; padding: calc(var(--fp) * 3) calc(var(--fp) * 4) calc(var(--fp) * 3) calc(var(--fp) * 3); border: var(--fp) solid var(--ink); border-left: calc(var(--fp) * 3) solid var(--skill); background: var(--paper); box-shadow: 0 var(--fp) 0 var(--ink); }
.cs-prop { width: calc(var(--fp) * 14); height: calc(var(--fp) * 14); }
.cs-skill b { text-transform: uppercase; font-size: var(--t15); line-height: 1; }
.cs-skill p { line-height: 1; }
.cs-kind.px-badge { vertical-align: calc(var(--fp) * 2); min-height: calc(var(--fp) * 10); padding: var(--fp) calc(var(--fp) * 3) 0; margin-left: calc(var(--fp) * 2); }
.cs-skill-desc { display: block; margin-top: calc(var(--fp) * 2); color: var(--plum); line-height: 1.05; }
.cs-super { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--fp) * 2); text-transform: uppercase; }
.cs-super small { color: var(--slate); font-size: var(--t1); margin-left: calc(var(--fp) * 2); }
.cs-screen kbd {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--fp) * 10);
  height: calc(var(--fp) * 10);
  padding: var(--fp) calc(var(--fp) * 2) 0;
  border: var(--fp) solid var(--ink);
  background: var(--paper);
  box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--stone);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  color: var(--ink);
}
.cs-actions { display: grid; gap: calc(var(--fp) * 3); }
.cs-lock.px-btn { width: 100%; min-height: calc(var(--fp) * 24); font-size: var(--t2); }
.cs-hint { display: flex; justify-content: center; align-items: center; gap: calc(var(--fp) * 2); color: var(--slate); }
.cs-note { color: var(--plum); }
.cs-side.is-ladder .cs-info, .cs-side.is-waiting .cs-info { align-content: center; }

/* ---- the middle: the wall of heads, VS, the map */
.cs-center { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--fp) * 5); min-height: 0; }
.cs-wall {
  padding: calc(var(--fp) * 5);
  border: var(--fp) solid var(--ink);
  background: var(--night);
  box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink), inset 0 calc(var(--fp) * -2) 0 var(--ink);
  clip-path: polygon(calc(var(--fp) * 2) 0, calc(100% - var(--fp) * 2) 0, calc(100% - var(--fp) * 2) var(--fp), calc(100% - var(--fp)) var(--fp), calc(100% - var(--fp)) calc(var(--fp) * 2), 100% calc(var(--fp) * 2), 100% calc(100% + var(--fp) * 2), 0 calc(100% + var(--fp) * 2), 0 calc(var(--fp) * 2), var(--fp) calc(var(--fp) * 2), var(--fp) var(--fp), calc(var(--fp) * 2) var(--fp));
}
.cs-grid { display: grid; grid-template-columns: repeat(5, var(--tile, 56px)); gap: calc(var(--fp) * 3); }
.cs-tile {
  appearance: none;
  position: relative;
  width: var(--tile, 56px);
  height: var(--tile, 56px);
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--plum);
  cursor: pointer;
  box-shadow: 0 0 0 var(--fp) var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.cs-tile canvas { width: 100%; height: 100%; }
.cs-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (hover: hover) { .cs-tile:hover::after { box-shadow: inset 0 0 0 var(--fp) var(--paper); } }
.cs-tile:focus-visible { outline: none; }
.cs-tile:focus-visible::after { box-shadow: inset 0 0 0 calc(var(--fp) * 2) var(--gold); }
/* the cursors: a thick frame in the player's colour, their tag on the top edge; both on one
   tile: 1P outside, 2P inside */
.cs-tile.is-p1, .cs-tile.is-p2 { z-index: 2; }
.cs-tile.is-p1 { box-shadow: 0 0 0 var(--fp) var(--ink), 0 0 0 calc(var(--fp) * 3) var(--p1), 0 0 0 calc(var(--fp) * 4) var(--ink); }
.cs-tile.is-p2::after { box-shadow: inset 0 0 0 calc(var(--fp) * 2) var(--p2), inset 0 0 0 calc(var(--fp) * 3) var(--ink); }
.cs-tile.is-p2:not(.is-p1) { box-shadow: 0 0 0 var(--fp) var(--ink), 0 0 0 calc(var(--fp) * 3) var(--p2), 0 0 0 calc(var(--fp) * 4) var(--ink); }
.cs-tile.is-p2:not(.is-p1)::after { box-shadow: none; }
.cs-tile.is-p1::before, .cs-tile.is-p2::before {
  position: absolute;
  z-index: 3;
  top: calc(var(--fp) * -10);
  padding: var(--fp) calc(var(--fp) * 2) 0;
  border: var(--fp) solid var(--ink);
  color: var(--paper);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.cs-tile.is-p1::before { content: attr(data-tag1); left: calc(var(--fp) * -4); background: var(--p1); }
.cs-tile.is-p2:not(.is-p1)::before { content: attr(data-tag2); right: calc(var(--fp) * -4); background: var(--p2); }
.cs-tile.is-p1.is-p2::before { content: attr(data-tag1) " " attr(data-tag2); background: linear-gradient(90deg, var(--p1) 50%, var(--p2) 50%); }
.cs-tile.is-lock1, .cs-tile.is-lock2 { animation: none; }
/* a boss wears a star (a pixel star, gold; the final boss a bigger red one) */
.cs-star { position: absolute; z-index: 2; top: calc(var(--fp) * 2); right: calc(var(--fp) * 2); width: calc(var(--fp) * 11); height: calc(var(--fp) * 11); border: var(--fp) solid var(--ink); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23231d33' d='M3 0h1v1h1v1h2v1h-1v1h-1v1h1v2h-1v-1h-1v-1h-1v1h-1v1h-1v-2h1v-1h-1v-1h-1v-1h2v-1h1z'/%3E%3C/svg%3E") 0 0 / 100% 100%; box-shadow: 0 var(--fp) 0 var(--ink); }
.cs-star.is-final { background-color: var(--red-hi); }
.cs-vs canvas { margin: 0 auto; }
.cs-map { display: flex; align-items: center; gap: calc(var(--fp) * 3); }
.cs-map[hidden] { display: none; }
.cs-map-name { display: grid; justify-items: center; min-width: calc(var(--fp) * 80); padding: calc(var(--fp) * 2) calc(var(--fp) * 5) var(--fp); border: var(--fp) solid var(--ink); background: var(--paper); box-shadow: 0 var(--fp) 0 var(--ink); text-transform: uppercase; }
.cs-map-name small { color: var(--slate); font-size: var(--t1); line-height: 1; }
.cs-map-name b { font-size: var(--t15); line-height: 1; white-space: nowrap; }
.cs-help { margin: 0; color: var(--paper); text-shadow: 0 var(--fp) 0 var(--ink), var(--fp) 0 0 var(--ink), calc(var(--fp) * -1) 0 0 var(--ink), 0 calc(var(--fp) * -1) 0 var(--ink); text-align: center; }

/* ---- FIGHT! */
.cs-fight { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.cs-fight[hidden] { display: none; }
.cs-fight canvas { animation: cs-slam .26s steps(4, end) both; }
@keyframes cs-slam { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cs-fight canvas { animation: none; } }

/* ---- short landscape screens (phones on their side): no stats, no skill text */
@media (max-height: 560px) and (orientation: landscape) {
  .cs-screen { row-gap: calc(var(--fp) * 3); padding: calc(var(--fp) * 3) calc(var(--fp) * 6) calc(var(--fp) * 5); }
  .cs-title { font-size: var(--t15); }
  .cs-help, .cs-stats, .cs-skill-desc, .cs-super, .cs-hint, .cs-note { display: none; }
  .cs-info { gap: calc(var(--fp) * 3); padding: calc(var(--fp) * 3) calc(var(--fp) * 4) calc(var(--fp) * 4); }
  .cs-skill { padding: calc(var(--fp) * 2) calc(var(--fp) * 3); }
  .cs-skill b { font-size: var(--t1); }
  .cs-lock.px-btn { min-height: max(44px, calc(var(--fp) * 18)); font-size: var(--t15); }
  .cs-tag.px-badge { font-size: var(--t1); min-height: calc(var(--fp) * 12); }
  .cs-center { gap: calc(var(--fp) * 3); }
}

/* ---- portrait: the two picks side by side on top, the wall under them */
.cs-screen.is-portrait {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: calc(var(--fp) * 5);
  row-gap: calc(var(--fp) * 5);
  padding: calc(var(--fp) * 5) calc(var(--fp) * 6);
}
/* the stands and their info boxes share rows, so both sides line up */
.cs-screen.is-portrait { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.cs-screen.is-portrait .cs-side { display: contents; }
.cs-screen.is-portrait .cs-side-1 .cs-stand { grid-column: 1; grid-row: 2; }
.cs-screen.is-portrait .cs-side-2 .cs-stand { grid-column: 2; grid-row: 2; }
.cs-screen.is-portrait .cs-side-1 .cs-info { grid-column: 1; grid-row: 3; }
.cs-screen.is-portrait .cs-side-2 .cs-info { grid-column: 2; grid-row: 3; }
.cs-screen.is-portrait .cs-center { grid-column: 1 / -1; grid-row: 4; }
.cs-screen.is-portrait .cs-title { font-size: var(--t15); }
.cs-screen.is-portrait .cs-level-label, .cs-screen.is-portrait .cs-level-dots { display: none; }
.cs-screen.is-portrait .cs-stats, .cs-screen.is-portrait .cs-skill-desc, .cs-screen.is-portrait .cs-super, .cs-screen.is-portrait .cs-hint, .cs-screen.is-portrait .cs-help { display: none; }
.cs-screen.is-portrait .cs-skill { grid-template-columns: minmax(0, 1fr); padding: calc(var(--fp) * 3); }
.cs-screen.is-portrait .cs-prop { display: none; }
.cs-screen.is-portrait .cs-skill b { font-size: var(--t1); }
.cs-screen.is-portrait .cs-info { padding: calc(var(--fp) * 4); gap: calc(var(--fp) * 3); }
.cs-screen.is-portrait .cs-lock.px-btn { font-size: var(--t15); min-height: 44px; }
.cs-screen.is-portrait .cs-tag.px-badge { font-size: var(--t1); min-height: calc(var(--fp) * 12); }
.cs-screen.is-portrait .cs-stand { min-height: calc(var(--hero-h, 164px) + var(--fp) * 24); }
.cs-screen.is-portrait .cs-vs { display: none; }
.cs-screen.is-portrait .cs-ladder { grid-template-columns: repeat(2, auto); }