/* The captain's choice (client/src/ui/captain.ts) — the hero screen (owner, 2026-10-22: «экран выбора … как тут
   [Rise of Kingdoms], но в нашем стиле … эффекты подбавь, хочется экран выбора прям пушечный»; then «это сделай
   прямоугольными, премиум капитанов вниз, чтобы цена на портреты не заезжала»).
   The painted deck (bg.captain) with its compass dais; the roster of six on the left, the chosen captain at full height
   on the dais, her name, tags, role, gift and orders on the right, the start under her feet, the ship's name, the tick
   and the two big buttons at the foot. Fog, embers (a canvas, captain.ts), the moon's shaft, the dashes running round
   the dais, the pool of light breathing under her. Every size is the screen's own (--cu: a hundredth of its height, or
   less on a narrow one), so Telegram's and VK's frames fit it too; an upright window has its own layout at the end.
   Measured by assets/raw/audit/capshot.mjs. */

#screen-captain { overflow: hidden; background: #050607; align-items: stretch; }
#screen-captain > .cpx {
  position: absolute; inset: 0; margin: 0; width: auto; height: auto; max-width: none; max-height: none; padding: 0; border: 0; overflow: hidden;
  container-type: size; display: block; background: none; color: var(--bone);
  --cu: min(1cqh, 0.56cqw); --gold2: #f3d58e;
}
/* the deck, slowly drawing nearer */
.cpx::before { content: ''; position: absolute; inset: 0; background: #0b0d10 var(--bg-captain, none) center 62% / cover no-repeat; transform-origin: 50% 72%; filter: saturate(0.92) brightness(0.9); animation: cpx-drift 38s ease-in-out infinite alternate; }
@keyframes cpx-drift { from { transform: scale(1); } to { transform: scale(1.03); } }
.cpx-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 50% 58%, transparent 40%, rgba(3, 4, 6, 0.55) 78%, rgba(3, 4, 6, 0.9)),
              linear-gradient(90deg, rgba(4, 5, 7, 0.82) 0%, rgba(4, 5, 7, 0.25) 26%, transparent 40%, transparent 60%, rgba(4, 5, 7, 0.3) 72%, rgba(4, 5, 7, 0.85) 100%); }
.cpx-shaft { position: absolute; left: 50%; top: -10%; width: calc(70 * var(--cu)); height: 95%; transform: translateX(-50%); pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% 0%, transparent 168deg, rgba(190, 220, 255, 0.10) 176deg, rgba(255, 230, 180, 0.16) 180deg, rgba(190, 220, 255, 0.10) 184deg, transparent 192deg);
  filter: blur(calc(1.5 * var(--cu))); animation: cpx-shaft 7s ease-in-out infinite; }
@keyframes cpx-shaft { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.cpx-fog { position: absolute; left: -30%; right: -30%; height: calc(22 * var(--cu)); pointer-events: none; opacity: 0.55; mix-blend-mode: screen; filter: blur(calc(2 * var(--cu)));
  background: radial-gradient(ellipse 30% 50% at 20% 50%, rgba(170, 195, 210, 0.22), transparent 70%), radial-gradient(ellipse 25% 45% at 55% 60%, rgba(170, 195, 210, 0.18), transparent 70%), radial-gradient(ellipse 30% 50% at 85% 40%, rgba(170, 195, 210, 0.2), transparent 70%); }
.cpx-fog.f1 { bottom: 4%; animation: cpx-fog 46s linear infinite; }
.cpx-fog.f2 { bottom: 18%; opacity: 0.35; animation: cpx-fog 70s linear infinite reverse; }
@keyframes cpx-fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
/* (the detail's pieces are the screen's own: placed by it, ordered by it on an upright window) */
.cpx > #captain-detail { display: contents; }
.cpx-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* the dais: the painted platform's middle lies at 72% of the picture's height; the glow and the dashes sit on it */
.cpx-dais { position: absolute; left: 50%; bottom: 26cqh; width: 40cqw; aspect-ratio: 4.9; transform: translate(-50%, 50%); pointer-events: none; }
.cpx-pool { position: absolute; inset: -60% -25%; border-radius: 50%; mix-blend-mode: screen; animation: cpx-pool 3.4s ease-in-out infinite;
  background: radial-gradient(ellipse at center, rgba(255, 214, 140, 0.45), rgba(255, 190, 110, 0.12) 45%, transparent 70%); }
@keyframes cpx-pool { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.cpx-dais svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cpx-dais .r1 { animation: cpx-run 30s linear infinite; }
.cpx-dais .r2 { animation: cpx-run 18s linear infinite reverse; }
@keyframes cpx-run { to { stroke-dashoffset: -200; } }
.cpx-herobox { position: absolute; left: 50%; bottom: 24.5cqh; height: calc(62 * var(--cu)); transform: translateX(-46%); pointer-events: none;
  filter: drop-shadow(0 calc(1.5 * var(--cu)) calc(2 * var(--cu)) rgba(0, 0, 0, 0.75)) drop-shadow(0 0 calc(3 * var(--cu)) rgba(255, 210, 140, 0.18)); }
.cpx-hero { height: 100%; width: auto; display: block; transform-origin: 50% 100%; animation: cpx-breathe 3.6s ease-in-out infinite; }
@keyframes cpx-breathe { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.012) translateY(-0.3%); } }
.cpx-herobox.go .cpx-hero { animation: cpx-enter 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both, cpx-breathe 3.6s ease-in-out 0.55s infinite; }
@keyframes cpx-enter { from { opacity: 0; transform: translateX(-6%) scale(0.96); filter: brightness(2.2) blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.cpx-flash { position: absolute; left: 50%; bottom: 20cqh; width: calc(40 * var(--cu)); height: calc(80 * var(--cu)); transform: translateX(-50%); pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 40% 50% at 50% 85%, rgba(255, 225, 160, 0.9), transparent 70%); }
.cpx-flash.go { animation: cpx-flash 0.7s ease-out; }
@keyframes cpx-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* a plate: a dark band between brass rules with a diamond at each end (no ornament over its words) */
.cpx-plate { position: relative; display: inline-flex; align-items: center; gap: calc(1.2 * var(--cu)); padding: calc(1 * var(--cu)) calc(4.5 * var(--cu));
  background: linear-gradient(90deg, rgba(8, 7, 6, 0), rgba(8, 7, 6, 0.88) 14%, rgba(16, 13, 9, 0.92) 50%, rgba(8, 7, 6, 0.88) 86%, rgba(8, 7, 6, 0));
  border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, var(--brass) 18%, var(--gold2) 50%, var(--brass) 82%, transparent) 1; }
.cpx-plate::before, .cpx-plate::after { content: ''; position: absolute; top: 50%; width: calc(1.6 * var(--cu)); height: calc(1.6 * var(--cu)); background: var(--gold); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 calc(1 * var(--cu)) rgba(255, 200, 120, 0.6); }
.cpx-plate::before { left: calc(1.4 * var(--cu)); }
.cpx-plate::after { right: calc(1.4 * var(--cu)); }
#screen-captain .cpx-ttl { position: absolute; left: calc(2 * var(--cu)); top: calc(2 * var(--cu)); z-index: 3; margin: 0; max-width: calc(48 * var(--cu));
  border-width: 1px 0; border-style: solid; border-image: linear-gradient(90deg, transparent, var(--brass) 18%, var(--gold2) 50%, var(--brass) 82%, transparent) 1;
  padding: calc(1 * var(--cu)) calc(4.5 * var(--cu));
  font: 400 calc(4.2 * var(--cu)) / 1 var(--display) !important; color: var(--bone); letter-spacing: 0.04em; text-shadow: 0 2px 8px #000; white-space: nowrap; }

/* ---- the roster: framed portraits in two columns, the school's medallion on each, a price under a premium one */
.cpx-roster { position: absolute; left: calc(2 * var(--cu)); top: calc(10.5 * var(--cu)); max-height: calc(100cqh - 13 * var(--cu)); width: calc(31 * var(--cu)); z-index: 3;
  padding: calc(1.4 * var(--cu)); border: 1px solid rgba(176, 141, 87, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), 0 4px 18px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, rgba(14, 12, 9, 0.84), rgba(8, 7, 6, 0.92)); display: flex; flex-direction: column; gap: calc(1.2 * var(--cu)); }
.cpx-roster-hd { display: flex; justify-content: space-between; align-items: center; font: 600 calc(1.9 * var(--cu)) / 1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.cpx-roster-hd b { color: var(--gold); font-variant-numeric: lining-nums; }
.cpx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: calc(1.6 * var(--cu)) calc(1.4 * var(--cu)); overflow-y: auto; scrollbar-width: none; padding: calc(0.4 * var(--cu)); min-height: 0; }
.cpx-grid::-webkit-scrollbar { display: none; }
.cpx-cap { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; align-items: stretch; gap: calc(0.6 * var(--cu)); -webkit-tap-highlight-color: transparent; }
.cpx-face { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: calc(0.6 * var(--cu)); background: #0c0c0c center 12% / cover no-repeat;
  border: calc(0.35 * var(--cu)) solid #6f5a38; box-shadow: 0 0 0 1px #000, inset 0 0 calc(2 * var(--cu)) rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.6); filter: brightness(0.75) saturate(0.85); transition: filter 0.2s, border-color 0.2s, transform 0.2s; }
.cpx-cap:hover .cpx-face { filter: none; }
.cpx-cap.active .cpx-face { filter: none; border-color: var(--gold); transform: translateY(-1px); animation: cpx-pulse 2.2s ease-in-out infinite; }
@keyframes cpx-pulse { 0%, 100% { box-shadow: 0 0 0 1px #000, 0 0 calc(1 * var(--cu)) rgba(255, 210, 120, 0.55); } 50% { box-shadow: 0 0 0 1px #000, 0 0 calc(2.2 * var(--cu)) rgba(255, 210, 120, 0.95); } }
.cpx-cap.cc-shut .cpx-face { filter: grayscale(0.5) brightness(0.6); }
.cpx-cap.cc-shut.active .cpx-face { filter: grayscale(0.15) brightness(0.9); }
.cpx-cap:focus-visible { outline: none; }
.cpx-cap:focus-visible .cpx-face { outline: 2px solid var(--bone); outline-offset: 2px; }
.cpx-school { position: absolute; right: calc(-0.8 * var(--cu)); bottom: calc(-0.8 * var(--cu)); width: calc(4.6 * var(--cu)); height: calc(4.6 * var(--cu)); border-radius: 50%; background: #0b0907 center / 78% no-repeat; border: 1px solid var(--brass); box-shadow: 0 0 0 1px #000; }
.cpx-cap.active .cpx-school { border-color: var(--gold2); }
.cpx-price { display: flex; align-items: center; justify-content: center; gap: calc(0.4 * var(--cu)); padding: calc(0.4 * var(--cu)) calc(0.6 * var(--cu)); background: rgba(6, 5, 4, 0.9); border: 1px solid rgba(224, 184, 98, 0.55);
  color: var(--gold); font: 700 calc(1.6 * var(--cu)) / 1 var(--sans); white-space: nowrap; font-variant-numeric: lining-nums; }
.cpx-price.owned { color: var(--turq); border-color: rgba(46, 230, 200, 0.5); font-weight: 600; letter-spacing: 0.04em; }
.cpx-price .cc-lock-i { width: calc(1.5 * var(--cu)); height: calc(1.5 * var(--cu)); flex: none; }
.cpx-price .cpx-pr { font-size: inherit; letter-spacing: 0; }
.cpx-price .rp-dbl { display: none; }

/* ---- the right side: who she is and what she brings (a soft dark backdrop keeps it read over the lanterns) */
.cpx-info { position: absolute; right: 0; top: 0; z-index: 3; width: calc(72 * var(--cu)); padding: calc(3 * var(--cu)) calc(2.5 * var(--cu)) calc(2 * var(--cu)) calc(8 * var(--cu));
  display: flex; flex-direction: column; gap: calc(1.3 * var(--cu));
  background: radial-gradient(ellipse 80% 90% at 75% 35%, rgba(5, 6, 8, 0.72), rgba(5, 6, 8, 0.45) 60%, transparent 80%); }
.cpx-kicker { display: flex; align-items: center; gap: calc(1 * var(--cu)); font: 600 calc(1.9 * var(--cu)) / 1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--turq); text-shadow: 0 1px 4px #000; }
.cpx-kico { width: calc(3.2 * var(--cu)); height: calc(3.2 * var(--cu)); flex: none; background: center / contain no-repeat; }
.cpx-name { margin: 0; font: 400 calc(7.2 * var(--cu)) / 1 var(--display); color: transparent; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #fff4d2 0%, #f3d58e 35%, #c8963e 70%, #8b6328 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 4px #000) drop-shadow(0 0 calc(1.5 * var(--cu)) rgba(255, 200, 120, 0.25)); }
.cpx-epi { margin-top: calc(-0.6 * var(--cu)); font: italic 500 calc(2.6 * var(--cu)) / 1.2 var(--serif); color: var(--brass); text-shadow: 0 1px 4px #000; }
.cpx-tags { display: flex; flex-wrap: wrap; gap: calc(0.8 * var(--cu)); }
.cpx-tag { display: inline-flex; align-items: center; gap: calc(0.6 * var(--cu)); padding: calc(0.5 * var(--cu)) calc(1.2 * var(--cu)) calc(0.5 * var(--cu)) calc(0.6 * var(--cu)); border-radius: 999px;
  background: rgba(10, 9, 8, 0.82); border: 1px solid rgba(176, 141, 87, 0.6); font: 600 calc(1.8 * var(--cu)) / 1.1 var(--sans); color: var(--bone); white-space: nowrap; }
.cpx-tag i { width: calc(2.2 * var(--cu)); height: calc(2.2 * var(--cu)); flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3d58e, #8b6328); box-shadow: 0 0 0 1px #000 inset; }
.cpx-tag.prem { border-color: rgba(46, 230, 200, 0.6); color: var(--turq); }
.cpx-tag.prem i { background: radial-gradient(circle at 40% 35%, #b6fff1, #128a78); }
.cpx-role { padding: calc(1 * var(--cu)) calc(1.6 * var(--cu)); border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgba(224, 184, 98, 0.12), rgba(10, 9, 8, 0.4));
  font: 600 calc(2.1 * var(--cu)) / 1.3 var(--sans); color: var(--gold2); text-shadow: 0 1px 3px #000; }
.cpx-skh { display: flex; align-items: center; gap: calc(1 * var(--cu)); font: 600 calc(1.7 * var(--cu)) / 1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); text-shadow: 0 1px 3px #000; }
.cpx-skh::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176, 141, 87, 0.6), transparent); }
.cpx-skills { display: flex; gap: calc(1.1 * var(--cu)); }
.cpx-sk { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; cursor: pointer; position: relative; flex: none; width: calc(8.4 * var(--cu)); height: calc(8.4 * var(--cu)); background: #0b0b0b center / cover no-repeat;
  border: calc(0.35 * var(--cu)) solid var(--brass); border-radius: 0; box-shadow: 0 0 0 1px #000, inset 0 0 calc(1.2 * var(--cu)) rgba(0, 0, 0, 0.8), 0 3px 8px rgba(0, 0, 0, 0.7); transition: transform 0.15s; }
.cpx-sk:hover, .cpx-sk.open { transform: translateY(-2px); border-color: var(--gold2); }
.cpx-sk.gift { border-radius: 50%; border-color: var(--gold); background-size: 80%; }
.cpx-sk.ult { border-color: var(--turq); animation: cpx-ult 2.6s ease-in-out infinite; }
@keyframes cpx-ult { 0%, 100% { box-shadow: 0 0 0 1px #000, 0 0 calc(0.8 * var(--cu)) rgba(46, 230, 200, 0.4); } 50% { box-shadow: 0 0 0 1px #000, 0 0 calc(2 * var(--cu)) rgba(46, 230, 200, 0.85); } }
.cpx-sk .key { position: absolute; right: calc(-0.8 * var(--cu)); bottom: calc(-0.8 * var(--cu)); min-width: calc(2.6 * var(--cu)); padding: 0 calc(0.4 * var(--cu)); background: #0b0a08; border: 1px solid var(--brass-dim); color: var(--gold); font: 700 calc(1.5 * var(--cu)) / calc(2.4 * var(--cu)) var(--sans); }
@media (pointer: coarse) { .cpx-sk .key { display: none; } }
.cpx-tip { max-height: calc(13 * var(--cu)); overflow-y: auto; scrollbar-width: thin; padding: calc(1 * var(--cu)) calc(1.4 * var(--cu)); background: rgba(8, 7, 6, 0.86); border: 1px solid rgba(176, 141, 87, 0.45);
  font: 400 calc(1.75 * var(--cu)) / 1.35 var(--sans); color: var(--fog); }
.cpx-tip b { color: var(--bone); font-weight: 600; }
.cpx-cd { color: var(--gold); white-space: nowrap; }

/* ---- the start under her feet (Rise of Kingdoms' commander's power) */
.cpx-power { position: absolute; left: 50%; bottom: calc(19.5 * var(--cu)); transform: translateX(-50%); z-index: 3; white-space: nowrap;
  font: 600 calc(2.2 * var(--cu)) / 1 var(--sans); color: var(--gold2); text-shadow: 0 1px 3px #000; font-variant-numeric: lining-nums; }
.cpx-pico { width: calc(2.8 * var(--cu)); height: calc(2.8 * var(--cu)); flex: none; background: center / contain no-repeat; }

/* ---- the foot: the ship's name and the tick in a band, the two big buttons under it */
.cpx-foot { position: absolute; right: calc(2.5 * var(--cu)); bottom: calc(2.5 * var(--cu)); z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: calc(1.2 * var(--cu)); max-width: calc(100cqw - 5 * var(--cu)); }
.cpx-foot-row { display: flex; align-items: center; justify-content: space-between; gap: calc(1.6 * var(--cu)); min-height: calc(5.6 * var(--cu)); padding: 0 calc(1.4 * var(--cu));
  background: rgba(8, 7, 6, 0.82); border: 1px solid rgba(176, 141, 87, 0.45); }
/* (owner: «там где написано корабль текст вверх поднят, надо его отцентровать по вертикали») — the word, the field
   and its text on one middle line */
.cpx-ship { display: flex; align-items: center; gap: calc(1.2 * var(--cu)); min-width: 0; flex: 1 1 auto; margin: 0; }
.cpx-ship > span { flex: none; font: 600 calc(1.6 * var(--cu)) / 1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.cpx-ship input { flex: 1 1 auto; min-width: 0; width: calc(22 * var(--cu)); height: calc(3.6 * var(--cu)); margin: 0; padding: 0 calc(0.4 * var(--cu)); box-sizing: border-box; display: block;
  background: transparent; border: 0; border-bottom: 1px solid rgba(176, 141, 87, 0.5); border-radius: 0; color: var(--gold2); font: 600 calc(2.4 * var(--cu)) / calc(3.6 * var(--cu)) var(--serif); outline: none; }
.cpx-ship input:focus { border-bottom-color: var(--gold); }
.cpx-foot label.know-sea { flex: none; display: flex; align-items: center; gap: calc(0.8 * var(--cu)); margin: 0; min-height: calc(4.4 * var(--cu)); cursor: pointer; white-space: nowrap; }
.cpx-foot label.know-sea input { width: calc(2.4 * var(--cu)); height: calc(2.4 * var(--cu)); min-width: 14px; min-height: 14px; margin: 0; flex: none; accent-color: var(--brass); }
.cpx-foot label.know-sea span { display: flex; align-items: center; }
.cpx-foot label.know-sea b { font: 500 calc(1.8 * var(--cu)) / 1 var(--sans); color: var(--bone); }
.cpx-foot label.know-sea small { display: none; }
.cpx-btns { display: flex; gap: calc(1.4 * var(--cu)); justify-content: flex-end; }
.cpx-big { appearance: none; -webkit-appearance: none; cursor: pointer; flex: none; min-width: calc(22 * var(--cu)); height: calc(8.6 * var(--cu)); padding: 0 calc(2.6 * var(--cu)); background: none;
  border: calc(1.2 * var(--cu)) solid transparent; border-image: var(--ui-button, linear-gradient(#3a2c1a, #1a140c)) 40 fill / calc(1.2 * var(--cu)) calc(1.8 * var(--cu)) stretch;
  font: 700 calc(2.4 * var(--cu)) / 1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold2); text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.6);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(1 * var(--cu)); position: relative; overflow: hidden; white-space: nowrap; }
.cpx-big.on { color: #fff3cf; }
.cpx-big.main { min-width: calc(33 * var(--cu)); color: #fff3cf; filter: drop-shadow(0 0 calc(1.4 * var(--cu)) rgba(255, 190, 90, 0.45)); }
.cpx-big.main::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 240, 200, 0.35), transparent); animation: cpx-shine 3.2s ease-in-out infinite; }
@keyframes cpx-shine { 0%, 55% { left: -40%; } 100% { left: 120%; } }
.cpx-big .rp { font-size: calc(1.9 * var(--cu)); letter-spacing: 0; color: var(--gold); }
.cpx-big .rp-dbl { display: none; }
.cpx-foot .cc-why { margin: 0; text-align: right; color: var(--bone); font: 500 calc(1.7 * var(--cu)) / 1.3 var(--sans); text-shadow: 0 1px 3px #000; }
.cpx-foot .cc-why:empty { display: none; }

/* ---- an upright window (a narrow desk, a tablet held upright): the six in a row on top, the captain in the middle,
   her facts and the foot under her; the whole screen scrolls if it must */
@media (max-aspect-ratio: 5/4) {
  #screen-captain { overflow-y: auto; display: block; }
  #screen-captain > .cpx { position: relative; inset: auto; width: 100%; min-height: 100%; container-type: inline-size; --cu: min(1.25vw, 9px); display: flex; flex-direction: column; align-items: stretch; gap: calc(1.6 * var(--cu)); padding: calc(2 * var(--cu)) calc(2.5 * var(--cu)) calc(3 * var(--cu)); }
  .cpx::before { background-position: center 30%; }
  #screen-captain .cpx-ttl { position: relative; left: auto; top: auto; align-self: flex-start; font-size: calc(4.2 * var(--cu)) !important; max-width: 100%; overflow: visible; }
  .cpx-roster { position: relative; left: auto; top: auto; width: auto; max-height: none; }
  .cpx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
  .cpx-dais, .cpx-flash, .cpx-shaft { display: none; }
  .cpx-herobox { position: relative; left: auto; bottom: auto; transform: none; align-self: center; height: min(52vw, 42vh); }
  .cpx-info, .cpx-power, .cpx-foot { position: relative; inset: auto; right: auto; left: auto; bottom: auto; top: auto; transform: none; width: auto; max-width: none; }
  .cpx-info { padding: calc(2 * var(--cu)); background: rgba(5, 6, 8, 0.78); border: 1px solid rgba(176, 141, 87, 0.35); }
  .cpx-power { align-self: center; }
  /* (the layers come first in the markup; the page reads title, roster, captain, start, story, foot) */
  #screen-captain .cpx-ttl { order: 1; } .cpx-roster { order: 2; } .cpx-herobox { order: 3; } .cpx-power { order: 4; } .cpx-info { order: 5; } .cpx-foot { order: 6; }
  .cpx-skills { flex-wrap: wrap; }
  .cpx-tip { max-height: none; }
  .cpx-foot-row { flex-wrap: wrap; padding: calc(0.8 * var(--cu)) calc(1.4 * var(--cu)); }
  .cpx-btns { justify-content: stretch; }
  .cpx-big { flex: 1 1 0; min-width: 0; padding: 0 calc(1.2 * var(--cu)); font-size: calc(1.9 * var(--cu)); letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) {
  .cpx *, .cpx::before, .cpx *::before, .cpx *::after { animation: none !important; }
}