/*
 * Knight Lore's graphics and castle pages. Loaded after SkoolKit's own
 * skoolkit.css and Atic Atac's aticatac.css (see StyleSheet in
 * knightlore.ref): the two Ultimate games share its colours -- a blue so dark
 * it is nearly black, light text, the Spectrum's cyan, red, green and yellow --
 * and this file adds only what these pages need on top of them. The pictures are drawn by
 * knightlore_pages.py at every build: sprites from their bytes on a clear
 * background, rooms by the game's own drawing code.
 */

/* Sprites are white and black on a clear background: a mid-tone behind them
   shows which parts are solid and which let the background through. */
img.kl-sprite, img.kl-thumb {
  background-color: #5a5a8c;
  image-rendering: pixelated;
  padding: 4px;
}
img.kl-thumb { max-height: 64px; }

/* Rooms and scenery, at twice the Spectrum's size. */
img.kl-scene {
  width: 512px;
  max-width: 100%;
  image-rendering: pixelated;
}

/* A background or a template on its own, cut down to what was drawn. */
img.kl-piece { image-rendering: pixelated; max-width: 100%; height: auto; }

/* The stages of a frame, at twice the size with the rectangles outlined. */
img.kl-stage { width: 512px; max-width: 100%; image-rendering: pixelated; }

div.kl-item {
  margin: 1.2em 0;
  padding-bottom: 0.8em;
  border-bottom: 1px solid #1e1e60;
}
/* Tables in the colours of aticatac.css's. */
table.kl-table td, table.kl-table th { padding: 2px 8px; }
table.kl-table th { background-color: #1e1e60; }
table.kl-table td { background-color: #10103c; }

/* The castle: one isometric picture, at its own size, in a box that scrolls. */
div.kl-castle { overflow: auto; max-width: 100%; }
div.kl-castle img { image-rendering: pixelated; display: block; max-width: none; }

/* Layers over the castle: a checkbox per layer, before the map, shows or
   hides a transparent picture of markers stacked on the castle. No script:
   the boxes are the map's earlier siblings, so a selector can reach it. */
div.kl-castle-stack { position: relative; display: inline-block; }
div.kl-castle img.kl-layer { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
#kl-layer-start:checked ~ div.kl-castle img.kl-layer-start,
#kl-layer-wizard:checked ~ div.kl-castle img.kl-layer-wizard,
#kl-layer-charms:checked ~ div.kl-castle img.kl-layer-charms,
#kl-layer-guards:checked ~ div.kl-castle img.kl-layer-guards,
#kl-layer-hazards:checked ~ div.kl-castle img.kl-layer-hazards,
#kl-layer-portcullis:checked ~ div.kl-castle img.kl-layer-portcullis { display: block; }
input.kl-toggle { margin-left: 1em; }
input.kl-toggle:first-child { margin-left: 0; }
span.kl-key {
  display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%;
  border: 1px solid #000; margin: 0 0.35em 0 0.2em; vertical-align: -0.05em;
}
/* The markers' colours, as knightlore_pages.py's LAYERS draws them. */
span.kl-key-start { background-color: rgb(60, 220, 60); }
span.kl-key-wizard { background-color: rgb(230, 60, 230); }
span.kl-key-charms { background-color: rgb(240, 220, 40); }
span.kl-key-guards { background-color: rgb(240, 50, 50); }
span.kl-key-hazards { background-color: rgb(255, 140, 0); }
span.kl-key-portcullis { background-color: rgb(60, 220, 230); }