/* Hawver Labs: Maze. A glowing maze on a dark board, filling the content width. */
.hawver-maze {
	/* Plugin-owned design tokens. Never rely on a theme's variables; override these to restyle. */
	--hawver-maze-frame: #0b111c;
	--hawver-maze-floor: #0f1724;
	/* The Hawver Labs color (Hawver Labs > Settings), with a fallback. */
	--hawver-maze-brand: var( --hawver-labs-color, #0092db );
	--hawver-maze-wall: var( --hawver-maze-brand );
	--hawver-maze-start: #3ddc84;
	--hawver-maze-finish: #ffc94a;
	--hawver-maze-trail: rgba( 255, 216, 74, 0.75 ); /* Yellow crumbs. */
	--hawver-maze-text: #e8f1ff;
	--hawver-maze-muted: #8fa3bf;

	margin: 2rem auto;
	padding: 1rem;
	border-radius: 16px;
	background: var( --hawver-maze-frame );
	box-shadow: 0 16px 36px rgba( 0, 0, 0, 0.35 );
	color: var( --hawver-maze-text );
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.hawver-maze__title {
	margin: 0.25rem 0 0.75rem;
	color: var( --hawver-maze-text );
	font-size: 1.4rem;
	text-align: center;
}

/* Above the maze: the coins big at the top left; Level and New maze over the time and moves
   in the middle; the unlockables on the right. */
.hawver-maze__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 0.75rem;
}
.hawver-maze__center {
	display: flex;
	flex-direction: column;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	gap: 0.6rem;
}
.hawver-maze__left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.hawver-maze__top-left {
	display: flex;
	flex-wrap: wrap;
	grid-column: 1;
	grid-row: 1;
	align-items: flex-start;
	align-self: start;
	justify-self: stretch; /* The whole column, so the items can centre in what's left. */
	gap: 0.75rem 1.75rem;
}
.hawver-maze__wallet {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
}
/* The items: five a row, easiest top left, hardest bottom right. */
.hawver-maze__items {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat( 5, auto );
	justify-content: center; /* Centred in the room beside the coins. */
	gap: 0.15rem;
}
.hawver-maze__wallet > .hawver-maze__coins {
	gap: 0.5rem;
}
.hawver-maze__wallet > .hawver-maze__coins strong {
	font-size: 2.2rem;
}
.hawver-maze__comma {
	margin: 0 -0.12em; /* Narrower than a digit, with a little room either side. */
}
.hawver-maze__coin-art {
	display: block;
	flex: none;
	filter: drop-shadow( 0 0 6px rgba( 255, 201, 74, 0.45 ) );
}
.hawver-maze__stats {
	display: flex;
	gap: 2rem;
	margin: 0;
	justify-self: center;
}
/* Each counter: a small label over a big number (twice the old size). */
.hawver-maze__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
}
/* The level's best, in gold, right above each current value. */
.hawver-maze__stat-best {
	color: var( --hawver-maze-brand );
	font: 700 0.95rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	cursor: help;
}
.hawver-maze__stat-label {
	color: var( --hawver-maze-muted );
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.hawver-maze__stats strong {
	color: var( --hawver-maze-text );
	font: 700 2.2rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}
/* Unlockables, top right, greyed out until earned. Row 1: the characters (the default far
   right, always in full color); row 2: the bow and arrow, then the speed boots. */
.hawver-maze__unlocks {
	display: flex;
	flex-direction: column;
	grid-column: 3;
	grid-row: 1;
	align-items: flex-end;
	justify-self: end;
	gap: 0.2rem;
}
.hawver-maze__unlock-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.2rem;
}
/* The characters: two rows of eight, filled from the top right (easiest) leftward. */
.hawver-maze__skins {
	display: grid;
	grid-template-columns: repeat( 8, auto );
	direction: rtl;
	gap: 0.15rem;
}
.hawver-maze__skins > * {
	direction: ltr;
}
/* A locked character: a question mark the size of a character. */
.hawver-maze__skin-mystery {
	display: block;
	width: 39px;
	height: 45px;
	color: #fff;
	font: 800 1.5rem / 45px ui-monospace, "SF Mono", Menlo, monospace;
	text-align: center;
}
/* A place for a character to come. */
.hawver-maze__skin-slot {
	width: 39px;
	height: 45px;
	padding: 0.3rem;
	color: rgba( 255, 255, 255, 0.35 );
	font: 800 1.5rem / 45px ui-monospace, "SF Mono", Menlo, monospace;
	text-align: center;
	filter: none;
	opacity: 1;
	cursor: default;
}
.hawver-maze .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}
/* The items: a little smaller than the characters. */
.hawver-maze__item {
	padding: 0.2rem;
}
/* The key that uses an item, top left of its icon (only once it's unlocked). */
.hawver-maze__item-key {
	position: absolute;
	top: -2px;
	left: -2px;
	z-index: 1;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 4px;
	box-sizing: border-box;
	background: #0b1220;
	color: #fff;
	font: 800 0.62rem / 14px ui-monospace, "SF Mono", Menlo, monospace;
	text-align: center;
	display: none;
}
.hawver-maze__item.is-on .hawver-maze__item-key {
	display: block;
}
/* The sword cooling down: a red overlay over its icon whose top drops to nothing. */
.hawver-maze__item--sword::after,
.hawver-maze__item--stopwatch::after,
.hawver-maze__item--bow::after,
.hawver-maze__item--key::after,
.hawver-maze__item--dynamite::after,
.hawver-maze__item--boots::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc( var( --hawver-maze-cool, 0 ) * 100% );
	border-radius: 6px;
	background: rgba( 220, 38, 38, 0.6 ); /* Red, dropping away as it cools. */
	pointer-events: none;
}
/* A count on an item (the dynamite left in this maze); spent items fade out, greyed. */
.hawver-maze__item {
	position: relative;
}
.hawver-maze__item-count {
	position: absolute;
	right: -2px;
	bottom: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 3px;
	border: 1.5px solid #000;
	border-radius: 999px;
	box-sizing: border-box;
	background: #fff;
	color: #000;
	font: 900 0.72rem / 15px system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}
.hawver-maze__item-count[hidden] {
	display: none;
}
.hawver-maze__unlock.is-on.is-spent {
	filter: grayscale( 1 ) brightness( 0.7 );
	opacity: 0.3;
}
/* The characters: buttons once unlocked, click to play as. */
button.hawver-maze__skin {
	margin: 0;
	border: 2px solid transparent;
	background: transparent;
	font: inherit;
	line-height: 0;
	cursor: not-allowed;
}
button.hawver-maze__skin.is-on {
	cursor: pointer;
}
button.hawver-maze__skin.is-on:hover {
	background: rgba( 255, 255, 255, 0.08 );
}
button.hawver-maze__skin.is-current {
	border-color: var( --hawver-maze-finish );
	background: rgba( 255, 201, 74, 0.12 );
}
button.hawver-maze__skin:focus-visible {
	outline: 2px solid var( --hawver-maze-finish );
	outline-offset: 1px;
}
.hawver-maze__unlock {
	display: inline-grid;
	place-items: center;
	padding: 0.3rem;
	border-radius: 10px;
	filter: grayscale( 1 ) brightness( 0.7 );
	opacity: 0.35;
	cursor: help;
	transition: opacity 0.4s, filter 0.4s;
}
.hawver-maze__unlock svg {
	display: block;
}
.hawver-maze__unlock.is-on {
	filter: drop-shadow( 0 0 6px rgba( 255, 201, 74, 0.55 ) );
	opacity: 1;
}
/* The wooden sword: plain and matte, no glow. */
.hawver-maze__item--sword.is-on:not(.is-master) {
	filter: none;
}
.hawver-maze__unlock.is-new {
	animation: hawver-maze-boots 0.6s ease-in-out 4;
}
@keyframes hawver-maze-boots {
	50% { transform: scale( 1.35 ) rotate( -8deg ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.hawver-maze__unlock.is-new { animation: none; }
}
/* On narrow screens: the counters on their own row, the buttons under them. */
@media ( max-width: 760px ) {
	.hawver-maze__bar {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.hawver-maze__center {
		grid-column: 1;
		grid-row: 2;
	}
	.hawver-maze__wallet > .hawver-maze__coins strong {
		font-size: 2rem;
	}
	.hawver-maze__bar {
		position: relative;
	}
	.hawver-maze__unlocks {
		position: absolute;
		top: 0;
		right: 0;
	}
}
.hawver-maze__level-wrap,
.hawver-maze__left button,
.hawver-maze__buttons button {
	white-space: nowrap;
}
/* Level: a little gold badge with the level menu. */
.hawver-maze__level-wrap {
	padding: 0.2rem 0.55rem;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var( --hawver-maze-brand );
	border-radius: 999px;
	color: var( --hawver-maze-finish );
}
/* The level number is a menu: back to any level reached so far. */
.hawver-maze__level-wrap .hawver-maze__level {
	margin: 0 0 0 0.3rem;
	padding: 0 1.1rem 0 0.35rem;
	border: 0;
	border-radius: 6px;
	background: transparent url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffc94a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) no-repeat right 0.2rem center / 0.6rem;
	color: var( --hawver-maze-finish );
	font: 700 1.1rem / 1.2 ui-monospace, "SF Mono", Menlo, monospace;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.hawver-maze__level-wrap .hawver-maze__level:disabled {
	padding-right: 0.35rem;
	background-image: none;
	opacity: 1;
	cursor: default;
}
.hawver-maze__level-wrap .hawver-maze__level option {
	background: var( --hawver-maze-frame );
	color: var( --hawver-maze-text );
}
.hawver-maze__level-wrap .hawver-maze__level:focus-visible {
	outline: 2px solid var( --hawver-maze-finish );
	outline-offset: 2px;
}
/* Best: the level's high score, beside the High scores button. */
/* New maze: a round refresh button. */
.hawver-maze__new {
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 1px solid var( --hawver-maze-wall );
	border-radius: 50%;
	background: transparent;
	color: var( --hawver-maze-wall );
	cursor: pointer;
	transition: transform 0.3s;
}
.hawver-maze__new:hover {
	background: var( --hawver-maze-wall );
	color: var( --hawver-maze-frame );
	transform: rotate( 90deg );
}
.hawver-maze__again {
	margin-top: 1.5rem;
	padding: 0.85rem 1.8rem;
	border: 2px solid var( --hawver-maze-wall );
	border-radius: 999px;
	background: transparent;
	color: var( --hawver-maze-wall );
	font: 800 1.15rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.hawver-maze__again:hover {
	background: var( --hawver-maze-wall );
	color: var( --hawver-maze-frame );
}

/* Guests: a slim bar asking for initials to save their progress. */
.hawver-maze__guest {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	border-radius: 10px;
	color: var( --hawver-maze-muted );
	font-size: 0.85rem;
	text-align: center;
	transition: border-color 0.3s, box-shadow 0.3s;
}
.hawver-maze__guest.is-asking {
	border-color: var( --hawver-maze-finish );
	box-shadow: 0 0 12px rgba( 255, 201, 74, 0.35 );
}
.hawver-maze__guest form,
.hawver-maze__guest p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
}
.hawver-maze__guest [hidden] {
	display: none;
}
.hawver-maze__guest input {
	width: 4.2em;
	margin-left: 0.4rem;
	padding: 0.25rem 0.4rem;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 6px;
	background: #07050c;
	color: var( --hawver-maze-finish );
	font: 800 1rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.2em;
	text-align: center;
	text-transform: uppercase;
}
.hawver-maze__guest button {
	padding: 0.3rem 0.8rem;
	border: 1px solid var( --hawver-maze-finish );
	border-radius: 999px;
	background: transparent;
	color: var( --hawver-maze-finish );
	font: 700 0.75rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.hawver-maze__guest strong {
	color: var( --hawver-maze-finish );
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.hawver-maze__guest[hidden] {
	display: none;
}
/* Saved: "Saving … as ABC · Change", small, above the Level pill. */
.hawver-maze__center .hawver-maze__guest-saved {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	color: var( --hawver-maze-muted );
	font-size: 0.75rem;
}
.hawver-maze__center .hawver-maze__guest-saved[hidden] {
	display: none;
}
.hawver-maze__center .hawver-maze__guest-change {
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --hawver-maze-finish );
	font: 800 0.85rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.hawver-maze__center .hawver-maze__guest-change:hover,
.hawver-maze__center .hawver-maze__guest-change:focus-visible {
	color: #fff;
}

/* Phones and tablets: item buttons under the maze (hidden where there's a mouse). */
.hawver-maze__touch {
	display: none;
}
@media ( hover: none ) and ( pointer: coarse ) {
	.hawver-maze__touch:not( [hidden] ) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 0.75rem;
	}
}
.hawver-maze__touch-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	min-width: 60px;
	padding: 0.4rem 0.5rem;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.06 );
	color: var( --hawver-maze-text );
	font: 700 0.65rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.hawver-maze__touch-button[hidden] {
	display: none;
}
/* The Sword button cooling down: a shade that shrinks away, as on its icon at the top. */
.hawver-maze__touch-button {
	position: relative;
	overflow: hidden;
}
.hawver-maze__touch-button[data-id="sword"]::after,
.hawver-maze__touch-button[data-id="stopwatch"]::after,
.hawver-maze__touch-button[data-id="bow"]::after,
.hawver-maze__touch-button[data-id="key"]::after,
.hawver-maze__touch-button[data-id="dynamite"]::after,
.hawver-maze__touch-button[data-id="boots"]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc( var( --hawver-maze-cool, 0 ) * 100% );
	background: rgba( 220, 38, 38, 0.6 ); /* Red, dropping away as it cools. */
	pointer-events: none;
}
.hawver-maze__touch-button.is-spent {
	filter: grayscale( 1 ) brightness( 0.7 );
	opacity: 0.35;
}
.hawver-maze__touch-button.is-down {
	border-color: var( --hawver-maze-finish );
	background: rgba( 255, 201, 74, 0.2 );
}
.hawver-maze__touch-button svg {
	display: block;
	pointer-events: none;
}

/* A phone held upright (script.js adds .is-phone): a compact header (coins and Bonus coins
   left, Level and the counters right), the maze as big as fits, the item buttons pinned
   to the bottom of the screen within thumb reach, and the characters below. */
.hawver-maze.is-phone {
	padding: 0.5rem;
}
.hawver-maze.is-phone .hawver-maze__bar {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	justify-items: stretch;
	gap: 0.25rem 0.75rem;
	margin-bottom: 0.5rem;
}
.hawver-maze.is-phone .hawver-maze__top-left {
	grid-column: 1;
	grid-row: 1;
}
.hawver-maze.is-phone .hawver-maze__items {
	display: none; /* The item buttons at the bottom do their job here. */
}
.hawver-maze.is-phone .hawver-maze__center {
	grid-column: 2;
	grid-row: 1;
	gap: 0.35rem;
}
.hawver-maze.is-phone .hawver-maze__stats {
	gap: 1rem;
}
.hawver-maze.is-phone .hawver-maze__stats strong {
	font-size: 1.6rem;
}
.hawver-maze.is-phone .hawver-maze__wallet > .hawver-maze__coins strong {
	font-size: 1.6rem;
}
.hawver-maze.is-phone .hawver-maze__canvas {
	/* Leave room for the header above and the item buttons below. */
	max-width: max( 16rem, calc( ( 100svh - 15rem ) * var( --hawver-maze-aspect, 0.62 ) ) );
}
.hawver-maze.is-phone .hawver-maze__touch:not( [hidden] ) {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin: 0.5rem -0.5rem 0;
	padding: 0.5rem 0.5rem calc( 0.5rem + env( safe-area-inset-bottom, 0px ) );
	background: linear-gradient( to top, rgba( 8, 12, 20, 0.98 ) 70%, rgba( 8, 12, 20, 0 ) );
}
.hawver-maze.is-phone .hawver-maze__touch:not( [hidden] ) {
	flex-wrap: nowrap;
	gap: 0.3rem;
}
.hawver-maze.is-phone .hawver-maze__touch-button {
	flex: 1 1 0;
	min-width: 0;
	min-height: 54px;
	padding: 0.35rem 0.1rem;
	font-size: 0.58rem;
}
.hawver-maze.is-phone .hawver-maze__buttons {
	margin-top: 0.75rem;
}
.hawver-maze__tray:empty {
	display: none;
}
.hawver-maze.is-phone .hawver-maze__tray {
	margin-top: 0.75rem;
}
.hawver-maze.is-phone .hawver-maze__tray .hawver-maze__unlocks {
	position: static;
	align-items: center;
}
.hawver-maze.is-phone .hawver-maze__tray .hawver-maze__skins {
	grid-template-columns: repeat( 8, minmax( 0, 1fr ) );
	justify-content: center;
	width: 100%;
}
.hawver-maze.is-phone .hawver-maze__tray .hawver-maze__unlocks {
	width: 100%;
}
.hawver-maze.is-phone .hawver-maze__tray .hawver-maze__unlock {
	padding: 0.15rem;
}
.hawver-maze.is-phone .hawver-maze__tray .hawver-maze__unlock svg {
	width: auto;
	height: 32px;
}
.hawver-maze.is-phone .hawver-maze__tray .hawver-maze__skin-mystery {
	width: auto;
	height: 32px;
	font-size: 1.1rem;
	line-height: 32px;
}

/* A tablet held upright (script.js adds .is-side-controls): the item buttons in a column
   left of the maze, from the bottom up, under the left thumb. */
.hawver-maze.is-side-controls .hawver-maze__stage {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: 0.75rem;
	align-items: end;
}
.hawver-maze.is-side-controls .hawver-maze__stage > .hawver-maze__touch {
	grid-column: 1;
	grid-row: 1;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-self: end;
	margin: 0;
}
.hawver-maze.is-side-controls .hawver-maze__stage > .hawver-maze__canvas {
	grid-column: 2;
	grid-row: 1;
}
.hawver-maze.is-side-controls .hawver-maze__stage > .hawver-maze__buttons {
	grid-column: 1 / -1;
}
.hawver-maze.is-side-controls .hawver-maze__touch-button {
	min-width: 72px;
	min-height: 64px;
}

/* The maze. script.js sets the canvas height so cells stay square. */
.hawver-maze__stage {
	position: relative;
}
.hawver-maze__canvas {
	display: block;
	width: 100%;
	/* Never taller than the window (the maze is about 2:3 high to wide, plus the strip
	   above it), so the whole thing fits on screen while playing. */
	/* The maze's width to height (script.js sets it per maze: wide or tall). */
	max-width: max( 18rem, calc( ( 100vh - 17rem ) * var( --hawver-maze-aspect, 1.55 ) ) );
	margin-inline: auto;
	background: transparent; /* The maze draws its own floor; the row above it is outside. */
	touch-action: none; /* Swipes move the character instead of scrolling. */
}
.hawver-maze__canvas:focus {
	outline: none;
}
.hawver-maze__canvas:focus-visible,
.hawver-maze__new:focus-visible,
.hawver-maze__again:focus-visible {
	outline: 3px solid var( --hawver-maze-finish );
	outline-offset: 3px;
}

/* The buttons above the maze. */
/* Under the maze: Best and High scores, centered. */
.hawver-maze__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 2rem; /* Room between Best and the High scores pill. */
	margin-top: 0.85rem;
}
.hawver-maze__scores-button,
.hawver-maze__board-close {
	padding: 0.5rem 1rem;
	border: 1px solid var( --hawver-maze-finish );
	border-radius: 999px;
	background: transparent;
	color: var( --hawver-maze-finish );
	font: 700 0.85rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.hawver-maze__scores-button:hover,
.hawver-maze__scores-button[aria-expanded="true"],
.hawver-maze__board-close:hover {
	background: var( --hawver-maze-finish );
	color: var( --hawver-maze-frame );
}
.hawver-maze__scores-button:focus-visible,
.hawver-maze__board-close:focus-visible {
	outline: 3px solid var( --hawver-maze-finish );
	outline-offset: 3px;
}

/* The master high score table: a panel over the maze, like the finish panel. */
.hawver-maze__board-title {
	margin: 0 0 0.25rem;
	color: var( --hawver-maze-finish );
	font: 800 clamp( 1.3rem, 4vw, 1.9rem ) / 1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 0 16px rgba( 255, 201, 74, 0.5 );
}
/* High scores: the player's own best on the left, everyone's on the right; stacked when narrow. */
.hawver-maze__boards {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.5fr );
	align-items: start;
	gap: 1.5rem;
	width: 100%;
}
@media ( max-width: 760px ) {
	.hawver-maze__boards {
		grid-template-columns: minmax( 0, 1fr );
	}
}
.hawver-maze__board-part {
	min-width: 0;
	overflow-x: auto;
}
.hawver-maze__board-sub {
	margin: 0 0 0.5rem;
	color: var( --hawver-maze-finish );
	font: 800 0.75rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.hawver-maze__table-hero {
	display: inline-grid;
	place-items: center;
	vertical-align: middle;
}
.hawver-maze__table-hero svg {
	display: block;
}
.hawver-maze__board-mine-empty[hidden] {
	display: none;
}
.hawver-maze__board-mine-empty {
	margin: 0;
	color: var( --hawver-maze-muted );
	font-size: 0.85rem;
}
.hawver-maze__table {
	min-width: min( 22rem, 90% );
	margin: 0;
	border-collapse: collapse;
	color: var( --hawver-maze-text );
	font: 700 1rem / 1.3 ui-monospace, "SF Mono", Menlo, monospace;
}
.hawver-maze__table[hidden] {
	display: none;
}
.hawver-maze__table th,
.hawver-maze__table td {
	padding: 0.35rem 0.9rem;
	border: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	text-align: center;
}
.hawver-maze__table thead th {
	color: var( --hawver-maze-muted );
	font: 700 0.75rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.hawver-maze__table tbody th {
	color: var( --hawver-maze-finish );
}
.hawver-maze__table tr.is-current td,
.hawver-maze__table tr.is-current th {
	background-color: rgba( 255, 201, 74, 0.12 );
}
.hawver-maze__board-empty {
	margin: 0.5rem 0;
	color: var( --hawver-maze-muted );
}

/* Finished: a panel over the maze. */
.hawver-maze__board,
.hawver-maze__win {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	border-radius: 8px;
	overflow: auto;
	background: rgba( 8, 12, 20, 0.78 );
	text-align: center;
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
}
.hawver-maze__win[hidden],
.hawver-maze__board[hidden],
.hawver-maze__board-empty[hidden] {
	display: none;
}
.hawver-maze__win-title {
	margin: 0;
	color: #fff;
	font: 400 2.16rem / 1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-shadow: 0 0 18px rgba( 255, 201, 74, 0.55 );
	text-align: center;
}
/* The coins just earned: big, centered under the title. */
.hawver-maze__win-coins {
	margin: 0;
	color: var( --hawver-maze-finish );
	font: 900 clamp( 2.2rem, 6.5vw, 3.6rem ) / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	text-align: center;
	text-shadow: 0 0 24px rgba( 255, 201, 74, 0.6 );
}
.hawver-maze__win-coins:empty {
	display: none;
}
/* The coins earned, in messy heaps above the Move on button (6rem in all above it). */
/* "+N coins!" with a pile of falling coins either side, evenly spaced between the title and
   what's been unlocked. */
.hawver-maze__win-coins-row {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
	margin: 1.75rem 0;
}
.hawver-maze__win-pile {
	position: relative;
	flex: none;
	width: 120px;
	height: 0;
	pointer-events: none;
}
.hawver-maze__win-coin {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 35%, #fff6c2, #f7c948 45%, #b8860b );
	box-shadow: inset 0 0 0 1.5px #a87410, 0 1px 2px rgba( 0, 0, 0, 0.5 );
}
/* Anything just unlocked: "You've unlocked:", then each as a big icon over its name. */
.hawver-maze__win-unlocks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}
.hawver-maze__win-unlocks[hidden] {
	display: none;
}
.hawver-maze__win-unlocks-title {
	margin: 0;
	color: var( --hawver-maze-text );
	font: 700 1.1rem / 1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hawver-maze__win-unlocks-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hawver-maze__win-unlocks-list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}
.hawver-maze__win-unlock-icon svg {
	display: block;
	filter: drop-shadow( 0 0 10px rgba( 255, 201, 74, 0.5 ) );
}
.hawver-maze__win-unlock-name {
	color: var( --hawver-maze-finish );
	font: 800 1.2rem / 1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* New high score: three initials, arcade style. */
.hawver-maze__initials {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0; /* Below what's been unlocked. */
}
.hawver-maze__initials[hidden] {
	display: none;
}
.hawver-maze__high {
	margin: 0;
	color: var( --hawver-maze-start );
	font: 800 1.1rem / 1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba( 61, 220, 132, 0.6 );
	animation: hawver-maze-blink 1s steps( 2, start ) infinite;
}
@keyframes hawver-maze-blink {
	to { visibility: hidden; }
}
.hawver-maze__initials-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}
.hawver-maze__initials-hint {
	color: var( --hawver-maze-muted );
	font-size: 0.8rem;
}
.hawver-maze__initials-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}
.hawver-maze__again.is-inline {
	margin-top: 0;
}
.hawver-maze__initials-input {
	box-sizing: content-box;
	/* Three wide letters plus the spacing after each (letter-spacing adds it after the last
	   one too, so text-indent balances it on the left). */
	width: 5.2ch;
	padding: 0.3rem 0.7rem;
	text-indent: 0.25em;
	border: 2px solid var( --hawver-maze-finish );
	border-radius: 8px;
	background: #05080f;
	color: var( --hawver-maze-finish );
	font: 800 2rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.25em;
	text-align: center;
	text-transform: uppercase;
}
.hawver-maze__initials-input:focus {
	outline: 3px solid rgba( 255, 201, 74, 0.45 );
	outline-offset: 2px;
}
.hawver-maze__save-note,
.hawver-maze__record {
	min-height: 1em;
	margin: 0;
	color: var( --hawver-maze-text );
	font-size: 0.9rem;
}
.hawver-maze__record:empty,
.hawver-maze__save-note:empty {
	display: none;
}
@media ( prefers-reduced-motion: reduce ) {
	.hawver-maze__high { animation: none; }
}
.hawver-maze__again {
	border-color: var( --hawver-maze-finish );
	color: var( --hawver-maze-finish );
}
.hawver-maze__again:hover {
	background: var( --hawver-maze-finish );
}


/* Under the coins: what finding the treasure pays on this maze (25, 20, 15 coins). */
.hawver-maze__payout {
	border-collapse: collapse;
	color: var( --hawver-maze-muted );
	font-size: 0.72rem;
	line-height: 1.2;
}
.hawver-maze__payout caption {
	padding-bottom: 0.2rem;
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
}
.hawver-maze__payout th,
.hawver-maze__payout td {
	padding: 0.12rem 0.4rem 0.12rem 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	text-align: left;
	white-space: nowrap;
}
.hawver-maze__payout th {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: var( --hawver-maze-finish );
	font: 700 0.8rem / 1.2 ui-monospace, "SF Mono", Menlo, monospace;
}
.hawver-maze__payout b {
	color: var( --hawver-maze-text );
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.hawver-maze__payout-coin {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 35%, #fff3b0, #f5c542 45%, #b8860b );
}

/* Under the maze: every unlockable, how to earn it, and locked or unlocked; coins on the right. */
.hawver-maze__unlockables {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}
.hawver-maze__unlockables-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 0.75rem;
}
.hawver-maze__unlockables-title {
	margin: 0;
	color: var( --hawver-maze-text );
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.hawver-maze__coins {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var( --hawver-maze-muted );
	font-size: 0.85rem;
}
.hawver-maze__coins strong {
	color: var( --hawver-maze-finish );
	font: 700 1.2rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
	font-variant-numeric: tabular-nums;
}
.hawver-maze__coin {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 35%, #fff3b0, #f5c542 45%, #b8860b );
	box-shadow: inset 0 0 0 1.5px #b8860b;
}
.hawver-maze__unlockables-list {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	align-items: stretch;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Items in columns 1 and 2, characters in 3 and 4. Every column fills the same height, so
   the items (fewer of them) grow taller and the columns line up at the bottom. */
.hawver-maze__unlockables-column {
	display: flex;
	min-width: 0;
}
.hawver-maze__unlockables-column > ol {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hawver-maze__unlockables-column .hawver-maze__unlockable {
	flex: 1 1 auto;
}
/* A locked item's description past its first five letters: faded and unreadable. */
.hawver-maze__secret {
	filter: blur( 4px );
	opacity: 0.35;
	user-select: none;
}
.hawver-maze__unlockable-text strong.hawver-maze__mystery {
	color: rgba( 255, 255, 255, 0.55 );
	font: 800 1.3rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
}
.hawver-maze__unlockable.is-soon {
	opacity: 0.5;
}
.hawver-maze__soon {
	color: rgba( 255, 255, 255, 0.5 );
	font: 800 1.6rem / 1 ui-monospace, "SF Mono", Menlo, monospace;
}
@media ( max-width: 1000px ) {
	.hawver-maze__unlockables-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 560px ) {
	.hawver-maze__unlockables-list {
		grid-template-columns: minmax( 0, 1fr );
	}
}
.hawver-maze__unlockable {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.04 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.08 );
}
/* Mute: a speaker at the far left of the High scores row. */
.hawver-maze__buttons .hawver-maze__mute-button {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
}
.hawver-maze__buttons .hawver-maze__mute-button[aria-pressed="true"] {
	border-color: #ef4444;
	background: #ef4444;
	color: #fff;
}
/* Debug mode (admins): a red button at the right of the High scores row. While on, the
   header's items and characters can be clicked to turn them on and off. */
.hawver-maze__buttons {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
}
/* With room beside the maze (script.js adds .has-sides): the buttons sit in those side
   columns, bottom-aligned with the maze. */
.hawver-maze.has-sides .hawver-maze__buttons {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin: 0;
	pointer-events: none;
}
.hawver-maze.has-sides .hawver-maze__buttons > * {
	max-width: calc( var( --hawver-maze-side, 150px ) - 12px );
	overflow: visible;
	pointer-events: auto;
}
.hawver-maze.has-sides .hawver-maze__debug-tools {
	margin-top: 0;
}
.hawver-maze__buttons-middle {
	display: flex;
	flex-wrap: wrap; /* Reset goes above High scores when the side column is too narrow. */
	justify-content: flex-end; /* High scores at the bottom right, Reset (debug) to its left. */
	align-items: center;
	gap: 0.5rem;
}
/* On the right, top to bottom: mute, High scores, then (admins) Debug, Coins to 0 and
   +500 coins. */
.hawver-maze__debug-tools {
	display: flex;
	grid-column: 3;
	flex-direction: column;
	align-items: flex-end;
	justify-self: end;
	gap: 0.4rem;
	margin-top: 1rem;
}
.hawver-maze__debug-coins {
	display: flex;
	flex-direction: column; /* Coins to 0 over +500 coins. */
	align-items: stretch;
	gap: 0.4rem;
}
.hawver-maze__debug-coins[hidden] {
	display: none;
}
.hawver-maze__buttons .hawver-maze__debug-coins button,
.hawver-maze__buttons .hawver-maze__debug-reset {
	position: relative;
	padding: 0.4rem 0.9rem;
	border: 1px solid #ef4444;
	border-radius: 999px;
	background: transparent;
	color: var( --hawver-maze-finish, #ffc94a );
	font: 800 0.75rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.hawver-maze__buttons .hawver-maze__debug-reset {
	color: #fff;
}
/* A note that floats up from a coin button when it's done its job. */
.hawver-maze__debug-done {
	position: absolute;
	top: 50%;
	right: calc( 100% + 6px ); /* To the left of the button. */
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: #16a34a;
	color: #fff;
	font: 800 0.7rem / 1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-transform: none;
	pointer-events: none;
	transform: translateY( -50% );
	animation: hawver-maze-done 1.4s ease-out forwards;
}
/* Slides out to the left, holds, then fades away. */
@keyframes hawver-maze-done {
	0% { opacity: 0; transform: translate( 12px, -50% ); }
	15% { opacity: 1; transform: translate( 0, -50% ); }
	75% { opacity: 1; transform: translate( -4px, -50% ); }
	100% { opacity: 0; transform: translate( -14px, -50% ); }
}
.hawver-maze__buttons .hawver-maze__debug-reset[hidden] {
	display: none;
}
.hawver-maze__buttons .hawver-maze__debug-reset[data-armed] {
	background: #ef4444;
	color: #fff;
}
.hawver-maze__debug-button {
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 999px;
	background: transparent;
	color: rgba( 255, 255, 255, 0.4 );
	font: 800 0.75rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.hawver-maze__debug-button[hidden] {
	display: none;
}
.hawver-maze__debug-button[aria-pressed="true"] {
	border-color: #ef4444;
	color: #ef4444;
}
.hawver-maze.is-debug-mode .hawver-maze__skins .hawver-maze__unlock,
.hawver-maze.is-debug-mode .hawver-maze__item {
	outline: 1px dashed rgba( 248, 113, 113, 0.6 );
	outline-offset: -1px;
	cursor: pointer;
}
.hawver-maze__unlockable-icon {
	display: grid;
	flex: none;
	width: 42px;
	place-items: center;
	filter: grayscale( 1 ) brightness( 0.7 );
	opacity: 0.4;
}
/* Unlocked: no badge; the text takes the full width and the icon, in full color and twice
   the size, sits on the right. */
.hawver-maze__unlockable.is-on .hawver-maze__unlockable-icon {
	order: 2;
	width: auto;
	min-width: 56px;
	filter: none;
	opacity: 1;
}
.hawver-maze__unlockable.is-on .hawver-maze__unlockable-icon svg {
	width: auto;
	height: 56px;
}
.hawver-maze__unlockable-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
	color: var( --hawver-maze-muted );
	font-size: 0.8rem;
	line-height: 1.35;
}
.hawver-maze__unlockable-text strong {
	color: var( --hawver-maze-text );
	font-size: 0.9rem;
}
.hawver-maze__unlockable-text em {
	color: var( --hawver-maze-muted );
	font-style: normal;
	opacity: 0.8;
}
.hawver-maze__unlockable-progress {
	color: var( --hawver-maze-finish );
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	white-space: nowrap;
}
.hawver-maze__unlockable-state {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.3rem;
	color: var( --hawver-maze-muted );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.hawver-maze__unlockable-state.is-locked {
	opacity: 0.55;
}


/* For screen readers only: announces the finish. */
.hawver-maze__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* On narrow screens the finish panel sits under the maze rather than over it. */
@media ( max-width: 600px ) {
	.hawver-maze__board,
	.hawver-maze__win {
		position: static;
		margin-top: 0.75rem;
		padding: 1rem;
	}
}
@media ( max-width: 480px ) {
	.hawver-maze {
		padding: 0.6rem;
		border-radius: 12px;
	}
}

/* The "+N" for a picked-up coin, flying from the maze to the coin total. */
.hawver-maze__pop {
	position: fixed;
	z-index: 1000;
	pointer-events: none;
	font: 800 1.4rem / 1 ui-monospace, Menlo, monospace;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.8 ), 0 0 10px currentColor;
	transform: translate( -50%, -50% );
	white-space: nowrap;
}
.hawver-maze__coin-count {
	display: inline-block; /* So it can bump when a "+N" lands on it. */
}

/* The characters moved out of the header: they're picked from the Unlockables list. */
.hawver-maze__unlocks[hidden] {
	display: none !important;
}
.hawver-maze__unlockable.is-pickable {
	cursor: pointer;
	transition: box-shadow 0.15s, background 0.15s;
}
.hawver-maze__unlockable.is-pickable:hover,
.hawver-maze__unlockable.is-pickable:focus-visible {
	outline: none;
	background: rgba( 255, 255, 255, 0.08 );
	box-shadow: inset 0 0 0 1px rgba( 255, 201, 74, 0.5 );
}
/* The character being played: a ring in the Hawver Labs color round its box, softly glowing. */
.hawver-maze__unlockable.is-current {
	background: color-mix( in srgb, var( --hawver-maze-brand ) 10%, transparent );
	box-shadow: inset 0 0 0 2px var( --hawver-maze-brand ), 0 0 14px color-mix( in srgb, var( --hawver-maze-brand ) 40%, transparent );
}
.hawver-maze__unlockable.is-current:hover,
.hawver-maze__unlockable.is-current:focus-visible {
	box-shadow: inset 0 0 0 2px var( --hawver-maze-brand ), 0 0 18px color-mix( in srgb, var( --hawver-maze-brand ) 55%, transparent );
}
.hawver-maze__live {
	display: block;
	width: 56px;
	height: 56px;
}
.hawver-maze__playing {
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var( --hawver-maze-finish, #ffc94a );
	color: #111;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}
.hawver-maze__quote {
	font-style: italic;
}

/* The High scores button's border in the Hawver Labs color. */
.hawver-maze__scores-button {
	border-color: var( --hawver-maze-brand );
}

/* ---------- The finale (beating Level 20) ----------
   A sky of drifting puffy clouds, words crawling away into the distance, two boomboxes
   thumping and a laid-back bowler at the bottom. */
.hawver-maze-finale {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	background: linear-gradient( #2b7fd8 0%, #6cb6f0 55%, #b9e1ff 100% );
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	animation: hawver-maze-finale-in 0.8s ease-out;
}
@keyframes hawver-maze-finale-in {
	from { opacity: 0; }
}
/* Puffy clouds, drifting slowly across. */
.hawver-maze-finale__cloud {
	position: absolute;
	left: -30%;
	width: calc( 260px * var( --hawver-maze-cloud-size, 1 ) );
	height: calc( 80px * var( --hawver-maze-cloud-size, 1 ) );
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 -10px 18px rgba( 160, 200, 240, 0.45 );
	opacity: 0.95;
	animation: hawver-maze-cloud 26s linear infinite;
	transition: background 0.6s, box-shadow 0.6s;
	animation-delay: var( --hawver-maze-cloud-delay, 0s );
}
.hawver-maze-finale__cloud::before,
.hawver-maze-finale__cloud::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: #fff;
}
.hawver-maze-finale__cloud::before {
	left: 18%;
	bottom: 35%;
	width: 42%;
	height: 120%;
}
.hawver-maze-finale__cloud::after {
	left: 48%;
	bottom: 30%;
	width: 34%;
	height: 95%;
}
@keyframes hawver-maze-cloud {
	to { transform: translateX( 170vw ); }
}
/* The crawl: tilted back, scrolling up and away. */
.hawver-maze-finale__stage {
	position: absolute;
	inset: 0 0 22% 0;
	perspective: 700px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( transparent 0%, #000 30% );
	mask-image: linear-gradient( transparent 0%, #000 30% );
}
.hawver-maze-finale__crawl {
	position: absolute;
	left: 50%;
	top: 100%;
	width: min( 92vw, 1000px );
	color: #ffd84a;
	font-size: clamp( 2rem, 5.6vw, 4rem );
	font-weight: 800;
	line-height: 1.45;
	text-align: justify;
	text-shadow: 0 2px 0 #7a4b00, 0 0 14px rgba( 0, 0, 0, 0.35 );
	transform-origin: 50% 100%;
	transform: translateX( -50% ) rotateX( 18deg );
}
.hawver-maze-finale__crawl h2 {
	margin: 0 0 1.5rem;
	color: inherit;
	font-size: 2.2em;
	line-height: 1.1;
	text-align: center;
	letter-spacing: 0.06em;
}
.hawver-maze-finale__intro {
	color: #e0f2fe;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.4 );
}
.hawver-maze-finale__end {
	margin-top: 3rem;
	font-size: 2em;
	text-align: center;
}
.hawver-maze-finale__end-sub {
	text-align: center;
	font-size: 0.8em;
}
@keyframes hawver-maze-crawl {
	from { transform: translateX( -50% ) rotateX( 28deg ) translateY( 0 ); }
	to { transform: translateX( -50% ) rotateX( 28deg ) translateY( -260% ); }
}
/* Along the bottom: the boomboxes either side of the bowler. */
.hawver-maze-finale__ground {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp( 0.5rem, 4vw, 3rem );
	height: 22%;
	padding: 0 1rem 1rem;
	background: linear-gradient( #7cc36b, #4c9a3f );
}
.hawver-maze-finale__boombox {
	width: clamp( 110px, 22vw, 220px );
	height: auto;
	margin-bottom: 0.5rem;
	animation: hawver-maze-thump 0.5s ease-in-out infinite;
}
.hawver-maze-finale__boombox.is-flip {
	animation-delay: 0.25s;
}
.hawver-maze-finale__speaker {
	transform-box: fill-box;
	transform-origin: center;
	animation: hawver-maze-speaker 0.5s ease-in-out infinite;
}
@keyframes hawver-maze-thump {
	50% { transform: translateY( -6px ) rotate( -1.5deg ); }
}
@keyframes hawver-maze-speaker {
	50% { transform: scale( 1.12 ); }
}
.hawver-maze-finale__bowler {
	width: clamp( 80px, 14vw, 140px );
	height: auto;
	transform-origin: 50% 100%;
	animation: hawver-maze-sway 2.4s ease-in-out infinite;
}
.hawver-maze-finale__mug {
	transform-box: fill-box;
	transform-origin: 0% 100%;
	animation: hawver-maze-sip 4.8s ease-in-out infinite;
}
@keyframes hawver-maze-sway {
	50% { transform: rotate( 2.5deg ); }
}
@keyframes hawver-maze-sip {
	0%, 70%, 100% { transform: rotate( 0 ); }
	80%, 90% { transform: rotate( -22deg ) translate( -6px, -18px ); }
}
.hawver-maze-finale__close {
	position: absolute;
	top: max( 1rem, env( safe-area-inset-top, 0px ) );
	right: 1rem;
	padding: 0.55rem 1.1rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: rgba( 15, 23, 42, 0.55 );
	color: #fff;
	font: 800 0.85rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
@media ( prefers-reduced-motion: reduce ) {
	.hawver-maze-finale *,
	.hawver-maze-finale {
		animation-duration: 0.01s !important;
		animation-iteration-count: 1 !important;
	}
	.hawver-maze-finale__crawl {
		animation: none;
		top: 5%;
		transform: translateX( -50% );
	}
}

/* High scores (Everyone): conditional formatting. */
/* A record set with this player's initials: the whole row brighter. */
.hawver-maze__table tr.is-mine td,
.hawver-maze__table tr.is-mine th {
	background-color: color-mix( in srgb, var( --hawver-maze-brand ) 32%, transparent );
	color: #fff;
}
.hawver-maze__table tr.is-mine th {
	color: var( --hawver-maze-finish );
}
/* Date: the older the record, the bolder and brighter (it has stood the longest). */
.hawver-maze__table td.is-dated {
	color: color-mix( in srgb, var( --hawver-maze-finish ) calc( var( --hawver-maze-age, 0 ) * 100% ), var( --hawver-maze-muted ) );
	font-size: calc( 1em + var( --hawver-maze-age, 0 ) * 0.22em );
	font-weight: calc( 400 + var( --hawver-maze-age, 0 ) * 500 );
	opacity: calc( 0.4 + var( --hawver-maze-age, 0 ) * 0.6 );
	text-shadow: 0 0 calc( var( --hawver-maze-age, 0 ) * 10px ) color-mix( in srgb, var( --hawver-maze-finish ) calc( var( --hawver-maze-age, 0 ) * 80% ), transparent );
}
.hawver-maze__pop.is-picture {
	line-height: 0;
	text-shadow: none;
	filter: drop-shadow( 0 0 6px rgba( 255, 255, 255, 0.65 ) ); /* A shine around whatever flies (dynamite box, gems). */
}
/* An item resting (cooling down): the icon behind the red overlay is greyed out. */
.hawver-maze__item.is-cooling > svg,
.hawver-maze__touch-button.is-cooling > svg {
	filter: grayscale( 1 ) brightness( 0.65 );
}

/* A big message over the maze for a moment ("Key Required!"). */
.hawver-maze__flash {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	padding: 0.5em 1em;
	border: 3px solid #ef4444;
	border-radius: 14px;
	background: rgba( 15, 23, 42, 0.85 );
	color: #fde047;
	font: 900 clamp( 1.6rem, 6vw, 3.2rem ) / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-shadow: 0 0 18px rgba( 239, 68, 68, 0.8 );
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate( -50%, -50% ) scale( 0.6 );
}
.hawver-maze__flash.is-on {
	animation: hawver-maze-flash 1.8s ease-out forwards;
}
@keyframes hawver-maze-flash {
	0% { opacity: 0; transform: translate( -50%, -50% ) scale( 0.6 ); }
	12% { opacity: 1; transform: translate( -50%, -50% ) scale( 1.12 ); }
	20% { transform: translate( -50%, -50% ) scale( 1 ); }
	28%, 38% { transform: translate( -50%, -50% ) scale( 1 ) rotate( -2deg ); }
	33%, 43% { transform: translate( -50%, -50% ) scale( 1 ) rotate( 2deg ); }
	48%, 70% { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); }
	100% { opacity: 0; transform: translate( -50%, -50% ) scale( 1.05 ); }
}

/* The finale, laid out: the picture top left, boomboxes in the bottom corners, the big
   bowler in the middle with High Scores to his left and Back to the maze to his right,
   the characters dancing either side, and rain from the clouds that pass over him. */
.hawver-maze-finale__picture {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: min( 500px, 45vw );
	height: min( 500px, 45vw );
}
.hawver-maze-finale__picture img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.hawver-maze-finale__ground {
	--hawver-maze-boombox: clamp( 100px, 15vw, 200px );
	--hawver-maze-bowler: clamp( 220px, 36vw, 420px );
	height: 26%;
	justify-content: center;
	gap: clamp( 0.5rem, 2vw, 2rem );
	padding: 0 calc( var( --hawver-maze-boombox ) + 1.25rem ) 0.5rem;
}
.hawver-maze-finale__ground .hawver-maze-finale__boombox {
	width: var( --hawver-maze-boombox );
}
.hawver-maze-finale__boombox {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	margin: 0;
	z-index: 2;
}
.hawver-maze-finale__boombox.is-flip {
	right: 0.75rem;
	left: auto;
}
.hawver-maze-finale__middle {
	display: flex;
	align-items: flex-end;
	gap: clamp( 0.5rem, 2vw, 1.5rem );
	z-index: 3;
}
.hawver-maze-finale__bowler {
	width: var( --hawver-maze-bowler );
	margin-bottom: -0.5rem;
}
.hawver-maze-finale__middle .hawver-maze-finale__close,
.hawver-maze-finale__scores {
	position: static;
	margin-bottom: 1rem;
	padding: 0.55rem 1.1rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: rgba( 15, 23, 42, 0.6 );
	color: #fff;
	font: 800 0.85rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}
.hawver-maze-finale__dancers {
	/* On the grass between the boombox and the bowler, above the buttons. */
	position: absolute;
	bottom: calc( 3.25rem + 100px );
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: flex-end;
	justify-content: center;
	gap: 0.25rem;
	z-index: 3;
}
.hawver-maze-finale__dancers.is-left {
	left: calc( var( --hawver-maze-boombox ) + 1.5rem );
	right: calc( 50% + var( --hawver-maze-bowler ) / 2 );
}
.hawver-maze-finale__dancers.is-right {
	right: calc( var( --hawver-maze-boombox ) + 1.5rem );
	left: calc( 50% + var( --hawver-maze-bowler ) / 2 );
}
.hawver-maze-finale__dancer {
	display: grid;
	place-items: center;
	width: clamp( 40px, 5vw, 64px );
	height: clamp( 40px, 5vw, 64px );
}
.hawver-maze-finale__dancer canvas {
	width: 100%;
	height: 100%;
}
.hawver-maze-finale__dancer.is-locked {
	color: rgba( 255, 255, 255, 0.75 );
	font: 900 clamp( 1.4rem, 3vw, 2.2rem ) / 1 system-ui, sans-serif;
	text-shadow: 0 2px 4px rgba( 0, 0, 0, 0.35 );
}
.hawver-maze-finale__rain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.hawver-maze-finale__drop {
	position: fixed;
	width: 3px;
	height: 24px;
	border-radius: 3px;
	background: linear-gradient( rgba( 30, 64, 175, 0 ), #1d4ed8 );
	animation: hawver-maze-drop 0.55s linear forwards;
}
/* A rain cloud: dark grey while it's over the bowler. */
.hawver-maze-finale__cloud.is-raining,
.hawver-maze-finale__cloud.is-raining::before,
.hawver-maze-finale__cloud.is-raining::after {
	background: #64748b;
}
.hawver-maze-finale__cloud.is-raining {
	box-shadow: inset 0 -12px 20px rgba( 30, 41, 59, 0.6 );
}
@keyframes hawver-maze-drop {
	to { transform: translateY( var( --hawver-maze-fall, 200px ) ); opacity: 0.7; }
}

/* Replay the finale: a round button in the top right. */
.hawver-maze-finale__replay {
	position: absolute;
	top: max( 1rem, env( safe-area-inset-top, 0px ) );
	right: 1rem;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba( 15, 23, 42, 0.55 );
	color: #fff;
	cursor: pointer;
}
.hawver-maze-finale__replay:hover {
	background: rgba( 15, 23, 42, 0.8 );
}

/* The items below the maze, in one centred row. */
.hawver-maze__items.is-below {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	margin: 0.75rem auto 0;
}
.hawver-maze.is-phone .hawver-maze__items.is-below {
	display: none; /* The item buttons at the bottom do their job here. */
}
/* In the buttons row under the maze: the items in the middle column, tops level with the
   mute button at the top of the right-hand stack. */
.hawver-maze__buttons {
	align-items: start;
}
.hawver-maze__buttons > .hawver-maze__items.is-below {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin: 0;
}
.hawver-maze__buttons > .hawver-maze__debug-tools {
	grid-row: 1;
	align-self: start;
	margin-top: 0;
}
/* In the row below the maze: more room between items, each key centred just below its
   item, and the count (15% bigger) at the top right. */
.hawver-maze__items.is-below {
	gap: 0.85rem;
	padding-bottom: 14px; /* Room for the keys below. */
}
.hawver-maze__items.is-below .hawver-maze__item-key {
	top: auto;
	bottom: -14px;
	left: 50%;
	transform: translateX( -50% );
}
.hawver-maze__items.is-below .hawver-maze__item-count {
	top: -4px;
	right: -4px;
	bottom: auto;
	min-width: 21px;
	height: 21px;
	font-size: 0.83rem;
	line-height: 18px;
}

/* The logo, top right of the board, outside the maze. */
.hawver-maze__logo {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	width: auto;
	max-width: 100%;
	height: 96px;
	object-fit: contain;
}
.hawver-maze.is-phone .hawver-maze__logo {
	display: none;
}

/* The pills in the bottom-right stack: text right-aligned, an icon inside on the right. */
.hawver-maze__buttons .hawver-maze__scores-button,
.hawver-maze__buttons .hawver-maze__debug-reset,
.hawver-maze__buttons .hawver-maze__debug-button,
.hawver-maze__buttons .hawver-maze__debug-coins button {
	display: inline-flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.8em; /* Room between the text and its icon. */
	min-width: 10.5rem;
	text-align: right;
}
.hawver-maze__buttons .hawver-maze__debug-coins {
	align-items: flex-end;
}
.hawver-maze__buttons .hawver-maze__scores-button::after,
.hawver-maze__buttons .hawver-maze__debug-reset::after,
.hawver-maze__buttons .hawver-maze__debug-button::after,
.hawver-maze__buttons .hawver-maze__debug-coins button::after {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: var( --hawver-maze-pill-icon ) center / contain no-repeat;
	mask: var( --hawver-maze-pill-icon ) center / contain no-repeat;
}
.hawver-maze__buttons .hawver-maze__debug-reset {
	min-width: 0;
}
.hawver-maze__buttons .hawver-maze__scores-button {
	--hawver-maze-pill-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8M12%2017v4M7%204h10v5a5%205%200%200%201-10%200z%22/%3E%3Cpath%20d%3D%22M7%206H4a3%203%200%200%200%203%204M17%206h3a3%203%200%200%201-3%204%22/%3E%3C/svg%3E");
}
.hawver-maze__buttons .hawver-maze__debug-reset {
	--hawver-maze-pill-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%202.64-6.36%22/%3E%3Cpath%20d%3D%22M3%203v6h6%22/%3E%3C/svg%3E");
}
.hawver-maze__buttons .hawver-maze__debug-button {
	--hawver-maze-pill-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%2210%22%20height%3D%2214%22%20rx%3D%225%22/%3E%3Cpath%20d%3D%22M12%206V3M9%203l1.5%202M15%203l-1.5%202M3%2011h4M17%2011h4M3%2017h4M17%2017h4%22/%3E%3C/svg%3E");
}
.hawver-maze__buttons .hawver-maze__debug-more {
	--hawver-maze-pill-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22M12%208v8M8%2012h8%22/%3E%3C/svg%3E");
}
.hawver-maze__buttons .hawver-maze__debug-max {
	--hawver-maze-pill-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020V6M6%2012l6-6%206%206M5%204h14%22/%3E%3C/svg%3E");
}
/* The music controls: a small volume slider, next track, then mute, in one row. */
.hawver-maze__audio {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.hawver-maze__volume {
	width: 72px;
	accent-color: var( --hawver-maze-brand );
	cursor: pointer;
}
.hawver-maze__volume[hidden],
.hawver-maze__next-track[hidden] {
	display: none;
}
.hawver-maze__buttons .hawver-maze__next-track {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 50%;
	background: transparent;
	color: var( --hawver-maze-text );
	cursor: pointer;
}
.hawver-maze__buttons .hawver-maze__next-track:hover {
	border-color: var( --hawver-maze-brand );
	color: var( --hawver-maze-brand );
}

/* Top right of the board: the buttons (music controls, High scores, debug) to the left of
   the logo. */
.hawver-maze__top-right {
	display: flex;
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	align-items: flex-start;
	gap: 1rem;
}
.hawver-maze__top-right .hawver-maze__logo {
	grid-column: auto;
	grid-row: auto;
}
.hawver-maze .hawver-maze__top-right .hawver-maze__buttons,
.hawver-maze.has-sides .hawver-maze__top-right .hawver-maze__buttons {
	position: static;
	display: block;
	margin: 0;
	pointer-events: auto;
}
.hawver-maze .hawver-maze__top-right .hawver-maze__buttons > *,
.hawver-maze.has-sides .hawver-maze__top-right .hawver-maze__buttons > * {
	max-width: none;
}
.hawver-maze__top-right .hawver-maze__debug-tools {
	margin-top: 0;
	align-items: flex-end;
}
/* The items: always just below the maze, centred. */
.hawver-maze__items.is-below {
	margin-top: 0.75rem;
}
/* The items: in the strip under the maze, level with the player's starting spot. */
.hawver-maze__stage > .hawver-maze__items.is-below {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var( --hawver-maze-below, 80px );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 0 12px;
	box-sizing: border-box;
	pointer-events: none;
}
.hawver-maze__stage > .hawver-maze__items.is-below > * {
	pointer-events: auto;
}

/* High scores: one table, their best on the left, the level once in the middle, everyone's
   records on the right. */
.hawver-maze__table--both {
	min-width: 0;
}
.hawver-maze__table--both .is-num {
	font-weight: 400; /* Time and moves: lighter. */
}
.hawver-maze__table-groups th {
	padding-bottom: 0.6rem;
	border-bottom: 0;
	color: var( --hawver-maze-finish );
	font: 800 0.75rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.hawver-maze__table-groups .hawver-maze__table-gap {
	border-bottom: 0;
}
.hawver-maze__table .hawver-maze__table-level {
	padding-inline: 1.1rem;
	border-inline: 1px solid rgba( 255, 255, 255, 0.15 );
	background-color: rgba( 255, 255, 255, 0.04 );
	color: var( --hawver-maze-finish );
	font-weight: 800;
}
.hawver-maze__table-user {
	display: inline-grid;
	place-items: center;
	color: var( --hawver-maze-muted );
	vertical-align: middle;
	cursor: help;
}
.hawver-maze__table-user:hover,
.hawver-maze__table-user:focus-visible {
	color: var( --hawver-maze-text );
	outline: none;
}
.hawver-maze__boards {
	grid-template-columns: minmax( 0, 1fr );
	justify-items: center;
}
.hawver-maze__boards .hawver-maze__board-part {
	max-width: 100%;
}
/* More room either side of the level, and stronger "Your best" / "Everyone" headings. */
.hawver-maze__table .hawver-maze__table-level {
	padding-inline: 2rem;
}
.hawver-maze__table-groups th {
	padding: 0.45rem 0.9rem;
	border-bottom: 2px solid var( --hawver-maze-finish );
	color: var( --hawver-maze-finish );
	font: 900 0.95rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.16em;
	text-shadow: 0 0 10px rgba( 255, 201, 74, 0.35 );
}
/* Under 1024px: the two halves stacked, one table above the other. */
.hawver-maze__board-stacked {
	display: none;
}
@media ( max-width: 1023px ) {
	.hawver-maze__table--both {
		display: none;
	}
	.hawver-maze__board-stacked {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
	.hawver-maze__board-stacked .hawver-maze__board-sub {
		margin-top: 0.75rem;
		color: var( --hawver-maze-finish );
		font: 900 0.95rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
		letter-spacing: 0.16em;
		text-shadow: 0 0 10px rgba( 255, 201, 74, 0.35 );
	}
	.hawver-maze__board-stacked .hawver-maze__table-level {
		padding-inline: 1rem;
	}
}
/* The high scores (and the finish panel) cover the maze only, stopping above the strip
   with the items, and scroll inside when they're taller (stacked tables on a phone). */
.hawver-maze__board,
.hawver-maze__win {
	bottom: var( --hawver-maze-below, 0px );
	justify-content: safe center;
	z-index: 4;
}
.hawver-maze__board {
	padding-block: 1rem;
	box-sizing: border-box;
}
/* Phones: while the high scores are open, the item buttons (a bar that sticks to the bottom
   of the screen) step aside so they don't sit over the tables. */
.hawver-maze.is-board-open .hawver-maze__touch {
	display: none;
}
/* The level column: a little more room either side (and a gap from the columns beside it). */
.hawver-maze__table--both .hawver-maze__table-level {
	padding-inline: 2.75rem;
}
.hawver-maze__table--both td:nth-child( 4 ) {
	padding-right: 1.5rem;
}
.hawver-maze__table--both td:nth-child( 6 ) {
	padding-left: 1.5rem;
}
@media ( max-width: 1023px ) {
	.hawver-maze__board-stacked .hawver-maze__table-level {
		padding-inline: 1.5rem;
	}
}
/* The level column: snug inside, with the extra room on its outside (a clear gap either
   side of its shaded band, rather than a wider band). */
.hawver-maze__table--both .hawver-maze__table-level {
	padding-inline: 1.1rem;
	border-inline: 1.25rem solid transparent;
	background-clip: padding-box;
	box-shadow: inset 1px 0 rgba( 255, 255, 255, 0.15 ), inset -1px 0 rgba( 255, 255, 255, 0.15 );
}
.hawver-maze__table--both td:nth-child( 4 ),
.hawver-maze__table--both td:nth-child( 6 ) {
	padding-inline: 0.9rem;
}
.hawver-maze__table-groups .hawver-maze__table-gap {
	border-inline: 1.25rem solid transparent;
}
@media ( max-width: 1023px ) {
	.hawver-maze__board-stacked .hawver-maze__table-level {
		padding-inline: 1rem;
		border-right: 0.75rem solid transparent;
		background-clip: padding-box;
	}
}
/* "Time" and "Moves" sit underneath their counters. */
.hawver-maze__stat .hawver-maze__stat-label {
	order: 3;
	margin-top: 0.15rem;
}

/* Full screen: a small square button at the bottom right of the maze. */
.hawver-maze__fullscreen {
	position: absolute;
	right: 4px;
	bottom: 4px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 6px;
	background: rgba( 11, 17, 28, 0.75 );
	color: var( --hawver-maze-text );
	cursor: pointer;
}
.hawver-maze__fullscreen:hover {
	border-color: var( --hawver-maze-brand );
	color: var( --hawver-maze-brand );
}
/* Full screen (the browser's, or laid over the page where that isn't available): the game
   fills the screen and scrolls inside if it's taller. */
.hawver-maze:fullscreen,
.hawver-maze.is-fullscreen {
	overflow-y: auto;
	margin: 0;
	border-radius: 0;
	background: var( --hawver-maze-frame );
}
.hawver-maze:-webkit-full-screen {
	overflow-y: auto;
	margin: 0;
	background: var( --hawver-maze-frame );
}
.hawver-maze.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 99999;
	padding: max( 0.75rem, env( safe-area-inset-top, 0px ) ) max( 0.75rem, env( safe-area-inset-right, 0px ) ) max( 0.75rem, env( safe-area-inset-bottom, 0px ) ) max( 0.75rem, env( safe-area-inset-left, 0px ) );
}
html.hawver-maze-locked,
html.hawver-maze-locked body {
	overflow: hidden;
}
/* The Candle: a yellow meter behind its icon, emptying from the top as the crumbs' 45
   seconds run down; when they're out (and the Candle with them), the icon goes grey. */
.hawver-maze__item--candle.is-on::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc( var( --hawver-maze-fuel, 1 ) * 100% );
	border-radius: 6px;
	background: rgba( 250, 204, 21, 0.45 );
	pointer-events: none;
}
.hawver-maze__item--candle > svg {
	position: relative;
	z-index: 1;
}
.hawver-maze__item--candle.is-burnt-out > svg {
	filter: grayscale( 1 ) brightness( 0.65 );
}
/* A bingo card beside the hero on levels finished with a coverall. */
.hawver-maze__table-heroes {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	vertical-align: middle;
}
.hawver-maze__table-bingo {
	display: inline-grid;
	place-items: center;
	cursor: help;
}
/* The finish panel: a thin title; the coins line lighter, with the number big and bold; the
   next-level pill with an arrow on its right. */
.hawver-maze__win-title {
	font-weight: 100;
}
.hawver-maze__win-coins {
	font-size: 2.6rem;
	font-weight: 400;
}
.hawver-maze__win-plus {
	font-size: 4rem;
	font-weight: 700;
	vertical-align: middle;
}
.hawver-maze__again {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}
.hawver-maze__again::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
}
/* The Master Sword (in the Sword's place in the items): a strong, pulsing golden glow. */
.hawver-maze__item--sword.is-master.is-on > svg {
	filter: drop-shadow( 0 0 4px #fde047 ) drop-shadow( 0 0 9px rgba( 250, 204, 21, 0.85 ) );
	animation: hawver-maze-master-glow 1.6s ease-in-out infinite;
}
@keyframes hawver-maze-master-glow {
	50% { filter: drop-shadow( 0 0 6px #fff7d6 ) drop-shadow( 0 0 14px rgba( 250, 204, 21, 1 ) ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.hawver-maze__item--sword.is-master.is-on > svg {
		animation: none;
	}
}

/* The store: tiers by price, each a row of character cards with a Buy (or Play) button. */
.hawver-maze__store {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
}
.hawver-maze__store-note {
	margin: 0 0 0.75rem;
	color: var( --hawver-maze-muted );
	font-size: 0.85rem;
}
.hawver-maze__store-list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hawver-maze__store-price {
	margin: 0 0 0.5rem;
	color: var( --hawver-maze-finish );
	font: 800 0.8rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.hawver-maze__store-row {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 9.5rem, 1fr ) );
	gap: 0.75rem;
}
.hawver-maze__store-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding: 0.75rem;
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.04 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.08 );
	text-align: center;
}
.hawver-maze__store-card strong {
	color: var( --hawver-maze-text );
	font-size: 0.9rem;
}
.hawver-maze__store-card.is-owned {
	box-shadow: inset 0 0 0 1px rgba( 255, 201, 74, 0.45 );
}
.hawver-maze__store-card.is-current {
	box-shadow: inset 0 0 0 2px var( --hawver-maze-brand );
}
.hawver-maze__store-icon svg {
	display: block;
}
.hawver-maze__store-buy {
	padding: 0.4rem 0.9rem;
	border: 1px solid var( --hawver-maze-finish );
	border-radius: 999px;
	background: transparent;
	color: var( --hawver-maze-finish );
	font: 800 0.75rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.hawver-maze__store-buy:hover:not( :disabled ) {
	background: var( --hawver-maze-finish );
	color: var( --hawver-maze-frame );
}
.hawver-maze__store-buy:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.hawver-maze__store-card.is-owned .hawver-maze__store-buy:disabled {
	opacity: 1;
	border-color: var( --hawver-maze-brand );
	color: var( --hawver-maze-brand );
	cursor: default;
}
/* The store: one full-width grid of cards, cheapest first; a coin in each Buy button. */
.hawver-maze__store-list {
	grid-template-columns: repeat( auto-fill, minmax( 8.5rem, 1fr ) );
	gap: 0.75rem;
}
.hawver-maze__store-buy {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.hawver-maze__store-coin {
	display: block;
	flex: none;
}
/* Store: owned cards fill their space with a bigger character and are clicked to play;
   locked ones are in greyscale until bought. */
.hawver-maze__store-card.is-owned {
	justify-content: center;
	cursor: pointer;
}
.hawver-maze__store-card.is-owned:hover,
.hawver-maze__store-card.is-owned:focus-visible {
	outline: none;
	background: rgba( 255, 255, 255, 0.08 );
}
.hawver-maze__store-card.is-locked .hawver-maze__store-icon {
	filter: grayscale( 1 ); /* On the wrapper, so a character's own glow goes grey too. */
	opacity: 0.75;
}
/* The items: in the strip from the maze's bottom wall to the bottom, from the left edge up
   to just short of the player waiting by the entrance, centred top to bottom (their keys
   hang below); they wrap onto a second row when there isn't room. */
.hawver-maze__stage > .hawver-maze__items.is-below {
	top: var( --hawver-maze-items-top, var( --hawver-maze-maze-h, auto ) ); /* Centred in the strip (script.js); its own height, never stretched, as the strip is sized from it. */
	right: var( --hawver-maze-items-right, 0 );
	bottom: auto;
	left: 0;
	height: auto;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	row-gap: 1.1rem;
	padding: 0;
}
/* Each new item, character or badge on the finish panel: a plus sign on its corner. */
.hawver-maze__win-unlock-icon {
	position: relative;
	display: inline-block;
}
.hawver-maze__win-plus-mark {
	position: absolute;
	top: -6px;
	right: -6px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px var( --hawver-maze-frame ), 0 0 10px rgba( 34, 197, 94, 0.6 );
	color: #fff;
	font: 900 1.1rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Rosie is for debug mode only: no slot for her otherwise. */
.hawver-maze:not(.is-debug-mode) .hawver-maze__skin--rosie {
	display: none !important;
}
/* Debug mode: Reset, under Close on the high score table, wipes every high score site-wide. */
.hawver-maze__board .hawver-maze__debug-reset {
	display: block;
	margin: 0.75rem auto 0;
	padding: 0.5rem 1rem;
	border: 1px solid #ef4444;
	border-radius: 999px;
	background: transparent;
	color: #ef4444;
	font: 700 0.85rem / 1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.hawver-maze__board .hawver-maze__debug-reset:hover,
.hawver-maze__board .hawver-maze__debug-reset[data-armed] {
	background: #ef4444;
	color: #fff;
}
.hawver-maze__board .hawver-maze__debug-reset[hidden] {
	display: none;
}