/* ALL-22 GAMES (/play): the front door to ALL-22 BOWL and ALL-22 PRO.
   Pixel UI rules (same as the games): Press Start 2P, palette colors, hard stepped borders built from box-shadows
   (no radius, blur or soft gradients), and every image drawn at a whole number of device pixels per art pixel
   (hub.js snaps the sizes; image-rendering: pixelated). */
:root {
  --ink: #0b0d1a;
  --night: #080a18;
  --navy: #11163c;
  --navy2: #1b2150;
  --navy3: #2a3270;
  --navy4: #3a4590;
  --white: #f4f4ec;
  --gray: #9aa3c0;
  --dim: #5a6288;
  --gold: #ffd23e;
  --goldL: #fff3a0;
  --goldD: #c79a12;
  --orange: #ff9b2e;
  --red: #e8413b;
  --redD: #962020;
  --coral: #ff5a4a;
  --blue: #3b7dff;
  --blueL: #8ab4ff;
  --cyan: #5ef0ff;
  --green: #3ec24f;
  --font: "Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
  /* pixel unit for borders and pixel glyphs */
  --u: 2px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}
@media (min-resolution: 2dppx) { :root { --u: 2px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--night) url("hub/stars.png") 0 0 / 192px 192px repeat;
  image-rendering: pixelated;
  color: var(--white);
  font-family: var(--font);
  font-size: 8px;
  line-height: 1.6;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ---------- page frame ---------- */
.hub {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(14px + var(--safe-t)) calc(20px + var(--safe-r)) calc(10px + var(--safe-b)) calc(20px + var(--safe-l));
}

/* ---------- header ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
.brand { display: flex; align-items: center; gap: 10px; justify-self: center; }
.brand-ball { width: 22px; height: 22px; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.brand-1 { font-size: 8px; line-height: 8px; color: var(--gold); letter-spacing: 1px; }
.brand-2 {
  font-size: 16px; line-height: 16px; font-weight: 400; color: var(--white);
  text-shadow: 2px 2px 0 var(--redD);
  letter-spacing: 1px;
}
.pick { justify-self: end; color: var(--gray); font-size: 8px; line-height: 8px; text-align: right; white-space: nowrap; }
.pick-kb { display: inline-flex; align-items: center; gap: 6px; }
.kc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: var(--white);
  background: var(--navy2);
  box-shadow: 0 -2px 0 0 var(--navy4), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--navy3), 2px 0 0 0 var(--navy3);
}
.kc .tri { color: var(--white); margin: 0 0 6px 0; transform: translateY(3px); }
.kc .tri-l { transform: translateY(3px) scaleX(-1); margin: 0 0 6px 3px; }
.kc + .kc { margin-left: -2px; }
.pick-touch { display: none; }
@media (hover: none) { .pick-kb { display: none; } .pick-touch { display: inline; } }
/* header right: the keyboard hint and the MUSIC button */
.top-r { justify-self: end; display: flex; align-items: center; gap: 14px; }

/* pixel button chip (back link, builder link, MUSIC): navy fill, 2-px light edge, 2-px ink ring with stepped corners */
.back, .team-link, .snd {
  --fill: var(--navy2);
  --edge: var(--navy4);
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px;
  padding: 8px 10px;
  font-size: 8px;
  line-height: 8px;
  color: var(--white);
  background: var(--fill);
  box-shadow:
    inset 0 2px 0 0 rgba(255, 255, 255, 0.12),
    0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge),
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    -2px -2px 0 0 var(--ink), 2px -2px 0 0 var(--ink), -2px 2px 0 0 var(--ink), 2px 2px 0 0 var(--ink);
  white-space: nowrap;
}
.back:hover, .team-link:hover, .back:focus-visible, .team-link:focus-visible, .snd:focus-visible { --fill: var(--navy3); --edge: var(--gold); color: var(--goldL); outline: none; }
@media (hover: hover) { .snd:hover { --fill: var(--navy3); --edge: var(--gold); color: var(--goldL); } }
.back:active, .team-link:active, .snd:active { transform: translateY(2px); }
/* MUSIC: ALL-22 BOWL's title theme on / off (hub-music.js). The speaker is crossed out when off, gold with waves when on */
.snd {
  position: relative;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.snd::before { content: ""; position: absolute; inset: -8px -6px; } /* a roomier touch target */
.snd-ico { display: block; flex: none; width: 10px; height: 7px; }
.snd[aria-pressed="true"] .snd-ico { color: var(--gold); }
.snd[aria-pressed="true"] .snd-x, .snd[aria-pressed="false"] .snd-w { display: none; }

/* pixel triangles: a u×u square + box-shadow copies (4 × 7 pixels), colored by currentColor */
.tri {
  --u: 1px;
  display: inline-block;
  flex: none;
  width: var(--u);
  height: var(--u);
  margin: 0 calc(3 * var(--u)) calc(6 * var(--u)) 0;
  background: currentColor;
  color: var(--gold);
  box-shadow:
    0 var(--u) 0 0 currentColor, var(--u) var(--u) 0 0 currentColor,
    0 calc(2 * var(--u)) 0 0 currentColor, var(--u) calc(2 * var(--u)) 0 0 currentColor, calc(2 * var(--u)) calc(2 * var(--u)) 0 0 currentColor,
    0 calc(3 * var(--u)) 0 0 currentColor, var(--u) calc(3 * var(--u)) 0 0 currentColor, calc(2 * var(--u)) calc(3 * var(--u)) 0 0 currentColor, calc(3 * var(--u)) calc(3 * var(--u)) 0 0 currentColor,
    0 calc(4 * var(--u)) 0 0 currentColor, var(--u) calc(4 * var(--u)) 0 0 currentColor, calc(2 * var(--u)) calc(4 * var(--u)) 0 0 currentColor,
    0 calc(5 * var(--u)) 0 0 currentColor, var(--u) calc(5 * var(--u)) 0 0 currentColor,
    0 calc(6 * var(--u)) 0 0 currentColor;
}
.tri-l { transform: scaleX(-1); margin: 0 0 calc(6 * var(--u)) calc(3 * var(--u)); }
.back .tri, .team-link .tri { align-self: flex-start; margin-top: 1px; }

/* ---------- the two game cards ---------- */
.cards {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 8px;
}
.card {
  --edge: var(--navy3);
  --lift: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--navy);
  box-shadow:
    inset 0 -4px 0 0 rgba(0, 0, 0, 0.28),
    0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge),
    0 -8px 0 0 var(--ink), 0 8px 0 0 var(--ink), -8px 0 0 0 var(--ink), 8px 0 0 0 var(--ink),
    -4px -4px 0 0 var(--ink), 4px -4px 0 0 var(--ink), -4px 4px 0 0 var(--ink), 4px 4px 0 0 var(--ink),
    0 14px 0 0 rgba(3, 4, 12, 0.55);
  transform: translateY(var(--lift));
  transition: transform 0.12s steps(2, end);
}
.card.is-sel { --edge: var(--gold); --lift: -4px; }
.card-pro.is-sel { --edge: var(--gold); }

/* preview window: the game's own render buffer, integer-scaled and cropped around its focus by hub.js */
.shot {
  position: relative;
  display: block;
  height: 46vw;
  max-height: 300px;
  min-height: 120px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
}
.shot-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  max-width: none;
}
.shot-img.snapped { transform: none; min-width: 0; }
/* gameplay clips: 2× nearest-neighbour upscales of the games' render buffers (H.264's 2×2 chroma blocks then match
   the art pixels); hub.js shows them at a whole number of device pixels per art pixel, like the stills */
.shot-vid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
  image-rendering: pixelated;
  pointer-events: none;
}
.shot-vid.snapped { object-fit: fill; }
/* never iOS's big round play button: a clip the phone won't autoplay shows its crisp poster (and then the flipbook) */
.shot-vid::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
.shot-vid::-webkit-media-controls-enclosure { display: none !important; -webkit-appearance: none; }
.shot-vid::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }
.shot-vid::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.shot-vid::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; }
.shot-vid::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* autoplay refused (iPhone Low Power Mode…): a stepped flipbook of the clip's big moment, 24 real frames at 1 art px
   = 1 sheet px, laid exactly over the video at the same whole-device-pixel scale (hub.js sets the box and --fh) */
.flip {
  --fh: 0px;
  position: absolute;
  z-index: 0;
  display: block;
  background-color: var(--ink);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 2400%;
  image-rendering: pixelated;
  pointer-events: none;
  animation: flip24 3s steps(24, end) infinite;
}
.flip.is-paused { animation-play-state: paused; }
@keyframes flip24 { from { background-position: 0 0; } to { background-position: 0 calc(var(--fh) * -24); } }
/* inner bevel over the picture: 2-px ink line + 2-px light line along the top/left */
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--ink), inset 2px 2px 0 2px rgba(255, 255, 255, 0.10);
}
.tag {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px 5px 6px;
  font-size: 8px;
  line-height: 8px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--navy3);
  white-space: nowrap;
}
.dot { width: 6px; height: 6px; background: var(--red); flex: none; animation: blink 1.2s steps(1, end) infinite; }
.card-pro .dot { background: var(--coral); }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
.sweep {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -4px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.07);
  pointer-events: none;
  display: none;
}
.card.is-sel .sweep { display: block; animation: sweep 2.8s steps(56, end) infinite; }
@keyframes sweep { from { top: -4px; } to { top: 100%; } }

.info {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 4px 16px;
  padding: 0 14px 0 12px;
}
.logo {
  position: relative;
  z-index: 4;
  margin-top: -40px;
  line-height: 0;
  filter: none;
}
.logo img { display: block; width: 216px; height: auto; }
.card-pro .logo img { width: 196px; }
/* the games' own title-logo shine (frames rendered by game/ui-art.js and allpro/ui-art.js, 12 fps), selected card only */
.shine {
  --lw: 0px;
  --lh: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lw);
  height: var(--lh);
  display: none;
  background: url("hub/logo-bowl-shine.png") 0 0 / var(--lw) calc(var(--lh) * 43) no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.card-pro .shine { background-image: url("hub/logo-pro-shine.png"); }
.card.is-sel .shine.ready { display: block; animation: shine 3.5833s steps(43, end) infinite; }
@keyframes shine { from { background-position: 0 0; } to { background-position: 0 calc(var(--lh) * -43); } }
.about { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; min-width: 0; }
.pitch { font-size: 8px; line-height: 14px; color: var(--white); }
.chips { display: flex; flex-wrap: wrap; gap: 8px 8px; }
.chips li {
  padding: 4px 5px;
  font-size: 8px;
  line-height: 8px;
  color: var(--goldL);
  background: var(--navy2);
  box-shadow: 0 -2px 0 0 var(--navy3), 0 2px 0 0 var(--navy3), -2px 0 0 0 var(--navy3), 2px 0 0 0 var(--navy3);
  white-space: nowrap;
}
.card-pro .chips li { color: var(--cyan); }

/* PLAY: the games' own menu button (BOWL: gold; PRO: red-orange with a gold rim), navy when not selected */
.play {
  --fill: var(--navy2);
  --rim: var(--white);
  --txt: var(--white);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 18px 18px;
  min-height: 52px;
  flex: none;
  padding: 0 16px;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1px;
  color: var(--txt);
  background: var(--fill);
  box-shadow:
    inset 0 -4px 0 0 rgba(0, 0, 0, 0.22), inset 0 4px 0 0 rgba(255, 255, 255, 0.16),
    0 -2px 0 0 var(--rim), 0 2px 0 0 var(--rim), -2px 0 0 0 var(--rim), 2px 0 0 0 var(--rim),
    0 -6px 0 0 var(--ink), 0 6px 0 0 var(--ink), -6px 0 0 0 var(--ink), 6px 0 0 0 var(--ink),
    -2px -4px 0 0 var(--ink), 2px -4px 0 0 var(--ink), -2px 4px 0 0 var(--ink), 2px 4px 0 0 var(--ink),
    -4px -2px 0 0 var(--ink), 4px -2px 0 0 var(--ink), -4px 2px 0 0 var(--ink), 4px 2px 0 0 var(--ink);
  white-space: nowrap;
  outline: none;
}
.card-bowl.is-sel .play { --fill: var(--gold); --txt: var(--ink); --rim: var(--goldL); }
.card-pro.is-sel .play { --fill: var(--coral); --txt: var(--white); --rim: var(--gold); }
.play:active { transform: translateY(2px); }
.play-label { position: relative; top: 1px; }
.cur {
  --u: 2px;
  display: none;
  width: var(--u);
  height: var(--u);
  margin: 0 calc(4 * var(--u)) 0 0;
  align-self: center;
  transform: translateY(calc(-3 * var(--u)));
  background: currentColor;
  color: inherit;
  box-shadow:
    0 var(--u) 0 0 currentColor, var(--u) var(--u) 0 0 currentColor,
    0 calc(2 * var(--u)) 0 0 currentColor, var(--u) calc(2 * var(--u)) 0 0 currentColor, calc(2 * var(--u)) calc(2 * var(--u)) 0 0 currentColor,
    0 calc(3 * var(--u)) 0 0 currentColor, var(--u) calc(3 * var(--u)) 0 0 currentColor, calc(2 * var(--u)) calc(3 * var(--u)) 0 0 currentColor, calc(3 * var(--u)) calc(3 * var(--u)) 0 0 currentColor,
    0 calc(4 * var(--u)) 0 0 currentColor, var(--u) calc(4 * var(--u)) 0 0 currentColor, calc(2 * var(--u)) calc(4 * var(--u)) 0 0 currentColor,
    0 calc(5 * var(--u)) 0 0 currentColor, var(--u) calc(5 * var(--u)) 0 0 currentColor,
    0 calc(6 * var(--u)) 0 0 currentColor;
}
.card.is-sel .cur { display: inline-block; animation: nudge 0.8s steps(1, end) infinite; }
@keyframes nudge { 0%, 49% { translate: 0 0; } 50%, 100% { translate: 4px 0; } }
.play:focus-visible { --rim: var(--cyan); }
.shot:focus-visible { outline: none; }

/* ---------- YOUR ALL-22 strip ---------- */
.team {
  --edge: var(--navy3);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 4px 8px 0;
  padding: 12px 14px 10px;
  background: var(--navy);
  box-shadow:
    0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge),
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    -2px -2px 0 0 var(--ink), 2px -2px 0 0 var(--ink), -2px 2px 0 0 var(--ink), 2px 2px 0 0 var(--ink);
}
.team-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.team-title { font-size: 8px; line-height: 8px; font-weight: 400; color: var(--gold); letter-spacing: 1px; }
/* KANTO / JOHTO: the region both games play in (hub.js); small pixel chips, the chosen one gold */
.regions { display: flex; flex-wrap: wrap; gap: 8px; }
.regions[hidden] { display: none; }
.reg {
  --fill: var(--navy2);
  --edge: var(--navy4);
  margin: 2px;
  padding: 5px 7px;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 8px;
  line-height: 8px;
  color: var(--gray);
  background: var(--fill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge);
}
.reg[aria-pressed="true"] { --fill: var(--gold); --edge: var(--goldL); color: var(--ink); cursor: default; }
@media (hover: hover) { .reg:not([aria-pressed="true"]):hover { --edge: var(--gold); color: var(--white); } }
.reg:focus-visible { --edge: var(--gold); outline: none; }
.reg:active { transform: translateY(2px); }
.team-note { flex: 1 1 220px; font-size: 8px; line-height: 12px; color: var(--gray); }
.team-note b { font-weight: 400; color: var(--green); }
.team.is-saved .team-note b { color: var(--green); }
.team-link { margin: 4px 4px 4px auto; }
.team-link .tri { margin: 1px 0 6px 2px; }
.stars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 6px;
  min-height: 84px;
}
.star {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.star-pic {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 56px;
}
.star-pic::after {
  /* the games' player base: a flat stepped oval under the feet */
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 28px;
  height: 4px;
  margin-left: -14px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 4px -2px 0 -0px rgba(0, 0, 0, 0), -4px 0 0 0 rgba(0, 0, 0, 0);
  z-index: 0;
}
.star-pic img { position: relative; z-index: 1; display: block; width: 64px; height: 64px; margin-bottom: -4px; }
.star-pos {
  margin-top: 4px;
  padding: 2px 3px 1px;
  font-size: 8px;
  line-height: 8px;
  color: var(--ink);
  background: var(--gold);
}
.star-pos.def { background: var(--blueL); }
.star-nm {
  max-width: 100%;
  overflow: hidden;
  font-size: 8px;
  line-height: 10px;
  color: var(--white);
  text-overflow: clip;
  white-space: nowrap;
}

/* ---------- footer ---------- */
.foot { padding: 2px 4px 0; text-align: center; color: var(--dim); font-size: 8px; line-height: 12px; }

/* ================= layouts ================= */

/* portrait phones / narrow: stacked cards, page scrolls */
@media (max-width: 699px) {
  .hub { padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); gap: 14px; }
  .top { grid-template-columns: auto 1fr auto; gap: 8px; }
  .brand { justify-self: end; }
  .pick { display: none; }
  .back-long { display: none; }
  .snd { padding: 8px 7px; }
  .snd-txt { display: none; }
  .cards { gap: 30px; padding: 8px 8px 4px; }
  .shot { height: 50vw; max-height: 260px; }
  .info { grid-template-columns: 1fr; padding: 0 12px; }
  .logo { margin-top: -34px; }
  .logo img { width: 150px; }
  .card-pro .logo img { width: 196px; }
  .card-pro .logo { margin-top: -46px; }
  .about { padding-top: 2px; }
  .play { margin: 16px 14px 18px; }
  .play-name { display: none; }
  .stars .star:nth-child(n + 9) { display: none; }
  /* stacked cards: ALL-22 PRO on top */
  .card-pro { order: -1; }
}
/* most phones: the brand's ball makes room for the MUSIC button */
@media (max-width: 409px) { .brand-ball { display: none; } }
@media (max-width: 360px) {
  .top { gap: 6px; }
  .brand-2 { font-size: 12px; line-height: 12px; }
  .chips li:nth-child(n + 4) { display: none; }
}

/* side by side: tablets, desktops, landscape phones */
@media (min-width: 700px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
  .card .play { margin-top: auto; }
  .info { padding-bottom: 16px; }
  .stars { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .team { grid-template-columns: minmax(220px, 300px) 1fr; align-items: center; gap: 10px 18px; }
  .team-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .team-note { flex: none; }
  .team-link { margin: 4px; }
}
/* desktop: the preview grows with the window height so everything fits on one screen */
@media (min-width: 700px) {
  .shot { flex: 1 1 auto; height: auto; min-height: 150px; max-height: 440px; }
  .card { justify-content: flex-start; }
  /* the clips fill their windows at a whole scale; when the windows shrink to fit them, the cards centre */
  .cards.is-capped { align-content: center; }
}
@media (min-width: 1100px) and (min-height: 820px) {
  .hub { gap: 22px; padding-top: calc(24px + var(--safe-t)); }
  .logo { margin-top: -48px; }
  .pitch { font-size: 8px; line-height: 16px; }
  .stars { min-height: 92px; }
}
/* ALL-22 PRO's logo has thin 5×7-font strokes: one whole step bigger than BOWL's box on Retina screens so the two
   read the same size (1× screens stay at 1 px per art px: the next crisp step, 2×, would crowd the card) */
@media (min-width: 1024px) and (min-resolution: 2dppx) {
  .card-pro .logo img { width: 294px; }
  .card-pro .logo { margin-top: -62px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .pick { display: none; }
  .info { grid-template-columns: 1fr; }
  .logo img, .card-pro .logo img { width: 150px; }
  .logo { margin-top: -34px; }
  .about { padding-top: 0; }
  .play-name { display: none; }
}

/* landscape phones (short screens): compact, one screen, no scroll */
@media (orientation: landscape) and (max-height: 520px) {
  .hub { gap: 8px; padding-top: calc(6px + var(--safe-t)); padding-bottom: calc(4px + var(--safe-b)); padding-left: calc(14px + var(--safe-l)); padding-right: calc(14px + var(--safe-r)); }
  .top { min-height: 28px; grid-template-columns: auto 1fr auto; }
  .brand { justify-self: center; gap: 8px; }
  .brand-ball { width: 11px; height: 11px; }
  .brand-text { flex-direction: row; align-items: baseline; gap: 10px; }
  .brand-1 { font-size: 8px; }
  .brand-2 { font-size: 8px; line-height: 8px; text-shadow: 1px 1px 0 var(--redD); }
  .pick { display: block; }
  .back, .snd { padding: 6px 8px; }
  .snd { min-height: 20px; }
  .cards { gap: 26px; padding: 6px 6px 2px; grid-template-columns: 1fr 1fr; }
  .card-pro { order: 0; }
  .shot { min-height: 60px; max-height: 220px; }
  .info { grid-template-columns: auto 1fr; gap: 2px 10px; padding: 0 8px 10px; min-height: 52px; }
  .logo { margin-top: -28px; }
  .card-pro .logo { margin-top: -62px; }
  .logo img { width: 120px; }
  .card-pro .logo img { width: 196px; }
  .about { padding-top: 6px; gap: 6px; }
  .pitch { display: none; }
  .chips { gap: 6px; }
  .chips li { padding: 3px 4px; }
  .chips li:nth-child(n + 3) { display: none; }
  .play { margin: 8px 10px 10px; min-height: 34px; font-size: 8px; line-height: 8px; gap: 8px; }
  .play-name { display: inline; }
  .cur { --u: 1px; }
  .team { grid-template-columns: auto 1fr; margin: 0 6px; padding: 4px 10px 4px; gap: 4px 12px; }
  .team-head { gap: 4px 10px; }
  .regions { gap: 6px; }
  .reg { padding: 4px 6px; margin: 1px; }
  .team-note { display: none; }
  .team-link { padding: 5px 7px; }
  .stars { grid-template-columns: repeat(8, minmax(0, 1fr)); min-height: 0; gap: 0 4px; }
  .star { flex-direction: row; gap: 4px; justify-content: center; }
  .star-pic { width: 32px; height: 30px; flex: none; }
  .star-pic::after { width: 16px; margin-left: -8px; height: 2px; }
  .star-pic img { width: 32px; height: 32px; margin-bottom: -2px; }
  .star-pos { display: none; }
  .star-nm { display: none; }
  .foot { display: none; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .chips { display: none; }
  .about { display: none; }
  .info { grid-template-columns: 1fr; justify-items: start; min-height: 48px; }
  .logo { margin-top: -26px; }
  .card-pro .logo { margin-top: -74px; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 760px) {
  .star-nm { display: block; font-size: 8px; }
  .stars .star:nth-child(n + 6) { display: none; }
  .stars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 930px) {
  .stars .star:nth-child(6) { display: flex; }
  .stars { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card.is-sel .sweep, .card.is-sel .cur, .dot, .card.is-sel .shine.ready, .flip { animation: none; transition: none; }
  .card.is-sel .sweep { display: none; }
}