@font-face {
	font-family: "Minecraft Rus";
	src: url("assets/minecraft-rus.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Minecraft";
	src: url("assets/minecraft-rus.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #15161a;
	--stage: #1e2026;
	--panel: #22242a;
	--face: #353941;
	--face-hi: #474c56;
	--face-lo: #1f2227;
	--text: #e8e5de;
	--muted: #8f8c85;
	--accent: #5fb840;
	--accent-hi: #7cd25c;
	--accent-lo: #3a8626;
	--danger: #d96b5f;
	--line: #2c2f36;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: "Minecraft Rus", "Minecraft", monospace;
	font-size: 17px;
	line-height: 1.45;
	display: flex;
	flex-direction: column;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 2px solid var(--line);
	flex-wrap: wrap;
}

.topbar h1 {
	margin: 0;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--text);
}

.nickbar {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

input[type="text"] {
	width: 190px;
	font: inherit;
	color: var(--text);
	background: var(--face-lo);
	padding: 7px 10px;
	border: none;
	box-shadow: inset 2px 2px 0 var(--stage), inset -2px -2px 0 var(--face-hi);
}

input[type="text"]::placeholder {
	color: var(--muted);
}

.btn {
	font: inherit;
	color: var(--text);
	background: var(--face);
	padding: 7px 14px;
	border: none;
	cursor: pointer;
	box-shadow: inset 2px 2px 0 var(--face-hi), inset -2px -2px 0 var(--face-lo);
}

.btn:active {
	box-shadow: inset -2px -2px 0 var(--face-hi), inset 2px 2px 0 var(--face-lo);
}

.btn:disabled {
	opacity: 0.55;
	cursor: wait;
}

.btn-primary {
	background: var(--accent);
	color: #10230b;
	box-shadow: inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo);
}

.btn-primary:active {
	box-shadow: inset -2px -2px 0 var(--accent-hi), inset 2px 2px 0 var(--accent-lo);
}

.layout {
	flex: 1;
	min-height: 0;
	display: flex;
	gap: 14px;
	padding: 14px;
}

.stage {
	position: relative;
	flex: 1;
	min-width: 0;
	background: var(--stage);
	box-shadow: inset 2px 2px 0 var(--line), inset -2px -2px 0 var(--line);
	overflow: hidden;
}

.stage canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}

.stage.dropping::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 3px dashed var(--accent);
	pointer-events: none;
}

.drop-hint {
	position: absolute;
	left: 50%;
	top: 18px;
	transform: translateX(-50%);
	background: var(--accent);
	color: #10230b;
	padding: 6px 12px;
	box-shadow: inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo);
	pointer-events: none;
}

.panel {
	width: 300px;
	flex-shrink: 0;
	background: var(--panel);
	padding: 14px;
	box-shadow: inset 2px 2px 0 var(--line), inset -2px -2px 0 var(--line);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.skin-meta {
	display: flex;
	gap: 12px;
	align-items: center;
}

.tex {
	display: block;
	width: 96px;
	height: auto;
	image-rendering: pixelated;
	background: repeating-conic-gradient(#282a31 0% 25%, #22242a 0% 50%) 0 0 / 16px 16px;
	box-shadow: inset 2px 2px 0 var(--face-lo), inset -2px -2px 0 var(--face-hi);
}

.skin-name {
	font-size: 21px;
	overflow-wrap: anywhere;
}

.skin-info {
	color: var(--muted);
	font-size: 15px;
}

.status {
	margin: 0;
	min-height: 24px;
	font-size: 15px;
	color: var(--danger);
}

.status[data-kind="ok"] {
	color: var(--accent);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field-label {
	color: var(--muted);
	font-size: 15px;
}

select {
	font: inherit;
	color: var(--text);
	background: var(--face);
	padding: 7px 10px;
	border: none;
	cursor: pointer;
	width: 100%;
	appearance: none;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23e8e5de" stroke-width="2"/></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	box-shadow: inset 2px 2px 0 var(--face-hi), inset -2px -2px 0 var(--face-lo);
}

.check {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}

.check input {
	appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	background: var(--face-lo);
	box-shadow: inset 2px 2px 0 var(--stage), inset -2px -2px 0 var(--face-hi);
	cursor: pointer;
	position: relative;
}

.check input:checked {
	background: var(--accent);
	box-shadow: inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo);
}

.check input:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 8px;
	height: 4px;
	border-left: 3px solid #10230b;
	border-bottom: 3px solid #10230b;
	transform: rotate(-45deg);
}

.hint {
	margin: auto 0 0;
	color: var(--muted);
	font-size: 14px;
}

@media (max-width: 760px) {
	body {
		font-size: 16px;
	}

	.nickbar {
		margin-left: 0;
		width: 100%;
	}

	.nickbar input {
		flex: 1;
		width: auto;
	}

	.layout {
		flex-direction: column;
	}

	.stage {
		min-height: 55vh;
	}

	.panel {
		width: 100%;
		overflow: visible;
	}

	.hint {
		margin-top: 0;
	}
}