/* EAMON.WORLD */
/* map.css: Rules for the main SVG map */

/* Colors ~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
:root {
	--ocean: 			rgba(60,128,151,1);
	--seatext:			rgba(138,200,211,1);
	--shelf:			rgba(255,255,255,0.07);
	--shallows:			rgba(255,255,255,0.08);
	--seaice:			rgba(255,255,255,0.5);
	--landmass: 		rgba(230,230,230,1);
	--upland: 			rgba(161,129,118,0.12);
	--highland:			rgba(161,129,118,0.2);
	--highlandtext:		rgba(161,129,118,0.5);
	--mountain:			rgba(169,155,150,0.4);
	--mountaintext:		rgba(161,129,118,1);
	--desert:			rgba(255,216,0,0.25);
	--deserttext:		rgba(179,156,33,1);
	--glacier:			rgba(255,255,255,0.5);
	--forest:			rgba(171,186,154,1);
	--foresttext:		rgba(113,137,89,1);
	--swamp:			rgba(0,164,255,0.2);
	--swamptext:		rgba(0,164,255,1);
	--river:			rgba(41,120,181,1);
	--rivertext:		rgba(41,120,181,1);
	--lake:				rgba(138,200,211,1);
	--laketext:			rgba(41,120,181,1);
	--landtext:			rgba(0,0,0,0.5);
	--sealane:			rgba(255,255,255,1);
	--road:				rgba(224,0,0,1);
	--roadtext:			rgba(224,0,0,1);
	--outborder:		rgba(173,0,222,0.66);
	--inborder:			rgba(173,0,222,0.5);
	--shadow:			rgba(0,0,0,0.2);
	--peak:				rgba(160,116,98,1);
	--peaktext:			rgba(160,116,98,1);
	--volcano:			rgba(255,123,21,1);
	--settlement:		rgba(224,0,0,1);
	--settlementtext:	rgba(224,0,0,1);
	--rift:				rgba(192,0,128,1);
	--structure:		rgba(0,0,0,1);
	--temple:			rgba(0,0,0,1);
	--dungeon:			rgba(0,0,0,1);
	--castle:			rgba(0,0,0,1);
	--adventure:		rgba(255,175,0,1);
	--active:			rgba(255,0,0,1);
	--activealt:		rgba(208,0,0,1);
}

/* Elements ~~~~~~~~~~~~~~~~~~~~~~~~~~*/
svg {
	fill-rule: evenodd;
	clip-rule: evenodd;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 1.5;
	-webkit-backface-visibility: hidden;
}
svg text {
	font-family: "Almendra SC" !important;
	font-weight: 700 !important;
	shape-rendering: crispedges;
}
/* Very bold text labels in the SVG don't render cleanly on mobile, so for
everything at/below 1366px (landscape width of iPad Pro), lower the weight */
.mobile svg text {
	font-weight: 500 !important;
}
svg g path,
svg g text {
	fill-opacity: 1 !important;
}

/*————————————————————*/
#Ocean path,
#Ocean rect {
	fill: url(#Oceanic) !important;
	fill: var(--ocean) !important;
	pointer-events: none;
}

/*————————————————————*/
#Shelf path {
	fill: var(--shelf) !important;
	pointer-events: none;
}
#Shallows path {
	fill: var(--shallows) !important;
	pointer-events: none;
}
#Seas path {
	fill: var(--shallows) !important;
}
#Seas text {
	fill: var(--seatext) !important;
}
#Seas g:hover text {
	cursor: pointer;
	fill: var(--activealt) !important;
}
#Silver_Seas 		{ font-size: 123px; }
#Ramsgate 			{ font-size: 1px; }
#Pirates_Cove 		{ font-size: 1px; }
#North_Ocean 		{ font-size: 123px; }
#Malphigian_Sea 	{ font-size: 17.6px; }
#Magic_Seas 		{ font-size: 123px; }
#Bay_of_Lindom 		{ font-size: 4.4px; }
#Gulf_of_Hedrin		{ font-size: 30px; }
#Great_Bight		{ font-size: 10px; }
#Sea_of_Dreams 		{ font-size: 40px; }
#Dreamless_Sea 		{ font-size: 7.92px; }
#Sea_of_Death 		{ font-size: 123px; }

/*————————————————————*/
#Seaice {
	display: none;
}
#Seaice path {
	fill: var(--seaice) !important;
}

/*————————————————————*/
#Continents path {
	fill: var(--landmass) !important;
	stroke: var(--river) !important;
	stroke-width: 0.18px !important;
	pointer-events: none;
}
#Continents text {
	font-size: 88px;
}

#Regions {
	opacity: 0;
	pointer-events: none;
}

/*————————————————————*/
#Islands path {
	fill: var(--landmass) !important;
	stroke: var(--river) !important;
	stroke-width: 0.18px !important;
}
#Islands text {
	fill: white !important;
}
#Islands g:hover {
	cursor: pointer !important;
}
#Islands g:hover path {
	stroke: var(--active) !important;
}
#Islands g:hover text {
	fill: var(--activealt) !important;
}
#Islands {
	font-size: 1.25px;
}
#Weyrens_Belt		{ font-size: 6.6px; }
#Western_Isles		{ font-size: 44px; }
#Violet_Isles		{ font-size: 8px; }	
#Treasure_Isle		{ font-size: 1.32px; }
#Shadow_Islands		{ font-size: 12px; }
#Serpent_Isle		{ font-size: 1.32px; }
#Islands_of_Death	{ font-size: 7.2px; }
#Leanda_Atoll		{ font-size: 1.32px; }
#Ibras				{ font-size: 1.2px; }
#East_Archipelago	{ font-size: 35.2px; }

/*————————————————————*/
#Uplands path {
	fill: var(--upland) !important;
}
#Uplands text {
	font-size: 5px;
}

/*————————————————————*/
#Highlands path {
	fill: var(--highland) !important;
}
#Highlands text {
	fill: var(--highlandtext) !important;
	cursor: pointer !important;
}
#Highlands {
	font-size: 5px;
}
#Highlands g:hover text {
	fill: var(--active) !important;
}
#Mountains_of_Chakaal	{ font-size: 2px; }
#Tiaga_Gorge			{ font-size: 1.76px; }
#Gulls_Eye_Cliffs		{ font-size: 2.2px; }

/*————————————————————*/
#Ranges path {
	fill: var(--mountain) !important;
}
#Ranges text {
	fill: var(--mountaintext) !important;
}
#Ranges g:hover {
	cursor: pointer !important;
}
#Ranges g:hover path:first-child {
	stroke: var(--active) !important;
	stroke-width: 0.18px !important;
}
#Ranges g:hover text {
	fill: var(--active) !important;
}
#Wyvern_Mountains		{ font-size: 17px; }
#Voormithadreth_Mountains { font-size: 6px; }
#Pass_of_Karathas		{ font-size: 1px; }
#Spartu_Mountains		{ font-size: 12px; }
#Shadow_Mountains		{ font-size: 6px; }
#Sax_Mountains			{ font-size: 20px; }
#Kzor_Mountains			{ font-size: 10px; }
#Jarlschlager_Range		{ font-size: 12px; }
#Horn_Range				{ font-size: 16px; }
#Mountains_of_Mem		{ font-size: 8.8px; }
#Grimlor_Mountains		{ font-size: 10px; }
#Great_Mountains		{ font-size: 32px; }
#Fire_Cliffs			{ font-size: 3.2px; }
#ranges_of_Anguish	{ font-size: 22px; }
#Aevinn_Range			{ font-size: 18px; }

/*————————————————————*/
#Deserts path {
	fill: var(--desert) !important;
}
#Deserts text {
	fill: var(--deserttext) !important;
}
#Deserts g:hover {
	cursor: pointer !important;
}
#Deserts g:hover path {
	stroke: var(--active) !important;
	stroke-width: 0.18px !important;
}
#Deserts g:hover text {
	fill: var(--active) !important;
}
#Desert_of_Terza	{ font-size: 24.2px; }
#Frozen_Desert		{ font-size: 30.8px; }

/*————————————————————*/
#Glaciers path {
	fill: var(--glacier) !important;
}

/*————————————————————*/
#Forests path {
	fill: var(--forest) !important;
}
#Forests text {
	fill: var(--foresttext) !important;
}
#Forests g:hover {
	cursor: pointer !important;
}
#Forests g:hover path {
	stroke: var(--active) !important;
	stroke-width: 0.18px !important;
}
#Forests g:hover text {
	fill: var(--active) !important;
}
#Yomber_Forest		{ font-size: 2.2px; }
#Tangledoom_Forest	{ font-size: 2.2px; }
#Stultwood			{ font-size: 2.2px; }
#Marewood_Forest	{ font-size: 5.28px; }
#Enchanted_Woods	{ font-size: 5.28px; }
#Dead_Forest		{ font-size: 4.84px; }
#Davelmar_Forest	{ font-size: 9.68px; }
#Darkwoods			{ font-size: 6px; }
#Dark_Forest		{ font-size: 2.2px; }
#Cynwood			{ font-size: 3.96px; }
#Crownwood			{ font-size: 3.52px; }
#Crowther_Woods		{ font-size: 1.76px; }
#Carnivorous_Forest	{ font-size: 11.88px; }
#Beginner_Forest	{ font-size: 1.54px; }

/*————————————————————*/
#Lands g text {
	fill: var(--landtext) !important;
}
#Lands g:hover text {
	cursor: pointer !important;
	fill: var(--active) !important;
}
#Lands {
	font-size: 6px;
}
#Veldith				{ font-size: 88px; }
#Tyrna					{ font-size: 88px; }
#Southern_Troll_Kingdom { font-size: 11.88px; }
#Southern_Troll_Kingdom>g:first-child { font-size: 7.92px; }
#Northern_Troll_Kingdom { font-size: 11.88px; }
#Northern_Troll_Kingdom>g:first-child  { font-size: 7.92px; }
#Trillium				{ font-size: 24.2px; }
#Tornhom				{ font-size: 28.16px; }
#Tasavalta				{ font-size: 24.2px; }
#Tasavalta>g:first-child { font-size: 17.6px; }
#Tarrabor				{ font-size: 17.6px; }
#Tanjid					{ font-size: 39.6px; }
#Ta						{ font-size: 39.6px; }
#Sylph					{ font-size: 19.8px; }
#Plain_of_Srevi			{ font-size: 48.4px; }
#Spicelands				{ font-size: 48.4px; }
#Rhyl					{ font-size: 26.4px; }
#Kingdom_of_the_Sister_Mountains { font-size: 9.68px; }
#Sicilia				{ font-size: 36.08px; }
#Sayell					{ font-size: 25.96px; }
#Saxavania				{ font-size: 28.6px; }
#Rinillion				{ font-size: 9.68px; }
#Pocket_Lands			{ font-size: 9.68px; }
#Perrenor				{ font-size: 39.6px; }
#Pendrama_Kingdom		{ font-size: 7.04px; }
#Osirian				{ font-size: 12px; }
#Nostrum				{ font-size: 29.92px; }
#Northland				{ font-size: 30.8px; }
#Northern_Reaches		{ font-size: 44px; }
#Norsax					{ font-size: 12px; }
#Nival					{ font-size: 25.96px; }
#Nexdor					{ font-size: 32.12px; }
#New_Kingdom			{ font-size: 11.44px; }
#Negavia				{ font-size: 10.12px; }
#NDic					{ font-size: 15.84px; }
#Malboria				{ font-size: 32.12px; }
#Loathia				{ font-size: 17.6px; }
#Larboria				{ font-size: 24.2px; }
#Kzorland				{ font-size: 32.12px; }
#Kor					{ font-size: 17.6px; }
#Knieriem				{ font-size: 44px; }
#Kalos					{ font-size: 28.16px; }
#Kalos>g:first-child	{ font-size: 17.6px; }
#Jagala					{ font-size: 88px; }
#Ilvithri				{ font-size: 48.4px; }
#Griswald_Kingdom		{ font-size: 5.28px; }
#Excamia				{ font-size: 12px; }
#Kingdom_of_Evenhold	{ font-size: 40.04px; }
#Elf_lands				{ font-size: 48.4px; }
#Duron_Kingdom			{ font-size: 11.88px; }
#Far_Dorier				{ font-size: 10px; }
#Old_Dorier				{ font-size: 10px; }
#Dorier					{ font-size: 39.6px; }
#Cyrak					{ font-size: 32.12px; }
#Cyrak>g:first-child	{ font-size: 17.6px; }
#Kingdom_of_Connall		{ font-size: 32px; }
#Carthianum				{ font-size: 11px; }
#Carthianum>g:first-child { font-size: 8.8px; }
#Calphante				{ font-size: 22px; }
#Barbarian_Lands		{ font-size: 15.84px; }
#Arenjun_Kingdom		{ font-size: 7.04px; }
#Apple_Island			{ font-size: 15.4px; }
#Alvard_Kingdom			{ font-size: 10.12px; }
#Agorrum				{ font-size: 12px; }
#Agimen_Kingdom			{ font-size: 24px; }

/*————————————————————*/
#Swamps path {
	fill: var(--swamp) !important;
}
#Swamps text {
	fill: var(--swamptext) !important;
}
#Swamps g:hover {
	cursor: pointer !important;
}
#Swamps g:hover text {
	fill: var(--active) !important;
}
#Swamps g:hover path {
	stroke: var(--active) !important;
	stroke-width: 0.18px !important;
}
#Foulwater_Marshes		{ font-size: 3.96px; }
#Arcosian_Swamp			{ font-size: 5.72px; }

/*————————————————————*/
#Rivers path {
	fill: none;
	stroke: var(--river) !important;
	stroke-width: 0.18px !important;
}
#Rivers text {
	font-size: 2px !important;
	fill: var(--river) !important;
}
#Rivers g:hover {
	cursor: pointer !important;
}
#Rivers g:hover text {
	fill: var(--active) !important;
}
#Rivers g:hover path {
	stroke: var(--active) !important;
}

/*————————————————————*/
#Lakes path {
	fill: var(--lake) !important;
	stroke: var(--river) !important;
	stroke-width: 0.18px !important;
}
#Lakes text {
	fill: var(--laketext) !important;
}
#Lakes g:hover {
	cursor: pointer;
}
#Lakes g:hover text {
	fill: var(--active) !important;
}
#Lakes g:hover path {
	stroke: var(--active) !important;
	stroke-width: 0.18px !important;
}
#Tirnmere			{ font-size: 1.76px; }
#Skyglass_Lake		{ font-size: 3.52px; }
#Great_Lake			{ font-size: 3.52px; }
#Broken_Neck		{ font-size: 3.52px; }

/*————————————————————*/
#Sealanes path {
	fill: none !important;
	stroke: var(--sealane) !important;
	stroke-width: 0.14px !important;
	stroke-dasharray: 0.2,0.27,0,0 !important;
}

/*————————————————————*/
#Roads path {
	fill: none !important;
	stroke: var(--road) !important;
	stroke-width: 0.14px !important;
	stroke-dasharray: 0.2,0.27,0,0 !important;
}
#Roads text {
	font-size: 0.6px;
	fill: var(--roadtext);
}
#Roads g:hover {
	cursor: pointer;
}
#Roads g:hover text {
	fill: var(--active) !important;
}
#Roads g:hover path {
	stroke: var(--active) !important;
	stroke-width: 0.18px !important;
}

/*————————————————————*/
#Railroads path {
	fill: none !important;
	stroke: var(--road) !important;
	stroke-width: 0.14px !important;
	stroke-dasharray: 0.06,0.24,0,0 !important;
	opacity: 0.5;
}
#Railroads text {
	font-size: 0.6px;
	fill: var(--roadtext);
}
#Railroads g:hover {
	cursor: pointer;
}
#Railroads g:hover text {
	fill: var(--active) !important;
}
#Railroads g:hover path {
	stroke: var(--active) !important;
	stroke-width: 0.18px !important;
	opacity: 1;
}

/*————————————————————*/
#Shadows path {
	fill: var(--shadow) !important;
	pointer-events: none;
}
#Shadows g:hover text {
	cursor: pointer;
	fill: var(--active) !important;
}
#Shadow_Wall {
	font-size: 12px; opacity: 0.5;
}

/*————————————————————*/
#Mountains path {
	fill: var(--peak) !important;
}
#Mountains text {
	fill: var(--peaktext) !important;
	font-size: 1.2px !important;
	text-align: center !important;
}
#Mountains g:hover {
	cursor: pointer !important;
}
#Mountains g:hover text,
#Mountains g:hover path {
	fill: var(--active) !important;
}

/*————————————————————*/
#Volcanoes path:nth-child(1) {
	fill: white !important;
}
#Volcanoes path:nth-child(2) {
	fill: var(--peak) !important;
}
#Volcanoes path:nth-child(3) {
	fill: var(--volcano) !important;
}
#Volcanoes text {
	fill: var(--peak) !important;
	font-size: 1.2px !important;
	text-align: center !important;
}
#Volcanoes g:hover text,
#Volcanoes g:hover path {
	fill: var(--active) !important;
}

/*————————————————————*/
#Settlements path {
	fill: var(--settlement) !important;
}
#Settlements text {
	fill: var(--settlement) !important;
	font-size: 1.2px !important;
}
#Settlements g:hover {
	cursor: pointer !important;
}
#Settlements g:hover text {
	fill: var(--active) !important;
}
#Settlements g:hover path {
	fill: var(--active) !important;
	stroke: var(--active) !important;
	stroke-width: 0.15px;
}
#Ashelem,
#Evenhold_Crown_District,
#Evenhold_Harbor_District,
#Evenhold_Temple_District {
	visibility: hidden;
}

/*————————————————————*/
#Holy_sites path,
#Dungeons path,
#Fortifications path,
#Rifts path,
#Structures g {
	fill: black;
}
#Holy_sites g:hover path,
#Dungeons g:hover path,
#Fortifications g:hover path,
#Rifts g:hover path,
#Structures g:hover path {
	fill: var(--active) !important;
	cursor: pointer !important;
	stroke: var(--active) !important;
	stroke-width: 0.1px;
}
#Rifts {
	display: none;
}

/*————————————————————*/
#Outborders path {
	fill: none !important;
	stroke: var(--outborder) !important;
	stroke-width: 0.75px !important;
	stroke-dasharray: 1.82,2.55,0,0 !important;
}
#Inborders path {
	fill: none !important;
	stroke: var(--inborder) !important;
	stroke-width: 0.5px !important;
	stroke-dasharray: 0.45,1.14,0,0 !important;
}

/*————————————————————*/
#Adventures path {
	fill: var(--adventure) !important;
	font-size: 1.6px !important;
	text-align: center !important;
}
#Adventures g:hover path {
	cursor: pointer !important;
	fill: var(--active) !important;
    stroke: var(--active) !important;
    stroke-width: 0.2px !important;
}

/*————————————————————*/
#Sky path {
	fill: var(--landmass) !important;
	stroke: var(--river) !important;
	stroke-width: 0.18px !important;
}
#Sky g:hover text {
	cursor: pointer;
	fill: var(--active) !important;
}
#Floating_Island {
	font-size: 44px;
}
#Floating_Island path,
#Floating_Island>g:last-child {
	display: none;
}
#Harpy_Island {
	font-size: 1.2px;
}

/*————————————————————*/
.grid {
	pointer-events: none;
	mix-blend-mode: difference;
}
#Hex60 {
	fill: none;
	stroke: #333;
	stroke-width: 0.25px;
}
#Hex6 {
	fill: none;
	stroke: #333;
	stroke-width: 0.1px;
}
#Hexes60 {
	opacity: 0.85;
}
#Hexes6 {
	opacity: 0.7;
}

/*————————————————————*/
#Fog {
	pointer-events: none;
}

/*————————————————————*/
#Scale {
	display: none;
}
#Scale path {
	fill: white;
}
#Scale text {
	fill: white;
	font-size: 2.4px;
}

/*————————————————————*/
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
	background-color: #3498db;
	border-radius: 10px;
	padding: 10px;
	color: white;
	animation: pulse 2s infinite;
}