/*
 * Pentagram's pages. Loaded after SkoolKit's skoolkit.css, Atic Atac's
 * aticatac.css and Knight Lore's knightlore.css (see StyleSheet in
 * pentagram.ref): the Ultimate games share their colours, and this file adds
 * only what Pentagram's pages need on top of them. The pictures are drawn by
 * build_pentagram.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.pg-sprite {
  background-color: #5a5a8c;
  image-rendering: pixelated;
  padding: 4px;
  max-width: 100%;
  height: auto;
}

/* The world map's layers (pentagram_world.py): as Knight Lore's, a checkbox
   per layer before the map shows or hides a transparent picture of markers. */
div.kl-castle img.pg-layer { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
#pg-layer-start:checked ~ div.kl-castle img.pg-layer-start,
#pg-layer-well:checked ~ div.kl-castle img.pg-layer-well,
#pg-layer-quest:checked ~ div.kl-castle img.pg-layer-quest,
#pg-layer-pentagram:checked ~ div.kl-castle img.pg-layer-pentagram,
#pg-layer-spots:checked ~ div.kl-castle img.pg-layer-spots,
#pg-layer-deadly:checked ~ div.kl-castle img.pg-layer-deadly,
#pg-layer-lifts:checked ~ div.kl-castle img.pg-layer-lifts,
#pg-layer-crumbling:checked ~ div.kl-castle img.pg-layer-crumbling,
#pg-layer-raised:checked ~ div.kl-castle img.pg-layer-raised { display: block; }
span.pg-key-start { background-color: rgb(60, 220, 60); }
span.pg-key-well { background-color: rgb(70, 150, 255); }
span.pg-key-quest { background-color: rgb(230, 60, 230); }
span.pg-key-pentagram { background-color: rgb(255, 255, 255); }
span.pg-key-spots { background-color: rgb(240, 220, 40); }
span.pg-key-deadly { background-color: rgb(240, 50, 50); }
span.pg-key-lifts { background-color: rgb(60, 220, 230); }
span.pg-key-crumbling { background-color: rgb(255, 140, 0); }
/* The doorway layer's markers are diamonds on the wall, not dots. */
span.pg-key-raised { background-color: rgb(180, 130, 255); border-radius: 0; transform: rotate(45deg) scale(0.85); }