/*
 * Alien 8's pages. Loaded after SkoolKit's skoolkit.css, Atic Atac's
 * aticatac.css and Knight Lore's knightlore.css (see StyleSheet in
 * alien8.ref): the Ultimate games share their colours, and this file adds
 * only what Alien 8's pages need on top of them. The pictures are drawn by
 * build_alien8.py at every build, from the game's own bytes.
 */

/* Sprites are white and black on a clear background, three times the
   Spectrum's size: a mid-tone behind them shows which parts are solid and
   which let the background through. */
img.a8-sprite {
  background-color: #5a5a8c;
  image-rendering: pixelated;
  padding: 4px;
  max-width: 100%;
  height: auto;
}

/* The station map's layers (alien8_world.py): a checkbox per layer before
   the map shows or hides a transparent picture of markers. */
div.kl-castle img.a8-layer { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
#a8-layer-start:checked ~ div.kl-castle img.a8-layer-start,
#a8-layer-chamber0:checked ~ div.kl-castle img.a8-layer-chamber0,
#a8-layer-chamber1:checked ~ div.kl-castle img.a8-layer-chamber1,
#a8-layer-chamber2:checked ~ div.kl-castle img.a8-layer-chamber2,
#a8-layer-chamber3:checked ~ div.kl-castle img.a8-layer-chamber3,
#a8-layer-places:checked ~ div.kl-castle img.a8-layer-places,
#a8-layer-robots:checked ~ div.kl-castle img.a8-layer-robots,
#a8-layer-deadly:checked ~ div.kl-castle img.a8-layer-deadly,
#a8-layer-lifts:checked ~ div.kl-castle img.a8-layer-lifts,
#a8-layer-crumbling:checked ~ div.kl-castle img.a8-layer-crumbling,
#a8-layer-drops:checked ~ div.kl-castle img.a8-layer-drops,
#a8-layer-raised:checked ~ div.kl-castle img.a8-layer-raised { display: block; }
span.a8-key-start { background-color: rgb(60, 220, 60); }
span.a8-key-chamber0 { background-color: rgb(255, 255, 255); }
span.a8-key-chamber1 { background-color: rgb(70, 150, 255); }
span.a8-key-chamber2 { background-color: rgb(230, 60, 230); }
span.a8-key-chamber3 { background-color: rgb(255, 190, 120); }
span.a8-key-places { background-color: rgb(240, 220, 40); }
span.a8-key-robots { background-color: rgb(60, 220, 230); }
span.a8-key-deadly { background-color: rgb(240, 50, 50); }
span.a8-key-lifts { background-color: rgb(150, 240, 150); }
span.a8-key-crumbling { background-color: rgb(255, 140, 0); }
span.a8-key-drops { background-color: rgb(160, 160, 160); }
span.a8-key-raised { background-color: rgb(180, 130, 255); }
span.a8-key-raised { border-radius: 0; transform: rotate(45deg) scale(0.85); }
ul.a8-room-objects { margin-top: 0; }
ul.a8-room-objects img.kl-thumb { max-height: 32px; vertical-align: middle; margin-right: 0.4em; }