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

/* Tiles are drawn opaque, as the game writes them over the buffer. */
img.ns-tile {
  image-rendering: pixelated;
  padding: 4px;
  max-width: 100%;
  height: auto;
}

/* The town map's layers and the world pages' layout (nightshade_world.py,
   its LAYER_CSS): a checkbox per layer before the map, and what it shows
   drawn as a group in the SVG over the picture, so the layers switch on and
   off with no script. */
svg.ns-layers { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
svg.ns-layers .ns-layer { display: none; }
#ns-layer-types:checked ~ div.kl-castle svg.ns-layers .ns-layer-types,
#ns-layer-standable:checked ~ div.kl-castle svg.ns-layers .ns-layer-standable,
#ns-layer-finds:checked ~ div.kl-castle svg.ns-layers .ns-layer-finds,
#ns-layer-start:checked ~ div.kl-castle svg.ns-layers .ns-layer-start,
#ns-layer-placed:checked ~ div.kl-castle svg.ns-layers .ns-layer-placed,
#ns-layer-game:checked ~ div.kl-castle svg.ns-layers .ns-layer-game,
#ns-layer-boxes:checked ~ div.kl-castle svg.ns-layers .ns-layer-boxes { display: inline; }
svg.ns-layers text { font-family: sans-serif; font-weight: bold; }
span.ns-key-types { background-color: rgb(230, 230, 230); }
span.ns-key-standable { background-color: rgb(60, 200, 90); }
span.ns-key-finds { background-color: rgb(240, 220, 40); }
span.ns-key-start { background-color: rgb(60, 220, 60); }
span.ns-key-placed { background-color: rgb(230, 60, 230); }
span.ns-key-game { background-color: rgb(255, 120, 60); }
span.ns-key-boxes { background-color: rgb(255, 70, 70); }
div.ns-row { display: flex; flex-wrap: wrap; gap: 0.8em; align-items: flex-start; }
div.ns-row > div { flex: 1 1 360px; }
figure.ns-view { margin: 0; text-align: center; font-size: 0.85em; }
img.ns-view { image-rendering: pixelated; width: 256px; height: auto; display: block; }
img.ns-building { image-rendering: pixelated; width: 512px; max-width: 100%; height: auto; margin-right: 0.5em; vertical-align: top; }
img.ns-plan { width: 272px; max-width: 100%; height: auto; display: block; }
img.ns-icon { image-rendering: pixelated; width: 32px; height: 32px; vertical-align: middle; }
table.ns-tiles td { text-align: center; padding: 1px 3px; }
table.ns-tiles img { image-rendering: pixelated; height: 64px; }