@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.
   -------------------------------------------------------------------------- */