/* Generated from _data/game.json and _data/shots.json: every picture at a whole-number
   enlargement of its size in game pixels. Don't edit: change cmd/siteart's groupScales. */
.pic--logo { width: 226px; }
@media (min-width: 31rem) {
  .pic--logo { width: 452px; }
}
@media (max-height: 30rem) {
  .pic--logo { width: 226px; }
}
.pic--player { width: 170px; }
.pic--enemy { width: 112px; }
.pic--boss { width: 130px; }
@media (min-width: 60rem) {
  .pic--boss { width: 195px; }
}

/* 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); }
}

/* Stage cards show each stage's 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--inferno .pic--stage { left: clamp(calc(100% - 468px), calc(50% - 310px), 0px); top: clamp(calc(100% - 216px), calc(50% - 72px), 0px); }
.stage--kebab .pic--stage { left: clamp(calc(100% - 468px), calc(50% - 200px), 0px); top: clamp(calc(100% - 216px), calc(50% - 72px), 0px); }
.stage--nightbus .pic--stage { left: clamp(calc(100% - 468px), calc(50% - 330px), 0px); top: clamp(calc(100% - 216px), calc(50% - 90px), 0px); }
.stage--canal .pic--stage { left: clamp(calc(100% - 468px), calc(50% - 120px), 0px); top: clamp(calc(100% - 216px), calc(50% - 72px), 0px); }
.stage--estate .pic--stage { left: clamp(calc(100% - 468px), calc(50% - 300px), 0px); top: clamp(calc(100% - 216px), calc(50% - 76px), 0px); }
@media (min-width: 40rem) {
  .stage__art { height: 288px; }
  .stage__art .pic--stage { width: 936px; height: 432px; }
  .stage--inferno .pic--stage { left: clamp(calc(100% - 936px), calc(50% - 620px), 0px); top: clamp(calc(100% - 432px), calc(50% - 144px), 0px); }
  .stage--kebab .pic--stage { left: clamp(calc(100% - 936px), calc(50% - 400px), 0px); top: clamp(calc(100% - 432px), calc(50% - 144px), 0px); }
  .stage--nightbus .pic--stage { left: clamp(calc(100% - 936px), calc(50% - 660px), 0px); top: clamp(calc(100% - 432px), calc(50% - 180px), 0px); }
  .stage--canal .pic--stage { left: clamp(calc(100% - 936px), calc(50% - 240px), 0px); top: clamp(calc(100% - 432px), calc(50% - 144px), 0px); }
  .stage--estate .pic--stage { left: clamp(calc(100% - 936px), calc(50% - 600px), 0px); top: clamp(calc(100% - 432px), calc(50% - 152px), 0px); }
}

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

/* Crops of screenshots, from shots.json: a window onto the shot at a scale. */

/* 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%; }