.results
{
	display: grid; grid-template-columns: [rank] auto [shop] 1fr [arena] 1fr; gap: 0 3px;
	font-feature-settings: "thou" off; padding-bottom: 50px;
}
.results[data-mode="shop"]
{
	grid-template-columns: [rank] auto [shop] 1fr;
	width: 60%; margin-left: 17%;
}
.results[data-mode="arena"]
{
	grid-template-columns: [rank] auto [arena] 1fr;
	width: 60%; margin-left: 17%;
}

.result-sys.sys-shop, .result-err.sys-shop {grid-column-start: shop;}
.result-sys.sys-arena, .result-err.sys-arena {grid-column-start: arena;}

.result-err {height: 50px; line-height: 50px; text-align: center; place-self: center; font-size: 1.25em;}

.result-next {margin-top: 11px;}
.result-head.result-extra, .result-rank.result-extra {margin-top: 0;}
.result-rank.result-extra {font-size: 24px; text-align: right;}
.result-head {grid-column: 2 / -1; height: 34px; display: flex;}
.result-head > div {flex-basis: 0; flex-grow: 1;}
.result-head-label
{
	height: 24px; margin: 5px 0 -5px; font-style: italic; line-height: 24px; font-size: 18px;
}
.result-rank {line-height: 50px; font-size: 32px; padding: 0 10px; text-align: right;}
.result-sys-head
{
	text-align: left; height: 32px; line-height: 32px; font-size: 22px;
	border: outset 1px black; border-radius: 3px;
	background: radial-gradient(ellipse at 35% 35%, #fff, #e0e0e0) padding-box, linear-gradient(135deg, darkgray, lightgray) border-box;
}
html.dark .result-sys-head
{
	background: radial-gradient(ellipse at 35% 35%, #505050, #101010) padding-box, linear-gradient(135deg, darkgray, lightgray) border-box;
}

.result-extra-comment {font-size: 1.5em; user-select: none; color: #808080; position: relative; top: 16px;}
.result-extra .result-sys-atts .fac .total:before {content: "+"; width: 0;}

.result-sys-name {display: inline-block; vertical-align: top; height: 32px; font-feature-settings: "thou" off;}
.result-sys-name a {color: #00b;}
.result-sys-name a:visited {color: #416;}
html.dark .result-sys-name a {color: #8cf;}
html.dark .result-sys-name a:visited {color: #daf;}

.result-sys-info
{
	font-size: 15px; line-height: 16px; text-align: right; float: right;
	color: #404040; padding-right: 5px;
}
.result-sys-dist {font-style: italic; font-variant-caps: small-caps;}
html.dark .result-sys-info {color: #b0b0b0;}
.result-sys-link {}
.result-sys-link a img {width: 14px;}

.result-sys-atts {display: flex;}

.result-att, .result-val
{
	font-size: 16px; height: 16px; line-height: 16px; text-align: center;
	margin-top: 1px; flex-basis: 0; white-space: nowrap;
}
.result-att
{
	border: outset 1px black; border-radius: 3px 0 0 3px; margin-left: 1px;
	background: #f0f0f0;
	flex-grow: 4;
}
html.dark .result-att {background: #202020;}
.result-val
{
	border: outset 1px black; border-left: none; border-radius: 0 3px 3px 0; margin-right: 1px;
	background: #ffffff;
	flex-grow: 4;
}
html.dark .result-val {background: #101010;}

.result-att.short {flex-grow: 3;}
.result-att.long {flex-grow: 5;}
.result-val.long, .result-att.longer {flex-grow: 6;}
.result-val.fac, .result-val.longer {flex-grow: 7;}
.result-val.result-cnb {flex-grow: 2;}

.result-val.more {margin-right: 0; border-radius: 0;}
.result-val.fac .total {font-weight: bold;}
.result-val.fac .empire {color: #0040c0;}
.result-val.fac .alliance {color: #006000; margin: 0 5px;}
.result-val.fac .federation {color: #c02000;}

html.dark .result-val.fac .empire {color: #40c0ff;}
html.dark .result-val.fac .alliance {color: #60ff60; margin: 0 5px;}
html.dark .result-val.fac .federation {color: #ff6000;}


.result-sys-power {display: inline-block; vertical-align: top; width: 28px; height: 28px; margin: 2px 12px 2px 4px; background-size: contain;}
.power-ADu {background-image: url(powers/l-ADu.png); }
.power-ADe {background-image: url(powers/l-ADe.png); }
.power-ALD {background-image: url(powers/l-ALD.png); }
.power-DP  {background-image: url(powers/l-DP.png);  }
.power-EM  {background-image: url(powers/l-EM.png);  }
.power-FW  {background-image: url(powers/l-FW.png);  }
.power-LYR {background-image: url(powers/l-LYR.png); }
.power-PA  {background-image: url(powers/l-PA.png);  }
.power-YG  {background-image: url(powers/l-YG.png);  }
.power-ZH  {background-image: url(powers/l-ZH.png);  }
.power-ZT  {background-image: url(powers/l-ZT.png);  }
.power-JA  {background-image: url(powers/l-JA.png);  }
.power-NK  {background-image: url(powers/l-NK.png);  }
.power-thargoid {background-image: url(powers/lr-thargoid.png);}

html.dark .power-ADu {background-image: url(powers/d-ADu.png); }
html.dark .power-ADe {background-image: url(powers/d-ADe.png); }
html.dark .power-ALD {background-image: url(powers/d-ALD.png); }
html.dark .power-DP  {background-image: url(powers/d-DP.png);  }
html.dark .power-EM  {background-image: url(powers/d-EM.png);  }
html.dark .power-FW  {background-image: url(powers/d-FW.png);  }
html.dark .power-LYR {background-image: url(powers/d-LYR.png); }
html.dark .power-PA  {background-image: url(powers/d-PA.png);  }
html.dark .power-YG  {background-image: url(powers/d-YG.png);  }
html.dark .power-ZH  {background-image: url(powers/d-ZH.png);  }
html.dark .power-ZT  {background-image: url(powers/d-ZT.png);  }
html.dark .power-JA  {background-image: url(powers/d-JA.png);  }
html.dark .power-NK  {background-image: url(powers/d-NK.png);  }
html.dark .power-thargoid {background-image: url(powers/dr-thargoid.png);}