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

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

/* Textures are drawn opaque, as a fill writes them, tiled two by two. */
img.fl-texture {
  image-rendering: pixelated;
  padding: 4px;
  max-width: 100%;
  height: auto;
}

/* Diagrams drawn wider than the page (fairlight_sounds.py). */
img.fl-diagram { max-width: 100%; height: auto; }

/* The castle map's layers and the rooms list (fairlight_world.py, its
   LAYER_CSS): a checkbox per layer before the map shows or hides a
   transparent picture of markers, with no script. */
div.kl-castle img.fl-layer { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
#fl-layer-doors:checked ~ div.kl-castle img.fl-layer-doors,
#fl-layer-start:checked ~ div.kl-castle img.fl-layer-start,
#fl-layer-quest:checked ~ div.kl-castle img.fl-layer-quest,
#fl-layer-keys:checked ~ div.kl-castle img.fl-layer-keys,
#fl-layer-things:checked ~ div.kl-castle img.fl-layer-things,
#fl-layer-guards:checked ~ div.kl-castle img.fl-layer-guards,
#fl-layer-trolls:checked ~ div.kl-castle img.fl-layer-trolls,
#fl-layer-wraiths:checked ~ div.kl-castle img.fl-layer-wraiths,
#fl-layer-ghosts:checked ~ div.kl-castle img.fl-layer-ghosts,
#fl-layer-strikers:checked ~ div.kl-castle img.fl-layer-strikers,
#fl-layer-bouncers:checked ~ div.kl-castle img.fl-layer-bouncers,
#fl-layer-flames:checked ~ div.kl-castle img.fl-layer-flames,
#fl-layer-pits:checked ~ div.kl-castle img.fl-layer-pits,
#fl-layer-bug:checked ~ div.kl-castle img.fl-layer-bug { display: block; }
span.fl-key-doors { background-color: rgb(240, 240, 240); }
span.fl-key-start { background-color: rgb(60, 220, 60); }
span.fl-key-quest { background-color: rgb(230, 60, 230); }
span.fl-key-keys { background-color: rgb(240, 220, 40); }
span.fl-key-things { background-color: rgb(255, 190, 120); }
span.fl-key-guards { background-color: rgb(240, 50, 50); }
span.fl-key-trolls { background-color: rgb(200, 120, 60); }
span.fl-key-wraiths { background-color: rgb(150, 150, 255); }
span.fl-key-ghosts { background-color: rgb(200, 200, 200); }
span.fl-key-strikers { background-color: rgb(255, 90, 160); }
span.fl-key-bouncers { background-color: rgb(60, 220, 230); }
span.fl-key-flames { background-color: rgb(255, 140, 0); }
span.fl-key-pits { background-color: rgb(120, 60, 20); }
span.fl-key-bug { background-color: rgb(255, 255, 255); }
span.fl-key-doors { border-radius: 0; height: 0.25em; vertical-align: 0.2em; }
ul.fl-room-list { margin-top: 0; }
ul.fl-room-list img.kl-thumb { max-height: 40px; vertical-align: middle; margin-right: 0.4em; }