/*
 * Ant Attack's pages, on top of SkoolKit's own skoolkit.css (see StyleSheet
 * in antattack.ref). Only what the generated pages need: the layers over the
 * city map, shown or hidden by a checkbox each, with no script -- the boxes
 * come before the map, so a sibling selector can reach it.
 */

div.aa-city { overflow: auto; max-width: 100%; }
div.aa-city-stack { position: relative; display: inline-block; }
div.aa-city img { image-rendering: pixelated; display: block; max-width: none; }
div.aa-city img.aa-layer { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
#aa-layer-start:checked ~ div.aa-city img.aa-layer-start,
#aa-layer-gate:checked ~ div.aa-city img.aa-layer-gate,
#aa-layer-ants:checked ~ div.aa-city img.aa-layer-ants,
#aa-layer-rescue:checked ~ div.aa-city img.aa-layer-rescue { display: block; }
input.aa-toggle { margin-left: 1em; }
input.aa-toggle:first-child { margin-left: 0; }
span.aa-key {
  display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%;
  border: 2px solid; margin: 0 0.35em 0 0.2em; vertical-align: -0.1em;
}
/* The layers' colours, as build_antattack.py's CITY_LAYERS draws them. */
span.aa-key-start { border-color: rgb(0, 160, 0); }
span.aa-key-gate { border-color: rgb(0, 140, 220); background-color: rgb(0, 140, 220); border-radius: 0; }
span.aa-key-ants { border-color: rgb(220, 0, 0); }
span.aa-key-rescue { border-color: rgb(200, 0, 170); }

/* Pictures the generated pages draw from the game, scaled up. */
img.aa-picture { image-rendering: pixelated; max-width: 100%; height: auto; }