body.stream-kingdoms-page,
body:has(.sk-site-shell) {
	background:
		linear-gradient(45deg, #142414 25%, transparent 25%) 0 0 / 18px 18px,
		linear-gradient(45deg, transparent 75%, #142414 75%) 0 0 / 18px 18px,
		#1d351b !important;
}

body.stream-kingdoms-page #page,
body.stream-kingdoms-page .site,
body.stream-kingdoms-page .wp-site-blocks,
body.stream-kingdoms-page main,
body.stream-kingdoms-page .site-main,
body.stream-kingdoms-page .entry-content,
body.stream-kingdoms-page .wp-block-post-content,
body:has(.sk-site-shell) #page,
body:has(.sk-site-shell) .site,
body:has(.sk-site-shell) .wp-site-blocks,
body:has(.sk-site-shell) main,
body:has(.sk-site-shell) .site-main,
body:has(.sk-site-shell) .entry-content,
body:has(.sk-site-shell) .wp-block-post-content,
body:has(.sk-site-shell) .portal-content,
body:has(.sk-site-shell) article {
	background: transparent !important;
}

body.stream-kingdoms-page .streamhub-bg,
body:has(.sk-site-shell) .streamhub-bg {
	display: none !important;
}

body.stream-kingdoms-page .entry-content,
body.stream-kingdoms-page .wp-block-post-content,
body:has(.sk-site-shell) .entry-content,
body:has(.sk-site-shell) .wp-block-post-content,
body:has(.sk-site-shell) .portal-content {
	margin-left: auto;
	margin-right: auto;
	max-width: 1480px;
	width: min(100%, 1480px);
}

body:has(.sk-site-shell) .portal-content > h1:first-child,
body.stream-kingdoms-page .portal-content > h1:first-child {
	display: none !important;
}

.sk-site-shell {
	background:
		linear-gradient(45deg, #1b2d18 25%, transparent 25%) 0 0 / 16px 16px,
		linear-gradient(45deg, transparent 75%, #1b2d18 75%) 0 0 / 16px 16px,
		#213b1d;
	border: 4px solid #2b1a0f;
	box-shadow: inset 0 0 0 4px #6f4520;
	box-sizing: border-box;
	color: #fff3cf;
	font-family: "Courier New", Consolas, ui-monospace, monospace;
	margin: 0 auto;
	max-width: 1680px;
	min-height: 720px;
	padding: 18px;
	overflow: hidden;
	position: relative;
	width: min(100%, 1680px);
}

.sk-site-shell > *:not(.sk-site-scene) {
	position: relative;
	z-index: 2;
}

.sk-status-ok,
.sk-status-warning {
	border: 2px solid #17100a;
	box-shadow: inset 0 0 0 2px #6f4520;
	font-weight: 700;
	margin: 10px 0 0;
	padding: 8px 10px;
}

.sk-status-ok {
	background: #234f2a;
	color: #d7f2b6;
}

.sk-status-warning {
	background: #6d2b1e;
	color: #ffe0a3;
}

.sk-site-scene {
	bottom: 0;
	left: 0;
	opacity: 0.9;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.sk-iso-map {
	height: 520px;
	left: 50%;
	position: absolute;
	top: 68%;
	transform: translate(-50%, -50%);
	width: 920px;
}

.sk-iso-tile {
	background: #3f7e34;
	border: 2px solid #244d24;
	box-shadow: inset 6px 0 0 #54a044, inset -6px 0 0 #2e652e;
	height: 32px;
	position: absolute;
	transform: rotate(45deg) skew(-16deg, -16deg);
	width: 64px;
}

.sk-iso-tile::after {
	background: #2e652e;
	content: "";
	height: 5px;
	left: 6px;
	position: absolute;
	top: 8px;
	width: 12px;
}

.sk-iso-region {
	background: #d6a84f;
	border: 2px solid #17100a;
	box-shadow: 5px 4px 0 #17100a;
	height: 12px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	position: absolute;
	transform: rotate(45deg) skew(-16deg, -16deg);
	width: 24px;
	z-index: 2;
}

.sk-iso-region::before {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-bonus) "%";
	font-size: 9px;
	font-weight: 700;
	left: -8px;
	line-height: 1;
	padding: 2px 3px;
	position: absolute;
	top: -22px;
	transform: skew(16deg, 16deg) rotate(-45deg);
	white-space: nowrap;
}

.sk-iso-region[data-resource="wood"] { background: #2f7d35; }
.sk-iso-region[data-resource="stone"] { background: #8a8f8f; }
.sk-iso-region[data-resource="food"] { background: #d5b447; }
.sk-iso-region[data-resource="gold"] { background: #d6a84f; }
.sk-iso-region[data-resource="crown_crystals"] { background: #64c7d8; }
.sk-iso-region[data-owner="neutral"] { border-color: #f5f0d8; }
.sk-iso-region[data-owner="claimed"] { border-color: #c74332; }
.sk-iso-region[data-owner="own"] { border-color: #64c7d8; }
.sk-iso-region-contested {
	border-color: #c74332 !important;
	box-shadow: 5px 4px 0 #17100a, 0 0 0 3px #f2c14e;
	z-index: 8;
}
.sk-iso-region-contested::before {
	border-color: #c74332;
	color: #f2c14e;
	content: attr(data-campaign-percent) "%";
}
.sk-iso-region-flag {
	background: #c74332;
	border: 2px solid #17100a;
	height: 14px;
	left: 19px;
	position: absolute;
	top: -22px;
	transform: skew(16deg, 16deg) rotate(-45deg);
	width: 11px;
}
.sk-iso-region-flag::before {
	background: #17100a;
	content: "";
	height: 20px;
	left: -4px;
	position: absolute;
	top: -2px;
	width: 2px;
}

.sk-kingdom-brand-form .sk-form-help {
	margin: -0.25rem 0 0.5rem;
	color: #c9b990;
	font-size: 0.9rem;
}

.sk-checkbox-label {
	display: flex !important;
	align-items: center;
	gap: 0.65rem;
}

.sk-checkbox-label input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
}

.sk-kingdom-brand-preview {
	position: relative;
	display: grid;
	grid-template-columns: 2rem 5.5rem 1fr;
	align-items: center;
	min-height: 7rem;
	padding: 0.8rem 1rem;
	border: 1px solid color-mix(in srgb, var(--sk-realm-primary) 68%, #2a2118);
	border-radius: 0.8rem;
	background: linear-gradient(135deg, rgba(26, 20, 14, 0.95), rgba(50, 39, 25, 0.88));
	overflow: hidden;
}

.sk-kingdom-brand-pole {
	width: 0.45rem;
	height: 5.7rem;
	justify-self: end;
	border-radius: 0.25rem;
	background: linear-gradient(90deg, #6e451d, #d4a04e 45%, #654018);
	box-shadow: 0 0 0 1px #2c1a0a;
}

.sk-kingdom-brand-flag {
	position: relative;
	display: grid;
	place-items: center;
	width: 5.2rem;
	height: 3.8rem;
	align-self: start;
	margin-top: 0.55rem;
	background: linear-gradient(135deg, var(--sk-realm-primary), var(--sk-realm-secondary));
	clip-path: polygon(0 0, 100% 5%, 82% 50%, 100% 96%, 0 100%);
	filter: drop-shadow(0 0.25rem 0.2rem rgba(0, 0, 0, 0.4));
}

.sk-kingdom-brand-flag img {
	width: 2.35rem;
	height: 2.35rem;
	object-fit: contain;
	border-radius: 0.25rem;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}

.sk-kingdom-brand-flag [data-sk-kingdom-brand-crest] {
	color: #fff1ae;
	font-size: 2rem;
	line-height: 1;
	text-shadow: 0 2px 2px #2b1605;
}
.sk-iso-region-progress {
	background: #17100a;
	border: 1px solid #f5f0d8;
	height: 5px;
	left: -10px;
	position: absolute;
	top: 18px;
	transform: skew(16deg, 16deg) rotate(-45deg);
	width: 42px;
}
.sk-iso-region-progress span {
	background: #c74332;
	display: block;
	height: 100%;
}
.sk-iso-campaign-route {
	background:
		linear-gradient(90deg, #17100a 0 6px, transparent 6px 10px) 0 2px / 10px 2px repeat-x,
		linear-gradient(90deg, #f2c14e 0 5px, transparent 5px 10px) 0 4px / 10px 2px repeat-x;
	height: 10px;
	position: absolute;
	transform-origin: 0 50%;
	z-index: 6;
}
.sk-iso-campaign-route::before {
	background: #17100a;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.sk-iso-campaign-dot {
	background: #c74332;
	border: 1px solid #17100a;
	height: 7px;
	left: 0;
	position: absolute;
	top: 1px;
	width: 7px;
}
.sk-campaign-dot-a {
	animation: sk-campaign-march 2.4s steps(8) infinite;
}
.sk-campaign-dot-b {
	animation: sk-campaign-march 2.4s steps(8) .75s infinite;
	background: #f2c14e;
}
.sk-campaign-dot-c {
	animation: sk-campaign-march 2.4s steps(8) 1.5s infinite;
}

.sk-iso-map .sk-iso-tile:nth-child(1) { left: 260px; top: 40px; }
.sk-iso-map .sk-iso-tile:nth-child(2) { left: 324px; top: 40px; }
.sk-iso-map .sk-iso-tile:nth-child(3) { left: 388px; top: 40px; }
.sk-iso-map .sk-iso-tile:nth-child(4) { left: 452px; top: 40px; }
.sk-iso-map .sk-iso-tile:nth-child(5) { left: 516px; top: 40px; }
.sk-iso-map .sk-iso-tile:nth-child(6) { left: 580px; top: 40px; }
.sk-iso-map .sk-iso-tile:nth-child(7) { left: 644px; top: 40px; }
.sk-iso-map .sk-iso-tile:nth-child(n+8):nth-child(-n+14) { top: 72px; }
.sk-iso-map .sk-iso-tile:nth-child(n+15):nth-child(-n+21) { top: 104px; }
.sk-iso-map .sk-iso-tile:nth-child(n+22):nth-child(-n+28) { top: 136px; }
.sk-iso-map .sk-iso-tile:nth-child(n+29):nth-child(-n+35) { top: 168px; }
.sk-iso-map .sk-iso-tile:nth-child(n+36):nth-child(-n+42) { top: 200px; }
.sk-iso-map .sk-iso-tile:nth-child(n+43):nth-child(-n+49) { top: 232px; }
.sk-iso-map .sk-iso-tile:nth-child(n+50):nth-child(-n+56) { top: 264px; }
.sk-iso-map .sk-iso-tile:nth-child(7n+1) { left: 196px; }
.sk-iso-map .sk-iso-tile:nth-child(7n+2) { left: 260px; }
.sk-iso-map .sk-iso-tile:nth-child(7n+3) { left: 324px; }
.sk-iso-map .sk-iso-tile:nth-child(7n+4) { left: 388px; }
.sk-iso-map .sk-iso-tile:nth-child(7n+5) { left: 452px; }
.sk-iso-map .sk-iso-tile:nth-child(7n+6) { left: 516px; }
.sk-iso-map .sk-iso-tile:nth-child(7n) { left: 580px; }

.sk-iso-tile-2,
.sk-iso-tile-5 {
	background: #477d3b;
}

.sk-iso-tile-3 {
	background: #315f90;
	border-color: #17365b;
	box-shadow: inset 8px 0 0 #4c9ac4, inset -8px 0 0 #244e7b;
}

.sk-iso-map-variant-1 .sk-iso-tile { border-color: #2e4420; }
.sk-iso-map-variant-2 .sk-iso-tile { border-color: #20412e; }
.sk-iso-map-variant-3 .sk-iso-tile { border-color: #4a3a1d; }
.sk-iso-map-variant-4 .sk-iso-tile { border-color: #233f4f; }
.sk-iso-map-variant-5 .sk-iso-tile { border-color: #47301c; }

.sk-iso-terrain-grass-a {
	background: #3f7e34;
	box-shadow: inset 6px 0 0 #54a044, inset -6px 0 0 #2e652e;
}

.sk-iso-terrain-grass-b {
	background: #477d3b;
	box-shadow: inset 6px 0 0 #67a84b, inset -6px 0 0 #346b31;
}

.sk-iso-terrain-dirt {
	background: #8b5a2c;
	border-color: #3b2412;
	box-shadow: inset 6px 0 0 #b77b56, inset -6px 0 0 #5a3219;
}

.sk-iso-terrain-water {
	background: #315f90;
	border-color: #17365b;
	box-shadow: inset 8px 0 0 #4c9ac4, inset -8px 0 0 #244e7b;
}

.sk-iso-road {
	background: #8b5a2c;
	border: 2px solid #3b2412;
	height: 16px;
	position: absolute;
	transform: rotate(24deg);
	width: 260px;
}

.sk-road-a {
	left: 315px;
	top: 176px;
}

.sk-road-b {
	left: 450px;
	top: 138px;
	transform: rotate(-24deg);
	width: 220px;
}

.sk-iso-building,
.sk-iso-tree,
.sk-iso-npc,
.sk-iso-rock,
.sk-iso-wall,
.sk-iso-caravan,
.sk-iso-battle,
.sk-iso-world-boss,
.sk-iso-world-event,
.sk-iso-world-wonder,
.sk-iso-migration,
.sk-iso-season,
.sk-iso-alliance,
.sk-iso-alliance-war,
.sk-iso-resource-stockpile,
.sk-iso-crown-crystal {
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	position: absolute;
}

.sk-iso-wall {
	background: #8a8f8f;
	border: 3px solid #222;
	box-shadow: 7px 5px 0 #17100a, inset 6px 0 0 #c7cccc, inset -5px 0 0 #575c5c;
	height: 20px;
	width: 58px;
}

.sk-iso-wall::before {
	background: #c7cccc;
	content: "";
	height: 5px;
	left: 5px;
	position: absolute;
	top: -8px;
	width: 10px;
	box-shadow: 18px 0 0 #c7cccc, 36px 0 0 #c7cccc;
}

.sk-wall-0 { left: 398px; top: 162px; }
.sk-wall-1 { left: 454px; top: 162px; }
.sk-wall-2 { left: 510px; top: 162px; }
.sk-wall-3 { left: 426px; top: 196px; }
.sk-wall-4 { left: 482px; top: 196px; }

.sk-iso-wall[data-level="2"] {
	height: 26px;
	top: 156px;
}

.sk-iso-wall[data-level="3"] {
	height: 32px;
	top: 150px;
}

.sk-iso-wall[data-damaged="1"] {
	background: #6b6f6f;
}

.sk-castle-bg {
	background: #b7b7aa;
	border: 3px solid #2b2b2b;
	box-shadow: 12px 8px 0 #1b1b1b, inset 8px 0 0 #e0dfd0, inset -8px 0 0 #76766f;
	height: 80px;
	left: 474px;
	top: 86px;
	width: 76px;
}

.sk-castle-bg::before,
.sk-castle-bg::after {
	background: #c74332;
	border: 3px solid #2b2b2b;
	content: "";
	height: 42px;
	position: absolute;
	top: -34px;
	width: 24px;
}

.sk-castle-bg::before {
	left: 4px;
}

.sk-castle-bg::after {
	right: 4px;
}

.sk-castle-bg[data-level="2"] {
	height: 92px;
	top: 74px;
	width: 86px;
}

.sk-castle-bg[data-level="3"] {
	height: 104px;
	top: 62px;
	width: 96px;
}

.sk-castle-bg[data-level="3"]::before,
.sk-castle-bg[data-level="3"]::after {
	height: 50px;
	top: -42px;
}

.sk-house-bg {
	background: #8b5a2c;
	border: 3px solid #2b1a0f;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #b87a3a;
	height: 42px;
	width: 54px;
}

.sk-house-bg::before {
	background: #5a2f18;
	border: 3px solid #2b1a0f;
	content: "";
	height: 18px;
	left: -4px;
	position: absolute;
	top: -20px;
	transform: skewX(-24deg);
	width: 58px;
}

.sk-house-bg-a {
	left: 350px;
	top: 166px;
}

.sk-house-bg-b {
	left: 600px;
	top: 194px;
}

.sk-house-bg[data-level="2"] {
	height: 50px;
	width: 62px;
}

.sk-house-bg[data-level="3"] {
	height: 56px;
	width: 70px;
}

.sk-market-bg {
	background: #b5833c;
	border: 3px solid #2b1a0f;
	box-shadow: 10px 7px 0 #17100a;
	height: 44px;
	left: 430px;
	top: 224px;
	width: 74px;
}

.sk-market-bg::before {
	background: repeating-linear-gradient(90deg, #c74332 0 10px, #f0c65c 10px 20px);
	border: 3px solid #2b1a0f;
	content: "";
	height: 16px;
	left: -5px;
	position: absolute;
	top: -18px;
	width: 78px;
}

.sk-market-bg[data-level="2"] {
	height: 52px;
	width: 86px;
}

.sk-market-bg[data-level="3"] {
	height: 60px;
	width: 98px;
}

.sk-iso-building[data-damaged="1"] {
	filter: saturate(0.75);
}

.sk-building-hp {
	background: #050505;
	border: 2px solid #17100a;
	bottom: -13px;
	box-sizing: border-box;
	height: 8px;
	left: 4px;
	position: absolute;
	width: 42px;
	z-index: 12;
}

.sk-building-hp-fill {
	background: #2f8f2f;
	box-shadow: inset -4px 0 0 #1f5f1f;
	display: block;
	height: 4px;
	max-width: 100%;
	min-width: 2px;
}

.sk-iso-building[data-hp="100"] .sk-building-hp,
.sk-iso-wall[data-hp="100"] .sk-building-hp {
	display: none;
}

.sk-iso-building[data-hp="0"] .sk-building-hp-fill,
.sk-iso-wall[data-hp="0"] .sk-building-hp-fill {
	background: #c74332;
	box-shadow: none;
}

.sk-iso-building[data-damaged="1"] .sk-building-hp-fill,
.sk-iso-wall[data-damaged="1"] .sk-building-hp-fill {
	background: #c74332;
	box-shadow: inset -4px 0 0 #7a241c;
}

.sk-building-crack {
	display: none;
}

.sk-iso-building[data-damaged="1"] .sk-building-crack,
.sk-iso-wall[data-damaged="1"] .sk-building-crack {
	background: #050505;
	box-shadow: 5px 5px 0 #050505, -4px 11px 0 #050505;
	display: block;
	height: 5px;
	position: absolute;
	right: 8px;
	top: 10px;
	width: 5px;
	z-index: 11;
}

.sk-wall-hp {
	bottom: -12px;
	left: 5px;
	width: 38px;
}

.sk-farm-bg {
	background: #d5b447;
	border: 3px solid #4b3316;
	box-shadow: 8px 6px 0 #17100a, inset 7px 0 0 #f0d46a, inset -6px 0 0 #9b7420;
	height: 28px;
	left: 258px;
	top: 240px;
	width: 68px;
}

.sk-farm-bg::before {
	background: repeating-linear-gradient(90deg, #8b5a2c 0 8px, #d5b447 8px 16px);
	content: "";
	height: 12px;
	left: 8px;
	position: absolute;
	top: -13px;
	width: 52px;
}

.sk-mine-bg,
.sk-quarry-bg {
	background: #60666b;
	border: 3px solid #222;
	box-shadow: 8px 6px 0 #17100a, inset 7px 0 0 #9fa7ad, inset -6px 0 0 #3f4348;
	height: 32px;
	width: 54px;
}

.sk-mine-bg {
	left: 640px;
	top: 76px;
}

.sk-quarry-bg {
	left: 222px;
	top: 100px;
}

.sk-mine-bg::before,
.sk-quarry-bg::before {
	background: #050505;
	border: 3px solid #222;
	content: "";
	height: 18px;
	left: 14px;
	position: absolute;
	top: 10px;
	width: 22px;
}

.sk-woodcamp-bg {
	background: #8b5a2c;
	border: 3px solid #2b1a0f;
	box-shadow: 8px 6px 0 #17100a, inset 6px 0 0 #b87a3a;
	height: 30px;
	left: 284px;
	top: 72px;
	width: 58px;
}

.sk-woodcamp-bg::before {
	background: #1d4d27;
	border: 3px solid #0d2512;
	content: "";
	height: 26px;
	left: 34px;
	position: absolute;
	top: -22px;
	width: 24px;
}

.sk-mage-tower-bg {
	background: #9fa7ad;
	border: 3px solid #222;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #d7dee2, inset -6px 0 0 #60666b;
	height: 58px;
	left: 378px;
	top: 88px;
	width: 34px;
}

.sk-mage-tower-bg::before {
	background: #673399;
	border: 3px solid #222;
	content: "";
	height: 22px;
	left: -5px;
	position: absolute;
	top: -24px;
	width: 38px;
}

.sk-farm-bg[data-level="2"],
.sk-mine-bg[data-level="2"],
.sk-quarry-bg[data-level="2"],
.sk-woodcamp-bg[data-level="2"] {
	transform: scale(1.12);
	transform-origin: left bottom;
}

.sk-farm-bg[data-level="3"],
.sk-mine-bg[data-level="3"],
.sk-quarry-bg[data-level="3"],
.sk-woodcamp-bg[data-level="3"] {
	transform: scale(1.24);
	transform-origin: left bottom;
}

.sk-mage-tower-bg[data-level="2"] {
	height: 68px;
	top: 78px;
}

.sk-mage-tower-bg[data-level="3"] {
	height: 78px;
	top: 68px;
}

.sk-iso-tree {
	background: #1d4d27;
	border: 3px solid #0d2512;
	box-shadow: 7px 5px 0 #17100a;
	height: 38px;
	width: 34px;
}

.sk-iso-tree::after {
	background: #6a3f21;
	bottom: -16px;
	content: "";
	height: 18px;
	left: 12px;
	position: absolute;
	width: 8px;
}

.sk-tree-a { left: 270px; top: 130px; }
.sk-tree-b { left: 642px; top: 116px; }
.sk-tree-c { left: 690px; top: 244px; }

.sk-iso-rock {
	background: #74746d;
	border: 3px solid #222;
	box-shadow: 7px 5px 0 #17100a, inset 7px 0 0 #aaa89d, inset -5px 0 0 #4f514e;
	height: 18px;
	width: 28px;
}

.sk-iso-npc {
	animation: sk-npc-march 4s steps(8) infinite;
	background: #f0c65c;
	border: 2px solid #17100a;
	box-shadow: 4px 4px 0 #17100a;
	height: 22px;
	width: 12px;
}

.sk-player-npc {
	z-index: 4;
}

.sk-iso-npc::before {
	background: #64c7d8;
	border: 2px solid #17100a;
	content: "";
	height: 8px;
	left: 0;
	position: absolute;
	top: -10px;
	width: 10px;
}

.sk-player-npc::after {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-name);
	font-size: 10px;
	font-weight: 700;
	left: -18px;
	line-height: 1;
	max-width: 82px;
	overflow: hidden;
	padding: 2px 4px;
	position: absolute;
	text-overflow: ellipsis;
	top: -28px;
	white-space: nowrap;
}

.sk-player-npc[data-kind="npc"]::after,
.sk-citizen-npc b {
	border-color: #777;
	color: #c7c7c7;
}

.sk-player-npc[data-kind="chatter"]::after,
.sk-citizen-chatter b {
	border-color: #d6a84f;
	color: #ffe29a;
}

.sk-list-npc,
.sk-row-npc,
.sk-player-link-npc {
	color: #c7c7c7;
}

.sk-list-chatter,
.sk-row-chatter,
.sk-player-link-chatter {
	color: #ffe29a;
}

.sk-row-npc td:first-child::before,
.sk-player-link-npc strong::before {
	color: #9fb2a0;
	content: "NPC ";
	font-weight: 700;
}

.sk-player-npc[data-profession="ritter"],
.sk-player-npc[data-profession="soldat"] {
	background: #c74332;
}

.sk-player-npc[data-profession="minenarbeiter"] {
	background: #9fa7ad;
}

.sk-player-npc[data-profession="holzfaeller"] {
	background: #2f7d35;
}

.sk-player-npc[data-profession="heiler"] {
	background: #f5f0d8;
}

.sk-player-npc[data-profession="magier"] {
	background: #673399;
}

.sk-player-npc[data-state="defend"],
.sk-player-npc[data-state="attack"] {
	animation-duration: 2.2s;
}

.sk-player-npc[data-hp="0"] {
	opacity: 0.5;
}

.sk-player-npc-1 { animation-delay: 1s; }
.sk-player-npc-2 { animation-delay: 2s; }
.sk-player-npc-3 { animation-delay: 1.5s; }
.sk-player-npc-4 { animation-delay: 2.5s; }
.sk-player-npc-5 { animation-delay: 0.5s; }

.sk-iso-caravan {
	animation: sk-caravan-roll 4.5s steps(6) infinite;
	background: #8b5a2c;
	border: 3px solid #2b1a0f;
	box-shadow: 7px 5px 0 #17100a, inset 6px 0 0 #b87a3a;
	height: 18px;
	width: 34px;
	z-index: 5;
}

.sk-iso-caravan::before {
	background: #f5f0d8;
	border: 2px solid #17100a;
	content: "";
	height: 12px;
	left: 8px;
	position: absolute;
	top: -12px;
	width: 18px;
}

.sk-iso-caravan::after {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-progress) "%";
	font-size: 10px;
	font-weight: 700;
	left: -4px;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 22px;
	white-space: nowrap;
}

.sk-iso-caravan[data-resource="wood"] { background: #9b5d2e; }
.sk-iso-caravan[data-resource="stone"] { background: #74746d; }
.sk-iso-caravan[data-resource="food"] { background: #d5b447; }
.sk-iso-caravan[data-resource="gold"] { background: #d6a84f; }
.sk-iso-caravan[data-risk="100"] { border-color: #c74332; }
.sk-iso-caravan[data-status="arrived"] { animation: none; opacity: 0.75; }

.sk-iso-battle {
	animation: sk-battle-pulse 1.4s steps(2) infinite;
	border-left: 5px solid #17100a;
	height: 44px;
	width: 34px;
	z-index: 7;
}

.sk-iso-battle::before {
	background: #c74332;
	border: 3px solid #17100a;
	box-shadow: 8px 8px 0 #17100a;
	content: "";
	height: 20px;
	left: 4px;
	position: absolute;
	top: 0;
	width: 28px;
}

.sk-iso-battle::after {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-score);
	font-size: 10px;
	font-weight: 700;
	left: -12px;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 42px;
	white-space: nowrap;
}

.sk-iso-battle[data-side="defender"]::before {
	background: #315f90;
}

.sk-iso-battle[data-status="finished"] {
	animation: none;
	opacity: 0.7;
}

.sk-iso-world-boss {
	animation: sk-boss-stomp 2s steps(3) infinite;
	background: #4e2a6f;
	border: 4px solid #17100a;
	box-shadow: 10px 8px 0 #17100a, inset 8px 0 0 #7b469c, inset -7px 0 0 #2c173f;
	height: 50px;
	width: 54px;
	z-index: 6;
}

.sk-iso-world-boss::before {
	background: #f0c65c;
	border: 3px solid #17100a;
	box-shadow: 32px 0 0 #f0c65c, 16px 12px 0 #17100a;
	content: "";
	height: 12px;
	left: -5px;
	position: absolute;
	top: -13px;
	width: 14px;
}

.sk-iso-world-boss::after {
	background: #050505;
	border: 2px solid #c74332;
	color: #fff3cf;
	content: attr(data-name) " " attr(data-hp) "%";
	font-size: 10px;
	font-weight: 700;
	left: -20px;
	line-height: 1;
	max-width: 120px;
	overflow: hidden;
	padding: 2px 4px;
	position: absolute;
	text-overflow: ellipsis;
	top: 56px;
	white-space: nowrap;
}

.sk-iso-world-boss[data-type="dragon"] {
	background: #7d2d2d;
	box-shadow: 10px 8px 0 #17100a, inset 8px 0 0 #c74332, inset -7px 0 0 #4a1717;
}

.sk-iso-world-boss[data-type="golem"] {
	background: #74746d;
	box-shadow: 10px 8px 0 #17100a, inset 8px 0 0 #b8b8aa, inset -7px 0 0 #464640;
}

.sk-iso-world-event {
	animation: sk-event-flash 1.8s steps(2) infinite;
	background: #d6a84f;
	border: 3px solid #17100a;
	box-shadow: 7px 6px 0 #17100a;
	height: 30px;
	width: 30px;
	z-index: 6;
}

.sk-iso-world-event::before {
	background: #fff3cf;
	border: 2px solid #17100a;
	content: "";
	height: 8px;
	left: 8px;
	position: absolute;
	top: -10px;
	width: 8px;
}

.sk-iso-world-event::after {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-title);
	font-size: 10px;
	font-weight: 700;
	left: -18px;
	line-height: 1;
	max-width: 110px;
	overflow: hidden;
	padding: 2px 4px;
	position: absolute;
	text-overflow: ellipsis;
	top: 34px;
	white-space: nowrap;
}

.sk-iso-world-event[data-type="dragon_attack"],
.sk-iso-world-event[data-type="viking_raid"] {
	background: #c74332;
}

.sk-iso-world-event[data-type="plague"] {
	background: #2f7d35;
}

.sk-iso-world-event[data-type="drought"] {
	background: #8b5a2c;
}

.sk-iso-world-event[data-type="magic_rain"] {
	background: #315f90;
}

.sk-iso-world-wonder {
	animation: sk-wonder-build 2.4s steps(3) infinite;
	background: #8a8f8f;
	border: 4px solid #17100a;
	box-shadow: 10px 8px 0 #17100a, inset 7px 0 0 #c7cccc, inset -7px 0 0 #575c5c;
	height: 58px;
	width: 50px;
	z-index: 5;
}

.sk-iso-world-wonder::before {
	background: #d6a84f;
	border: 3px solid #17100a;
	box-shadow: 12px -10px 0 #d6a84f, 24px 0 0 #d6a84f;
	content: "";
	height: 16px;
	left: 7px;
	position: absolute;
	top: -17px;
	width: 14px;
}

.sk-iso-world-wonder::after {
	background: #050505;
	border: 2px solid #64c7d8;
	color: #fff3cf;
	content: attr(data-progress) "%";
	font-size: 10px;
	font-weight: 700;
	left: -4px;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 64px;
	white-space: nowrap;
}

.sk-iso-world-wonder[data-status="completed"] {
	animation: none;
	background: #d6a84f;
	box-shadow: 10px 8px 0 #17100a, inset 7px 0 0 #fff3cf, inset -7px 0 0 #9b6d24;
}

.sk-iso-world-wonder[data-type="obelisk"] {
	height: 70px;
	width: 34px;
}

.sk-iso-world-wonder[data-type="harbor"] {
	background: #8b5a2c;
	width: 62px;
}

.sk-iso-migration {
	animation: sk-migration-run 2.8s steps(4) infinite;
	background: #64c7d8;
	border: 3px solid #17100a;
	box-shadow: 7px 6px 0 #17100a;
	height: 24px;
	width: 16px;
	z-index: 8;
}

.sk-iso-migration::before {
	background: #f5d0a0;
	border: 2px solid #17100a;
	content: "";
	height: 8px;
	left: 2px;
	position: absolute;
	top: -9px;
	width: 8px;
}

.sk-iso-migration::after {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-name);
	font-size: 10px;
	font-weight: 700;
	left: -18px;
	line-height: 1;
	max-width: 92px;
	overflow: hidden;
	padding: 2px 4px;
	position: absolute;
	text-overflow: ellipsis;
	top: -32px;
	white-space: nowrap;
}

.sk-iso-migration[data-direction="incoming"] {
	background: #2f7d35;
}

.sk-iso-migration[data-direction="outgoing"] {
	background: #c74332;
	animation-direction: reverse;
}

.sk-iso-migration[data-direction="neutral"] {
	background: #d6a84f;
}

.sk-iso-season {
	animation: sk-season-glint 2.1s steps(3) infinite;
	background: #315f90;
	border: 4px solid #17100a;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #64c7d8, inset -6px 0 0 #17365b;
	height: 36px;
	width: 58px;
	z-index: 8;
}

.sk-iso-season::before {
	background: #d6a84f;
	border: 3px solid #17100a;
	content: "";
	height: 14px;
	left: 18px;
	position: absolute;
	top: -18px;
	width: 14px;
}

.sk-iso-season::after {
	background: #050505;
	border: 2px solid #64c7d8;
	color: #fff3cf;
	content: attr(data-progress) "%";
	font-size: 10px;
	font-weight: 700;
	left: 6px;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 42px;
	white-space: nowrap;
}

.sk-iso-season[data-status="planned"] {
	background: #74746d;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #b8b8aa, inset -6px 0 0 #464640;
}

.sk-iso-season[data-status="finished"] {
	animation: none;
	background: #d6a84f;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #fff3cf, inset -6px 0 0 #9b6d24;
}

.sk-iso-alliance {
	animation: sk-alliance-wave 2.6s steps(3) infinite;
	background: #315f90;
	border: 4px solid #17100a;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #64c7d8;
	height: 34px;
	width: 46px;
	z-index: 7;
}

.sk-iso-alliance::before {
	background: #d6a84f;
	border-left: 4px solid #17100a;
	content: "";
	height: 48px;
	left: -9px;
	position: absolute;
	top: -8px;
	width: 5px;
}

.sk-iso-alliance::after {
	background: #050505;
	border: 2px solid #64c7d8;
	color: #fff3cf;
	content: attr(data-members) " R";
	font-size: 10px;
	font-weight: 700;
	left: 0;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 40px;
	white-space: nowrap;
}

.sk-iso-alliance[data-role="leader"] {
	background: #d6a84f;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #fff3cf;
}

.sk-iso-alliance[data-role="member"] {
	background: #2f7d35;
	box-shadow: 9px 7px 0 #17100a, inset 6px 0 0 #64c76c;
}

.sk-iso-alliance-war {
	animation: sk-alliance-war-pulse 1.3s steps(2) infinite;
	background: #c74332;
	border: 4px solid #17100a;
	box-shadow: 9px 7px 0 #17100a;
	height: 30px;
	width: 62px;
	z-index: 8;
}

.sk-iso-alliance-war::before {
	background: #315f90;
	border: 3px solid #17100a;
	content: "";
	height: 22px;
	left: 30px;
	position: absolute;
	top: -11px;
	width: 28px;
}

.sk-iso-alliance-war::after {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-score);
	font-size: 10px;
	font-weight: 700;
	left: 8px;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 36px;
	white-space: nowrap;
}

.sk-iso-alliance-war[data-side="defender"] {
	background: #315f90;
}

.sk-iso-alliance-war[data-side="attacker"]::before {
	background: #c74332;
}

.sk-iso-crown-crystal {
	animation: sk-crystal-shine 1.8s steps(3) infinite;
	background: #64c7d8;
	border: 4px solid #17100a;
	box-shadow: 8px 7px 0 #17100a, inset 5px 0 0 #fff3cf, inset -5px 0 0 #315f90;
	height: 34px;
	transform: rotate(45deg) skew(-10deg, -10deg);
	width: 34px;
	z-index: 9;
}

.sk-iso-crown-crystal::before {
	background: #d6a84f;
	border: 3px solid #17100a;
	content: "";
	height: 8px;
	left: 9px;
	position: absolute;
	top: -13px;
	width: 12px;
}

.sk-iso-crown-crystal::after {
	background: #050505;
	border: 2px solid #64c7d8;
	color: #fff3cf;
	content: attr(data-amount);
	font-size: 10px;
	font-weight: 700;
	left: 4px;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 38px;
	transform: skew(10deg, 10deg) rotate(-45deg);
	white-space: nowrap;
}

.sk-iso-crown-crystal[data-source="kingdom"] {
	border-color: #d6a84f;
}

.sk-iso-crown-crystal[data-source="region"] {
	border-color: #64c7d8;
}

.sk-iso-resource-stockpile {
	background: #7a3f1d;
	border: 3px solid #17100a;
	box-shadow: 7px 6px 0 #17100a, inset 5px 0 0 #b66b31, inset -5px 0 0 #4b2410;
	height: 22px;
	width: 38px;
	z-index: 7;
}

.sk-iso-resource-stockpile::before {
	background: #3f2412;
	border: 3px solid #17100a;
	box-shadow: 12px 0 0 #3f2412, 24px 0 0 #3f2412, 6px -8px 0 #b66b31, 18px -8px 0 #b66b31;
	content: "";
	height: 8px;
	left: 3px;
	position: absolute;
	top: -10px;
	width: 8px;
}

.sk-iso-resource-stockpile::after {
	background: #050505;
	border: 2px solid #d6a84f;
	color: #fff3cf;
	content: attr(data-amount);
	font-size: 10px;
	font-weight: 700;
	left: 2px;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	top: 27px;
	white-space: nowrap;
}

.sk-iso-resource-stockpile[data-resource="stone"] {
	background: #737878;
	box-shadow: 7px 6px 0 #17100a, inset 5px 0 0 #c7cccc, inset -5px 0 0 #444848;
}

.sk-iso-resource-stockpile[data-resource="stone"]::before {
	background: #8a8f8f;
	box-shadow: 12px 0 0 #575c5c, 24px 0 0 #c7cccc, 6px -8px 0 #8a8f8f, 18px -8px 0 #575c5c;
}

.sk-iso-resource-stockpile[data-resource="food"] {
	background: #a47a22;
	box-shadow: 7px 6px 0 #17100a, inset 5px 0 0 #d6a84f, inset -5px 0 0 #6b4b12;
}

.sk-iso-resource-stockpile[data-resource="food"]::before {
	background: #d6a84f;
	box-shadow: 12px 0 0 #fff06a, 24px 0 0 #d6a84f, 6px -8px 0 #fff06a, 18px -8px 0 #d6a84f;
}

.sk-iso-resource-stockpile[data-resource="gold"] {
	background: #c28a2d;
	box-shadow: 7px 6px 0 #17100a, inset 5px 0 0 #fff06a, inset -5px 0 0 #7a4d10;
}

.sk-iso-resource-stockpile[data-resource="gold"]::before {
	background: #d6a84f;
	box-shadow: 12px 0 0 #fff06a, 24px 0 0 #d6a84f, 6px -8px 0 #fff06a, 18px -8px 0 #d6a84f;
}

.sk-iso-resource-stockpile[data-resource="prestige"] {
	background: #315f90;
	box-shadow: 7px 6px 0 #17100a, inset 5px 0 0 #64c7d8, inset -5px 0 0 #183755;
}

.sk-iso-resource-stockpile[data-resource="prestige"]::before {
	background: #64c7d8;
	box-shadow: 12px 0 0 #d6a84f, 24px 0 0 #64c7d8, 6px -8px 0 #d6a84f, 18px -8px 0 #64c7d8;
}

.sk-iso-resource-stockpile[data-tier="2"] {
	height: 28px;
	top: 330px;
}

.sk-iso-resource-stockpile[data-tier="2"]::after {
	top: 33px;
}

.sk-iso-resource-stockpile[data-tier="3"] {
	height: 34px;
	top: 324px;
}

.sk-iso-resource-stockpile[data-tier="3"]::after {
	top: 39px;
}

@keyframes sk-caravan-roll {
	0% { transform: translate(0, 0); }
	50% { transform: translate(8px, -4px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-battle-pulse {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -4px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-boss-stomp {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, 5px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-event-flash {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -3px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-wonder-build {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -2px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-migration-run {
	0% { transform: translate(0, 0); }
	50% { transform: translate(28px, -14px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-season-glint {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -3px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-alliance-wave {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -3px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-alliance-war-pulse {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -4px); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-crystal-shine {
	0% { filter: brightness(1); }
	50% { filter: brightness(1.35); }
	100% { filter: brightness(1); }
}

@keyframes sk-campaign-march {
	0% { left: 0; opacity: 0; }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { left: calc(100% - 8px); opacity: 0; }
}

@keyframes sk-npc-march {
	0% { transform: translate(0, 0); }
	25% { transform: translate(18px, -9px); }
	50% { transform: translate(36px, 0); }
	75% { transform: translate(18px, 9px); }
	100% { transform: translate(0, 0); }
}

.sk-site-hero {
	align-items: center;
	background:
		linear-gradient(135deg, #382615 0 50%, #2a1c10 50% 100%);
	border: 4px solid #110b07;
	box-shadow: inset 3px 3px 0 #8f6430, inset -3px -3px 0 #090604;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) 160px;
	margin-bottom: 18px;
	padding: 24px;
}

.sk-site-hero h1 {
	color: #f0c65c;
	font-size: clamp(30px, 5vw, 58px);
	line-height: 1;
	margin: 0;
	text-shadow: 3px 3px 0 #17100a;
}

.sk-site-hero p {
	font-size: 16px;
	max-width: 780px;
}

.sk-kicker {
	color: #7fd089;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.sk-version {
	background: #11170f;
	border: 2px solid #d6a84f;
	color: #f0c65c;
	display: inline-block;
	font-weight: 700;
	padding: 5px 8px;
}

.sk-front-tabs {
	background: #11170f;
	border: 3px solid #5a3b1e;
	box-shadow: inset 2px 2px 0 #2d4522, inset -2px -2px 0 #090604;
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	margin: 0 0 18px;
	padding: 8px;
}

.sk-front-tab {
	background: #25180f;
	border: 2px solid #6f4520;
	color: #fff3cf;
	display: block;
	font-weight: 700;
	padding: 10px 8px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.sk-front-tab:hover,
.sk-front-tab:focus,
.sk-front-tab-active {
	background: #d6a84f;
	border-color: #110b07;
	color: #10131a;
	outline: 0;
}

.sk-world-jumpnav,
.sk-portal-jumpnav,
.sk-chatter-jumpnav,
.sk-kingdom-jumpnav,
.sk-ranking-jumpnav,
.sk-register-jumpnav,
.sk-dashboard-jumpnav {
	background: #25180f;
	border: 3px solid #110b07;
	box-shadow: inset 2px 2px 0 #6f4520, inset -2px -2px 0 #090604;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 6px;
	margin: 0 0 18px;
	padding: 8px;
}

.sk-world-jumpnav a,
.sk-portal-jumpnav a,
.sk-chatter-jumpnav a,
.sk-kingdom-jumpnav a,
.sk-ranking-jumpnav a,
.sk-register-jumpnav a,
.sk-dashboard-jumpnav a {
	background: #11170f;
	border: 2px solid #5a3b1e;
	color: #fff3cf;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 10px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.sk-world-jumpnav a:hover,
.sk-world-jumpnav a:focus,
.sk-portal-jumpnav a:hover,
.sk-portal-jumpnav a:focus,
.sk-chatter-jumpnav a:hover,
.sk-chatter-jumpnav a:focus,
.sk-kingdom-jumpnav a:hover,
.sk-kingdom-jumpnav a:focus,
.sk-ranking-jumpnav a:hover,
.sk-ranking-jumpnav a:focus,
.sk-register-jumpnav a:hover,
.sk-register-jumpnav a:focus,
.sk-dashboard-jumpnav a:hover,
.sk-dashboard-jumpnav a:focus {
	background: #7fd089;
	border-color: #110b07;
	color: #10131a;
	outline: 0;
}

.sk-hero-emblem {
	background: #11170f;
	border: 4px solid #5a3b1e;
	height: 132px;
	position: relative;
	width: 132px;
}

.sk-hero-emblem::before {
	background:
		linear-gradient(45deg, transparent 0 36%, #d6a84f 36% 64%, transparent 64%),
		linear-gradient(135deg, transparent 0 36%, #d6a84f 36% 64%, transparent 64%);
	content: "";
	height: 88px;
	left: 22px;
	position: absolute;
	top: 22px;
	width: 88px;
}

.sk-hero-emblem span {
	background: #c74332;
	bottom: 16px;
	box-shadow: 16px -12px 0 #c74332, 32px 0 0 #c74332;
	display: block;
	height: 18px;
	left: 34px;
	position: absolute;
	width: 18px;
}

.sk-hero-emblem-player::before {
	background:
		linear-gradient(90deg, transparent 0 38%, #4f8fd6 38% 62%, transparent 62%),
		linear-gradient(0deg, transparent 0 28%, #f0c65c 28% 72%, transparent 72%);
}

.sk-panel,
.sk-ranking {
	background:
		repeating-linear-gradient(90deg, rgba(255, 225, 151, 0.04) 0 4px, transparent 4px 12px),
		linear-gradient(180deg, #332518, #151911);
	border: 3px solid #5a3b1e;
	border-radius: 0;
	box-shadow: inset 2px 2px 0 rgba(255, 235, 171, 0.16), inset -2px -2px 0 rgba(0,0,0,0.38);
	color: #fff3cf;
	font-family: "Courier New", Consolas, ui-monospace, monospace;
	image-rendering: pixelated;
	padding: 24px;
}

.sk-ranking {
	margin: 0 auto;
	max-width: 1440px;
	width: min(100%, 1440px);
}
.sk-site-shell .sk-panel {
	background: #25180f;
	border-color: #110b07;
	box-shadow: inset 3px 3px 0 #6f4520, inset -3px -3px 0 #090604;
	overflow-x: auto;
}
.sk-panel h2 {
	color: #d6a84f;
	text-shadow: 2px 2px 0 #3b2412;
	margin-top: 0;
}
.sk-ranking table {
	border-collapse: collapse;
	width: 100%;
}
.sk-ranking th,
.sk-ranking td {
	border-bottom: 2px solid #5a3b1e;
	padding: 10px;
	text-align: left;
}
.sk-ranking th {
	color: #d6a84f;
	text-transform: uppercase;
}
.sk-form {
	display: grid;
	gap: 14px;
	max-width: 520px;
}
.sk-form label {
	display: grid;
	gap: 6px;
}
.sk-form input,
.sk-form button {
	border-radius: 0;
	padding: 10px 12px;
}
.sk-form input {
	background: #11170f;
	border: 2px solid #5a3b1e;
	color: #fff3cf;
}
.sk-form button,
.sk-button {
	background: #d6a84f;
	border: 2px solid #3b2412;
	box-shadow: inset 2px 2px 0 rgba(255,255,255,0.24), 3px 3px 0 rgba(0,0,0,0.35);
	color: #10131a;
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	padding: 10px 12px;
	text-decoration: none;
	text-transform: uppercase;
}
.sk-success {
	color: #79d69a;
}
.sk-error {
	color: #ff8f8f;
}
.sk-portal-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.sk-section {
	background: #151911;
	border: 3px solid #5a3b1e;
	box-shadow: inset 2px 2px 0 #2d4522;
	margin-top: 18px;
	padding: 16px;
}
.sk-section h3 {
	color: #d6a84f;
	margin-top: 0;
}

.sk-section-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 24px;
	width: 0;
}
.sk-copy-field,
.sk-section textarea {
	background: #11170f;
	border: 2px solid #5a3b1e;
	box-sizing: border-box;
	color: #fff3cf;
	font-family: Consolas, "Courier New", monospace;
	padding: 10px;
	width: 100%;
}
.sk-search-form {
	align-items: end;
	display: grid;
	grid-template-columns: minmax(220px, 1fr) auto;
	max-width: 680px;
}
.sk-profile-stats {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sk-profile-stats div {
	background: #11170f;
	border: 2px solid #5a3b1e;
	padding: 10px;
}
.sk-profile-stats span {
	color: #d6a84f;
	display: block;
	font-size: 22px;
	font-weight: 700;
}

.sk-player-progress-card {
	align-items: center;
	background: #11170f;
	border: 3px solid #110b07;
	box-shadow: inset 2px 2px 0 #5a3b1e, inset -2px -2px 0 #050505;
	display: grid;
	gap: 12px;
	grid-template-columns: 48px minmax(0, 1fr);
	margin-top: 12px;
	padding: 10px;
}

.sk-player-progress-avatar {
	background: #6fbf6f;
	border: 3px solid #050505;
	box-shadow: 8px 6px 0 #050505, inset 8px 0 0 #d6a84f;
	height: 44px;
	position: relative;
	width: 26px;
}

.sk-player-progress-avatar::before {
	background: #f1c27d;
	border: 3px solid #050505;
	content: "";
	height: 12px;
	left: 4px;
	position: absolute;
	top: -13px;
	width: 12px;
}

.sk-player-progress-avatar::after {
	background: #050505;
	content: "";
	height: 4px;
	left: 2px;
	position: absolute;
	top: 21px;
	width: 4px;
	box-shadow: 18px 0 0 #050505, 2px 15px 0 #050505, 16px 15px 0 #050505;
}

.sk-player-progress-avatar[data-profession="ritter"],
.sk-player-progress-avatar[data-profession="soldat"] {
	background: #8a8f8f;
	box-shadow: 8px 6px 0 #050505, inset 8px 0 0 #c7cccc;
}

.sk-player-progress-avatar[data-profession="minenarbeiter"] {
	background: #6b5a46;
	box-shadow: 8px 6px 0 #050505, inset 8px 0 0 #c7cccc;
}

.sk-player-progress-avatar[data-profession="holzfaeller"] {
	background: #7a4a2c;
	box-shadow: 8px 6px 0 #050505, inset 8px 0 0 #6fbf6f;
}

.sk-appearance-section {
	grid-column: 1 / -1;
}

.sk-appearance-customizer {
	align-items: center;
	background: #11170f;
	border: 3px solid #110b07;
	display: grid;
	gap: 24px;
	grid-template-columns: 110px minmax(0, 1fr);
	padding: 18px;
}

.sk-appearance-preview {
	background:
		linear-gradient(#fff0c7, #fff0c7) 24px 53px / 3px 22px no-repeat,
		linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) 23px 51px / 8px 27px no-repeat,
		linear-gradient(#20140d, #20140d) 22px 103px / 14px 7px no-repeat,
		linear-gradient(#20140d, #20140d) 42px 103px / 14px 7px no-repeat,
		linear-gradient(var(--sk-pants, #46301f), var(--sk-pants, #46301f)) 24px 78px / 13px 27px no-repeat,
		linear-gradient(var(--sk-pants, #46301f), var(--sk-pants, #46301f)) 41px 78px / 13px 27px no-repeat,
		linear-gradient(#3b291b, #3b291b) 20px 74px / 38px 7px no-repeat,
		linear-gradient(#f0b985, #f0b985) 11px 69px / 9px 12px no-repeat,
		linear-gradient(#f0b985, #f0b985) 58px 69px / 9px 12px no-repeat,
		linear-gradient(var(--sk-shirt, #a84432), var(--sk-shirt, #a84432)) 12px 51px / 10px 22px no-repeat,
		linear-gradient(var(--sk-shirt, #a84432), var(--sk-shirt, #a84432)) 56px 51px / 10px 22px no-repeat,
		linear-gradient(var(--sk-shirt, #a84432), var(--sk-shirt, #a84432)) 20px 48px / 38px 29px no-repeat,
		linear-gradient(#20140d, #20140d) 17px 45px / 44px 35px no-repeat,
		linear-gradient(#f0b985, #f0b985) 33px 40px / 12px 9px no-repeat,
		linear-gradient(var(--sk-hair, #5a351f), var(--sk-hair, #5a351f)) 21px 19px / 8px 19px no-repeat,
		linear-gradient(var(--sk-hair, #5a351f), var(--sk-hair, #5a351f)) 49px 19px / 8px 19px no-repeat,
		linear-gradient(#f0c28c, #f0c28c) 24px 17px / 30px 28px no-repeat,
		linear-gradient(var(--sk-hair, #5a351f), var(--sk-hair, #5a351f)) 21px 11px / 36px 14px no-repeat,
		linear-gradient(#20140d, #20140d) 18px 8px / 42px 40px no-repeat;
	filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.42));
	height: 112px;
	image-rendering: pixelated;
	margin: 0 auto;
	position: relative;
	width: 78px;
}

.sk-appearance-preview::before {
	background: #2a190f;
	box-shadow: 14px 0 0 #2a190f, 5px 10px 0 #b56f54, 8px 10px 0 #b56f54;
	content: "";
	height: 3px;
	left: 29px;
	position: absolute;
	top: 27px;
	width: 3px;
}

.sk-appearance-preview::after {
	background: rgba(0, 0, 0, 0.38);
	border-radius: 50%;
	bottom: -4px;
	content: "";
	height: 8px;
	left: 14px;
	position: absolute;
	width: 52px;
	z-index: -1;
}

.sk-appearance-style {
	display: none;
}

.sk-streamer-crown {
	background: #f2c14e;
	clip-path: polygon(0 100%, 0 38%, 20% 68%, 35% 8%, 52% 66%, 72% 0, 82% 66%, 100% 34%, 100% 100%);
	display: block;
	filter: drop-shadow(2px 2px 0 #5b3508);
	height: 24px;
	left: 19px;
	position: absolute;
	top: -13px;
	width: 42px;
	z-index: 3;
}

.sk-streamer-crown::after {
	background: #d99018;
	bottom: 0;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	width: 100%;
}

.sk-appearance-customizer[data-sk-gender="female"] .sk-appearance-style {
	background: var(--sk-hair);
	box-shadow: 34px 0 0 var(--sk-hair);
	display: block;
	height: 36px;
	left: 18px;
	position: absolute;
	top: 18px;
	width: 8px;
}

.sk-appearance-customizer[data-sk-gender="female"] .sk-appearance-style::after {
	background: var(--sk-shirt);
	clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
	content: "";
	height: 15px;
	left: 5px;
	position: absolute;
	top: 57px;
	width: 34px;
}

.sk-gender-choice {
	border: 2px solid #5a3b1e;
	grid-column: 1 / -1;
	margin: 0;
	padding: 8px;
}

.sk-gender-choice legend {
	color: #fff3cf;
	font-weight: 700;
	padding: 0 5px;
}

.sk-gender-choice > div {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sk-gender-choice button[aria-pressed="true"] {
	background: #f2c14e;
	color: #17100a;
	box-shadow: inset 0 0 0 3px #fff3cf;
}

.sk-appearance-form {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sk-appearance-form label {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.sk-color-palette {
	border: 2px solid #5a3b1e;
	margin: 0;
	min-width: 0;
	padding: 8px;
}

.sk-color-palette legend {
	color: #fff3cf;
	font-weight: 700;
	padding: 0 5px;
}

.sk-color-palette > div {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fit, 32px);
	justify-content: start;
}

.sk-color-palette button {
	background: var(--sk-choice);
	border: 3px solid #050505;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
	cursor: pointer;
	height: 32px;
	min-height: 32px;
	padding: 0;
	width: 32px;
}

.sk-color-palette button:hover,
.sk-color-palette button:focus-visible {
	border-color: #fff3cf;
	transform: translateY(-2px);
}

.sk-color-palette button[aria-pressed="true"] {
	border-color: #f2c14e;
	box-shadow: 0 0 0 2px #050505, 0 0 0 5px #f2c14e;
}

.sk-appearance-demo-note {
	grid-column: 1 / -1;
	margin: 0;
}

.sk-appearance-form button {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.sk-appearance-customizer,
	.sk-appearance-form {
		grid-template-columns: 1fr;
	}

	.sk-appearance-form button {
		grid-column: auto;
	}
}

.sk-player-progress-main strong {
	color: #fff3cf;
	display: block;
}

.sk-player-meter-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 10px;
}

.sk-player-meter {
	background: #11170f;
	border: 2px solid #5a3b1e;
	padding: 8px;
}

.sk-player-meter span {
	color: #d6a84f;
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.sk-xp-bar span {
	background: #d6a84f;
	box-shadow: inset -5px 0 0 #8f6430;
}

.sk-loyalty-bar span {
	background: #64c7d8;
	box-shadow: inset -5px 0 0 #315f90;
}

.sk-readiness-bar span {
	background: #79d69a;
	box-shadow: inset -5px 0 0 #2d7d3f;
}

.sk-combat-bar span {
	background: #c74332;
	box-shadow: inset -5px 0 0 #7a241c;
}

.sk-player-link-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.sk-player-link {
	background: #11170f;
	border: 2px solid #5a3b1e;
	color: #fff3cf;
	display: block;
	padding: 10px;
	text-decoration: none;
}
.sk-player-link strong {
	color: #d6a84f;
	display: block;
}
.sk-player-link span {
	display: block;
	font-size: 13px;
	margin-top: 4px;
}
.sk-public-bar {
	background: #11170f;
	border: 2px solid #5a3b1e;
	height: 16px;
	margin: 12px 0 6px;
}
.sk-public-bar span {
	background: #d6a84f;
	display: block;
	height: 16px;
}
.sk-hp-bar span {
	background: #c74332;
}
.sk-public-table {
	border-collapse: collapse;
	width: 100%;
}
.sk-public-table th,
.sk-public-table td {
	border-bottom: 2px solid #5a3b1e;
	padding: 8px;
	text-align: left;
	vertical-align: top;
}
.sk-public-table th {
	color: #d6a84f;
}
.sk-public-table {
	min-width: 760px;
	table-layout: auto;
}

.sk-world-protection-badge {
	display: inline-block;
	padding: 3px 7px;
	border: 1px solid #d5c199;
	background: #2f281f;
	color: #f7e7b8;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.sk-world-protection-badge-active {
	border-color: #f0c24f;
	color: #ffe28a;
}

.sk-world-protection-badge-open {
	border-color: #77b56b;
	color: #bff0a8;
}
.sk-section {
	overflow-x: auto;
}
.sk-action-reward-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin: 12px 0 16px;
}
.sk-action-reward-card {
	background: #11170f;
	border: 2px solid #5a3b1e;
	box-shadow: inset 2px 2px 0 #3a2415;
	color: #fff3cf;
	padding: 10px;
}
.sk-action-reward-card strong,
.sk-action-reward-card span {
	display: block;
}
.sk-action-reward-card strong {
	color: #d6a84f;
	margin-bottom: 5px;
	text-transform: uppercase;
}
.sk-action-reward-card span {
	color: #e6d4a2;
	font-size: 12px;
	line-height: 1.45;
}
.sk-resource-row {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	margin-top: 12px;
}
.sk-resource-row span {
	background: #11170f;
	border: 2px solid #5a3b1e;
	color: #fff3cf;
	display: block;
	padding: 8px;
}
.sk-world-map-board {
	background: #1d3f1d;
	border: 4px solid #5a3b1e;
	box-shadow: inset 0 0 0 4px #11170f;
	height: 420px;
	margin-top: 12px;
	overflow: hidden;
	position: relative;
}
.sk-world-map-layout {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr);
	margin-top: 12px;
}
.sk-world-map-stage,
.sk-world-map-side {
	min-width: 0;
}
.sk-world-map-side {
	display: grid;
	gap: 12px;
	grid-template-rows: auto minmax(0, 1fr);
}
.sk-world-map-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 12px;
}
.sk-world-map-board::before {
	background:
		linear-gradient(90deg, rgba(17, 23, 15, .35) 2px, transparent 2px),
		linear-gradient(rgba(17, 23, 15, .35) 2px, transparent 2px);
	background-size: 48px 48px;
	content: "";
	inset: 0;
	position: absolute;
}
.sk-world-region {
	appearance: none;
	background: #2e7d32;
	border: 2px solid #11170f;
	color: #fff3cf;
	cursor: pointer;
	display: block;
	font-size: 10px;
	font-weight: 700;
	height: 26px;
	line-height: 1.1;
	margin-left: -13px;
	margin-top: -13px;
	padding: 0;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 26px;
	z-index: 1;
}
.sk-world-region:hover,
.sk-world-region:focus,
.sk-world-region-active {
	border-color: #fff3cf;
	box-shadow: 0 0 0 3px #d6a84f;
	outline: none;
	z-index: 4;
}
.sk-world-region-card-list {
	display: grid;
	gap: 8px;
	max-height: 268px;
	overflow-y: auto;
	padding-right: 4px;
}
.sk-world-region-card {
	appearance: none;
	background: #11170f;
	border: 2px solid #5a3b1e;
	color: #fff3cf;
	cursor: pointer;
	display: grid;
	gap: 3px;
	padding: 8px;
	text-align: left;
}
.sk-world-region-card strong {
	color: #d6a84f;
	font-size: 13px;
}
.sk-world-region-card span {
	color: #e6d4a2;
	font-size: 11px;
	line-height: 1.3;
}
.sk-world-region-card:hover,
.sk-world-region-card:focus,
.sk-world-region-card.sk-world-region-active {
	background: #2a3f22;
	border-color: #d6a84f;
	outline: none;
}
.sk-world-region-details .sk-button + .sk-button {
	margin-left: 6px;
}
.sk-world-region::after {
	background: #11170f;
	content: "";
	height: 4px;
	left: 5px;
	position: absolute;
	top: 30px;
	width: 16px;
}
.sk-world-region-owned {
	border-color: #d6a84f;
}
.sk-world-region-contested {
	border-color: #b7332f !important;
	box-shadow: 0 0 0 3px #f2c14e;
}
.sk-world-region-contested::before {
	background: #b7332f;
	border: 1px solid #11170f;
	content: "";
	height: 10px;
	position: absolute;
	right: -7px;
	top: -8px;
	width: 8px;
}
.sk-world-region-card.sk-world-region-contested {
	border-color: #b7332f;
	box-shadow: inset 0 0 0 2px #f2c14e;
}
.sk-world-region span {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	max-height: none;
	overflow: hidden;
}
.sk-world-resource-wood {
	background: #235c24;
}
.sk-world-resource-stone {
	background: #696969;
}
.sk-world-resource-gold {
	background: #a57616;
}
.sk-world-resource-food {
	background: #5f8d28;
}
.sk-world-resource-prestige {
	background: #6d4c9a;
}
.sk-world-resource-crown_crystals {
	background: #167c86;
}
.sk-world-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.sk-world-region-details {
	background: #11170f;
	border: 3px solid #5a3b1e;
	color: #fff3cf;
	margin-top: 12px;
	padding: 12px;
}
.sk-world-region-details h4 {
	color: #d6a84f;
	margin: 0 0 8px;
}
.sk-world-region-details dl {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	margin: 0;
}
.sk-world-region-details div {
	background: #1f2b18;
	border: 2px solid #5a3b1e;
	padding: 8px;
}
.sk-world-region-details dt {
	color: #d6a84f;
	font-size: 11px;
	text-transform: uppercase;
}
.sk-world-region-details dd {
	margin: 2px 0 0;
}
.sk-region-row-active {
	background: rgba(214, 168, 79, .22);
	outline: 3px solid #d6a84f;
}
.sk-streamer-world-board {
	background:
		linear-gradient(90deg, rgba(17, 23, 15, .22) 1px, transparent 1px),
		linear-gradient(rgba(17, 23, 15, .22) 1px, transparent 1px),
		#244f25;
	background-size: 36px 36px;
	border: 4px solid #5a3b1e;
	box-shadow: inset 0 0 0 4px #11170f;
	height: 340px;
	margin-top: 14px;
	overflow: hidden;
	position: relative;
}
.sk-streamer-world-board::before {
	background: linear-gradient(120deg, transparent 0 62%, rgba(49, 95, 144, .55) 62% 72%, transparent 72% 100%);
	content: "";
	inset: 0;
	position: absolute;
}
.sk-streamer-region {
	appearance: none;
	background: #2e7d32;
	border: 2px solid #11170f;
	color: #fff3cf;
	cursor: pointer;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	height: 22px;
	margin-left: -11px;
	margin-top: -11px;
	padding: 0;
	position: absolute;
	width: 22px;
	z-index: 2;
}
.sk-streamer-region:hover,
.sk-streamer-region:focus,
.sk-streamer-region.sk-world-region-active {
	border-color: #fff3cf;
	box-shadow: 0 0 0 3px #d6a84f;
	outline: none;
	z-index: 5;
}
.sk-streamer-region::after {
	background: #11170f;
	bottom: -6px;
	content: "";
	height: 4px;
	left: 3px;
	position: absolute;
	width: 14px;
}
.sk-streamer-region-own {
	border-color: #64c7d8;
	box-shadow: inset 0 0 0 2px rgba(100, 199, 216, .5);
}
.sk-streamer-region-neutral {
	border-color: #fff3cf;
}
.sk-streamer-region-claimed {
	border-color: #c74332;
}
.sk-world-map-legend span {
	border: 2px solid #11170f;
	color: #fff3cf;
	display: inline-block;
	padding: 6px 8px;
}
.sk-world-filter-form {
	align-items: end;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.sk-world-filter-form .sk-button {
	text-align: center;
}

/* Portal visuals share the same voxel art direction as the live overlay. */
.sk-appearance-customizer.sk-voxel-customizer {
	align-items: start;
	grid-template-columns: 190px minmax(0, 1fr);
}

.sk-voxel-customizer > .sk-voxel-preview {
	margin-top: 18px;
	position: sticky;
	top: 96px;
}

.sk-appearance-preview.sk-voxel-preview {
	background:
		radial-gradient(ellipse at 50% 84%, rgba(0, 0, 0, .48) 0 25%, transparent 26%),
		linear-gradient(145deg, #294f22 0 42%, #193618 42% 100%);
	border: 3px solid #6f4a24;
	box-shadow:
		inset 0 0 0 3px #172012,
		inset 0 0 34px rgba(0, 0, 0, .52),
		8px 10px 0 rgba(0, 0, 0, .3);
	filter: none;
	height: 176px;
	isolation: isolate;
	overflow: hidden;
	width: 154px;
}

.sk-appearance-preview.sk-voxel-preview::before {
	background:
		linear-gradient(90deg, rgba(145, 190, 76, .22) 1px, transparent 1px),
		linear-gradient(rgba(145, 190, 76, .18) 1px, transparent 1px);
	background-size: 18px 18px;
	box-shadow: none;
	content: "";
	inset: 0;
	height: auto;
	left: 0;
	opacity: .5;
	position: absolute;
	top: 0;
	width: auto;
}

.sk-appearance-preview.sk-voxel-preview::after {
	background: rgba(0, 0, 0, .38);
	border-radius: 50%;
	bottom: 20px;
	filter: blur(2px);
	height: 13px;
	left: 38px;
	width: 80px;
	z-index: 0;
}

.sk-voxel-avatar {
	bottom: 18px;
	display: block;
	height: 145px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 112px;
	z-index: 2;
}

.sk-ui-voxel {
	--sk-voxel-size: 11px;
	background: var(--sk-voxel-color);
	bottom: calc(11px + var(--sk-voxel-z) * 10px - (var(--sk-voxel-x) + var(--sk-voxel-y)) * 3px);
	box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .16);
	display: block;
	height: var(--sk-voxel-size);
	left: calc(42px + (var(--sk-voxel-x) - var(--sk-voxel-y)) * 10px);
	position: absolute;
	width: var(--sk-voxel-size);
}

.sk-ui-voxel::before,
.sk-ui-voxel::after {
	content: "";
	position: absolute;
}

.sk-ui-voxel::before {
	background: color-mix(in srgb, var(--sk-voxel-color) 78%, white);
	clip-path: polygon(36% 0, 100% 0, 64% 100%, 0 100%);
	height: 5px;
	left: 3px;
	top: -5px;
	width: 11px;
}

.sk-ui-voxel::after {
	background: color-mix(in srgb, var(--sk-voxel-color) 72%, black);
	clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 72%);
	height: 12px;
	right: -5px;
	top: -3px;
	width: 5px;
}

.sk-voxel-preview .sk-streamer-crown,
.sk-voxel-preview .sk-appearance-style {
	display: none !important;
}

.sk-streamer-world-board.sk-voxel-world-board {
	aspect-ratio: 16 / 9;
	background-color: #244f25;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 5px solid #6f4a24;
	box-shadow:
		inset 0 0 0 4px #151d11,
		inset 0 0 70px rgba(0, 0, 0, .58),
		0 12px 24px rgba(0, 0, 0, .24);
	height: auto;
	min-height: 380px;
}

.sk-streamer-world-board.sk-voxel-map-stage-1 {
	background-image: url("../../assets/game/reference/voxel/world_stage_1.png");
}

.sk-streamer-world-board.sk-voxel-map-stage-3 {
	background-image: url("../../assets/game/reference/voxel/world_stage_3.png");
}

.sk-streamer-world-board.sk-voxel-map-stage-4 {
	background-image: url("../../assets/game/reference/voxel/world_stage_4.png");
}

.sk-streamer-world-board.sk-voxel-world-board::before {
	background:
		linear-gradient(180deg, rgba(8, 18, 8, .08), rgba(8, 18, 8, .28)),
		radial-gradient(circle at center, transparent 35%, rgba(5, 10, 5, .38) 100%);
	inset: 0;
	z-index: 1;
}

.sk-streamer-world-board.sk-voxel-world-board::after {
	border: 1px solid rgba(255, 232, 163, .3);
	content: "";
	inset: 9px;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.sk-voxel-map-caption {
	background: rgba(17, 23, 15, .88);
	border: 2px solid #d6a84f;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
	color: #fff3cf;
	font-size: 12px;
	font-weight: 800;
	left: 18px;
	letter-spacing: .04em;
	padding: 8px 11px;
	position: absolute;
	text-transform: uppercase;
	top: 18px;
	z-index: 6;
}

.sk-voxel-world-board .sk-streamer-region {
	border: 2px solid #160f0a;
	border-radius: 2px;
	box-shadow:
		inset -5px -5px 0 rgba(0, 0, 0, .2),
		inset 3px 3px 0 rgba(255, 255, 255, .2),
		0 5px 0 #160f0a,
		0 8px 12px rgba(0, 0, 0, .48);
	height: 27px;
	margin-left: -14px;
	margin-top: -14px;
	transform: rotate(45deg);
	width: 27px;
	z-index: 3;
}

.sk-voxel-world-board .sk-streamer-region span {
	align-items: center;
	display: flex;
	font-size: 10px;
	height: 100%;
	justify-content: center;
	text-shadow: 1px 1px 0 #160f0a;
	transform: rotate(-45deg);
	width: 100%;
}

.sk-voxel-world-board .sk-streamer-region::before {
	background: rgba(255, 255, 255, .18);
	clip-path: polygon(0 0, 100% 0, 72% 28%, 28% 28%);
	content: "";
	inset: 2px;
	position: absolute;
}

.sk-voxel-world-board .sk-streamer-region::after {
	background: #160f0a;
	bottom: -10px;
	box-shadow: none;
	height: 8px;
	left: 10px;
	transform: rotate(-45deg);
	width: 8px;
}

.sk-voxel-world-board .sk-streamer-region:hover,
.sk-voxel-world-board .sk-streamer-region:focus,
.sk-voxel-world-board .sk-streamer-region.sk-world-region-active {
	border-color: #fff3cf;
	box-shadow:
		inset -5px -5px 0 rgba(0, 0, 0, .2),
		inset 3px 3px 0 rgba(255, 255, 255, .25),
		0 5px 0 #d6a84f,
		0 0 0 4px rgba(242, 193, 78, .56),
		0 10px 18px rgba(0, 0, 0, .55);
	transform: rotate(45deg) scale(1.15);
}

@media (max-width: 720px) {
	.sk-appearance-customizer.sk-voxel-customizer {
		grid-template-columns: 1fr;
	}

	.sk-voxel-customizer > .sk-voxel-preview {
		margin-top: 0;
		position: relative;
		top: auto;
	}

	.sk-streamer-world-board.sk-voxel-world-board {
		aspect-ratio: 4 / 3;
		min-height: 310px;
	}

	.sk-voxel-map-caption {
		font-size: 10px;
		left: 12px;
		padding: 6px 8px;
		top: 12px;
	}

	.sk-voxel-world-board .sk-streamer-region {
		height: 22px;
		margin-left: -11px;
		margin-top: -11px;
		width: 22px;
	}
}

/* Streamer- und Spielerportal: gemeinsames Voxel-Dashboard */
.sk-streamer-page,
.sk-chatter-page {
	--sk-ui-ink: #100b07;
	--sk-ui-deep: #10170f;
	--sk-ui-panel: #182018;
	--sk-ui-panel-raised: #202b1d;
	--sk-ui-wood: #68431f;
	--sk-ui-wood-light: #9a6b32;
	--sk-ui-gold: #e6bd57;
	--sk-ui-cream: #fff2cb;
	--sk-ui-green: #79c96c;
	--sk-ui-blue: #69a9d9;
	background:
		linear-gradient(rgba(8, 15, 8, .28), rgba(8, 15, 8, .54)),
		linear-gradient(135deg, rgba(117, 153, 69, .13) 25%, transparent 25%) 0 0 / 32px 32px,
		linear-gradient(315deg, rgba(117, 153, 69, .1) 25%, transparent 25%) 0 0 / 32px 32px,
		#203a1e;
}

.sk-streamer-page .sk-panel,
.sk-chatter-page .sk-panel {
	background:
		linear-gradient(90deg, rgba(255, 231, 171, .035) 1px, transparent 1px) 0 0 / 8px 8px,
		linear-gradient(180deg, #2f2116 0, #21170f 100%);
	border: 4px solid var(--sk-ui-ink);
	box-shadow:
		inset 0 0 0 3px var(--sk-ui-wood),
		inset 0 0 0 5px rgba(230, 189, 87, .16),
		0 10px 0 rgba(6, 4, 3, .24);
	padding: clamp(14px, 2.2vw, 28px);
}

.sk-streamer-page .sk-portal-grid,
.sk-chatter-page .sk-portal-grid {
	align-items: stretch;
	gap: 16px;
}

.sk-streamer-page .sk-section,
.sk-chatter-page .sk-section {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .035) 0 18%, transparent 18% 100%),
		var(--sk-ui-panel);
	border: 3px solid var(--sk-ui-ink);
	box-shadow:
		inset 0 0 0 2px var(--sk-ui-wood),
		inset 4px 4px 0 rgba(255, 236, 177, .06),
		4px 5px 0 rgba(7, 5, 3, .28);
	margin-top: 16px;
	padding: clamp(14px, 1.8vw, 20px);
	position: relative;
}

.sk-streamer-page .sk-section::after,
.sk-chatter-page .sk-section::after {
	background:
		linear-gradient(90deg, var(--sk-ui-gold) 0 8px, transparent 8px 12px, var(--sk-ui-gold) 12px 20px);
	content: "";
	height: 3px;
	opacity: .55;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 20px;
}

.sk-streamer-page .sk-section h3,
.sk-chatter-page .sk-section h3 {
	align-items: center;
	color: var(--sk-ui-gold);
	display: flex;
	font-size: clamp(18px, 2vw, 24px);
	gap: 10px;
	letter-spacing: .02em;
	line-height: 1.2;
	margin: 0 34px 14px 0;
	text-shadow: 2px 2px 0 #090604;
}

.sk-streamer-page .sk-section h3::before,
.sk-chatter-page .sk-section h3::before {
	background:
		linear-gradient(135deg, #efd270 0 50%, #b97b2d 50% 100%);
	border: 2px solid #090604;
	box-shadow: 2px 2px 0 var(--sk-ui-wood);
	content: "";
	flex: 0 0 14px;
	height: 14px;
	transform: rotate(45deg);
}

.sk-streamer-page .sk-section p,
.sk-chatter-page .sk-section p,
.sk-streamer-page .sk-section label,
.sk-chatter-page .sk-section label {
	line-height: 1.6;
}

.sk-streamer-page :is(input[type="text"], input[type="url"], input[type="number"], input[type="search"], select, textarea, .sk-copy-field),
.sk-chatter-page :is(input[type="text"], input[type="url"], input[type="number"], input[type="search"], select, textarea, .sk-copy-field) {
	background: #0d140d;
	border: 2px solid #090604;
	border-radius: 0;
	box-shadow:
		inset 0 0 0 2px #4f351c,
		inset 3px 3px 0 rgba(0, 0, 0, .32);
	box-sizing: border-box;
	color: var(--sk-ui-cream);
	min-height: 44px;
	outline: 0;
	padding: 10px 12px;
	width: 100%;
}

.sk-streamer-page :is(input, select, textarea):focus,
.sk-chatter-page :is(input, select, textarea):focus {
	border-color: var(--sk-ui-gold);
	box-shadow:
		0 0 0 2px #090604,
		0 0 0 4px rgba(230, 189, 87, .55),
		inset 3px 3px 0 rgba(0, 0, 0, .25);
}

.sk-streamer-page :is(button, .sk-button),
.sk-chatter-page :is(button, .sk-button) {
	background:
		linear-gradient(180deg, #efd172 0 45%, #d4a84b 45% 100%);
	border: 2px solid #100b07;
	border-radius: 0;
	box-shadow:
		inset 2px 2px 0 rgba(255, 255, 255, .32),
		inset -2px -2px 0 rgba(93, 55, 19, .38),
		3px 4px 0 rgba(4, 3, 2, .45);
	color: #171008;
	font-weight: 800;
	letter-spacing: .02em;
	min-height: 42px;
	padding: 9px 14px;
	text-transform: uppercase;
}

.sk-streamer-page :is(button, .sk-button):hover,
.sk-chatter-page :is(button, .sk-button):hover,
.sk-streamer-page :is(button, .sk-button):focus-visible,
.sk-chatter-page :is(button, .sk-button):focus-visible {
	filter: brightness(1.08) saturate(1.08);
	transform: translateY(-1px);
}

.sk-streamer-page :is(button, .sk-button):active,
.sk-chatter-page :is(button, .sk-button):active {
	box-shadow:
		inset 2px 2px 0 rgba(93, 55, 19, .38),
		1px 2px 0 rgba(4, 3, 2, .45);
	transform: translate(2px, 2px);
}

.sk-streamer-page .sk-resource-row,
.sk-chatter-page .sk-resource-row,
.sk-streamer-page .sk-profile-stats,
.sk-chatter-page .sk-profile-stats {
	gap: 8px;
}

.sk-streamer-page .sk-resource-row span,
.sk-chatter-page .sk-resource-row span,
.sk-streamer-page .sk-profile-stats div,
.sk-chatter-page .sk-profile-stats div {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .055) 0 34%, transparent 34%),
		var(--sk-ui-panel-raised);
	border: 2px solid #090604;
	box-shadow:
		inset 0 0 0 2px #4e351c,
		2px 3px 0 rgba(0, 0, 0, .3);
	color: var(--sk-ui-cream);
	min-height: 48px;
	padding: 10px 12px;
}

.sk-streamer-page .sk-resource-row span::first-letter,
.sk-chatter-page .sk-resource-row span::first-letter {
	color: var(--sk-ui-gold);
}

.sk-streamer-page .sk-profile-stats span,
.sk-chatter-page .sk-profile-stats span {
	color: var(--sk-ui-gold);
	text-shadow: 2px 2px 0 #090604;
}

.sk-streamer-page .sk-action-reward-card,
.sk-chatter-page .sk-action-reward-card {
	background:
		linear-gradient(135deg, rgba(105, 169, 217, .11), transparent 45%),
		#121a13;
	border: 2px solid #090604;
	box-shadow:
		inset 0 0 0 2px #425b32,
		3px 3px 0 rgba(0, 0, 0, .32);
	min-height: 84px;
	padding: 12px;
}

.sk-streamer-page .sk-action-reward-card strong,
.sk-chatter-page .sk-action-reward-card strong {
	color: #f0cf71;
}

.sk-streamer-page .sk-player-progress-card,
.sk-chatter-page .sk-player-progress-card {
	background:
		linear-gradient(135deg, rgba(105, 169, 217, .12), transparent 38%),
		#111a12;
	border-color: #090604;
	box-shadow:
		inset 0 0 0 3px #654420,
		inset 5px 5px 0 rgba(255, 239, 184, .05),
		4px 5px 0 rgba(0, 0, 0, .32);
}

.sk-streamer-page .sk-player-progress-avatar,
.sk-chatter-page .sk-player-progress-avatar,
.sk-streamer-page .sk-appearance-preview,
.sk-chatter-page .sk-appearance-preview {
	background-color: #1f4324;
	border-color: #0b0805;
	box-shadow:
		inset 0 0 0 3px #7c5427,
		4px 5px 0 rgba(0, 0, 0, .35);
	image-rendering: pixelated;
}

.sk-streamer-page .sk-meter,
.sk-chatter-page .sk-meter,
.sk-streamer-page .sk-hp-bar,
.sk-chatter-page .sk-hp-bar {
	background:
		repeating-linear-gradient(90deg, #0a0d09 0 18px, #22271e 18px 20px);
	border: 2px solid #090604;
	box-shadow: inset 0 0 0 1px #51351c;
	height: 18px;
}

.sk-streamer-page .sk-meter span,
.sk-chatter-page .sk-meter span {
	background:
		repeating-linear-gradient(90deg, var(--sk-ui-green) 0 18px, #55954c 18px 20px);
}

.sk-streamer-page .sk-public-table,
.sk-chatter-page .sk-public-table {
	background: #10160f;
	border: 2px solid #090604;
	box-shadow: 0 0 0 2px #4f351c;
}

.sk-streamer-page .sk-public-table th,
.sk-chatter-page .sk-public-table th {
	background: #2a2015;
	border-bottom: 3px solid #8b612d;
	color: var(--sk-ui-gold);
	font-size: 12px;
	letter-spacing: .04em;
	position: sticky;
	text-transform: uppercase;
	top: 0;
	z-index: 1;
}

.sk-streamer-page .sk-public-table td,
.sk-chatter-page .sk-public-table td {
	border-bottom: 1px solid #4d381f;
}

.sk-streamer-page .sk-public-table tbody tr:nth-child(even),
.sk-chatter-page .sk-public-table tbody tr:nth-child(even) {
	background: rgba(121, 201, 108, .045);
}

.sk-streamer-page .sk-public-table tbody tr:hover,
.sk-chatter-page .sk-public-table tbody tr:hover {
	background: rgba(230, 189, 87, .1);
}

.sk-streamer-page .sk-status-ok,
.sk-chatter-page .sk-status-ok,
.sk-streamer-page .sk-status-warning,
.sk-chatter-page .sk-status-warning {
	border: 2px solid #090604;
	box-shadow:
		inset 0 0 0 2px #765126,
		3px 3px 0 rgba(0, 0, 0, .3);
}

.sk-streamer-page .sk-appearance-customizer,
.sk-chatter-page .sk-appearance-customizer {
	background:
		linear-gradient(135deg, rgba(100, 164, 211, .08), transparent 44%),
		#111a12;
	border: 3px solid #090604;
	box-shadow: inset 0 0 0 2px #5d4123;
	padding: clamp(12px, 2vw, 20px);
}

.sk-streamer-page [data-sk-color-target],
.sk-chatter-page [data-sk-color-target] {
	background: var(--sk-choice);
	border: 2px solid #090604;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
	height: 34px;
	image-rendering: pixelated;
	min-height: 34px;
	padding: 0;
	width: 34px;
}

.sk-streamer-page [data-sk-color-target][aria-pressed="true"],
.sk-chatter-page [data-sk-color-target][aria-pressed="true"] {
	box-shadow:
		0 0 0 2px var(--sk-ui-gold),
		0 0 0 4px #090604;
	transform: translateY(-2px);
}

@media (max-width: 720px) {
	.sk-streamer-page .sk-panel,
	.sk-chatter-page .sk-panel {
		border-width: 3px;
		box-shadow:
			inset 0 0 0 2px var(--sk-ui-wood),
			0 6px 0 rgba(6, 4, 3, .24);
		padding: 11px;
	}

	.sk-streamer-page .sk-portal-grid,
	.sk-chatter-page .sk-portal-grid,
	.sk-streamer-page .sk-profile-stats,
	.sk-chatter-page .sk-profile-stats {
		grid-template-columns: 1fr;
	}

	.sk-streamer-page .sk-section,
	.sk-chatter-page .sk-section {
		padding: 13px;
	}

	.sk-streamer-page .sk-section h3,
	.sk-chatter-page .sk-section h3 {
		font-size: 18px;
	}

	.sk-streamer-page :is(button, .sk-button),
	.sk-chatter-page :is(button, .sk-button) {
		white-space: normal;
		width: 100%;
	}

	.sk-streamer-page [data-sk-color-target],
	.sk-chatter-page [data-sk-color-target] {
		height: 34px;
		min-height: 34px;
		padding: 0;
		width: 34px;
	}
}

.sk-stat-chart {
	align-items: end;
	background: #11170f;
	border: 3px solid #5a3b1e;
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
	height: 180px;
	margin: 14px 0;
	padding: 10px;
}
.sk-stat-chart-bar {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
	min-width: 0;
}
.sk-stat-chart-bar span {
	background: #d6a84f;
	border: 2px solid #11170f;
	box-shadow: 0 0 0 2px #5a3b1e;
	display: block;
	width: 100%;
}
.sk-stat-chart-bar em {
	color: #fff3cf;
	font-size: 10px;
	font-style: normal;
	margin-top: 6px;
	white-space: nowrap;
}

@media (max-width: 720px) {
	.sk-site-shell {
		padding: 10px;
	}
	.sk-site-hero {
		grid-template-columns: 1fr;
		padding: 16px;
	}
	.sk-hero-emblem {
		height: 96px;
		width: 96px;
	}
	.sk-hero-emblem::before {
		height: 60px;
		left: 18px;
		top: 18px;
		width: 60px;
	}
	.sk-search-form {
		grid-template-columns: 1fr;
	}
	.sk-front-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow-x: auto;
	}
	.sk-front-tab {
		font-size: 12px;
		padding: 9px 6px;
	}
	.sk-world-jumpnav,
	.sk-portal-jumpnav,
	.sk-chatter-jumpnav,
	.sk-kingdom-jumpnav,
	.sk-ranking-jumpnav,
	.sk-register-jumpnav,
	.sk-dashboard-jumpnav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sk-world-jumpnav a,
	.sk-portal-jumpnav a,
	.sk-chatter-jumpnav a,
	.sk-kingdom-jumpnav a,
	.sk-ranking-jumpnav a,
	.sk-register-jumpnav a,
	.sk-dashboard-jumpnav a {
		font-size: 11px;
		text-align: center;
	}
	.sk-portal-grid {
		grid-template-columns: 1fr;
	}
	.sk-world-map-board {
		height: 520px;
	}
	.sk-world-region {
		font-size: 10px;
		height: 24px;
		margin-left: -12px;
		margin-top: -12px;
		width: 24px;
	}
	.sk-stat-chart {
		grid-template-columns: repeat(6, minmax(28px, 1fr));
	}
}
@media (max-width: 980px) {
	.sk-world-map-layout {
		grid-template-columns: 1fr;
	}

	.sk-world-region-card-list {
		max-height: 220px;
	}
}