@charset "utf-8";
/* ============================================================================
   ITEM + HAZARD ART -- the single source, shared by every surface
   ----------------------------------------------------------------------------
   These classes ARE the icon vocabulary: a map file's <item icon="..."> names
   one of them, and the game board, the map-select preview and the map editor
   all apply it directly. Extracted out of style.css (2026-07-28) because the
   editor kept a SECOND, divergent set of its own -- small *Icon.png art at
   70x70 against the game's *Piece.png at board scale. The two drifted: the
   editor was missing 20 icons the game had, the game was missing 3 the editor
   had, and maps authored against one looked wrong in the other.

   One definition, at BOARD scale. Each surface scales it to fit rather than
   duplicating art at another size -- .mapIcon / .mapSlotIcon in the preview,
   .editorIcon in the editor.

   Loaded by gladiatorsHead.php and gladEditHead.php.
   ========================================================================== */
/*ITEMS*/
.caltrops{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/caltropsPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
.assortedGlass{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/assortedGlassPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
.redGlass{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/redGlassPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
.blueGlass{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/blueGlassPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
.greenGlass{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/greenGlassPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
.purpleGlass{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/purpleGlassPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
.brownGlass{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/brownGlassPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
.hotCoals{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/coalsPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}
/* PRE-EXISTING BUG, fixed 2026-07-28: this drew caltropsPiece rather than the
   wetPiece.png sitting unused right beside it -- so a wet tile has been
   indistinguishable from caltrops since it was written. Surfaced by the url()
   resolution check now in maps.test.js. */
.wet{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/wetPiece.png);
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}

.leatherBoots,
.boots{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/BootsPiece.png);
	z-index: 5;
	pointer-events: none;
}
.wingedBoots{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/icarusBootsPiece.png);
	z-index: 5;
	pointer-events: none;
}
.platedBoots{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/platedBootsPiece.png);
	z-index: 5;
	pointer-events: none;
}
.bladedBoots{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/bladedBootsPiece.png);
	z-index: 5;
	pointer-events: none;
}

.buckler{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/BucklerPiece.png);
	z-index: 5;
	pointer-events: none;
}

.sword{
	position: absolute;
	width: 131px;
	height: 138px;
	background-image: url(../img/pieces/SwordPiece.png);
	bottom: 0px;
	z-index: 5;
	pointer-events: none;
}

.redElixir,
.elixer{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/redElixirPiece.png);
	z-index: 5;
	pointer-events: none;
}
.blueElixir{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/blueElixirPiece.png);
	z-index: 5;
	pointer-events: none;
}
.purpleElixir{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/purpleElixirPiece.png);
	z-index: 5;
	pointer-events: none;
}
.greenElixir{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/greenElixirPiece.png);
	z-index: 5;
	pointer-events: none;
}
.brownElixir{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/brownElixirPiece.png);
	z-index: 5;
	pointer-events: none;
}

.greySack,
.sack{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/CalSackPiece.png);
	z-index: 5;
	pointer-events: none;
}
.mysterySack{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/mysterySackPiece.png);
	z-index: 5;
	pointer-events: none;
}
.redSack{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/redSackPiece.png);
	z-index: 5;
	pointer-events: none;
}
.greenSack{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/greenSackPiece.png);
	z-index: 5;
	pointer-events: none;
}
.blueSack{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/blueSackPiece.png);
	z-index: 5;
	pointer-events: none;
}

.throwKnives{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/ThrowKnivesPiece.png);
	z-index: 5;
	pointer-events: none;
}

/* Was the odd one out: 70x70 TokenIcon.png while every other entry is a board
   sprite. GriefJoyTokenPiece takes over, so the whole vocabulary is now one
   consistent set at one scale. */
.token{
	position: absolute;
	width: 131px;
	height: 138px;
	bottom: 0px;
	background-image: url(../img/pieces/GriefJoyTokenPiece.png);
	z-index: 5;
	pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Compatibility aliases
   Maps authored against the editor's old art name icons that never existed on
   the game side: [Classic] uses `sack`, [Gladiators2v2] uses `boots` and `sack`.
   Those items were invisible in game. Pointing the names at the gameplay sprite
   fixes the existing map data without editing the files.
   -------------------------------------------------------------------------- */

/* ============================================================================
   TERRAIN ART
   ----------------------------------------------------------------------------
   Here rather than in style.css for the same reason the icons are: the EDITOR
   does not load style.css. Keeping terrain there made it invisible while
   authoring -- the exact divergence this file was created to end.
   ========================================================================== */
/* Terrain -- what the square IS, as opposed to what is lying on it. Painted in
   the editor, saved on the tile, never changed in play.

   Its own LAYER, not a background on the tile, because the art follows the same
   convention as items and hazards: 131px wide -- edge to edge across the full
   tile pitch -- and up to 138 tall, so it hangs above the 121x92 cell to give
   depth. A background is clipped to its element's box, which would cut exactly
   that overhang off.

   Anchored to the BOTTOM at natural height, so art of any height works without
   a rule of its own: a 91-tall wall sits on the floor with clear space above it,
   a 138-tall pit fills the whole allowance. Swapping in taller art needs no CSS
   change at all.

   Below the items and pieces, above the footprints and blood -- neither of which
   belongs inside a hole. One background-image rule per terrain id, matching
   terrain.js. Reactive edges by adjacency are a later job. */
.terrainLayer{
	position: absolute;
	width: 131px;
	height: 138px;
	/* Offset so the layer sits AROUND the cell it represents rather than inside
	   it. Both values are half the gap between tiles, so the sprite covers its
	   own cell plus the margins on either side and below -- edge to edge with
	   its neighbours, with the remaining height left above as depth.

	   Anchored from the BOTTOM, not the top: the art stands on the tile's front
	   edge and grows upward, so taller art gains depth rather than sinking. */
	bottom: -5px;
	left: -5px;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 131px auto;
	z-index: 5;
	pointer-events: none;
}

/* The base image is the FALLBACK for any mask without variant art of its own.
   Wall has all sixteen, so this only ever shows on the editor's palette
   swatch -- pointed at the lone-block variant, which is what one click on an
   empty tile actually produces. */
.terrain-wall{ background-image: url(../img/terrain/walls/wall-0.png); }
.terrain-pit { background-image: url(../img/terrain/pit.png); }

/* AUTOTILING -- how a terrain joins up with its own kind.
   ----------------------------------------------------------------------------
   Each tile also gets a variant class naming which of its four orthogonal
   neighbours share its terrain, as a four-bit mask:

       north 1    east 2    south 4    west 8

   So a wall with neighbours north and west is `terrain-wall-9`, one surrounded
   on all sides is `terrain-wall-15`, and a lone block is `terrain-wall-0`.
   Computed by terrainMaskAt() in map.js and applied beside the base class:
   `terrainLayer terrain-wall terrain-wall-9`.

   Because the variant sits AFTER the base class, art can be added a piece at a
   time -- any combination without a rule of its own simply keeps the base image.
   Nothing below is required for the terrain to work.

   Off-board does not count as a match, so a wall on the boundary draws its outer
   face.

   Add a rule per variant as the art is drawn -- same shape as the two base rules
   above, with the mask number appended to the class and the file pointing into
   img/terrain/. The sixteen combinations are: 0 alone; 1/2/4/8 a single
   connection north/east/south/west; 5 and 10 straight runs; 3/6/9/12 corners;
   7/11/13/14 T-junctions; 15 fully enclosed.
   ========================================================================== */

/* WALL VARIANTS -- the full sixteen, drawn and in place.
   Listed by shape family rather than by number, which is the order they were
   drawn in and the order they read in: isolated, end caps, straights, corners,
   T-junctions, enclosed. The mask that selects each is in the note above.

   These override .terrain-wall, which stays as the fallback for any kind that
   has no variant art of its own. */
.terrain-wall-0     { background-image: url(../img/terrain/walls/wall-0.png); }  /* alone -- all four faces */
.terrain-wall-1     { background-image: url(../img/terrain/walls/wall-1.png); }  /* end cap, opens north */
.terrain-wall-2     { background-image: url(../img/terrain/walls/wall-2.png); }  /* end cap, opens east */
.terrain-wall-4     { background-image: url(../img/terrain/walls/wall-4.png); }  /* end cap, opens south */
.terrain-wall-8     { background-image: url(../img/terrain/walls/wall-8.png); }  /* end cap, opens west */
.terrain-wall-5     { background-image: url(../img/terrain/walls/wall-5.png); }  /* straight, north-south */
.terrain-wall-10    { background-image: url(../img/terrain/walls/wall-10.png); }  /* straight, east-west */
.terrain-wall-3     { background-image: url(../img/terrain/walls/wall-3.png); }  /* corner, north + east */
.terrain-wall-6     { background-image: url(../img/terrain/walls/wall-6.png); }  /* corner, east + south */
.terrain-wall-12    { background-image: url(../img/terrain/walls/wall-12.png); }  /* corner, south + west */
.terrain-wall-9     { background-image: url(../img/terrain/walls/wall-9.png); }  /* corner, north + west */
.terrain-wall-7     { background-image: url(../img/terrain/walls/wall-7.png); }  /* T, open west */
.terrain-wall-14    { background-image: url(../img/terrain/walls/wall-14.png); }  /* T, open north */
.terrain-wall-13    { background-image: url(../img/terrain/walls/wall-13.png); }  /* T, open east */
.terrain-wall-11    { background-image: url(../img/terrain/walls/wall-11.png); }  /* T, open south */
.terrain-wall-15    { background-image: url(../img/terrain/walls/wall-15.png); }  /* enclosed on all four sides */