section#map
{	flex-grow:1;
	overflow:hidden;
}

section#map>article
{ 	animation:none;
}

article.map
{   position:relative; top:0;
	background-color:var(--back);
}

svg
{   position:absolute; top:0; width:100%; height:100%;
}

table.map
{   width:100%;
    height:100%;
    table-layout:fixed;
    border-collapse:collapse;    
	font-size:100%;
	border-spacing:0;
	/*line-height:1em;*/
	background-size:100% 100%; background-position:50% 50%;	
}

table.map.legende
{ 	background:none;
}

table.map td
{   border:1px solid var(--dark);
    text-align:center; 
	padding:0;
}

table.map td.support
{	 background-color:RGB(0,255,255,.1);
}

table.map TD>A>span /* coords */
{	color:RGBA(255,255,255,.35); display:block; position:absolute; top:0; left:0; line-height:1em;
}

/* Cell */
table.map A
{   font-size:inherit;
	background-color:transparent; margin:0 !important; padding:0; color:inherit;
    width:100%; height:100%; position:relative; /* pour div interne */
	transition:transform .2s ease;
	border:1px solid transparent; border-radius:0;
	display:table; /* firefox hack pour height 100% */
	z-index:20; /* on fera passer hover en dessous */
	line-height:0;
	margin:2px;
	/*transition:none; */
	/* sinon TR height % */
}

table.map A:hover { background-color:rgba(255,255,255,.1);  }
table.map A.click { transform:scale(1.5); z-index:30; }


table.map A.map { border-color:transparent; /* default */ }
table.map A.home { border-color:cyan; border-radius:100%; }
table.map A.me { background-color:RGBA(255,255,255,.15)}
table.map A.select { background-color:RGBA(255,255,255,.15); border-color:white; /* me.u */ }
table.map A.spot { background-color:RGBA(0,255,0,.2);}
table.map A.public { background-color:RGBA(255,255,0,.25);}
table.map A.event { background-color:RGBA(200,100,255,.3);}
table.map A.pvp { background-color:RGBA(255,50,50,.3);}


/*	https://css-tricks.com/the-shapes-of-css/ */

/*  spot */
table.map A>div
{   /* width:6%; height:6%; 6% d'une case */
	width:.4em; height:.4em;
    position:absolute;
	border:2px solid white;
	/*rotate:45deg;*/
}


table.map A>div.home { border-color:transparent; background-color:RGBA(255,255,0,.4); }
table.map A>div.unit { background-color:transparent; border-radius:100%; }


table.map A>div.me { border-color:white; background-color:white; color:white !important;  }
table.map A>div.metro { border-color:transparent; background-color:RGBA(0,0,0,.7); color:RGBA(255,255,255,.4); }
table.map A>div.spot { border-color:#0F0;  } /* ne bouge jamais */
table.map A>div.pve { border-color:#F64;  } /* rotate:45deg; */ 
table.map A>div.pvp { border-color:#F0F; /* bma */ }
table.map A>div.bmx { border-color:#888; /* bmx */ }
table.map A>div.support { border-color:#0FF; /* koma */ }
table.map A>div.raider { border-color:#0AF; /* leto*/ }


line.origin { stroke:#FFF; stroke-width:1px; stroke-opacity:.35; stroke-dasharray:2,3; }
line.fly { stroke:#FFF; stroke-width:1px; stroke-opacity:.5; }
line.pve { stroke:#F64;; stroke-width:1px; stroke-opacity:.65; }
line.pvp { stroke:#808; stroke-width:1px; stroke-opacity:.65; }
line.bmx { stroke:#888; stroke-width:1px; stroke-opacity:.5; }
line.support { stroke:#0FF; stroke-width:1px; stroke-opacity:.5; }
line.raider { stroke:#0AF; stroke-width:1px; stroke-opacity:.5; }




table.map.zoom0 td { font-size:75%; }
table.map.zoom1 td { font-size:90%; }
table.map.zoom2 td { font-size:110%; }


table.map legend
{ 	margin:0; padding:0; line-height:0em; 
	position:relative; background-color:transparent;
	/* padding-left:1.5em; border-top:1px solid RGBA(255,255,255,.4); */
	display:block; color:inherit;
} 

table.map.zoom0 legend { padding:.1em 0 0 .6em;  }
table.map.zoom1 legend { padding:.2em 0 0 .75em;  }
table.map.zoom2 legend { padding:.3em 0 0 1em;  }