/* Generated from _data/game.json: every picture at a whole-number enlargement of its size in
   game pixels, and how many of each kind of card there are. Don't edit: change cmd/siteart. */
:root {
  --named-foes: 4;
  --locked-stages: 4;
  --items: 3;
}
.pic--logo { width: 198px; }
@media (min-width: 31rem) {
  .pic--logo { width: 396px; }
}
@media (max-height: 30rem) {
  .pic--logo { width: 198px; }
}
.pic--player { width: 170px; }
.pic--enemy { width: 112px; }

/* The hero: its phone crop on narrow or short screens, then the whole picture, each centred in
   a box exactly its height. */
.hero__art { height: 300px; }
  .hero__img { width: 432px; height: 300px; left: calc(50% - 216px); }
@media (max-height: 30rem) {
  .hero__art { height: 150px; }
  .hero__img { width: 216px; height: 150px; left: calc(50% - 108px); }
}
@media (min-width: 58.5rem) and (min-height: 34rem) {
  .hero__art { height: 432px; }
  .hero__img { width: 936px; height: 432px; left: calc(50% - 468px); }
}
@media (min-width: 90rem) and (min-height: 50rem) {
  .hero__art { height: 648px; }
  .hero__img { width: 1404px; height: 648px; left: calc(50% - 702px); }
}

/* The shown stage's card shows its picture in a clipped window, centred on its focus as far as
   the picture's edges allow: its whole height on phones, then a fixed window twice over. */
.stage__art { height: 216px; }
.stage__art .pic--stage { width: 468px; height: 216px; }
.stage--shown .pic--stage { left: clamp(calc(100% - 468px), calc(50% - 310px), 0px); top: clamp(calc(100% - 216px), calc(50% - 72px), 0px); }
@media (min-width: 40rem) {
  .stage__art { height: 288px; }
  .stage__art .pic--stage { width: 936px; height: 432px; }
  .stage--shown .pic--stage { left: clamp(calc(100% - 936px), calc(50% - 620px), 0px); top: clamp(calc(100% - 432px), calc(50% - 144px), 0px); }
}

/* Screenshots: the design screen once over (phones shrink it to fit); a big one twice where it
   fits. */
.shot__img { width: 468px; }
@media (min-width: 64rem) {
  .shot--big .shot__img { width: 936px; }
}

/* Stat bars: statPips segments, filled to a character's pips. */
.pips { --segment: calc(100% / 5); }
.pips--0 { --fill: 0%; }
.pips--1 { --fill: 20%; }
.pips--2 { --fill: 40%; }
.pips--3 { --fill: 60%; }
.pips--4 { --fill: 80%; }
.pips--5 { --fill: 100%; }