/* Map elemets */
td.mapbackground {
  font-size: 11px;
} 

div.mapname_small {
  background: black;
  border: 1px solid white; 
  color: white; 
  margin: 5px; 
  padding: 5px;  
  font-size: 9px;  
  text-align: center;
}

div.mapname {
  height: 40px;
  margin: 3px 3px 10px 3px; 
  padding: 5px;  
  text-align: center;
}

div.mapname_empty {
  background: black;
  border: 2px solid white; 
  color: white; 
}

div.mapname_empty a {
  color: white; 
}


div.mapname_ruined 
{
  background: #222222;
  border: 2px solid black; 
  color: #BBBBBB; 
}


div.mapname_ruined a 
{
	color: #BBBBBB; 
}

div.mapname_ruined_high 
{
	background: #222222;
  	border: 2px solid black; 
  	color: #BBBBBB; 

}

div.mapname_ruined_high a {
  color: #BBBBBB; 
}

div.mapname_ruined_med {
  background: #444444;
  border: 2px solid black; 
  color: #BBBBBB; 
}

div.mapname_ruined_med a {
  color: #BBBBBB; 
}

div.mapname_ruined_low {
  background: #666666;
  border: 2px solid black; 
  color: #BBBBBB; 
}

div.mapname_ruined_low a {
  color: #BBBBBB; 
}

div.mapname_lightsoff {
  background: #888888;
  border: 2px solid black; 
  color: #EEEEEE; 
}

div.mapname_lightsoff a {
  color: #EEEEEE; 
}

div.mapname_lightson {
  background: #FFFF66;
  border: 2px solid black; 
  color: black; 
}

div.mapname_lightson a {
  color: black; 
}

div.mapname_lightson_med {
  background: #FFFF99;
  border: 2px solid black; 
  color: black; 
}

div.mapname_lightson_med a {
  color: black; 
}

div.mapname_lightson_low {
  background: #FFFFCC;
  border: 2px solid black; 
  color: black; 
}

div.mapname_lightson_low a {
  color: black; 
}

.mapinside_top {
  /*height: 73px;*/
}

.mapinside_bottom {
  /* Nothing yet */
}

.mapinside_levels {
  margin: 0 0 -13px 0;
  position: relative;
  top: -13px;
  text-align: center;
}

.mapinside_level {
  margin: 0px 1px;
  padding: 1px 2px;
  font-size: smaller;
}

.mapinside_level_current {
  border: 2px solid red;
  color: white;
}

.mapinside_level_current a:link, .mapinside_level_current a:visited, .mapinside_level_current a:hover, .mapinside_level_current a:active {
  color: white;
}

.mapinside_level_other {
  border: 2px solid black;
  color: white;
}

.mapinside_level_other a:link, .mapinside_level_other a:visited, .mapinside_level_other a:hover, .mapinside_level_other a:active {
  color: white;
}

.mapinside_level_ruined, .mapinside_level_ruined a:link, .mapinside_level_ruined a:visited, .mapinside_level_ruined a:hover, .mapinside_level_ruined a:active {
  background: #222222;
  color: #BBBBBB; 
}

.mapinside_level_lightsoff, .mapinside_level_lightsoff a:link, .mapinside_level_lightsoff a:visited, .mapinside_level_lightsoff a:hover, .mapinside_level_lightsoff a:active {
  background: #888888;
  color: #EEEEEE; 
}

.mapinside_level_lightson, .mapinside_level_lightson a:link, .mapinside_level_lightson a:visited, .mapinside_level_lightson a:hover, .mapinside_level_lightson a:active {
  background: #FFFF99;
  color: black; 
}

/* Map square elements */
.peoplecount {
  background: black;
  /*border: 2px solid white;*/ 
  color: white; 
  margin: 4px; 
  padding: 2px; 
  font-size: 10px;
  text-align: center;
}

.peoplecount img {
  padding-bottom: 0; 
}

.humanname, 
a.humanname, 
a.humanname:link, 
a.humanname:visited, 
a.humanname:hover, 
a.humanname:active 
{  
	color: #EABD9D;
  	cursor: pointer;
}

.humanspeak {  
  color: #FFCC99;
  font-weight: bold;
}

.zombiename, 
a.zombiename, 
a.zombiename:link, 
a.zombiename:visited, 
a.zombiename:hover, 
a.zombiename:active 
{  
	color: #00BB00;
	cursor: pointer;
}

.zombiespeak {  
  color: #5AE05A;
  font-weight: bold;
}

.zombiefamiliar {
  color: #33CCCC; 
  text-decoration: underline; 
}

.myname, a.myname, a.myname:link, a.myname:visited, a.myname:hover, a.myname:active {
  color: #33CCCC;  
}

.map_sq
{
	/* Modernized map cell: uniform sizing via border-box so the per-type 4px borders
	   never change the footprint, flex column layout with a fixed-height name band so
	   the icon always centers in the same place regardless of name length. Card look.
	   Scoped to the map only. */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	text-align: center;
	float: left;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.15;
	border: 4px solid #555;
	border-radius: 8px;
	/* Footprint matches the 108x100 per-cell box the PHP grid math assumes
	   (map_engine::draw_map_grid), so border-box sizing won't cause float-wrap. */
	width: 108px;
	height: 100px;
	margin: 0;
	padding: 5px 4px 4px 4px;
	overflow: hidden;
	color: #fff;
	/* Legible on any background colour without needing a separate name container */
	text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.4);
}

/* Fixed-height name band (always 2 lines tall) so single- and double-line names
   occupy identical space and the icon below always lands in the same spot. Long
   names clamp to 2 lines with an ellipsis instead of pushing the icon around. */
.map_sq .map_sq_name
{
	display: block;
	height: 26px;            /* ~2 lines at 11px / 1.15 line-height */
	line-height: 1.15;
	overflow: hidden;
	width: 100%;
	flex: 0 0 auto;
	/* Clamp to 2 lines where supported (graceful fallback to plain clip elsewhere) */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Centered, consistently sized building icon. With a fixed name band above and the
   cell as a flex column, margin:auto centres the icon in the leftover space — so every
   icon sits at the same vertical position no matter how long the building name is. */
.map_sq .map_bld_icon
{
	display: block;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	object-fit: contain;
	/* margin:auto in a flex column with a fixed name band above centres the icon in
	   the remaining space, identically for every cell. */
	margin: auto;
	/* Lift the dark icon glyphs off coloured backgrounds a touch */
	filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}

/* Links inside a cell (district/building names) inherit the readable white+shadow */
.map_sq a, .map_sq a:link, .map_sq a:visited, .map_sq a:hover, .map_sq a:active
{
	color: #fff;
	text-decoration: none;
}
.map_sq a:hover { text-decoration: underline; }


.myspeak {
  color: #7AE3E3;  
  font-weight: bold;
}

.radiospeak {
  color: #FF9966;  
  font-weight: bold;
}

.health_dying {
  color: #FF0000;
}

.health_wounded {
  color: #C11B17;
}

/* Map square types */
.map_square {
  border: 4px solid #555555;
}

.map_empty {
  background: #827839;
  border: 4px solid #827839;
}

.map_high {
  background: #666666;
  border: 4px solid #666666;
}

.map_tired {
  background: black;
  border: 4px solid white;
  padding: 10px;
  text-align: center;
}

.map_building_generic {
  border: 4px solid #CC3333;
  background: #666666;
}

.map_building_pumpkin_patch 
{
  border: 4px solid #CC3333;
  background: #FF9F30;
}

.map_building_toystore {
  border: 4px solid #2f9be0;
  background: #d9c26a;
}


.map_building_appartments {
  border: 4px solid #993300;
  background: #333366;
}

.map_building_bar {
  border: 4px solid #000066;
  background: #660066;
}



.map_bone_altar
{
	border: 4px solid #CCCCCC;
	background-color: #FFFFFF;
	
}

.map_road
{
	border: 4px solid #333333;
	background: #333333;
	
}

.map_bridge
{
	border: 4px solid #7D5B2D;
	background: #665544;
}


.map_forest
{
	border: 4px solid #009933;
	background: #006600;
}

.map_building_hotel {
  border: 4px solid #663300;
  background: #FF9933;
}

.map_river
{
	border: 4px solid #0099CC;
	background: #009999;
}


.map_ocean
{
	border: 4px solid #0066FF;
	background: #0033FF;
}

.map_building_internet {
  border: 4px solid #339900;
  background: #0000CC;
}

.map_building_museum {
  border: 4px solid #2b6b6b;
  background: #cfc24e;
}

.map_building_gunshop {
  border: 4px solid #CC3333;
  background: #003399;
}

.map_building_restaurant {
  border: 4px solid #6a4fd0;
  background: #d6c43a;
}

.map_building_clocktower
{
	border: 4px solid #8f8f5e;
	background: #8bbf8b;
}

.map_building_gas_station {
  border: 4px solid #6a4fd0;
  background: #3fb8c4;
}

.map_building_school {
  border: 4px solid #FFFF66;
  background: #336666;
}

.map_building_hardware {
  border: 4px solid #d9b53f;
  background: #5f8db8;
}

.map_building_autorepair {
  border: 4px solid #2a2a2a;
  background: #d9b53f;
}

.map_building_liquor_store {
  border: 4px solid #7fcfd6;
  background: #3aa9d6;
}

.map_building_industry {
  border: 4px solid #111111;
  background: #555555;
}

.map_building_power {
  border: 4px solid #FFFFCC;
  background: #555555;
}

.map_building_church {
  border: 4px solid white;
  background: #AAAAAA;
}

.map_park_cemetery {
  border: 4px solid #888888;
  background: #444444;
}

.map_building_labs {
  border: 4px solid #00FF00;
  background: #666666;
}

.map_building_mall {
  border: 4px solid #d8472a;
  background: #d9b23a;
}

.map_building_hospital {
  border: 4px solid red;
  background: white;     
}

.map_building_police {
  border: 4px solid blue;
  background: red;
}

.map_building_firedept {
  border: 4px solid yellow;
  background: red;
}

.map_park {
  border: 4px solid #00DD00;
  background: green url('/images/map/grass.gif') repeat top left;
}



.map_borders_N {
  border-top: 0;
  padding-top: 4px;
}

.map_borders_S {
  border-bottom: 0;
  padding-bottom: 4px;
}

.map_borders_W {
  border-left: 0;
  padding-left: 4px;
}

.map_borders_E {
  border-right: 0;
  padding-right: 4px;
}

.map_borders_NS {
  border-top: 0;
  padding-top: 4px;
  border-bottom: 0;
  padding-bottom: 4px;  
}

.map_borders_WE {
  border-left: 0;
  padding-left: 4px;
  border-right: 0;
  padding-right: 4px;  
}

.map_borders_NW {
  border-top: 0;
  padding-top: 4px;
  border-left: 0;
  padding-left: 4px;  
}

.map_borders_NE {
  border-top: 0;
  padding-top: 4px;
  border-right: 0;
  padding-right: 4px;  
}

.map_borders_SW {
  border-bottom: 0;
  padding-bottom: 4px;
  border-left: 0;
  padding-left: 4px;  
}

.map_borders_SE {
  border-bottom: 0;
  padding-bottom: 4px;
  border-right: 0;
  padding-right: 4px;  
}

.map_borders_NWE {
  border-top: 0;
  padding-top: 4px;
  border-left: 0;
  padding-left: 4px;  
  border-right: 0;
  padding-right: 4px;   
}

.map_borders_SWE {
  border-bottom: 0;
  padding-bottom: 4px;
  border-left: 0;
  padding-left: 4px;  
  border-right: 0;
  padding-right: 4px;   
}

.map_borders_NSW {
  border-top: 0;
  padding-top: 4px;
  border-bottom: 0;
  padding-bottom: 4px;   
  border-left: 0;
  padding-left: 4px;    
}

.map_borders_NSE {
  border-top: 0;
  padding-top: 4px;
  border-bottom: 0;
  padding-bottom: 4px;   
  border-right: 0;
  padding-right: 4px;    
}

.map_borders_NSWE {
  border-top: 0;
  padding-top: 4px;
  border-bottom: 0;
  padding-bottom: 4px;
  border-left: 0;
  padding-left: 4px;     
  border-right: 0;
  padding-right: 4px;    
}


/* Zombie sense map */
.map_sense_bg {
  height: 100%;
  background-color: #002200; 
  background-image: url(/images/marble-bg.png); 
}

.map_sense_table {
  border: 2px solid black;
  background: #000000;
  background-image: url(/images/marble-bg2.png);  
}

.map_sense {
  width: 40px; 
  height: 40px; 
  border: 1px solid #888888;  
  font-size: 9px;    
  cursor: pointer;
}

.map_sense_count_box {
  width: 120px;
  height: 16px;
  border: 1px solid #888888;  
  background: #000000;
  background-image: url(/images/marble-bg.png);
  margin: 4px;
  padding: 2px 4px;
  cursor: pointer; 
  text-align: center; 
}

.map_sense_stats_box {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 680px;
  height: 160px;
  border: 1px solid #888888;  
  background: #000000;
  background-image: url(/images/marble-bg.png);
  overflow: auto;  
}

.map_sense_stats {
  position: absolute;
  top: 10px;
  left: 10px;
  visibility: hidden;
}

.map_sense_groan {
  width: 30px; 
  height: 30px;
  border: 2px solid black;   
  background-image: url(/images/marble-bg2.png); 
  text-align: center;
}

.map_sense_groan img {
  margin-top: 4px;
}

.map_sense_borders_N {
  border-top: 0;
  padding-top: 1px;
}

.map_sense_borders_S {
  border-bottom: 0;
  padding-bottom: 1px;
}

.map_sense_borders_W {
  border-left: 0;
  padding-left: 1px;
}

.map_sense_borders_E {
  border-right: 0;
  padding-right: 1px;
}

.map_sense_borders_NS {
  border-top: 0;
  padding-top: 1px;
  border-bottom: 0;
  padding-bottom: 1px;  
}

.map_sense_borders_WE {
  border-left: 0;
  padding-left: 1px;
  border-right: 0;
  padding-right: 1px;  
}

.map_sense_borders_NW {
  border-top: 0;
  padding-top: 1px;
  border-left: 0;
  padding-left: 1px;  
}

.map_sense_borders_NE {
  border-top: 0;
  padding-top: 1px;
  border-right: 0;
  padding-right: 1px;  
}

.map_sense_borders_SW {
  border-bottom: 0;
  padding-bottom: 1px;
  border-left: 0;
  padding-left: 1px;  
}

.map_sense_borders_SE {
  border-bottom: 0;
  padding-bottom: 1px;
  border-right: 0;
  padding-right: 1px;  
}

.map_sense_borders_NWE {
  border-top: 0;
  padding-top: 1px;
  border-left: 0;
  padding-left: 1px;  
  border-right: 0;
  padding-right: 1px;   
}

.map_sense_borders_SWE {
  border-bottom: 0;
  padding-bottom: 1px;
  border-left: 0;
  padding-left: 1px;  
  border-right: 0;
  padding-right: 1px;   
}

.map_sense_borders_NSW {
  border-top: 0;
  padding-top: 1px;
  border-bottom: 0;
  padding-bottom: 1px;   
  border-left: 0;
  padding-left: 1px;    
}

.map_sense_borders_NSE {
  border-top: 0;
  padding-top: 1px;
  border-bottom: 0;
  padding-bottom: 1px;   
  border-right: 0;
  padding-right: 1px;    
}

.map_sense_borders_NSWE {
  border-top: 0;
  padding-top: 1px;
  border-bottom: 0;
  padding-bottom: 1px;
  border-left: 0;
  padding-left: 1px;     
  border-right: 0;
  padding-right: 1px;    
}

.spray_egg
{
	color: #2a8208;
	
}

.spray_tp
{
	color: #3ca3ba;
}

.spray_red {
  color: #C11B17;
}

.spray_blue {
  color: #306EFF;    
}

.spray_green {
  color: #00DD00;  
}

.spray_yellow {
  color: #DDDD00;    
}

.event_speech {
  color: #FF9933;
}

/* Tooltips */

span.tooltipped {
	border-bottom: 1px dotted; 
}

span.tooltipped_nodots {
	 
}

span.tooltipped div.tooltip, span.tooltipped_nodots div.tooltip {
	display: none;
	top: 0; 
  left: 0;
  width: 150px;
  z-index: 9999;
  
 	padding: 5px; 
  margin: 10px;
	/*background: #303030;*/
  background: #000000; 
  border: 1px solid #869927;
	/*opacity: 0.75;*/   
}

span.tooltipped div.tooltip_larger, span.tooltipped_nodots div.tooltip_larger {
	display: none;
	top: 0; 
  left: 0;
  width: 300px;
  z-index: 9999;

	color: #cdcdcd;
	font-size: 12px;
	font-weight: normal;
    
 	padding: 5px; 
  margin: 10px; 
   
	/*background: #303030;*/
  background: #000000; 
  border: 1px solid #869927;
	/*opacity: 0.75;*/   
}

span.tooltipped div.tooltip_larger a, span.tooltipped_nodots div.tooltip_larger a {
	color: #869927;
	font-size: 11px;   
}

span.tooltipped:hover, span.tooltipped_nodots:hover {
	position: relative;
}

span.tooltipped:hover div.tooltip, span.tooltipped_nodots:hover div.tooltip {
	display: block;
 	position: absolute;
	top: -35px; 
  left: 10px;
}

span.tooltipped:hover div.tooltip_larger, span.tooltipped_nodots:hover div.tooltip_larger {
	display: block;
 	position: absolute;
	top: 5px; 
  left: 10px;
}

div.tooltiptitle {
  color: #869927;
  font-weight: bold;
  padding-bottom: 5px;  
}

/* Map screen */

/* Zoom / pan controls bar above the map viewport */
#map_controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px 0;
}

.map_zoom_btn {
  min-width: 34px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  background: #2a2a2a;
  color: #eee;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.map_zoom_btn:hover { background: #3a3a3a; border-color: #6a6a6a; }
.map_zoom_btn:active { background: #222; }

.map_controls_hint {
  margin-left: 6px;
  color: #888;
  font-size: 11px;
}

/* Scroll/pan container for the (transform-scaled) grid */
#map_viewport {
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  background: #111;
  cursor: grab;
}

#map_viewport:active { cursor: grabbing; }

/* The grid itself is scaled via transform from the top-left corner */
#map_liner {
  transform-origin: 0 0;
}

.maplegend {
  border: 1px solid #cdcdcd;
  margin: 3px;
  height: 15px;
  width: 15px;
}
 
/* Chat box */

#chatcontent {
  height: 89%;
  border: 1px solid green;
  scroll: auto;
}

#chatsend {
  height: 10%;
  border: 1px solid red;
}

div.map {
  position: relative;
}

div.district {
  position: absolute;
  border: 1px solid #cdcdcd;      
}    

div.districtname {
  position:absolute;
  top:50%;      
  height: 2em;
  width: 100%;      
  margin-top:-1em;
  text-align: center;       
}

div.icons a {
  color: white;
  text-decoration: none;
}

div.computer_terminal {
  color: #00ff00;
  font-family: monospace;
}

div.computer_terminal a {
  color: #00dd00;
  text-decoration: undelrine;
}

div.computer_terminal a:hover {
  background-color: #00dd00;
  color: #000000;
  text-decoration: undelrine;
}

div.computer_terminal td {
  padding-right: 15px;
}

div.computer_bluescreen {
  height: 368px;  
  margin: 10px;
  padding: 10px;
  background-color: #0000ff;
  color: #ffffff;  
  
  font-family: monospace;
  font-size: 14px;
}

a.accept {
  color: #00ff00;
}

a.reject {
  color: #ff0000;
}

.grey {
  color: #999999;
}