html,
body {
	height: 100%;
	margin: 0;
	background: #000;
}

#wrap {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.hud {
	position: absolute;
	left: 12px;
	top: 12px;
	display: flex;
	gap: 10px;
	font: 700 16px/1.1 Georgia, "Times New Roman", serif;
	color: #3b2814;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
	user-select: none;
	pointer-events: none;
}

.hud .pill {
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid rgba(124, 90, 41, .6);
	background: linear-gradient(180deg, #f5e6c8, #e7d4ae 60%, #e1cda6);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.hud .pill span {
	color: #8b6a2e;
	text-shadow: 0 1px 0 #fff3d1;
}

.controls {
	position: absolute;
	right: 12px;
	top: 12px;
	display: flex;
	gap: 8px;
}

button {
	pointer-events: auto;
	cursor: pointer;
	border: 2px solid #3e2813;
	border-radius: 10px;
	padding: 9px 14px;
	font: 700 14px/1 Georgia, "Times New Roman", serif;
	color: #2d1c07;
	background: linear-gradient(180deg, #f1d089, #c89b3a 60%, #9e762a);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .15);
	transition: filter .12s ease, transform .05s ease;
}
button:focus { outline: none; }

button:hover {
	filter: brightness(1.06);
}

button:active {
	transform: translateY(1px);
}

button.secondary {
	border-color: #4b2e14;
	color: #f8e9cf;
	background: linear-gradient(180deg, #6f4322, #8a532a 60%, #6e4221);
}

/* Floating mini pause button (appears only in-game) */
.pause-fab {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 12;
	padding: 6px 10px;
	font: 700 12px/1 Georgia, "Times New Roman", serif;
	border-radius: 10px;
	border: 2px solid #3e2813;
	background: linear-gradient(180deg, #6f4322, #8a532a 60%, #6e4221);
	color: #f8e9cf;
	box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
.pause-fab[hidden] { display: none; }

.center-tip {
	position: absolute;
	inset: 0;
	margin: auto;
	display: grid;
	place-items: center;
	z-index: 10;
	width: min(92vw, 460px);
	height: min(92vh, 300px);
	padding: 22px 24px;
	border-radius: 12px;
	/* Wood/leather frame + parchment body */
	border: 2px solid #4b2e14;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(215, 174, 92, .35);
	background:
		linear-gradient(180deg, rgba(71, 43, 20, 0.35), rgba(71, 43, 20, 0.35)) padding-box,
		linear-gradient(180deg, #efe0c4 0%, #e7d4ae 60%, #e1cda6 100%) border-box;
	color: #2d1c0a;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
	pointer-events: auto;
}

.center-tip::before {
	/* vignette + aged edges */
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 8px;
	background:
		radial-gradient(120% 85% at 50% -10%, rgba(0, 0, 0, .10), transparent 55%),
		radial-gradient(120% 85% at 50% 110%, rgba(0, 0, 0, .10), transparent 55%);
	pointer-events: none;
}

.center-tip::after {
	/* subtle parchment grain */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, .02) 0 2px, transparent 2px 6px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, .015) 0 3px, transparent 3px 7px);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.center-tip .popup-content {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 12px;
}

.center-tip .title {
	margin: 0;
	font: 800 22px/1.2 Georgia, "Times New Roman", serif;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #3f2912;
	text-shadow: 0 1px 0 #f6e9cf, 0 2px 0 rgba(0, 0, 0, .12);
}

.center-tip .description {
	margin: 0 8px 4px;
	font: 600 15px/1.6 Georgia, "Times New Roman", serif;
	color: #3b2814;
	opacity: 0.95;
}

.center-tip .ornament {
	position: relative;
	height: 14px;
	margin: 2px auto 6px;
	width: 100%;
}

.center-tip .ornament::before,
.center-tip .ornament::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 42%;
	height: 1px;
	background: linear-gradient(90deg, transparent, #7c5a29 30%, #b88b3a 50%, #7c5a29 70%, transparent);
}

.center-tip .ornament::before {
	left: 0;
	transform: translateY(-50%);
}

.center-tip .ornament::after {
	right: 0;
	transform: translateY(-50%);
}

.center-tip .ornament i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: linear-gradient(180deg, #f1d089, #b78628);
	transform: rotate(45deg);
	box-shadow: 0 1px 0 #fff3d1 inset, 0 0 0 1px #7c5a29;
}

/* Popup buttons */
.center-tip .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 2px solid #3e2813;
	background: linear-gradient(180deg, #6f4322, #8a532a 60%, #6e4221);
	color: #f8e9cf;
	font: 700 14px/1 Georgia, "Times New Roman", serif;
	letter-spacing: 0.04em;
	cursor: pointer;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.center-tip .btn:hover {
	filter: brightness(1.06);
}

.center-tip .btn:active {
	transform: translateY(1px);
}

.center-tip .btn-primary {
	border-color: #7c5a29;
	background: linear-gradient(180deg, #f1d089, #c89b3a 60%, #9e762a);
	color: #2d1c07;
	box-shadow: 0 12px 28px rgba(184, 139, 58, 0.35), 0 0 0 1px rgba(124, 90, 41, .35) inset;
}

@media (prefers-reduced-motion: no-preference) {
	.center-tip {
		animation: pop-in 200ms cubic-bezier(.2, .9, .2, 1.1);
	}

	@keyframes pop-in {
		from {
			opacity: 0;
			transform: translateY(6px) scale(.98);
		}

		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}
}