:root {
	color-scheme: dark;
	font-family: "Courier New", Consolas, ui-monospace, monospace;
	--sk-ink: #fff3cf;
	--sk-border: #5a3b1e;
	--sk-panel: #2d2217;
	--sk-panel-dark: #151711;
	--sk-tile: 16px;
}
* {
	box-sizing: border-box;
}
body.sk-overlay-body {
	background: #050505;
	color: var(--sk-ink);
	margin: 0;
	overflow: hidden;
}
body.sk-overlay-body.sk-pixi-overlay-active > main.sk-overlay {
	display: none !important;
}
body.sk-overlay-body.sk-pixi-overlay-active > #app,
body.sk-overlay-body.sk-pixi-overlay-active > [data-sk-pixi-root] {
	height: 100vh;
	inset: 0;
	position: fixed;
	width: 100vw;
	z-index: 100;
}
body.sk-overlay-body.sk-pixi-overlay-active > #app canvas,
body.sk-overlay-body.sk-pixi-overlay-active > [data-sk-pixi-root] canvas {
	display: block;
}
.sk-overlay.sk-pixel-mode {
	background: #050505;
	border: 0;
	box-shadow: none;
	display: block;
	height: 1080px;
	margin: 0;
	max-height: 100vh;
	max-width: 100vw;
	overflow: hidden;
	padding: 0;
	width: 1920px;
}
.sk-overlay.sk-pixel-mode > :not(.sk-pixel-canvas) {
	display: none;
}
.sk-overlay.sk-phaser-mode {
	background: #050505;
	border: 0;
	box-shadow: none;
	display: block;
	height: 1080px;
	margin: 0;
	max-height: 100vh;
	max-width: 100vw;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 1920px;
}
.sk-overlay.sk-phaser-mode > :not(.sk-phaser-game):not(.sk-overlay-hud) {
	display: none;
}
.sk-phaser-game,
.sk-phaser-game canvas {
	display: block;
	height: 1080px !important;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	width: 1920px !important;
}
.sk-overlay-hud {
	color: #fff3cf;
	font-family: "Courier New", Consolas, ui-monospace, monospace;
	height: 1080px;
	inset: 0;
	letter-spacing: 0;
	pointer-events: none;
	position: absolute;
	text-shadow: 2px 2px 0 #050505;
	width: 1920px;
	z-index: 20;
}
.sk-overlay-hud-top,
.sk-overlay-hud-bottom {
	background: #0c120c;
	border-color: #9d7539;
	border-style: solid;
	box-shadow: inset 0 0 0 4px #1e170f;
	position: absolute;
	width: 100%;
}
.sk-overlay-hud-top {
	align-items: center;
	border-width: 0 0 6px;
	display: grid;
	gap: 22px;
	grid-template-columns: 560px 1fr;
	height: 128px;
	left: 0;
	padding: 18px 30px;
	top: 0;
}
.sk-overlay-hud-bottom {
	align-items: center;
	border-width: 6px 0 0;
	bottom: 0;
	display: grid;
	gap: 24px;
	grid-template-columns: 500px 1fr 180px;
	height: 86px;
	left: 0;
	padding: 14px 28px;
}
.sk-overlay-hud-kingdom strong {
	color: #ffd34a;
	display: block;
	font-size: 32px;
	line-height: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.sk-overlay-hud-kingdom span {
	color: #fff0bd;
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.sk-overlay-hud-resources {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sk-overlay-hud-chip {
	background: #151d13;
	border: 3px solid #5a3b1e;
	box-shadow: inset 0 0 0 2px #2c2116;
	min-width: 0;
	padding: 10px 12px;
}
.sk-overlay-hud-chip b {
	color: #c7d7c2;
	display: block;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
}
.sk-overlay-hud-chip span {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	margin-top: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sk-overlay-hud-chip[data-resource="gold"] span { color: #ffd34a; }
.sk-overlay-hud-chip[data-resource="wood"] span { color: #d29a58; }
.sk-overlay-hud-chip[data-resource="stone"] span { color: #dce4e2; }
.sk-overlay-hud-chip[data-resource="food"] span { color: #f1d66a; }
.sk-overlay-hud-chip[data-resource="iron"] span { color: #cbd6d8; }
.sk-overlay-hud-bottom span {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.sk-overlay-hud-bottom b {
	color: #ffd34a;
	font-size: 17px;
	margin-right: 8px;
	text-transform: uppercase;
}
.sk-overlay-hud-assets {
	color: #f2d26b;
	text-align: right;
}
.sk-pixel-canvas {
	display: block;
	height: 1080px;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	width: 1920px;
}
.sk-overlay {
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 2px, transparent 2px var(--sk-tile)),
		linear-gradient(135deg, rgba(35, 26, 15, 0.98), rgba(10, 18, 14, 0.96));
	border: 4px solid #2a1b10;
	border-image: linear-gradient(135deg, #d0a455, #60401d 46%, #24150c) 4;
	border-radius: 0;
	box-shadow: 0 24px 0 rgba(0, 0, 0, 0.34), 0 32px 90px rgba(0, 0, 0, 0.65);
	display: grid;
	gap: 14px;
	margin: 24px;
	max-width: 1760px;
	padding: 24px;
}
.sk-overlay,
.sk-map,
.sk-map-item::before,
.sk-monster::before,
.sk-citizen b,
.sk-map-item i,
.sk-map-item em,
.sk-map-item u,
.sk-resources div,
.sk-battle div,
.sk-lists > div,
.sk-world-status div {
	image-rendering: pixelated;
}
.sk-hero {
	align-items: center;
	display: flex;
	gap: 16px;
}
.sk-hero img {
	aspect-ratio: 1;
	border: 2px solid var(--sk-primary, #d6a84f);
	border-radius: 8px;
	height: 72px;
	object-fit: cover;
	width: 72px;
}
.sk-hero p,
.sk-resources span,
.sk-battle span {
	color: #c7d7c2;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 4px;
	text-transform: uppercase;
}
.sk-hero h1 {
	color: var(--sk-primary, #d6a84f);
	font-size: 44px;
	line-height: 1;
	margin: 0;
	text-shadow: 3px 0 0 #3b2412, 0 3px 0 #3b2412, 3px 3px 0 #3b2412;
}
.sk-resources {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sk-resources div,
.sk-battle div,
.sk-lists > div {
	background:
		repeating-linear-gradient(90deg, rgba(255, 225, 151, 0.05) 0 4px, transparent 4px 12px),
		linear-gradient(180deg, rgba(88, 62, 37, 0.94), rgba(25, 31, 24, 0.96));
	border: 2px solid var(--sk-border);
	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);
	min-height: 70px;
	padding: 12px 12px 12px 50px;
	position: relative;
}
.sk-resources div::before {
	background: #d6a84f;
	border: 2px solid #2d1b10;
	content: "";
	height: 24px;
	left: 14px;
	position: absolute;
	top: 21px;
	width: 24px;
}
.sk-resources div:nth-child(1)::before {
	background:
		linear-gradient(90deg, transparent 0 4px, #7c4b18 4px 8px, #ffe07b 8px 16px, #c78b2b 16px 20px, transparent 20px) 0 4px / 24px 16px no-repeat,
		linear-gradient(90deg, transparent 0 8px, #c78b2b 8px 16px, transparent 16px) 0 0 / 24px 24px no-repeat;
}
.sk-resources div:nth-child(2)::before {
	background:
		linear-gradient(90deg, #7a461f 0 22%, #c48642 22% 48%, #6f3e1d 48% 70%, #d09a55 70%);
}
.sk-resources div:nth-child(3)::before {
	background:
		linear-gradient(135deg, #dbe0e8 0 28%, #8d98a4 28% 56%, #515965 56% 80%, #b6bec8 80%);
}
.sk-resources div:nth-child(4)::before {
	background:
		repeating-linear-gradient(90deg, #d6b94c 0 5px, #f1df81 5px 10px);
}
.sk-resources div:nth-child(5)::before {
	background:
		linear-gradient(45deg, transparent 0 30%, #f7d35c 30% 70%, transparent 70%),
		linear-gradient(-45deg, transparent 0 30%, #f7d35c 30% 70%, transparent 70%);
}
.sk-resources div:nth-child(6)::before {
	background:
		linear-gradient(90deg, transparent 0 24%, #f0be84 24% 76%, transparent 76%) 0 3px / 100% 10px no-repeat,
		linear-gradient(90deg, transparent 0 30%, #4a2f20 30% 70%, transparent 70%) 0 14px / 100% 8px no-repeat,
		linear-gradient(90deg, transparent 0 35%, #2f7244 35% 65%, transparent 65%) 0 22px / 100% 8px no-repeat;
}
.sk-resources strong,
.sk-battle strong {
	color: #ffffff;
	display: block;
	font-size: 24px;
	line-height: 1.1;
}
.sk-world {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) 340px;
}
.sk-map {
	aspect-ratio: 16 / 5.6;
	background:
		repeating-linear-gradient(90deg, rgba(42, 91, 42, 0.38) 0 1px, transparent 1px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(255, 231, 151, 0.14) 0 1px, transparent 1px var(--sk-tile)),
		linear-gradient(135deg, rgba(96, 143, 68, 0.98), rgba(54, 112, 58, 0.98) 52%, rgba(124, 112, 58, 0.96));
	border: 3px solid var(--sk-border);
	border-radius: 0;
	box-shadow: inset 0 0 0 2px rgba(255, 236, 174, 0.12), inset 0 -48px 0 rgba(36, 27, 17, 0.08);
	overflow: hidden;
	position: relative;
}
.sk-map.sk-landscape-0 {
	background:
		repeating-linear-gradient(90deg, rgba(42, 91, 42, 0.38) 0 1px, transparent 1px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(255, 231, 151, 0.14) 0 1px, transparent 1px var(--sk-tile)),
		linear-gradient(135deg, rgba(96, 143, 68, 0.98), rgba(54, 112, 58, 0.98) 52%, rgba(124, 112, 58, 0.96));
}
.sk-map.sk-landscape-1 {
	background:
		repeating-linear-gradient(90deg, rgba(31, 78, 44, 0.42) 0 1px, transparent 1px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(120, 185, 92, 0.16) 0 1px, transparent 1px var(--sk-tile)),
		linear-gradient(135deg, #244f2d, #38703b 48%, #1d482c);
}
.sk-map.sk-landscape-2 {
	background:
		repeating-linear-gradient(90deg, rgba(91, 82, 56, 0.34) 0 1px, transparent 1px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(222, 210, 145, 0.12) 0 1px, transparent 1px var(--sk-tile)),
		linear-gradient(135deg, #5f6f38, #789145 48%, #4e6233);
}
.sk-map.sk-landscape-3 {
	background:
		repeating-linear-gradient(90deg, rgba(38, 78, 86, 0.36) 0 1px, transparent 1px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(119, 205, 212, 0.14) 0 1px, transparent 1px var(--sk-tile)),
		linear-gradient(135deg, #285d64, #3e805f 50%, #2e664f);
}
.sk-map.sk-landscape-4 {
	background:
		repeating-linear-gradient(90deg, rgba(82, 71, 61, 0.42) 0 1px, transparent 1px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(210, 199, 177, 0.11) 0 1px, transparent 1px var(--sk-tile)),
		linear-gradient(135deg, #4f5745, #777463 48%, #3e4f3b);
}
.sk-map.sk-landscape-5 {
	background:
		repeating-linear-gradient(90deg, rgba(52, 73, 99, 0.34) 0 1px, transparent 1px var(--sk-tile)),
		repeating-linear-gradient(0deg, rgba(165, 205, 226, 0.12) 0 1px, transparent 1px var(--sk-tile)),
		linear-gradient(135deg, #2d516a, #56754f 45%, #6a6a48);
}
.sk-iso-scene {
	height: 100%;
	image-rendering: pixelated;
	inset: 0;
	position: absolute;
	width: 100%;
	z-index: 0;
}
.sk-iso-scene ~ .sk-terrain,
.sk-iso-scene ~ .sk-road-tiles,
.sk-iso-scene ~ .sk-map-item:not(.sk-citizen),
.sk-iso-scene ~ .sk-monster {
	display: none;
}
.sk-iso-scene ~ .sk-citizen {
	z-index: 6;
}
.sk-map::before {
	background:
		radial-gradient(circle at 30% 42%, rgba(143, 91, 45, 0.32) 0 10%, transparent 11%),
		radial-gradient(circle at 70% 68%, rgba(98, 68, 45, 0.28) 0 8%, transparent 9%),
		linear-gradient(45deg, transparent 0 46%, rgba(28, 64, 40, 0.35) 46% 54%, transparent 54%),
		linear-gradient(-45deg, transparent 0 46%, rgba(241, 211, 124, 0.12) 46% 54%, transparent 54%);
	background-size: auto, auto, 24px 24px, 24px 24px;
	content: "";
	inset: 0;
	opacity: 0.58;
	pointer-events: none;
	position: absolute;
}
.sk-terrain {
	position: absolute;
}
.sk-water {
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.22) 0 2px, transparent 2px 12px),
		linear-gradient(180deg, rgba(63, 154, 178, 0.9), rgba(31, 100, 133, 0.96));
	border-radius: 0;
	bottom: -22%;
	height: 42%;
	left: -8%;
	clip-path: polygon(0 15%, 28% 0, 64% 12%, 86% 36%, 100% 62%, 100% 100%, 0 100%);
	width: 48%;
}
.sk-road-network {
	display: none;
}
.sk-road-network path,
.sk-road-network circle {
	vector-effect: non-scaling-stroke;
}
.sk-road-shadow,
.sk-road-fill,
.sk-road-highlight {
	fill: none;
	stroke-linecap: butt;
	stroke-linejoin: round;
}
.sk-road-shadow {
	stroke: rgba(74, 44, 22, 0.36);
	stroke-width: 42;
	transform: translate(0, 7px);
}
.sk-road-fill {
	stroke: #bd8743;
	stroke-dasharray: 14 2;
	stroke-width: 34;
}
.sk-road-highlight {
	stroke: rgba(255, 229, 151, 0.35);
	stroke-dasharray: 10 12;
	stroke-width: 6;
}
.sk-road-junction {
	fill: #bd8743;
	stroke: rgba(97, 58, 28, 0.34);
	stroke-width: 3;
	filter: drop-shadow(0 4px 0 rgba(74, 44, 22, 0.18));
}
.sk-road-tiles {
	inset: 0;
	position: absolute;
	z-index: 2;
}
.sk-road-tile {
	background:
		linear-gradient(90deg, transparent 0 7%, #7a4b25 7% 14%, transparent 14% 86%, #7a4b25 86% 93%, transparent 93%),
		linear-gradient(0deg, transparent 0 9%, #6c421f 9% 18%, transparent 18% 82%, #d8a75a 82% 91%, transparent 91%),
		repeating-linear-gradient(90deg, #b77736 0 8px, #d09a4c 8px 16px);
	box-shadow: 0 4px 0 #6f431f, 4px 4px 0 rgba(0,0,0,0.24);
	height: 22px;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 32px;
}
.sk-road-junction-tile {
	background:
		linear-gradient(90deg, transparent 0 7%, #7a4b25 7% 14%, transparent 14% 86%, #7a4b25 86% 93%, transparent 93%),
		linear-gradient(0deg, transparent 0 8%, #6c421f 8% 16%, transparent 16% 84%, #d8a75a 84% 92%, transparent 92%),
		repeating-linear-gradient(90deg, #bd7e3b 0 8px, #d39a4d 8px 16px);
	height: 34px;
	width: 42px;
	z-index: 3;
}
.sk-map-item,
.sk-monster {
	align-items: center;
	display: flex;
	height: 28px;
	justify-content: center;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 28px;
}
.sk-house,
.sk-farm,
.sk-mine,
.sk-quarry,
.sk-woodcamp,
.sk-barracks,
.sk-market,
.sk-castle,
.sk-mage_tower {
	z-index: 4;
}
.sk-house::after,
.sk-farm::after,
.sk-mine::after,
.sk-quarry::after,
.sk-woodcamp::after,
.sk-barracks::after,
.sk-market::after,
.sk-castle::after,
.sk-mage_tower::after {
	background: rgba(76, 52, 28, 0.38);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	content: "";
	height: 34px;
	left: 50%;
	position: absolute;
	top: 22px;
	transform: translate(-50%, -50%);
	width: 58px;
	z-index: -1;
}
.sk-tree,
.sk-rock,
.sk-field,
.sk-flower {
	z-index: 1;
}
.sk-map-item::before,
.sk-monster::before {
	background: #d6a84f;
	border: 2px solid rgba(62, 40, 22, 0.95);
	border-radius: 0;
	box-shadow: 0 9px 0 rgba(0, 0, 0, 0.16), 0 12px 18px rgba(0, 0, 0, 0.34);
	content: "";
	display: block;
	height: 100%;
	width: 100%;
}
.sk-map-item i,
.sk-monster i {
	background: rgba(11, 13, 18, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 5px;
	bottom: 30px;
	color: #fff7e3;
	font-size: 10px;
	font-style: normal;
	left: 50%;
	opacity: 0;
	padding: 3px 6px;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	transition: opacity 160ms ease;
	white-space: nowrap;
}
.sk-map-item:hover i,
.sk-monster:hover i {
	opacity: 1;
}
.sk-house::before {
	background:
		linear-gradient(135deg, transparent 0 26%, #7d2f28 27% 45%, #b74a32 46% 60%, transparent 61%),
		linear-gradient(225deg, transparent 0 24%, #d46a3e 25% 52%, transparent 53%),
		linear-gradient(90deg, #b88749 0 18%, #f0c982 18% 78%, #8c5c33 78%);
	box-shadow: 0 4px 0 #5b3723, 8px 8px 0 rgba(0, 0, 0, 0.18);
	height: 36px;
	transform: rotate(-6deg) skewY(-10deg) translateY(-8px);
	width: 40px;
}
.sk-tree::before {
	background:
		linear-gradient(90deg, transparent 0 42%, #6a3b1e 42% 58%, transparent 58%),
		radial-gradient(circle at 48% 18%, #92d05b 0 22%, transparent 23%),
		radial-gradient(circle at 28% 42%, #39a445 0 24%, transparent 25%),
		radial-gradient(circle at 70% 44%, #2f7d38 0 25%, transparent 26%),
		radial-gradient(circle at 50% 58%, #5bbd48 0 28%, transparent 29%);
	border: 0;
	box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.18);
	height: 48px;
	width: 42px;
}
.sk-rock::before {
	background:
		linear-gradient(135deg, #e1e4e8 0 18%, #9aa3ad 18% 52%, #5c6570 52% 78%, #c3c9d0 78%);
	box-shadow: 5px 6px 0 rgba(0,0,0,0.24);
	clip-path: polygon(28% 0, 76% 12%, 100% 48%, 64% 100%, 18% 88%, 0 38%);
	height: 34px;
	width: 44px;
}
.sk-field::before {
	background:
		repeating-linear-gradient(90deg, #a67633 0 5px, #dfc15e 5px 10px),
		linear-gradient(#d5b556, #927333);
	box-shadow: 4px 5px 0 rgba(0,0,0,0.18);
	height: 42px;
	transform: rotate(-14deg) skewX(-12deg);
	width: 60px;
}
.sk-flower::before {
	background:
		radial-gradient(circle at 20% 45%, #e94d7d 0 8%, transparent 9%),
		radial-gradient(circle at 44% 26%, #f4de5a 0 8%, transparent 9%),
		radial-gradient(circle at 65% 58%, #7ed7ff 0 8%, transparent 9%),
		radial-gradient(circle at 50% 70%, #59c54e 0 18%, transparent 19%);
	border: 0;
	box-shadow: none;
	height: 24px;
	width: 34px;
}
.sk-farm::before {
	background:
		repeating-linear-gradient(90deg, #8f7c36 0 6px, #c7d36f 6px 12px),
		linear-gradient(#d7dd7b, #8f9b43);
	box-shadow: 0 4px 0 #655b2d, 7px 7px 0 rgba(0,0,0,0.16);
	height: 40px;
	transform: rotate(-10deg) translateY(-7px);
	width: 48px;
}
.sk-mine::before,
.sk-quarry::before {
	background:
		linear-gradient(135deg, #d2d7df 0 18%, #89919f 18% 46%, #535b66 46% 75%, #aeb6c1 75%),
		#89919f;
	box-shadow: 5px 5px 0 rgba(0,0,0,0.22);
	height: 34px;
	transform: rotate(45deg) skew(5deg) translateY(-7px);
	width: 34px;
}
.sk-woodcamp::before {
	background:
		linear-gradient(90deg, transparent 0 28%, #6b3d22 28% 42%, transparent 42%),
		linear-gradient(135deg, transparent 0 16%, #5ea861 16% 34%, #2f6d3c 34% 52%, transparent 53%),
		linear-gradient(225deg, transparent 0 16%, #75b66d 16% 38%, #3f7d45 38% 56%, transparent 57%);
	box-shadow: 5px 6px 0 rgba(0,0,0,0.2);
	height: 48px;
	transform: translateY(-9px);
	width: 42px;
}
.sk-barracks::before {
	background:
		linear-gradient(135deg, transparent 0 22%, #7b2e2e 22% 46%, #b24c40 46% 64%, transparent 65%),
		linear-gradient(225deg, transparent 0 18%, #d07743 18% 42%, transparent 43%),
		linear-gradient(90deg, #7d4d2e 0 20%, #d7b06d 20% 80%, #654021 80%);
	box-shadow: 0 5px 0 #4c2f1d, 8px 8px 0 rgba(0,0,0,0.2);
	height: 44px;
	transform: translateY(-8px);
	width: 54px;
}
.sk-market::before {
	background:
		repeating-linear-gradient(90deg, #bf3e32 0 9px, #f0dc94 9px 18px),
		linear-gradient(#e5bb5d, #a97634);
	clip-path: polygon(10% 28%, 50% 0, 90% 28%, 100% 100%, 0 100%);
	height: 42px;
	transform: translateY(-8px);
	width: 52px;
}
.sk-castle::before {
	background:
		linear-gradient(90deg, #737b88 0 14%, transparent 14% 20%, #c8cdd5 20% 80%, transparent 80% 86%, #737b88 86%),
		repeating-linear-gradient(0deg, rgba(74,81,91,0.32) 0 3px, transparent 3px 9px),
		linear-gradient(#edf0f3, #9ba4b2);
	box-shadow: 0 7px 0 #555b65, 10px 10px 0 rgba(0,0,0,0.22);
	clip-path: polygon(0 16%, 12% 16%, 12% 0, 25% 0, 25% 16%, 74% 16%, 74% 0, 88% 0, 88% 16%, 100% 16%, 100% 100%, 0 100%);
	height: 64px;
	transform: translateY(-16px);
	width: 70px;
}
.sk-mage_tower::before {
	background:
		linear-gradient(135deg, transparent 0 22%, #4b3ca0 22% 46%, #8a71ee 46% 62%, transparent 63%),
		linear-gradient(90deg, #7565d8, #d8d0ff 45%, #6b58c8);
	box-shadow: 0 6px 0 #473b88, 7px 8px 0 rgba(0,0,0,0.22);
	clip-path: polygon(50% 0, 92% 28%, 78% 28%, 78% 100%, 22% 100%, 22% 28%, 8% 28%);
	height: 58px;
	transform: translateY(-14px);
	width: 42px;
}
.sk-citizen {
	height: 54px;
	width: 34px;
	z-index: 6;
}

.sk-streamer-marker {
	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: 18px;
	left: 0;
	position: absolute;
	top: -14px;
	width: 32px;
	z-index: 9;
}
.sk-citizen::before {
	animation: sk-idle 1.4s steps(2, end) infinite;
	background:
		linear-gradient(90deg, transparent 0 18%, var(--sk-leg, #46301f) 18% 33%, transparent 33% 67%, var(--sk-leg, #46301f) 67% 82%, transparent 82%) 0 38px / 100% 12px no-repeat,
		linear-gradient(90deg, transparent 0 5%, var(--sk-arm, #f0b985) 5% 22%, transparent 22% 78%, var(--sk-arm, #f0b985) 78% 95%, transparent 95%) 0 24px / 100% 12px no-repeat,
		linear-gradient(90deg, transparent 0 22%, var(--sk-shirt, #a84432) 22% 78%, transparent 78%) 0 22px / 100% 20px no-repeat,
		linear-gradient(90deg, transparent 0 30%, var(--sk-hair, #5a351f) 30% 70%, transparent 70%) 0 6px / 100% 7px no-repeat,
		radial-gradient(circle at 50% 16px, #f0c28c 0 8px, transparent 9px);
	border: 0;
	box-shadow: 4px 5px 0 rgba(0,0,0,0.34);
	height: 50px;
	width: 28px;
}
.sk-citizen::after {
	background: var(--sk-tool, transparent);
	content: "";
	height: 28px;
	left: 25px;
	position: absolute;
	top: 16px;
	width: 18px;
}
.sk-action-holz,
.sk-action-wood {
	animation: sk-walk-forest 3.2s steps(6, end) infinite;
}
.sk-action-stein,
.sk-action-stone,
.sk-action-mine {
	animation: sk-walk-quarry 3.4s steps(6, end) infinite;
}
.sk-action-farm {
	animation: sk-work-field 2.2s steps(4, end) infinite;
}
.sk-action-attack,
.sk-action-angriff {
	animation: sk-charge 2.4s steps(5, end) infinite;
}
.sk-action-defend,
.sk-action-verteidigen {
	animation: sk-defend 1.8s steps(3, end) infinite;
}
.sk-action-heal::after {
	box-shadow:
		-8px -18px 0 #f5eecf,
		0 -26px 0 #d74d49,
		8px -18px 0 #f5eecf,
		0 -10px 0 #78d97e;
}
.sk-action-heal {
	animation: sk-heal 1.8s steps(4, end) infinite;
}
.sk-action-ueberlaufen,
.sk-action-defect {
	animation: sk-defect 4s steps(8, end) infinite;
	opacity: 0.92;
}
.sk-action-hurt {
	animation: sk-hurt 700ms steps(2, end) infinite;
}
.sk-action-cheer {
	animation: sk-cheer 1.2s steps(2, end) infinite;
}
.sk-profession-bauer {
	--sk-shirt: #b85036;
	--sk-leg: #4d6d32;
	--sk-tool: linear-gradient(90deg, transparent 0 38%, #6f4425 38% 55%, transparent 55%) 0 0 / 100% 100% no-repeat, linear-gradient(135deg, transparent 0 42%, #d8b15b 42% 62%, transparent 63%);
}
.sk-profession-holzfaeller {
	--sk-shirt: #2f7f45;
	--sk-leg: #5a3b24;
	--sk-hair: #7a4825;
	--sk-tool: linear-gradient(100deg, transparent 0 34%, #6f4425 34% 48%, transparent 49%) 0 0 / 100% 100% no-repeat, linear-gradient(135deg, transparent 0 35%, #e4e9ef 35% 62%, #7b858f 62% 76%, transparent 77%);
}
.sk-profession-steinmetz {
	--sk-shirt: #8c8f95;
	--sk-leg: #4e5660;
	--sk-hair: #3b3029;
	--sk-tool: linear-gradient(90deg, transparent 0 42%, #6f4425 42% 55%, transparent 56%) 0 0 / 100% 100% no-repeat, radial-gradient(circle at 50% 12%, #c9ced6 0 7px, transparent 8px);
}
.sk-profession-minenarbeiter {
	--sk-shirt: #b78132;
	--sk-leg: #3d3e42;
	--sk-hair: #d2b45a;
	--sk-tool: linear-gradient(110deg, transparent 0 34%, #6f4425 34% 47%, transparent 48%) 0 0 / 100% 100% no-repeat, linear-gradient(135deg, transparent 0 35%, #e5eaf0 35% 52%, #808995 52% 70%, transparent 71%), linear-gradient(#d8b34f, #d8b34f) 2px 0 / 14px 5px no-repeat;
}
.sk-profession-soldat {
	--sk-shirt: #8e2e2a;
	--sk-leg: #2f3341;
	--sk-hair: #bcc4cf;
	--sk-arm: #c9a575;
	--sk-tool: linear-gradient(90deg, transparent 0 45%, #e4e9ef 45% 57%, transparent 58%) 6px 0 / 100% 100% no-repeat, linear-gradient(#8b2a24, #8b2a24) 0 12px / 14px 16px no-repeat, linear-gradient(#d7dce5, #aab2be) 1px 9px / 12px 5px no-repeat;
}
.sk-profession-waechter,
.sk-profession-wachter {
	--sk-shirt: #355c8f;
	--sk-leg: #2a3144;
	--sk-hair: #c6ccd6;
	--sk-tool: linear-gradient(#b8c0ca, #b8c0ca) 2px 8px / 12px 18px no-repeat, linear-gradient(90deg, transparent 0 45%, #6f4425 45% 56%, transparent 57%);
}
.sk-profession-heiler {
	--sk-shirt: #e7e1ca;
	--sk-leg: #6d5ca4;
	--sk-hair: #c39a4b;
	--sk-tool: linear-gradient(90deg, transparent 0 42%, #f5eecf 42% 60%, transparent 61%) 0 0 / 100% 100% no-repeat, linear-gradient(#c34646, #c34646) 6px 6px / 4px 14px no-repeat, linear-gradient(#c34646, #c34646) 1px 11px / 14px 4px no-repeat;
}
.sk-profession-spion {
	--sk-shirt: #34313d;
	--sk-leg: #1e2028;
	--sk-hair: #24212a;
	--sk-arm: #d0a276;
	--sk-tool: radial-gradient(circle at 8px 8px, #8ed6ff 0 4px, transparent 5px), linear-gradient(45deg, transparent 0 46%, #d7dce5 46% 56%, transparent 57%);
}
.sk-profession-saboteur {
	--sk-shirt: #4b2a55;
	--sk-leg: #2a1d31;
	--sk-hair: #26202b;
	--sk-tool: radial-gradient(circle at 8px 18px, #222 0 6px, transparent 7px), linear-gradient(#d95744, #d95744) 7px 5px / 3px 8px no-repeat;
}
.sk-citizen b {
	background: rgba(42, 30, 18, 0.88);
	border: 1px solid rgba(255, 222, 148, 0.72);
	border-radius: 5px;
	bottom: 50px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
	color: #fff5d9;
	font-family: "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 800;
	left: 50%;
	line-height: 1;
	max-width: 120px;
	overflow: hidden;
	padding: 4px 6px;
	position: absolute;
	text-overflow: ellipsis;
	transform: translateX(-50%);
	white-space: nowrap;
}
.sk-citizen em {
	background: rgba(22, 18, 12, 0.76);
	border-radius: 999px;
	bottom: 42px;
	display: block;
	height: 4px;
	left: 50%;
	overflow: hidden;
	position: absolute;
	transform: translateX(-50%);
	width: 64px;
}
.sk-citizen em span,
.sk-xp b {
	background: linear-gradient(90deg, #76d17a, #f0c85a);
	display: block;
	height: 100%;
}
.sk-map-item u {
	background: rgba(35, 14, 12, 0.82);
	border-radius: 999px;
	display: block;
	height: 5px;
	left: 50%;
	overflow: hidden;
	position: absolute;
	text-decoration: none;
	transform: translateX(-50%);
	width: 58px;
}
.sk-map-item u span {
	background: linear-gradient(90deg, #d94135, #f0b35a);
	display: block;
	height: 100%;
}
.sk-citizen u {
	bottom: 36px;
}
.sk-map-item:not(.sk-citizen) u {
	bottom: -12px;
}
.sk-monster {
	right: 8%;
	top: 26%;
	z-index: 8;
}
.sk-monster::before {
	animation: sk-pulse 1.6s ease-in-out infinite;
	background:
		linear-gradient(135deg, transparent 0 24%, #7d201c 24% 42%, transparent 43%),
		linear-gradient(225deg, transparent 0 22%, #d8533d 22% 52%, transparent 53%),
		linear-gradient(#d64a38, #8c271f);
	clip-path: polygon(50% 0, 64% 26%, 100% 30%, 73% 53%, 84% 100%, 50% 76%, 16% 100%, 27% 53%, 0 30%, 36% 26%);
}
.sk-monster-dragon::before {
	background:
		linear-gradient(135deg, transparent 0 22%, #6e1c18 22% 46%, transparent 47%),
		linear-gradient(225deg, transparent 0 18%, #e85b42 18% 54%, transparent 55%),
		linear-gradient(#dc4431, #7e1f1a);
	height: 44px;
	width: 44px;
}
.sk-monster-treasure::before,
.sk-monster-caravan::before {
	background: #e6bd54;
}
.sk-world-status {
	display: grid;
	gap: 10px;
}
.sk-world-status div {
	background:
		repeating-linear-gradient(90deg, rgba(255, 225, 151, 0.04) 0 4px, transparent 4px 12px),
		linear-gradient(180deg, rgba(62, 48, 33, 0.94), rgba(20, 29, 25, 0.96));
	border: 2px solid var(--sk-border);
	border-radius: 0;
	box-shadow: inset 2px 2px 0 rgba(255, 235, 171, 0.12), inset -2px -2px 0 rgba(0,0,0,0.34);
	padding: 12px;
}
.sk-world-status span {
	color: #b8c0d1;
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}
.sk-world-status strong {
	display: block;
	font-size: 18px;
	margin-top: 3px;
}
.sk-weather-forecast strong {
	align-items: center;
	display: flex;
	gap: 10px;
}
.sk-weather-icon {
	color: #f7d782;
	font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.sk-weather-rain .sk-map::after,
.sk-weather-magic-rain .sk-map::after {
	animation: sk-rain 700ms steps(4, end) infinite;
	background: #d8f2ff;
	box-shadow:
		96px 12px 0 #d8f2ff, 168px 28px 0 #d8f2ff, 242px 4px 0 #d8f2ff,
		318px 18px 0 #d8f2ff, 396px 8px 0 #d8f2ff, 474px 30px 0 #d8f2ff,
		552px 12px 0 #d8f2ff, 630px 26px 0 #d8f2ff, 708px 4px 0 #d8f2ff,
		786px 20px 0 #d8f2ff, 864px 8px 0 #d8f2ff, 942px 30px 0 #d8f2ff,
		1020px 14px 0 #d8f2ff, 1098px 2px 0 #d8f2ff, 1176px 22px 0 #d8f2ff,
		1254px 10px 0 #d8f2ff, 1332px 28px 0 #d8f2ff,
		42px 82px 0 #d8f2ff, 210px 102px 0 #d8f2ff, 378px 92px 0 #d8f2ff,
		546px 110px 0 #d8f2ff, 714px 86px 0 #d8f2ff, 882px 104px 0 #d8f2ff,
		1050px 90px 0 #d8f2ff, 1218px 112px 0 #d8f2ff;
	content: "";
	height: 14px;
	left: 16px;
	position: absolute;
	top: -16px;
	width: 2px;
}
.sk-weather-fog .sk-map::after {
	background: rgba(219, 226, 235, 0.2);
	content: "";
	inset: 0;
	position: absolute;
}
.sk-weather-drought .sk-map {
	filter: sepia(0.35) saturate(0.75);
}
@keyframes sk-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.14); }
}
@keyframes sk-idle {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -2px; }
}
@keyframes sk-walk-forest {
	0%, 100% { transform: translate(-50%, -50%); }
	50% { transform: translate(calc(-50% - 36px), calc(-50% - 20px)); }
}
@keyframes sk-walk-quarry {
	0%, 100% { transform: translate(-50%, -50%); }
	50% { transform: translate(calc(-50% + 38px), calc(-50% + 14px)); }
}
@keyframes sk-work-field {
	0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
	50% { transform: translate(-50%, calc(-50% + 5px)) rotate(-5deg); }
}
@keyframes sk-charge {
	0%, 100% { transform: translate(-50%, -50%); }
	50% { transform: translate(calc(-50% + 46px), calc(-50% - 8px)); }
}
@keyframes sk-defend {
	0%, 100% { transform: translate(-50%, -50%); filter: brightness(1); }
	50% { transform: translate(calc(-50% - 8px), -50%); filter: brightness(1.22); }
}
@keyframes sk-heal {
	0%, 100% { transform: translate(-50%, -50%); filter: brightness(1); }
	50% { transform: translate(-50%, calc(-50% - 4px)); filter: brightness(1.35); }
}
@keyframes sk-defect {
	0% { transform: translate(-50%, -50%); }
	70%, 100% { transform: translate(calc(-50% - 72px), calc(-50% + 26px)); }
}
@keyframes sk-hurt {
	0%, 100% { transform: translate(-50%, -50%); filter: none; }
	50% { transform: translate(calc(-50% + 4px), -50%); filter: sepia(1) saturate(2); }
}
@keyframes sk-cheer {
	0%, 100% { transform: translate(-50%, -50%); }
	50% { transform: translate(-50%, calc(-50% - 8px)); }
}
@keyframes sk-rain {
	to { transform: translateY(48px); }
}
@media (prefers-reduced-motion: reduce) {
	.sk-citizen,
	.sk-citizen::before,
	.sk-monster::before,
	.sk-weather-rain .sk-map::after,
	.sk-weather-magic-rain .sk-map::after {
		animation: none;
	}
}
.sk-battle,
.sk-lists {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-lists h2 {
	color: var(--sk-primary, #d6a84f);
	font-size: 17px;
	margin: 0 0 8px;
}
.sk-lists ol,
.sk-lists ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding-left: 20px;
}
.sk-lists li {
	color: #f7f2e8;
	font-size: 14px;
	position: relative;
}
.sk-lists span {
	color: #b8c0d1;
	float: right;
}
.sk-xp {
	background: rgba(11, 13, 18, 0.74);
	border-radius: 999px;
	display: block;
	height: 5px;
	margin-top: 6px;
	overflow: hidden;
	width: 100%;
}

/* Hard pixel-art pass: block silhouettes, no smooth icon geometry. */
.sk-map::before {
	background:
		repeating-linear-gradient(90deg, rgba(30, 86, 38, 0.42) 0 16px, rgba(42, 112, 48, 0.42) 16px 32px),
		repeating-linear-gradient(0deg, rgba(141, 173, 82, 0.22) 0 16px, transparent 16px 32px);
	opacity: 0.42;
}
.sk-water {
	background:
		repeating-linear-gradient(90deg, #2a91b6 0 16px, #3ba8ca 16px 32px),
		repeating-linear-gradient(0deg, rgba(255,255,255,0.25) 0 2px, transparent 2px 16px);
	clip-path: polygon(0 24%, 8% 24%, 8% 20%, 16% 20%, 16% 24%, 26% 24%, 26% 30%, 36% 30%, 36% 36%, 48% 36%, 48% 42%, 58% 42%, 58% 100%, 0 100%);
}
.sk-house::after,
.sk-farm::after,
.sk-mine::after,
.sk-quarry::after,
.sk-woodcamp::after,
.sk-barracks::after,
.sk-market::after,
.sk-castle::after,
.sk-mage_tower::after {
	background: rgba(56, 38, 20, 0.45);
	clip-path: none;
	height: 10px;
	top: 31px;
	width: 48px;
}
.sk-house::before {
	background:
		linear-gradient(90deg, transparent 0 8px, #8e2f27 8px 16px, #c65335 16px 32px, transparent 32px),
		linear-gradient(90deg, #7c4c28 0 8px, #dfb56b 8px 32px, #6c3e20 32px 40px);
	background-position: 0 0, 0 14px;
	background-repeat: no-repeat;
	background-size: 40px 16px, 40px 24px;
	height: 38px;
	transform: translateY(-8px);
	width: 40px;
}
.sk-tree::before {
	background:
		linear-gradient(90deg, transparent 0 16px, #70421f 16px 24px, transparent 24px) 0 28px / 40px 18px no-repeat,
		linear-gradient(90deg, transparent 0 8px, #3a8438 8px 32px, transparent 32px) 0 18px / 40px 12px no-repeat,
		linear-gradient(90deg, transparent 0 4px, #64b749 4px 36px, transparent 36px) 0 8px / 40px 12px no-repeat,
		linear-gradient(90deg, transparent 0 12px, #8ed25a 12px 28px, transparent 28px) 0 0 / 40px 10px no-repeat;
	height: 48px;
	width: 40px;
}
.sk-rock::before {
	background:
		linear-gradient(90deg, transparent 0 8px, #c8d0d8 8px 24px, #7f8893 24px 40px, transparent 40px) 0 0 / 48px 12px no-repeat,
		linear-gradient(90deg, #777f89 0 16px, #aab2bd 16px 34px, #4f5761 34px 48px) 0 12px / 48px 14px no-repeat,
		linear-gradient(90deg, transparent 0 8px, #525b66 8px 36px, transparent 36px) 0 26px / 48px 10px no-repeat;
	clip-path: none;
	height: 36px;
	width: 48px;
}
.sk-field::before,
.sk-farm::before {
	background:
		repeating-linear-gradient(90deg, #8f6a2f 0 8px, #dbc963 8px 16px);
	height: 40px;
	transform: translateY(-8px);
	width: 56px;
}
.sk-flower::before {
	background:
		linear-gradient(#e94d7d, #e94d7d) 8px 8px / 5px 5px no-repeat,
		linear-gradient(#f4de5a, #f4de5a) 18px 2px / 5px 5px no-repeat,
		linear-gradient(#7ed7ff, #7ed7ff) 25px 14px / 5px 5px no-repeat,
		linear-gradient(#59c54e, #59c54e) 14px 18px / 12px 8px no-repeat;
	height: 28px;
	width: 36px;
}
.sk-mine::before,
.sk-quarry::before {
	background:
		linear-gradient(90deg, transparent 0 8px, #d4d9e1 8px 24px, #8c96a2 24px 40px, transparent 40px) 0 0 / 48px 14px no-repeat,
		linear-gradient(90deg, #56606c 0 18px, #aeb6c1 18px 34px, #3d4550 34px 48px) 0 14px / 48px 18px no-repeat,
		linear-gradient(#2c2220, #2c2220) 16px 22px / 16px 12px no-repeat;
	height: 38px;
	transform: translateY(-8px);
	width: 48px;
}
.sk-woodcamp::before {
	background:
		linear-gradient(90deg, transparent 0 8px, #3b7d40 8px 32px, transparent 32px) 0 0 / 40px 14px no-repeat,
		linear-gradient(90deg, transparent 0 12px, #6d421f 12px 28px, transparent 28px) 0 14px / 40px 26px no-repeat,
		repeating-linear-gradient(90deg, #7b4a23 0 6px, #c1843e 6px 12px) 0 34px / 44px 10px no-repeat;
	height: 46px;
	transform: translateY(-10px);
	width: 44px;
}
.sk-barracks::before,
.sk-market::before {
	background:
		repeating-linear-gradient(90deg, #b83f32 0 8px, #f1df93 8px 16px) 0 0 / 56px 14px no-repeat,
		linear-gradient(90deg, #704320 0 8px, #d09b55 8px 48px, #704320 48px 56px) 0 14px / 56px 28px no-repeat;
	clip-path: none;
	height: 42px;
	transform: translateY(-9px);
	width: 56px;
}
.sk-castle::before {
	background:
		repeating-linear-gradient(90deg, #737d8a 0 8px, #c7ced7 8px 16px) 0 0 / 72px 12px no-repeat,
		linear-gradient(90deg, #6f7885 0 12px, transparent 12px 18px, #c7ced7 18px 54px, transparent 54px 60px, #6f7885 60px 72px) 0 12px / 72px 48px no-repeat,
		linear-gradient(#303741, #303741) 30px 40px / 14px 20px no-repeat;
	clip-path: none;
	height: 64px;
	transform: translateY(-16px);
	width: 72px;
}
.sk-mage_tower::before {
	background:
		linear-gradient(90deg, transparent 0 8px, #5b45bc 8px 20px, #9a85f0 20px 32px, transparent 32px) 0 0 / 40px 18px no-repeat,
		linear-gradient(90deg, transparent 0 10px, #7060d2 10px 30px, transparent 30px) 0 18px / 40px 40px no-repeat;
	clip-path: none;
	height: 58px;
	transform: translateY(-14px);
	width: 40px;
}
.sk-citizen {
	height: 48px;
	width: 32px;
}
.sk-citizen::before {
	background:
		linear-gradient(90deg, transparent 0 8px, var(--sk-leg, #46301f) 8px 13px, transparent 13px 19px, var(--sk-leg, #46301f) 19px 24px, transparent 24px) 0 36px / 32px 10px no-repeat,
		linear-gradient(90deg, transparent 0 4px, var(--sk-arm, #f0b985) 4px 8px, var(--sk-shirt, #a84432) 8px 24px, var(--sk-arm, #f0b985) 24px 28px, transparent 28px) 0 22px / 32px 16px no-repeat,
		linear-gradient(90deg, transparent 0 9px, #f0c28c 9px 23px, transparent 23px) 0 10px / 32px 12px no-repeat,
		linear-gradient(90deg, transparent 0 8px, var(--sk-hair, #5a351f) 8px 24px, transparent 24px) 0 4px / 32px 8px no-repeat;
	height: 46px;
	width: 32px;
}
.sk-citizen::after {
	left: 24px;
}
.sk-monster::before,
.sk-monster-dragon::before {
	background:
		linear-gradient(90deg, transparent 0 8px, #c93228 8px 16px, transparent 16px 28px, #c93228 28px 36px, transparent 36px) 0 0 / 44px 12px no-repeat,
		linear-gradient(90deg, #7d201c 0 10px, #dc4431 10px 34px, #7d201c 34px 44px) 0 12px / 44px 20px no-repeat,
		linear-gradient(90deg, transparent 0 8px, #7d201c 8px 20px, transparent 20px 24px, #7d201c 24px 36px, transparent 36px) 0 32px / 44px 12px no-repeat;
	clip-path: none;
	height: 44px;
	width: 44px;
}
.sk-map-item i,
.sk-monster i,
.sk-citizen b,
.sk-citizen em,
.sk-map-item u,
.sk-xp {
	border-radius: 0;
}
.sk-citizen b {
	font-family: "Courier New", Consolas, ui-monospace, monospace;
}

/* Reference pass: Siedler-like isometric 2D pixel scene. */
.sk-map {
	background:
		linear-gradient(90deg, rgba(33, 112, 37, 0.42) 0 4px, transparent 4px 16px),
		linear-gradient(0deg, rgba(113, 183, 76, 0.34) 0 3px, transparent 3px 14px),
		repeating-linear-gradient(90deg, #226f2c 0 8px, #2f8734 8px 16px, #3d963a 16px 24px, #25782e 24px 32px),
		linear-gradient(135deg, #2c8532, #1f6d2e 58%, #6b7931);
}
.sk-map::before {
	background:
		linear-gradient(90deg, transparent 0 10px, rgba(91, 170, 70, 0.55) 10px 12px, transparent 12px 24px),
		linear-gradient(90deg, transparent 0 4px, rgba(16, 91, 34, 0.5) 4px 6px, transparent 6px 16px),
		repeating-linear-gradient(0deg, transparent 0 8px, rgba(166, 215, 96, 0.22) 8px 10px, transparent 10px 18px);
	background-size: 32px 24px, 24px 20px, 100% 22px;
	opacity: 0.7;
}
.sk-road-tile,
.sk-road-junction-tile {
	background: #b98263;
	box-shadow:
		4px 0 0 #80533f,
		8px 0 0 #d3a083,
		12px 0 0 #8d5d46,
		-4px 4px 0 #c49376,
		4px 4px 0 #744934,
		12px 4px 0 #d6a98a,
		20px 4px 0 #8b5b43,
		0 8px 0 #9e6b52,
		8px 8px 0 #d8ad8f,
		16px 8px 0 #7f513b,
		26px 12px 0 rgba(0,0,0,0.86);
	height: 6px;
	transform: translate(-50%, -50%);
	width: 6px;
}
.sk-road-junction-tile {
	box-shadow:
		-8px -4px 0 #c89678,
		0 -4px 0 #8d5b43,
		8px -4px 0 #d5a789,
		-12px 2px 0 #8b5a43,
		-4px 2px 0 #d8ad8f,
		4px 2px 0 #9f6d53,
		12px 2px 0 #d0a083,
		-8px 8px 0 #c59475,
		0 8px 0 #80523c,
		8px 8px 0 #dcb18f,
		22px 16px 0 rgba(0,0,0,0.9);
}
.sk-water {
	background:
		linear-gradient(90deg, #04159f 0 16px, #071fc4 16px 32px, #102edb 32px 48px),
		linear-gradient(#426bff, #426bff) 8px 10px / 20px 2px,
		linear-gradient(#698dff, #698dff) 38px 28px / 18px 2px;
	background-repeat: repeat;
	clip-path: polygon(0 0, 18% 0, 18% 6%, 28% 6%, 28% 12%, 36% 12%, 36% 20%, 44% 20%, 44% 28%, 52% 28%, 52% 100%, 0 100%);
}
.sk-house,
.sk-farm,
.sk-mine,
.sk-quarry,
.sk-woodcamp,
.sk-barracks,
.sk-market,
.sk-castle,
.sk-mage_tower {
	height: 58px;
	width: 64px;
}
.sk-house::after,
.sk-farm::after,
.sk-mine::after,
.sk-quarry::after,
.sk-woodcamp::after,
.sk-barracks::after,
.sk-market::after,
.sk-castle::after,
.sk-mage_tower::after,
.sk-tree::after,
.sk-rock::after,
.sk-citizen::after {
	background: #050505;
	box-shadow: 8px 6px 0 #050505, 16px 10px 0 #050505;
	content: "";
	height: 10px;
	left: 54%;
	opacity: 0.95;
	position: absolute;
	top: 62%;
	transform: skewX(-28deg);
	width: 42px;
	z-index: -1;
}
.sk-house::before,
.sk-barracks::before,
.sk-market::before {
	background:
		repeating-linear-gradient(90deg, #6f3d1e 0 5px, #b8753c 5px 10px) 4px 0 / 44px 14px no-repeat,
		linear-gradient(90deg, transparent 0 4px, #d29a59 4px 48px, transparent 48px) 0 10px / 56px 10px no-repeat,
		linear-gradient(90deg, #7c4a2b 0 10px, #b97a42 10px 38px, #5e3420 38px 50px) 2px 20px / 52px 26px no-repeat,
		linear-gradient(#2a1710, #2a1710) 22px 30px / 10px 16px no-repeat;
	height: 52px;
	transform: translateY(-18px);
	width: 58px;
}
.sk-farm::before {
	background:
		repeating-linear-gradient(90deg, #b08a37 0 7px, #f0dc62 7px 14px) 0 18px / 66px 34px no-repeat,
		linear-gradient(90deg, transparent 0 10px, #d5a663 10px 52px, transparent 52px) 0 0 / 66px 16px no-repeat,
		repeating-linear-gradient(90deg, #684221 0 5px, #9b6131 5px 10px) 8px 8px / 48px 12px no-repeat;
	height: 54px;
	transform: translateY(-18px);
	width: 66px;
}
.sk-mine::before,
.sk-quarry::before {
	background:
		linear-gradient(90deg, transparent 0 8px, #dfe2e6 8px 22px, #767f87 22px 44px, transparent 44px) 4px 4px / 56px 14px no-repeat,
		linear-gradient(90deg, #57616a 0 16px, #bbc1c8 16px 36px, #323941 36px 54px) 0 18px / 58px 18px no-repeat,
		linear-gradient(#0d0d0d, #0d0d0d) 18px 28px / 18px 16px no-repeat,
		repeating-linear-gradient(90deg, #7a4b25 0 5px, #bc7c3c 5px 10px) 4px 42px / 44px 10px no-repeat;
	height: 56px;
	transform: translateY(-20px);
	width: 60px;
}
.sk-woodcamp::before {
	background:
		repeating-linear-gradient(90deg, #6e3c1f 0 5px, #aa6b36 5px 10px) 0 6px / 58px 14px no-repeat,
		linear-gradient(90deg, #5a331e 0 10px, #b5713b 10px 48px, #4c2c1b 48px 58px) 0 20px / 58px 30px no-repeat,
		linear-gradient(#21120d, #21120d) 22px 28px / 14px 22px no-repeat;
	height: 56px;
	transform: translateY(-20px);
	width: 60px;
}
.sk-castle {
	height: 96px;
	width: 86px;
}
.sk-castle::after {
	height: 18px;
	left: 62%;
	top: 68%;
	width: 78px;
}
.sk-castle::before {
	background:
		repeating-linear-gradient(90deg, #a9b0b6 0 8px, #e6e8ea 8px 16px, #747d87 16px 24px) 18px 4px / 48px 72px no-repeat,
		linear-gradient(#d00000, #d00000) 22px 0 / 18px 16px no-repeat,
		linear-gradient(#d00000, #d00000) 48px 0 / 18px 16px no-repeat,
		linear-gradient(#7c0000, #7c0000) 30px 50px / 30px 20px no-repeat,
		linear-gradient(#242424, #242424) 34px 70px / 18px 18px no-repeat,
		repeating-linear-gradient(90deg, #7a431f 0 5px, #b9773d 5px 10px) 16px 28px / 58px 12px no-repeat;
	clip-path: none;
	height: 92px;
	transform: translateY(-42px);
	width: 88px;
}
.sk-mage_tower::before {
	background:
		linear-gradient(#c00, #c00) 18px 0 / 18px 18px no-repeat,
		repeating-linear-gradient(90deg, #9ca5b0 0 6px, #e4e7ea 6px 12px, #6c747e 12px 18px) 14px 18px / 30px 52px no-repeat,
		linear-gradient(#252525, #252525) 22px 48px / 10px 18px no-repeat;
	height: 72px;
	transform: translateY(-34px);
	width: 58px;
}
.sk-tree::before {
	background:
		linear-gradient(90deg, transparent 0 12px, #103c18 12px 32px, transparent 32px) 0 22px / 44px 18px no-repeat,
		linear-gradient(90deg, transparent 0 8px, #185c22 8px 38px, transparent 38px) 0 12px / 46px 18px no-repeat,
		linear-gradient(90deg, transparent 0 14px, #48a934 14px 30px, transparent 30px) 0 0 / 44px 16px no-repeat,
		linear-gradient(#6e421f, #6e421f) 19px 34px / 8px 18px no-repeat;
	height: 54px;
	width: 46px;
}
.sk-citizen {
	height: 34px;
	width: 22px;
}
.sk-citizen::before {
	background:
		linear-gradient(#f0c28c, #f0c28c) 7px 2px / 8px 8px no-repeat,
		linear-gradient(var(--sk-shirt, #25c4cf), var(--sk-shirt, #25c4cf)) 5px 10px / 12px 12px no-repeat,
		linear-gradient(#f0c28c, #f0c28c) 2px 12px / 4px 8px no-repeat,
		linear-gradient(#f0c28c, #f0c28c) 16px 12px / 4px 8px no-repeat,
		linear-gradient(var(--sk-leg, #222), var(--sk-leg, #222)) 5px 22px / 5px 8px no-repeat,
		linear-gradient(var(--sk-leg, #222), var(--sk-leg, #222)) 12px 22px / 5px 8px no-repeat;
	height: 32px;
	width: 22px;
}
.sk-citizen::after {
	height: 7px;
	left: 18px;
	top: 24px;
	width: 20px;
}
.sk-profession-bauer,
.sk-profession-holzfaeller,
.sk-profession-minenarbeiter,
.sk-profession-steinmetz {
	--sk-shirt: #20bfd0;
}
.sk-citizen b {
	bottom: 34px;
}
.sk-citizen em {
	bottom: 28px;
}
.sk-citizen u {
	bottom: 22px;
}
@media (max-width: 760px) {
	.sk-resources {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sk-battle,
	.sk-world,
	.sk-lists {
		grid-template-columns: 1fr;
	}
	.sk-hero h1 {
		font-size: 28px;
	}
}