:root {
	--bar-none-color: green;
	--bar-attack-color: red;
	--bar-transport-color: blue;
	--home-font-color: #666666;
	--home-link-color: #777777;
	--home-link-color-hover: #999999;
	--font-color: #000000;
	--link-color: #336699;
	--link-color-hover: #000000;
	--cell-background-color: #d9dff5;
	--heading-color: #000;
	--container-color: #F0F0F0;
	--browser-background-color: #FFF;
	--contrast-color: #fff;
	--own-island-row-color: #dcdcdc;
}

html {
	height: 100vh;
}

body {
	background-color: #FFFFFF;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	line-height: 19px;
	margin: 0;
	height: 100%
}

form {
	margin: 0;
}

.home-container-outer {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	flex-flow: column;
}

.home-container {

}

a {
	font-weight: bold;
	text-decoration: none;
	color: var(--link-color);
}

a:hover {
	color: var(--link-color-hover);
}

h1 {
	font-size: 15px;
	font-weight: bold;
	color: var(--font-color);
}

h2 {
	font-size: 11px;
	color: var(--heading-color);
	font-weight: bold;
	margin: 0;
}

input, textarea, select {
	font-family: Verdana, sans-serif;
	font-size: 11px;
}

input[type="submit"]:hover {
	color: black;
}

.home-logo {
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
}

.home-content {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.home-form-container, .home-info-container {
	background-color: var(--container-color);
	padding: 15px;
	width: 300px;
	box-sizing: border-box;
}

.home-footer {
	margin-top: 20px;
	font-size: 10px;
}

.home-footer-menu {
	margin-top: 20px;
	font-size: 11px;
	display: flex;
	justify-content: center;
}

.home-footer-register {
	color: var(--link-color);
	display: flex;
	justify-content: right;
	margin-right: 50px;
}

.home-footer-menu a {
	color: var(--link-color-hover);
	margin-left: 8px;
	padding-left: 8px;
	position: relative;
}

.home-footer-menu a:first-child::before {
	display: none;
}

.home-footer-menu a::before {
	content: "|";
	color: var(--font-color);
	display: block;
	position: absolute;
	top: -1px;
	left: -3px;
}

.home-register-img {
	margin-top: 20px;
}


/*GAME*/
.text-green {
	color: green;
}

.text-red {
	color: red;
}

.text-center {
	text-align: center;
}

.font-bold {
	font-weight: bold;
}

.cell-row {
	display: flex;
	gap: 1px;
	margin-bottom: 1px;
}

.cell {
	background-color: var(--cell-background-color);
	padding: 5px;
}

/* Alliance member list: a long name wraps inside its column instead of widening it. */
.member-row .cell {
	min-width: 0;
	overflow-wrap: anywhere;
	box-sizing: border-box;
}


.cell-full {
	width: 100%;
}

.cell-half {
	width: 50%;
}

.cell-third {
	width: 33.33%
}

.width-1 {
	width: 1%;
}

.width-2 {
	width: 2%;
}

.width-3 {
	width: 3%;
}

.width-4 {
	width: 4%;
}

.width-5 {
	width: 5%;
}

.width-6 {
	width: 6%;
}

.width-7 {
	width: 7%;
}

.width-8 {
	width: 8%;
}

.width-9 {
	width: 9%;
}

.width-10 {
	width: 10%;
}

.width-11 {
	width: 11%;
}

.width-12 {
	width: 12%;
}

.width-13 {
	width: 13%;
}

.width-14 {
	width: 14%;
}

.width-15 {
	width: 15%;
}

.width-16 {
	width: 16%;
}

.width-17 {
	width: 17%;
}

.width-18 {
	width: 18%;
}

.width-19 {
	width: 19%;
}

.width-20 {
	width: 20%;
}

.width-21 {
	width: 21%;
}

.width-22 {
	width: 22%;
}

.width-23 {
	width: 23%;
}

.width-24 {
	width: 24%;
}

.width-25 {
	width: 25%;
}

.width-26 {
	width: 26%;
}

.width-27 {
	width: 27%;
}

.width-28 {
	width: 28%;
}

.width-29 {
	width: 29%;
}

.width-30 {
	width: 30%;
}

.width-31 {
	width: 31%;
}

.width-32 {
	width: 32%;
}

.width-33 {
	width: 33%;
}

.width-34 {
	width: 34%;
}

.width-35 {
	width: 35%;
}

.width-36 {
	width: 36%;
}

.width-37 {
	width: 37%;
}

.width-38 {
	width: 38%;
}

.width-39 {
	width: 39%;
}

.width-40 {
	width: 40%;
}

.width-41 {
	width: 41%;
}

.width-42 {
	width: 42%;
}

.width-43 {
	width: 43%;
}

.width-44 {
	width: 44%;
}

.width-45 {
	width: 45%;
}

.width-46 {
	width: 46%;
}

.width-47 {
	width: 47%;
}

.width-48 {
	width: 48%;
}

.width-49 {
	width: 49%;
}

.width-50 {
	width: 50%;
}

.width-51 {
	width: 51%;
}

.width-52 {
	width: 52%;
}

.width-53 {
	width: 53%;
}

.width-54 {
	width: 54%;
}

.width-55 {
	width: 55%;
}

.width-56 {
	width: 56%;
}

.width-57 {
	width: 57%;
}

.width-58 {
	width: 58%;
}

.width-59 {
	width: 59%;
}

.width-60 {
	width: 60%;
}

.width-61 {
	width: 61%;
}

.width-62 {
	width: 62%;
}

.width-63 {
	width: 63%;
}

.width-64 {
	width: 64%;
}

.width-65 {
	width: 65%;
}

.width-66 {
	width: 66%;
}

.width-67 {
	width: 67%;
}

.width-68 {
	width: 68%;
}

.width-69 {
	width: 69%;
}

.width-70 {
	width: 70%;
}

.width-71 {
	width: 71%;
}

.width-72 {
	width: 72%;
}

.width-73 {
	width: 73%;
}

.width-74 {
	width: 74%;
}

.width-75 {
	width: 75%;
}

.width-76 {
	width: 76%;
}

.width-77 {
	width: 77%;
}

.width-78 {
	width: 78%;
}

.width-79 {
	width: 79%;
}

.width-80 {
	width: 80%;
}

.width-81 {
	width: 81%;
}

.width-82 {
	width: 82%;
}

.width-83 {
	width: 83%;
}

.width-84 {
	width: 84%;
}

.width-85 {
	width: 85%;
}

.width-86 {
	width: 86%;
}

.width-87 {
	width: 87%;
}

.width-88 {
	width: 88%;
}

.width-89 {
	width: 89%;
}

.width-90 {
	width: 90%;
}

.width-91 {
	width: 91%;
}

.width-92 {
	width: 92%;
}

.width-93 {
	width: 93%;
}

.width-94 {
	width: 94%;
}

.width-95 {
	width: 95%;
}

.width-96 {
	width: 96%;
}

.width-97 {
	width: 97%;
}

.width-98 {
	width: 98%;
}

.width-99 {
	width: 99%;
}

.width-100 {
	width: 100%;
}


.game {
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	background-color: var(--browser-background-color);
	color: var(--font-color);
}

/* The dark look lives in the "Dark mode" section at the end of this file. */


.game-container {
	max-width: 450px;
}

.game-container h2 {
}

.game-container img {
	max-height: 18px;
	/*max-width: 20px;*/
}

.game-header {
}

.game-header-new-mail {
	width: 16px;
}

.game-content {
}

.game-resources {
	display: flex;
	flex-flow: row;
	margin-bottom: 20px;
}

.game-resource-item {
	padding: 3px;
	border: 2px solid #666;
	flex-grow: 1;
	border-left: 0;
	display: flex;
	align-items: center;
}

.game-resource-item img {
	margin-left: 2px;
	margin-bottom: 2px;
}

.game-resource-amount {
	margin-left: 4px;
	line-height: 18px;
	display: inline-block;
	margin-top: 1px;
}

.game-resource-item:first-child {
	border-left: 2px solid #666;
}

.game-info {
	display: flex;
}

.game-buildings {
	flex-grow: 1;
}

.game-building-item {
	display: flex;
	align-items: center;
}

.game-army {
	flex-grow: 1;
}

.game-army-item, .game-ship-item, .game-building-item {
	margin-top: 4px;
}

.game-army-item a, .game-ship-item a, .game-building-item a {
	margin-left: 3px;
}

.game-army-item {
	display: flex;
	align-items: center;
}

.game-ship-item {
	display: flex;
	align-items: center;
}

.game-points {
}

.game-alert {
	margin-top: 20px;
}

.game-footer {
	/*color: var(--font-color);*/
}

.game-timestamp {
	margin-top: 20px;
}

.game-time {
}

h2.game-heading-ships {
	margin-top: 27px;
}

h2.game-heading-points {
	margin-top: 27px;
}

/*Ranking*/

.ranking-navigation {
	background-color: var(--cell-background-color);
	padding: 3px;
	text-align: center;
	margin-bottom: 15px;
}

.ranking {
	width: 100%;
}

.ranking-header {
	background-color: var(--cell-background-color);
	padding: 5px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 1px;
}

.ranking-row {
	width: 100%;
	overflow: hidden;
	display: flex;
	gap: 1px;
	margin-bottom: 1px;
}

.ranking-row.current .ranking-item-rank, .ranking-row.current .ranking-item-points, .ranking-row.current .ranking-item-direction, .ranking-row.current .ranking-item-player {
	background-color: rgba(128, 128, 128, 0.28);
}

.ranking-heading-rank, .ranking-heading-player, .ranking-heading-points, .ranking-heading-direction,
.ranking-item-rank, .ranking-item-player, .ranking-item-points, .ranking-item-direction {
	font-size: 11px;
	/*border: 1px solid white;*/
	padding: 5px;
	border-collapse: collapse;
	/*background-color: rgb(247, 247, 247);*/
	background-color: var(--cell-background-color);
	float: left;
	/*height: 14px;*/
	/*line-height: 14px;*/
}

.ranking-heading-rank, .ranking-heading-player, .ranking-heading-points, .ranking-heading-direction {
	font-weight: bold;
	color: var(--font-color);
}

.ranking-item-rank, .ranking-item-player, .ranking-item-points, .ranking-item-direction {

}

.ranking-item-rank, .ranking-heading-rank {
	width: 40px;
}

.ranking-item-player, .ranking-heading-player {
	width: calc(100% - 116px);
}

.ranking-item-points, .ranking-heading-points {
	width: 60px;
}

.ranking-item-direction, .ranking-heading-direction {
	width: 17px;
}

/* Worlds with ranking symbols: an extra island column (60px + 1px gap). */
.ranking--islands .ranking-item-player, .ranking--islands .ranking-heading-player {
	width: calc(100% - 177px);
}

.ranking-symbol {
	margin-left: 2px;
	cursor: help;
}

.ranking-trend {
	color: #999999;
	font-weight: bold;
	cursor: help;
}

.ranking-trend--up {
	color: #00aa00;
}

.ranking-trend--down {
	color: #cc0000;
}

/* Big ocean overview (/map/ocean): one square per island group. */
.ocean-grid {
	display: grid;
	gap: 1px;
	background-color: #013a66;
	padding: 1px;
	margin: 10px 0;
}

.ocean-cell, .ocean-key {
	background-color: rgb(1, 86, 149);
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.ocean-cell {
	aspect-ratio: 1;
	width: 100%;
	min-width: 0;
	display: block;
}

.ocean-cell:hover, .ocean-cell:focus {
	outline: 2px solid #ffffff;
	outline-offset: -1px;
}

.ocean-key {
	display: inline-block;
	width: 10px;
	height: 10px;
	vertical-align: middle;
	cursor: default;
}

.ocean-cell--yellow, .ocean-key--yellow { background-color: #f2d300; }
.ocean-cell--red, .ocean-key--red { background-color: #d62020; }
.ocean-cell--orange, .ocean-key--orange { background-color: #ff8c00; }
.ocean-cell--purple, .ocean-key--purple { background-color: #9b30d0; }

.ocean-legend {
	font-size: 11px;
}

.ocean-filter [hidden], .ocean-tip[hidden] {
	display: none !important;
}

.ocean-tip {
	position: absolute;
	z-index: 1000;
	max-width: 300px;
	padding: 5px;
	background: #333333;
	color: #ffffff;
	border: 1px solid #000000;
	font-size: 12px;
	line-height: 1.4;
	pointer-events: none;
}

/* Bonus trophy in the header (worlds with bonuses); blinks when one is ready. */
.bonus-icon {
	text-decoration: none;
}

.bonus-icon--ready {
	animation: bonus-blink 1s infinite;
}

@keyframes bonus-blink {
	50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
	.bonus-icon--ready {
		animation: none;
		outline: 2px solid gold;
	}
}

.ranking-pagination {
	text-align: center;
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
}

.ranking-pagination-link {
	width: 65px;
}

.ranking-pagination-link + .ranking-pagination-link {
	margin-left: 5px;
}


.ranking-search {
	margin-bottom: 15px;
}

.ranking-search-row {
	display: flex;
	justify-content: space-between;
	gap: 1px;
	margin-bottom: 1px;
}

.ranking-search-column {
	width: 50%;
	padding: 5px;
	background-color: var(--cell-background-color);
}

.ranking-search-submit {
	padding: 3px;
	background-color: var(--cell-background-color);
	text-align: center;
}

.ranking-search-submit input:hover {
	color: var(--link-color-hover);
}


.ranking-search-row label {
	font-weight: bold;
}

.ranking-search-row input {
	height: 18px;
	box-sizing: border-box;
}


.ranking-footer {
	width: 100%;
}

.ranking-footer hr {
	width: 100%;
	border: none;
	border-top: 1px solid #000;
}

.ranking-footer-info {
	display: flex;
	justify-content: space-between;
}

.ranking-footer-time {
	text-align: right;
}

/*Info*/
.info-container {
	padding: 3px;
}

.info-item {

}

.info-heading-wrapper {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.info-heading {
	font-weight: bold;
	margin-left: 5px;
	line-height: 22px;
}

.info-description {
	font-family: Verdana, sans-serif;
	font-size: 11px;
	line-height: 19px;
}

.info-description b {
	/*font-size: 13px;*/
}

.info-description p {
	margin: 10px 0;
}


/*Islands*/
.islands-table {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-spacing: 1px;
	border-collapse: separate;
}

.islands-row {
	display: flex;
	flex-direction: row;
	gap: 1px;
}


.islands-header .islands-cell {
	background-color: var(--cell-background-color);
}

.islands-cell {
	padding: 3px;
	display: flex;
	align-items: center;
}

input[type="submit"], input[type="submit"], input[type="submit"], input[type="submit"] {
	appearance: none; /* Remove default browser styles */
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none; /* Remove background */
	border: none; /* Remove border */
	padding: 0; /* Remove padding */
	margin: 0; /* Remove margin */
	font: inherit; /* Inherit font from parent */
	color: inherit; /* Inherit color from parent */
	text-align: inherit; /* Inherit text alignment from parent */
	cursor: pointer; /* Set cursor to pointer to indicate it's clickable */
	outline: none; /* Remove outline on focus */

	white-space: break-spaces;
	color: var(--link-color);
	font-weight: bold;
	line-height: 18px;
}

.islands-cell form input[type="submit"]:hover {
	color: var(--link-color-hover);
}


.islands-cell:nth-child(1) {
	/*width: calc(100% - 150px - 65px - 8px);*/
	/*max-width: calc(100% - 150px - 65px - 8px);*/
	width: 154px;
	max-width: 154px;
	white-space: wrap;
}

.islands-cell:nth-child(2),
.islands-cell:nth-child(3),
.islands-cell:nth-child(4) {
	width: 50px;
}

.islands-cell:nth-child(5) {
	width: 100px; /* five 18px symbols + gaps + padding */
	/* Up to five order symbols: wrap instead of running under the bar. */
	flex-wrap: wrap;
	gap: 1px;
}

.islands-cell:nth-child(6) {
	width: 5px;
	padding: 0;
	border-bottom: 1px solid white;
}

.islands-cell img {
	max-width: 100%;
	height: auto;
}

/* Right-hand bar of the island list: green = nothing coming in, red = attack, blue = transport. */
.islands-cell[data-attack="0"] {
	background-color: var(--bar-none-color);
}

.islands-cell[data-attack="1"] {
	background-color: var(--bar-attack-color);
}

/* A resource a transport is bringing: written in the colour of the transport bar. */
.islands-cell--incoming {
	color: var(--bar-transport-color);
}

.islands-cell[data-attack="2"] {
	background-color: var(--bar-transport-color);
}

/*Watch tower*/
.watch-tower-rows {
	margin-top: 30px;
}

/* Several fleets in a row: the gap belongs above the first one only. */
.watch-tower-rows + .watch-tower-rows {
	margin-top: 0;
}

.watch-tower-row {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 1px;
	margin-bottom: 1px;
}

.watch-tower-cell-time {
	padding: 3px;
	width: 120px;
	background-color: var(--cell-background-color);
}

.watch-tower-cell-info {
	padding: 3px;
	font-weight: bold;
	width: calc(100% - 134px);
	background-color: var(--cell-background-color);
}

.watch-tower-cell-bar {
	align-self: stretch;
	flex: 0 0 7px;
}

/* Same colours as the bar of the island list: red = attack (more important), blue = transport. */
.watch-tower-cell-bar[data-attack="1"] {
	background-color: var(--bar-attack-color);
}

.watch-tower-cell-bar[data-attack="2"] {
	background-color: var(--bar-transport-color);
}

.watch-tower-cell-datetime {
	font-size: 9px;
}

.watch-tower-cell-duration, .watch-tower-cell-arrived {
	font-weight: bold;
}


/*Buildings*/
.building-items {
	margin-top: 20px;
}

.building-item {
	display: flex;
	flex-direction: row;
	gap: 1px;
	margin-bottom: 1px;
	align-items: stretch
}

.building-info {
	padding: 3px;
	width: calc(100% - 86px);
	background-color: var(--cell-background-color);
	height: 41px;
}

.building-inner {
	display: flex;
	flex-flow: row;
}

.building-icon {
}

.building-action {
	display: flex;
	align-items: center;
	padding: 3px;
	width: 86px;
	background-color: var(--cell-background-color);
}

.building-action.green form input {
	color: green;
}

.building-action.red form input {
	color: red;
}

.building-link {
}

.building-resources {
	margin-right: 5px;
}

.building-duration {
}

.building-queue {
	width: 100%;
}

.building-upgrade {
}

.building-name {
	font-weight: bold;
}

.building-time-left {
	font-weight: bold;
	display: flex;
}

.building-timer {
	margin-right: 5px;
}

.building-time-left span {
	margin-right: 3px;
}

.building-abort {
	margin-left: 5px;
}

/*units / ships*/
.unit-items {
	margin-top: 20px;
}

.unit-item {
	display: flex;
	flex-direction: row;
	gap: 1px;
	margin-bottom: 1px;
	align-items: stretch
}

.unit-info {
	padding: 3px;
	width: calc(100% - 110px);
	background-color: var(--cell-background-color);
}

.unit-inner {
	display: flex;
	flex-flow: row;
}

.unit-icon {
}

.unit-action {
	display: flex;
	align-items: center;
	padding: 3px;
	width: 63px;
	background-color: var(--cell-background-color);
}

.unit-input {
	display: flex;
	align-items: center;
	padding: 4px;
	width: 49px;
	box-sizing: border-box;
	background-color: var(--cell-background-color);
	margin-right: 1px;
}

.unit-input input {
	width: 100%;
}

.unit-link {
}

.unit-resources {
	margin-right: 5px;
}

.unit-duration {
}

input[type="submit"].unit-abort {
	margin-left: 5px;
}

.unit-form .unit-action .unit-upgrade {
	text-align: center;
	width: 100%;
}

.unit-form {
	width: 112px;
	display: flex;
	/*gap: 1px;*/
}

/*orders*/

.order-item-wrapper {
	font-weight: bold;
	margin-bottom: 20px;
}

.order-item-list-text {
}

.order-item-unit {
}

.order-item-amount {
	margin-right: 5px;
}

.order-item {
	display: flex;
}

.order-item-timeend {
	font-size: 10px;
	margin-left: 5px;
}

/*Map*/

.game-map {
	width: 100%;
}

.game-map__outer {
	display: grid;
	grid-template-columns: 12px 1fr 12px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 15px;
}

.game-map__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/*width: 400px;*/
	/*background-color: rgb(51, 102, 153);*/
	background-color: rgb(1, 86, 149);
}

.game-map__tile {
	padding-bottom: 100%;
	position: relative;
}

.game-map__island {
	width: 100%;
	height: 100%;
	position: absolute;
}

img.game-map__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: initial;
	max-height: initial;
}

.game-map__islands-details {
	display: none;
	position: absolute;
	top: 60%;
	left: 60%;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 10px;
	z-index: 10;
}

.game-map__island:hover .game-map__islands-details {
	display: block;
}

.island-name {
	white-space: nowrap;
}

.island-owner {
	white-space: nowrap;
}

.island-points {
	white-space: nowrap;
}

.game-map__corner {
	width: 12px;
	height: 12px;
}

.game-map__navigation-top, .game-map__navigation-bottom {
	width: 100%;
	height: 13px;
}

.game-map__navigation-left, .game-map__navigation-right {
	width: 13px;
	height: 100%;
}

.game-map__navigation-top input, .game-map__navigation-bottom input, .game-map__navigation-left input, .game-map__navigation-right input {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
}

.game-map__navigation-top.disabled, .game-map__navigation-bottom.disabled, .game-map__navigation-left.disabled, .game-map__navigation-right.disabled {
	opacity: 0;

}

.game-map__navigation-top::before, .game-map__navigation-bottom::before, .game-map__navigation-left::before, .game-map__navigation-right::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 7px 7px;
	border-color: transparent transparent #FFFFFF transparent;
}

.game-map__navigation-top, .game-map__navigation-bottom, .game-map__navigation-left, .game-map__navigation-right {
	background-color: rgb(1, 86, 149);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.game-map__navigation-top::before {
	transform: rotate(0deg);
}

.game-map__navigation-right::before {
	transform: rotate(90deg);
}

.game-map__navigation-bottom::before {
	transform: rotate(180deg);
}

.game-map__navigation-left::before {
	transform: rotate(270deg);
}

/*Map Detail*/
.game-map-detail__outer {
	font-weight: bold;
}

.game-map-detail__row {
	display: flex;
	gap: 1px;
	margin-bottom: 1px;
}

.game-map-detail__cell {
	background-color: var(--cell-background-color);
	padding: 5px;
}

.game-map__controls input {
	max-width: 50px;
}

.game-map__controls-cell-first {
	width: 30%;
}

.game-map__controls-cell-second {
	width: 55%;
}

.game-map__controls-cell-third {
	width: 15%;
}

.game-map-detail__map {
	background-color: rgb(1, 86, 149);
	width: 100%;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.game-map-detail__image {
	max-width: 94px !important;
	max-height: 94px !important;
}

/*Ranking*/
.ranking-container {

}


/*Simulator*/

.simulator-report {
	width: 100%;
	line-height: 16px;
}

.simulator-form {
	width: 100%;
	line-height: 16px;
}

.simulator-header {
	margin-bottom: 10px;
}

.simulator-row {
	display: flex;
	gap: 1px;
	margin-bottom: 1px;
}

.simulator-inputs {
	background-color: var(--cell-background-color);
	padding: 5px;
}

.simulator-row .simulator-input {
	background-color: var(--cell-background-color);
}

.simulator-row .simulator-input input {
	margin: 5px;
}

.simulator-input-group, .simulator-row .simulator-input {
	width: 34%;
}

.simulator-section-header {
	background-color: var(--cell-background-color);
	margin-bottom: 1px;
	padding: 5px;
	line-height: 16px;
	font-weight: bold;
}

.simulator-label {
	background-color: var(--cell-background-color);
	padding: 5px;
	line-height: 16px;
	width: 32%;
}

.simulator-section-label {
	/*background-color: var(--cell-background-color);*/
	/*width: 32%;*/
	/*padding: 5px;*/
	/*line-height: 16px;*/
}

/*Messages*/

/*.messages input[type="submit"]:hover {*/
/*	color: black;*/
/*}*/

.messages-header {
	margin-bottom: 10px;
	flex-flow: column;
}

.messages-header .messages-cell {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.messages-row {
	display: flex;
	/*justify-content: space-between;*/
	gap: 1px;
	margin-bottom: 1px;
}

.messages-cell-half {
	background-color: var(--cell-background-color);
	padding: 5px;
	width: 50%
}

.messages-cell-report-first {
	background-color: var(--cell-background-color);
	padding: 5px;
	width: 50%
}

.messages-cell-report-second {
	background-color: var(--cell-background-color);
	padding: 5px;
	width: 25%
}

.messages-cell-report-third {
	background-color: var(--cell-background-color);
	padding: 5px;
	width: 25%
}

.messages-footer-first {
	width: calc(90% + 1px);
	display: flex;
	justify-content: center;
	flex-flow: row;
	gap: 25px;
}

.messages-footer-second {
	width: calc(10% - 1px);
	text-align: center;
}

.messages-footer-second input:hover {
	color: black;
}

.messages-cell-reply-first {
	width: 25%;
	font-weight: bold;
}

.messages-cell-reply-second {
	width: 75%;
}

.messages-cell textarea {
	width: 100%;
	box-sizing: border-box;
}

.messages-new-column-1 {
	padding: 5px;
	background-color: var(--cell-background-color);
	width: 20%;
	min-width: 100px;
	font-weight: bold;
}

.messages-new-column-2 {
	padding: 5px;
	background-color: var(--cell-background-color);
	width: 80%;
}

.messages-new-column-2 input[type="text"] {
	width: 100%;
	max-width: 164px;
}

.messages-new-column-2 input[type="radio"][value="alliance"] {
	margin-left: 15px;
}

.messages-new-column-2 textarea {
	width: calc(100% - 2px);
	max-width: 327px;
	min-width: 327px;
	min-height: 300px;
	max-height: 800px;
	padding: 0;
}

.messages-new-submit {
	padding: 3px;
	background-color: var(--cell-background-color);
	text-align: center;
}

.messages-cell {
	background-color: var(--cell-background-color);
	padding: 5px;
}

.messages-cell-full {
	background-color: var(--cell-background-color);
	padding: 5px;
	width: 100%;
}

.messages-cell-center {
	text-align: center;
}

.messages-time {
	position: relative;
	padding-right: 30px;
	box-sizing: border-box;
}

.messages-new {
	font-weight: bold;
	color: red;
	position: absolute;
	top: 0;
	right: 0;
}

.cell-row .messages-input {
	background-color: var(--cell-background-color);
}

.cell-row .messages-input input {
	margin: 5px;
}

.messages-input-group, .cell-row .messages-input {
	width: 34%;
}

.messages-section-header {
	background-color: var(--cell-background-color);
	margin-bottom: 1px;
	padding: 5px;
	line-height: 16px;
	font-weight: bold;
}

.messages-section-header-margin {
	background-color: var(--cell-background-color);
	margin-bottom: 1px;
	padding: 5px;
	line-height: 16px;
	font-weight: bold;
	margin-top: 20px;
}

.messages-submit {
	margin-top: 10px;
	text-align: center;
}

.messages-label {
	background-color: var(--cell-background-color);
	padding: 5px;
	line-height: 16px;
}

.messages-section-label {
	background-color: var(--cell-background-color);
	width: 32%;
	padding: 5px;
	line-height: 16px;
}

/*Spies*/

/*.spy-row {*/
/*	width: 100%;*/
/*	overflow: hidden;*/
/*}*/

/*.spy-label {*/
/*	font-size: 10px;*/
/*	font-weight: bold;*/
/*	border: 1px solid white;*/
/*	padding: 5px;*/
/*	border-collapse: collapse;*/
/*	background-color: rgb(247, 247, 247);*/
/*	width: 123px;*/
/*	float: left;*/
/*}*/

/*.spy-value {*/
/*	font-size: 10px;*/
/*	border: 1px solid white;*/
/*	padding: 5px;*/
/*	border-collapse: collapse;*/
/*	background-color: rgb(247, 247, 247);*/
/*	width: calc(100% - 147px);*/
/*	float: left;*/
/*}*/

/*.spy-headline {*/
/*	font-size: 10px;*/
/*	border: 1px solid white;*/
/*	padding: 5px;*/
/*	font-weight: bold;*/
/*	background-color: #DEDEDE;*/
/*	margin-right: 1px;*/
/*}*/

/*.spy-title {*/
/*	font-size: 12px;*/
/*	border: 1px solid white;*/
/*	padding: 5px;*/
/*	font-weight: bold;*/
/*	background-color: rgb(247, 247, 247);*/
/*	margin-top: 20px;*/
/*}*/

/*.spy-spacer {*/
/*	border: 1px solid white;*/
/*	padding: 5px;*/
/*	border-collapse: collapse;*/
/*	background-color: rgb(247, 247, 247);*/
/*	width: 100%;*/
/*	float: left;*/
/*	height: 12px;*/
/*}*/
/* Language toggle: a single "de" / "en" link in the footers
   (Language::toggle()). */
.language-toggle {
	text-transform: uppercase;
}

/* Footer of the text pages (help, rules, terms …) */
.home-page__footer {
	margin-top: 25px;
}

/* Shipyard: fleet orders, laid out like the other cell tables */
.fleet-form .cell {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

.fleet-form label {
	cursor: pointer;
}

input.fleet-number {
	width: 60px;
	box-sizing: border-box;
}

.fleet-coordinates input.fleet-number {
	width: 46px;
	text-align: center;
}

.fleet-types label {
	margin-right: 15px;
	white-space: nowrap;
}

.fleet-selects select {
	margin-right: 4px;
}

.fleet-submit {
	margin-bottom: 15px;
}

.fleet-item .cell {
	display: flex;
	align-items: center;
}

/* Generated password on the welcome page (worlds with featGeneratedPassword) */
.register-password {
	margin: 10px 0;
	padding: 8px 10px;
	background-color: var(--container-color);
	border: 1px solid #c8c8c8;
}

.register-password__value {
	font-family: monospace;
	font-size: 15px;
	letter-spacing: 1px;
	user-select: all;
}

.register-generated-note {
	font-style: italic;
}

/* ======================================================================
   Small screens (phones)
   On a PC the game looks exactly as it always did: everything below only
   applies when the screen is narrower than the original 450px layout needs.
   ====================================================================== */
@media (max-width: 600px) {
	/* Widths such as 50% + 5px padding used to add up to more than the row. */
	.game *, .game *::before, .game *::after,
	.home-container-outer *, .home-page * {
		box-sizing: border-box;
	}

	.game {
		padding: 6px;
	}

	.game-container {
		max-width: 100%;
	}

	.game-header {
		line-height: 21px;
	}

	.game-resources {
		margin-bottom: 12px;
	}

	/* Inputs never push a row wider than the screen. */
	.game input[type="text"], .game input[type="password"], .game textarea, .game select {
		max-width: 100%;
	}

	/* Overview: buildings and army side by side, as on a computer. */
	.game-info {
		gap: 10px;
	}

	.game-buildings, .game-army {
		flex: 1 1 50%;
		min-width: 0;
	}

	/* Building and unit rows: the cost line wraps instead of overflowing. */
	.building-info {
		height: auto;
		min-height: 47px;
		min-width: 0;
		flex: 1;
	}

	.building-inner, .unit-inner {
		flex-wrap: wrap;
	}

	.building-action {
		flex: 0 0 86px;
	}

	.unit-info {
		flex: 1;
		min-width: 0;
	}

	.unit-form {
		flex: 0 0 112px;
	}

	.unit-form:has(.unit-input--max) {
		flex: 0 0 140px;
	}

	/* Islands list: the name column takes what is left. */
	.islands-cell:nth-child(1) {
		flex: 1;
		width: auto;
		max-width: none;
		min-width: 0;
	}

	.islands-cell:nth-child(2),
	.islands-cell:nth-child(3),
	.islands-cell:nth-child(4),
	.islands-cell:nth-child(5),
	.islands-cell:nth-child(6) {
		flex: 0 0 auto;
	}

	/* Messages: the textarea follows the width of its column. */
	.messages-new-column-1 {
		min-width: 80px;
	}

	.messages-new-column-2 textarea {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.messages-new-column-2 input[type="text"] {
		max-width: 100%;
	}

	.messages-header .messages-cell {
		flex-wrap: wrap;
		gap: 4px 10px;
	}

	.watch-tower-cell-time {
		width: 95px;
	}

	.watch-tower-cell-info {
		width: calc(100% - 109px);
	}

	/* Long words (player names, links) break instead of widening a cell. */
	.cell, .messages-cell-full, .ranking-item-player, .watch-tower-cell-info, .info-description {
		overflow-wrap: anywhere;
	}

	/* Start page: the two boxes one below the other. */
	.home-container-outer {
		height: auto;
		min-height: 100vh;
		padding: 15px 10px;
	}

	.home-content {
		flex-wrap: wrap;
		gap: 20px;
	}

	.home-form-container, .home-info-container {
		width: 100%;
		max-width: 100%;
	}

	.home-form-container input[type="text"], .home-form-container input[type="password"], .home-form-container select {
		max-width: 100%;
	}

	.home-footer-menu {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.home-footer-menu a {
		margin-left: 6px;
		padding-left: 7px;
	}

	/* Text pages (help, rules, terms …): a margin and nothing wider than the screen. */
	.home-page {
		padding: 6px 12px 20px;
		overflow-wrap: anywhere;
	}

	.home-page table, .home-page textarea {
		max-width: 100%;
	}

	/* Larger type so the game can be read upright, without zooming
	   or turning the phone sideways. */
	body,
	.info-description,
	.ranking-heading-rank, .ranking-heading-player, .ranking-heading-points, .ranking-heading-direction,
	.ranking-item-rank, .ranking-item-player, .ranking-item-points, .ranking-item-direction,
	.home-footer-menu {
		font-size: 13px;
		line-height: 21px;
	}

	input, textarea, select {
		font-size: 14px;
	}

	h1 {
		font-size: 17px;
	}
}

/* Bug reports */
.bug-report [hidden] {
	display: none !important;
}

.bug-report textarea {
	width: 100%;
	box-sizing: border-box;
}

.game-container img.bug-report-preview {
	max-width: 100%;
	max-height: 300px;
	border: 1px solid #999;
}

.game-container img.bug-report-thumb {
	max-width: 160px;
	max-height: 120px;
	border: 1px solid #999;
}

.bug-report-item {
	margin-bottom: 10px;
}

/* Member pictures (settings and player view) */
.game-container img.member-picture, img.member-picture {
	max-width: 100%;
	max-height: none;
	object-fit: cover;
	border: 1px solid #999;
	background-color: #fff;
}

/* Start page: the test world notice */
.test-world-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	width: 630px;
	max-width: 100%;
	margin: 0 auto 18px;
	padding: 10px 14px;
	background-color: #d9dff5;
	border: 1px solid #336699;
	border-left-width: 5px;
	color: #000;
	font-size: 11px;
	line-height: 17px;
	text-align: left;
}

.test-world-notice__badge {
	flex: 0 0 auto;
	padding: 2px 8px;
	background-color: #336699;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.test-world-notice__text strong {
	display: block;
	margin-bottom: 2px;
}

.test-world-notice a {
	color: #336699;
	text-decoration: underline;
}

.session-timeout-notice {
	box-sizing: border-box;
	width: 630px;
	max-width: 100%;
	margin: 0 auto 14px;
	padding: 6px 10px;
	background-color: #fcf4d4;
	border: 1px solid #e6d48a;
	font-weight: bold;
}

@media (max-width: 600px) {
	.test-world-notice {
		flex-direction: column;
		gap: 6px;
		font-size: 13px;
		line-height: 19px;
	}
}

/* Help, rules and imprint (home/help.php, home/rules.php, home/imprint.php) */
.home-page h2 {
	font-size: 1.15em;
	margin: 22px 0 8px;
	padding-bottom: 3px;
	border-bottom: 1px solid #c8c8c8;
}

.help-intro,
.help-toc {
	background: #f0f0f0;
	border: 1px solid #d0d0d0;
	padding: 10px 14px;
	margin: 12px 0;
}

.help-toc ol {
	margin: 6px 0 0;
	padding-left: 24px;
	columns: 2;
	column-gap: 30px;
}

.help-list dt {
	font-weight: bold;
	margin-top: 10px;
}

.help-list dd {
	margin: 2px 0 0 18px;
}

.help-tip {
	border-left: 3px solid #999;
	padding-left: 10px;
	color: inherit; /* same colour as the rest of the text, also in the dark theme */
}

.help-table {
	overflow-x: auto;
}

.help-table table {
	border-collapse: collapse;
}

.help-table th,
.help-table td {
	border: 1px solid #c8c8c8;
	padding: 4px 8px;
	text-align: left;
	vertical-align: top;
}

.help-table th {
	background: #f0f0f0;
}

.text-list {
	padding-left: 20px;
}

.text-list li {
	margin-bottom: 8px;
}

.register-rules {
	font-size: 0.9em;
	margin: 8px 0;
}

@media (max-width: 600px) {
	.help-toc ol {
		columns: 1;
	}
}

/* Alliance picture (AlliancePicture): keep proportions when narrowed */
.alliance-picture {
	height: auto;
}


/* ------------------------------------------------------------------
   Dark mode (Settings → Display). html[data-theme] is set by header.php
   for logged-in players: "dark" always, "auto" when the device is dark.
   ------------------------------------------------------------------ */
html[data-theme="dark"] {
	--bar-none-color: #2e9e5b;
	--bar-attack-color: #ff5252;
	--bar-transport-color: #4f8cff;
	--font-color: #e3e3e3;
	--link-color: #6aaef0;
	--link-color-hover: #ffffff;
	--cell-background-color: #2e323b;
	--heading-color: #f0f0f0;
	--container-color: #1c1e22;
	--browser-background-color: #16171a;
	--contrast-color: #262a31;
	--own-island-row-color: #4a505c;
	color-scheme: dark;
}

html[data-theme="dark"] body {
	background-color: var(--browser-background-color);
	color: var(--font-color);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .ranking-footer hr {
	border-color: var(--cell-background-color);
}

html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] .messages-footer-second input:hover {
	color: var(--link-color-hover);
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input:not([type]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background-color: var(--contrast-color);
	color: var(--font-color);
	border: 1px solid #555b66;
}

html[data-theme="dark"] .text-green,
html[data-theme="dark"] .building-action.green form input {
	color: #6fd36f;
}

html[data-theme="dark"] .text-red,
html[data-theme="dark"] .building-action.red form input,
html[data-theme="dark"] .messages-new {
	color: #ff7b7b;
}

html[data-theme="dark"] .islands-cell:nth-child(6) {
	border-bottom-color: var(--container-color);
}

/* The rank arrows and similar small icons are black on white. */
html[data-theme="dark"] .ranking-item-direction img {
	filter: invert(0.88);
}

html[data-theme="dark"] .game-container img.member-picture,
html[data-theme="dark"] img.member-picture {
	background-color: var(--contrast-color);
	border-color: #555b66;
}

@media (prefers-color-scheme: dark) {
	html[data-theme="auto"] {
		--bar-none-color: #2e9e5b;
		--bar-attack-color: #ff5252;
		--bar-transport-color: #4f8cff;
		--font-color: #e3e3e3;
		--link-color: #6aaef0;
		--link-color-hover: #ffffff;
		--cell-background-color: #2e323b;
		--heading-color: #f0f0f0;
		--container-color: #1c1e22;
		--browser-background-color: #16171a;
		--contrast-color: #262a31;
		--own-island-row-color: #4a505c;
		color-scheme: dark;
	}

	html[data-theme="auto"] body {
		background-color: var(--browser-background-color);
		color: var(--font-color);
	}

	html[data-theme="auto"] hr,
	html[data-theme="auto"] .ranking-footer hr {
		border-color: var(--cell-background-color);
	}

	html[data-theme="auto"] input[type="submit"]:hover,
	html[data-theme="auto"] .messages-footer-second input:hover {
		color: var(--link-color-hover);
	}

	html[data-theme="auto"] input[type="text"],
	html[data-theme="auto"] input[type="password"],
	html[data-theme="auto"] input[type="number"],
	html[data-theme="auto"] input[type="email"],
	html[data-theme="auto"] input:not([type]),
	html[data-theme="auto"] textarea,
	html[data-theme="auto"] select {
		background-color: var(--contrast-color);
		color: var(--font-color);
		border: 1px solid #555b66;
	}

	html[data-theme="auto"] .text-green,
	html[data-theme="auto"] .building-action.green form input {
		color: #6fd36f;
	}

	html[data-theme="auto"] .text-red,
	html[data-theme="auto"] .building-action.red form input,
	html[data-theme="auto"] .messages-new {
		color: #ff7b7b;
	}

	html[data-theme="auto"] .islands-cell:nth-child(6) {
		border-bottom-color: var(--container-color);
	}

	/* The rank arrows and similar small icons are black on white. */
	html[data-theme="auto"] .ranking-item-direction img {
		filter: invert(0.88);
	}

	html[data-theme="auto"] .game-container img.member-picture,
	html[data-theme="auto"] img.member-picture {
		background-color: var(--contrast-color);
		border-color: #555b66;
	}
}

/* XXL: previous / next island arrows in the header */
.island-switch {
	display: inline;
	margin: 0 2px;
}

.island-switch input[type="submit"] {
	font-size: 1.2em;
	padding: 0 3px;
}


/* Player page: the islands of a player */
.profile-isles {
	margin: 4px 0 0;
	padding-left: 16px;
}

/* Island list: switch between resources and (XXL) units & ships */
.islands-views {
	margin-bottom: 6px;
}

.islands-views__locked {
	color: #888;
}

.islands-units {
	overflow-x: auto;
}

.islands-units table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
}

.islands-units th,
.islands-units td {
	background-color: var(--cell-background-color);
	padding: 3px 5px;
	white-space: nowrap;
}

.islands-units td.num {
	text-align: right;
}

.islands-units__caption {
	font-weight: bold;
	margin: 12px 0 4px 0;
}

.islands-units__zero {
	opacity: 0.45;
}

/* Fleet details on the shipyard: click the fleet line to see what it carries. */
.fleet-details summary {
	cursor: pointer;
}

.fleet-details__list {
	margin: 4px 0 0 0;
	padding-left: 18px;
	font-weight: normal;
}

/* The island you are on: a grey (or chosen) background and bolder writing. */
.islands-row--current,
.islands-row--current.islands-row--alt {
	background-color: var(--own-island-row-color);
}

.islands-units tr.islands-row--current td,
.islands-units tr.islands-row--current.islands-units__alt td {
	background-color: var(--own-island-row-color);
}

.islands-row--current .islands-cell,
.islands-row--current input[type="submit"] {
	font-weight: bold;
}

/* Islands with the build bot: only a small grey gear, no colour bar. */
.islands-tag {
	margin-left: 6px;
	font-size: 0.75em;
	white-space: nowrap;
	opacity: 0.65;
}

/* Every second island is a little greyer, so rows are easier to tell apart. */
.islands-row--alt {
	background-color: rgba(128, 128, 128, 0.18);
}

.islands-units tr.islands-units__alt td {
	background-color: color-mix(in srgb, var(--cell-background-color) 82%, #808080);
}

.islands-units__total td {
	font-weight: bold;
}

.islands-units__note {
	font-size: 0.9em;
	opacity: 0.8;
}

/* Phones: the "Recruit" button of garrison, shipyard and research lab rows.
   Its cell was a fixed 63px; at the larger phone type the word needs more and,
   since one word cannot wrap, it stuck out past the right edge of the screen.
   The cell now grows with its text and the description beside it gives way. */
@media (max-width: 600px) {
	.unit-form {
		flex: 0 0 auto;
		width: auto;
	}

	.unit-action {
		width: auto;
		min-width: 63px;
		padding: 3px 6px;
		box-sizing: border-box;
	}

	.unit-form .unit-action .unit-upgrade {
		white-space: nowrap;
	}
}

/* Online / offline dot (ranking, player page) */
.online-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
}

.online-dot--on {
	background-color: #2fa84f;
	box-shadow: 0 0 0 1px rgba(47, 168, 79, 0.35);
}

.online-dot--off {
	background-color: #a0a0a0;
}

/* Mail from the game management (StaffMail): its name in red, by account id */
.messages-staff {
	color: #c00000;
	font-weight: bold;
}

html[data-theme="dark"] .messages-staff {
	color: #ff6b6b;
}

@media (prefers-color-scheme: dark) {
	html[data-theme="auto"] .messages-staff {
		color: #ff6b6b;
	}
}

/* The star after the coordinates of an island that cannot be colonised */
.island-protected {
	cursor: help;
	font-weight: bold;
}

.islands-legend,
.island-protected-note {
	font-size: 0.9em;
	opacity: 0.85;
}

/* A button that cannot be used yet (e.g. research the lab is too small for):
   grey and not clickable-looking, the reason is in its tooltip. */
input[type="submit"]:disabled,
input[type="submit"]:disabled:hover {
	color: #9a9a9a;
	font-weight: normal;
	cursor: not-allowed;
}

/* Settings → General: one form, hints under the fields, delete folded away */
.settings-hint {
	font-size: 0.9em;
	opacity: 0.75;
	margin-top: 2px;
}

.settings-confirm .cell {
	border-top: 1px solid var(--contrast-color);
}

.settings-delete {
	margin-top: 8px;
}

.settings-delete summary {
	cursor: pointer;
	padding: 4px 3px;
	color: var(--link-color);
	font-weight: bold;
}

.settings-delete .settings-delete__button {
	color: #c00000;
}

/* Picture uploads: shown while the browser makes the picture smaller */
.upload-shrink-note {
	font-size: 0.9em;
	opacity: 0.8;
	margin-top: 3px;
}

/* Mail list: fleet reports in place of a sender */
.messages-report {
	font-weight: bold;
	opacity: 0.85;
}

/* Garrison / shipyard: units and ships not available yet, with requirements */
.unit-item--locked .unit-icon,
.unit-item--locked .unit-link {
	opacity: 0.55;
}

.unit-requirements {
	font-size: 0.95em;
}

.unit-action--locked {
	width: 112px;
	box-sizing: border-box;
	justify-content: center;
}

@media (max-width: 600px) {
	.unit-action--locked {
		width: auto;
	}
}


/* Overview: the build bot below the buildings */
.game-buildbot-link {
	margin-top: 8px;
}

/* ------------------------------------------------------------------------
   XXL build bot (game/pages/buildbot.php). The game column is 450 px wide,
   so each unit is one row of three columns — name, mode, number — with its
   counts in small type under the name and its status on a line below.
   ------------------------------------------------------------------------ */
.buildbot .ranking-header {
	margin-bottom: 6px;
}

.buildbot-note,
.buildbot-saved {
	margin: 6px 0;
}

.buildbot-help {
	margin: 6px 0 10px;
	padding: 4px 8px;
	background-color: var(--cell-background-color);
}

.buildbot-help summary {
	cursor: pointer;
	font-weight: bold;
	color: var(--link-color);
}

.buildbot-help ul {
	margin: 6px 0 2px;
	padding-left: 18px;
}

.buildbot-switch {
	display: block;
	margin: 0 0 8px;
	font-weight: bold;
	cursor: pointer;
}

.buildbot-table {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.buildbot-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 108px 106px;
	column-gap: 1px;
	background-color: var(--cell-background-color);
}

.buildbot-row > div {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 3px 5px;
}

.buildbot-row--head {
	font-weight: bold;
}

.buildbot-group {
	padding: 6px 2px 1px;
	font-weight: bold;
}

.bb-name {
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: center;
}

.bb-name label {
	font-weight: bold;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bb-meta {
	font-size: 0.85em;
	opacity: 0.75;
	white-space: nowrap;
}

.bb-mode select {
	width: 100%;
	box-sizing: border-box;
}

.bb-count {
	gap: 4px;
}

.bb-count input[type="number"] {
	width: 48px;
	box-sizing: border-box;
}

.bb-count input[disabled] {
	opacity: 0.45;
}

.bb-unit {
	font-size: 0.85em;
	opacity: 0.8;
	white-space: nowrap;
}

/* Status: its own line across the whole row. */
.bb-state {
	grid-column: 1 / -1;
	flex-wrap: wrap;
	padding-top: 0 !important;
	font-size: 0.85em;
}

.buildbot-row.is-locked .bb-name,
.buildbot-row.is-locked .bb-meta {
	opacity: 0.6;
}

/* Shipyard: time left for a fleet */
.fleet-countdown {
	font-weight: bold;
	white-space: nowrap;
}

.fleet-countdown.is-done {
	font-weight: normal;
	opacity: 0.75;
}

/* XXL page (settings/xxl): advantages, prices and the PayPal button. */
.xxl-page p { margin: 0 0 8px; }
.xxl-list { margin: 0 0 10px; padding-left: 20px; }
.xxl-offer { display: block; margin: 4px 0; }
.xxl-thanks { font-size: 0.95em; }

/* ======================================================================
   Start page in the look of the original (ik-seite.de): sea video behind
   dark see-through boxes, white text, green buttons, link bar at the
   bottom. Only for the logged-out pages (wrapper .ik-front, index.php).
   ====================================================================== */
.ik-front {
	--home-box: rgba(0, 0, 0, 0.4);
	--home-box-strong: rgba(0, 0, 0, 0.6);
	--home-gold: #d4a017;
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 20px 20px 70px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	background-color: #0b2a3d; /* until the video has loaded */
}

.ik-front__video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.ik-front > *:not(.ik-front__video) {
	position: relative;
	z-index: 1;
}

.ik-front a {
	color: #fff;
}

.ik-front a:hover {
	color: #fff;
	text-decoration: underline;
}

.ik-front h1 {
	color: #fff;
	font-size: 22px;
	text-align: center;
	margin: 6px 0 14px;
}

/* Login, registration, password: one column of boxes */
.ik-front .home-container-outer {
	height: auto;
	min-height: calc(100vh - 90px);
	justify-content: flex-start;
	padding: 0;
}

.ik-front .home-logo {
	margin: 10px 0 15px;
}

.ik-front .home-logo img {
	filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.3));
}

.ik-front .home-content {
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.ik-front .home-form-container,
.ik-front .home-info-container {
	width: 400px;
	max-width: 100%;
	padding: 15px 20px;
	background-color: var(--home-box);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	color: #fff;
}

.ik-front .home-info-container h1 {
	font-size: 16px;
	margin: 4px 0 6px;
}

.ik-front .home-info-container p {
	margin: 0 0 8px;
	text-align: center;
}

.ik-front .home-register {
	text-align: center;
}

.ik-front label {
	display: inline-block;
	margin-bottom: 5px;
	font-size: 14px;
}

.ik-front input[type="text"],
.ik-front input[type="email"],
.ik-front input[type="password"],
.ik-front select {
	width: 100%;
	max-width: 100%;
	padding: 8px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #000;
	background-color: #fff;
}

.ik-front input[type="submit"],
.ik-front button {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	background-color: #4CAF50;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 16px;
	cursor: pointer;
}

.ik-front input[type="submit"]:hover,
.ik-front button:hover {
	background-color: #45a049;
	color: #fff;
}

.ik-front #login-error {
	margin-top: 10px;
	padding: 8px;
	border-radius: 4px;
	background-color: #f44336;
	color: #fff !important;
	text-align: center;
}

/* Link bar fixed at the bottom, like the original */
.ik-front .home-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 8px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

.ik-front .home-footer-menu {
	margin: 0;
	flex-wrap: wrap;
	gap: 4px 15px;
	font-size: 16px;
}

.ik-front .home-footer-menu a {
	margin: 0;
	padding: 0;
	color: #fff;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.ik-front .home-footer-menu a::before {
	display: none;
}

/* Notices above the login */
.ik-front .test-world-notice {
	width: 400px;
	background-color: var(--home-box-strong);
	border: 1px solid rgba(212, 160, 23, 0.45);
	border-left: 5px solid var(--home-gold);
	border-radius: 8px;
	color: #f5e6c8;
	font-size: 13px;
	line-height: 18px;
	flex-direction: column;
	gap: 6px;
}

.ik-front .test-world-notice__badge {
	align-self: flex-start;
	background-color: var(--home-gold);
	color: #000;
	border-radius: 10px;
}

.ik-front .test-world-notice a {
	color: var(--home-gold);
}

.ik-front .session-timeout-notice {
	width: 400px;
	border-radius: 8px;
	background-color: rgba(244, 67, 54, 0.85);
	border: none;
	color: #fff;
	text-align: center;
}

/* Registration extras */
.ik-front .register-password,
.ik-front .register-password__value,
.ik-front .register-generated-note,
.ik-front .register-rules {
	color: #fff;
	background-color: transparent;
}

/* Text pages (help, rules, imprint): a readable dark panel */
.ik-front .home-page {
	box-sizing: border-box;
	max-width: 800px;
	margin: 20px auto 0;
	padding: 20px;
	background-color: var(--home-box-strong);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	font-size: 15px;
	line-height: 1.6;
}

.ik-front .home-page h1 {
	text-align: left;
}

.ik-front .home-page h2 {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

.ik-front .home-page a {
	color: var(--home-gold);
}

.ik-front .help-intro,
.ik-front .help-toc {
	background: rgba(0, 0, 0, 0.35);
	border-color: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
}

.ik-front .help-table th {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
}

.ik-front .help-table th,
.ik-front .help-table td {
	border-color: rgba(255, 255, 255, 0.25);
}

.ik-front .home-page__footer a {
	color: #fff;
}

@media (max-width: 600px) {
	.ik-front {
		padding: 12px 10px 90px;
	}

	.ik-front .home-container-outer {
		padding: 0;
	}

	.ik-front .home-footer-menu {
		font-size: 14px;
	}

	.ik-front .home-page {
		padding: 14px 12px;
		font-size: 14px;
	}
}

/* No old game logo on the start pages (operator's wish) */
.ik-front .home-logo {
	display: none;
}

/* Start page like the original index.php: one login box (.front-login)
   and the plain link bar at the bottom (.front-links, home/links.php). */
.ik-front .front-login {
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	margin-top: 20px;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.ik-front .front-login h2 {
	margin: 20px 0;
	color: #fff;
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
}

.ik-front .front-login label {
	display: block;
}

.ik-front .front-login input[type="submit"] {
	margin-top: 0;
}

/* The link list of the register and password pages is in the bar now. */
.ik-front .home-info-container {
	display: none;
}

.ik-front .front-links {
	position: fixed;
	bottom: 0;
	left: 20px;
	z-index: 2;
	width: calc(100% - 40px);
	text-align: center;
}

.ik-front .front-links a {
	display: inline-block;
	margin-right: 15px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.ik-front .front-links a:hover {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.ik-front .front-links {
		left: 10px;
		width: calc(100% - 20px);
		line-height: 24px;
	}

	.ik-front .front-links a {
		margin-right: 10px;
		font-size: 14px;
	}
}

/* Registration: the picture with the number (bot check) */
.ik-front .register-captcha {
	display: block;
	margin: 2px 0 8px;
}

/* Imprint: name, address and phone as a picture (white on transparent) */
.ik-front .imprint-address {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Cloudflare Turnstile box in the start page forms */
.ik-front .front-turnstile {
	display: flex;
	justify-content: center;
	margin: 4px 0 12px;
	min-height: 65px;
}

.fleet-details-link {
	font-weight: normal;
	font-size: 11px;
}

.unit-max {
	margin-left: 4px;
}

.unit-input--max {
	width: 76px;
}

.unit-input--max input {
	width: 40px;
	flex: none;
}

/* With the arrow button the form is wider; the info column gives up the same space. */
.unit-form:has(.unit-input--max) {
	width: 140px;
}

.unit-item:has(.unit-input--max) .unit-info {
	width: calc(100% - 142px);
}

/* Alliance member list: the rank stays on one line, the action is a drop-down with OK. */
.member-row .member-rank {
	white-space: nowrap;
	overflow-wrap: normal;
}

.member-action {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	align-items: center;
}

.member-action input[type="submit"] {
	flex: none;
}

.member-action select {
	flex: 1 1 auto;
	min-width: 0;
}

/* Fleet row in the hangar: name and details take the room, time left and "Cancel" are only as wide as their text. */
.fleet-item .fleet-col-main {
	flex: 1 1 0;
	min-width: 0;
}

/* The hangar row centres its parts; the opened details still take the whole width of the column. */
.fleet-item .fleet-col-main > .fleet-details {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.fleet-item .fleet-col-time,
.fleet-item .fleet-col-cancel {
	flex: 0 0 auto;
	white-space: nowrap;
	justify-content: center;
}

.fleet-detail {
	margin: 4px 0 2px;
	font-weight: normal;
	line-height: 1.3; /* normal text spacing instead of the page's roomy 19px */
}

.fleet-detail__row {
	display: flex;
	gap: 8px;
	padding: 0;
}

.fleet-detail__label {
	flex: 0 0 8.5em;
	font-weight: bold;
}

.fleet-detail__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.fleet-detail__head {
	font-weight: bold;
	margin: 4px 0 1px;
}

.islands-sea-switch {
	margin: 8px 0;
}

/* Start page: collapsible move information */
.move-info {
	box-sizing: border-box;
	width: 400px;
	max-width: 100%;
	align-self: center;
	margin: 0 auto 14px;
	font-size: 13px;
	color: #f5e6c8;
	background-color: rgba(20, 20, 20, 0.92);
	border: 1px solid rgba(212, 160, 23, 0.45);
	border-radius: 8px;
	text-align: left;
}
.move-info summary {
	cursor: pointer;
	padding: 8px 12px;
	text-align: center;
	color: var(--home-gold, #d4a017);
}
.move-info[open] summary { border-bottom: 1px solid rgba(212, 160, 23, 0.3); }
.move-info > :not(summary) { margin-left: 14px; margin-right: 14px; }
.move-info h3 { margin-top: 14px; margin-bottom: 4px; font-size: 14px; color: var(--home-gold, #d4a017); }
.move-info p, .move-info li { margin-top: 0; margin-bottom: 6px; line-height: 1.45; }
.move-info ul { margin-bottom: 6px; padding-left: 20px; }
.move-info > :last-child { margin-bottom: 12px; }

/* Player choice of text size (Settings > Display), phones only. */
@media (max-width: 600px) {
	html[data-size="tiny"] body,
	html[data-size="tiny"] .info-description,
	html[data-size="tiny"] .ranking-heading-rank, html[data-size="tiny"] .ranking-heading-player,
	html[data-size="tiny"] .ranking-heading-points, html[data-size="tiny"] .ranking-heading-direction,
	html[data-size="tiny"] .ranking-item-rank, html[data-size="tiny"] .ranking-item-player,
	html[data-size="tiny"] .ranking-item-points, html[data-size="tiny"] .ranking-item-direction,
	html[data-size="tiny"] .home-footer-menu {
		font-size: 9px;
		line-height: 14px;
	}
	html[data-size="tiny"] .game-header { line-height: 14px; }
	html[data-size="tiny"] input, html[data-size="tiny"] textarea, html[data-size="tiny"] select { font-size: 10px; }
	html[data-size="tiny"] h1 { font-size: 13px; }

	html[data-size="small"] body,
	html[data-size="small"] .info-description,
	html[data-size="small"] .ranking-heading-rank, html[data-size="small"] .ranking-heading-player,
	html[data-size="small"] .ranking-heading-points, html[data-size="small"] .ranking-heading-direction,
	html[data-size="small"] .ranking-item-rank, html[data-size="small"] .ranking-item-player,
	html[data-size="small"] .ranking-item-points, html[data-size="small"] .ranking-item-direction,
	html[data-size="small"] .home-footer-menu {
		font-size: 11px;
		line-height: 17px;
	}
	html[data-size="small"] .game-header { line-height: 17px; }
	html[data-size="small"] input, html[data-size="small"] textarea, html[data-size="small"] select { font-size: 12px; }
	html[data-size="small"] h1 { font-size: 15px; }

	html[data-size="large"] body,
	html[data-size="large"] .info-description,
	html[data-size="large"] .ranking-heading-rank, html[data-size="large"] .ranking-heading-player,
	html[data-size="large"] .ranking-heading-points, html[data-size="large"] .ranking-heading-direction,
	html[data-size="large"] .ranking-item-rank, html[data-size="large"] .ranking-item-player,
	html[data-size="large"] .ranking-item-points, html[data-size="large"] .ranking-item-direction,
	html[data-size="large"] .home-footer-menu {
		font-size: 16px;
		line-height: 25px;
	}
	html[data-size="large"] .game-header { line-height: 25px; }
	html[data-size="large"] input, html[data-size="large"] textarea, html[data-size="large"] select { font-size: 17px; }
	html[data-size="large"] h1 { font-size: 20px; }
}