/* Arena Romana — palette: bronze, blood, marble, dust */
:root {
	--ar-night: #0d0703;
	--ar-soil: #1a0e08;
	--ar-bronze: #c89b3c;
	--ar-bronze-bright: #f0d97f;
	--ar-blood: #6e1414;
	--ar-marble: #e8dccb;
	--ar-dust: #a08862;
}

* {
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: var(--ar-soil);
	color: var(--ar-marble);
	height: 100svh;
	position: relative;
	font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
	letter-spacing: 0.02em;
}

/* Modern text wrapping */
#brand .brand-name { text-wrap: balance; }
#brand .brand-tag { text-wrap: pretty; overflow-wrap: anywhere; }

#wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	image-rendering: pixelated;
}

#brand {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.5rem 1rem;
	background: linear-gradient(180deg, var(--ar-night), var(--ar-soil));
	border-bottom: 1px solid rgba(200, 155, 60, 0.25);
	font-variant: small-caps;
}

#brand .brand-mark {
	color: var(--ar-bronze-bright);
	font-size: 1.1rem;
}

#brand .brand-name {
	color: var(--ar-bronze-bright);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.08em;
}

#brand .brand-tag {
	color: var(--ar-dust);
	font-size: 0.75rem;
	margin-left: auto;
	font-style: italic;
}

#canvas-wrapper {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	overflow: hidden;
	align-self: center;
	background: var(--ar-night);
}

canvas {
	user-select: none;
	touch-action: none;
}

input#in-game-input {
	color: var(--ar-marble);
	background-color: transparent;
	position: absolute;
	border-radius: 0;
	border: none;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: inherit;
	letter-spacing: 0.1em;
}

input#in-game-input:focus {
	outline: none;
}