```css
/* Carpokes Header Dashboard - base image version */

/* Kill old Header Banner background/color behavior */
.headerbar,
.dashboard-header,
.headerbar .dashboard-header,
.headerbar .header-dashboard,
.headerbar .cp-headerdash-base-wrap,
.cp-headerdash-base-wrap {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
}

/* Also defeat inline background styles from ACP/config if present */
.headerbar[style],
.dashboard-header[style],
.header-dashboard[style] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Keep the phpBB/headerbar area from creating padding or horizontal scroll */
.headerbar {
	padding: 0 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
}

/*
	Main dashboard wrapper.

	The black background fills any tiny area exposed by the rounded
	bottom corners of the dashboard image.

	The bottom margin restores separation between the dashboard and
	the yellow/gray links bar below it.
*/
.dashboard-header {
	position: relative;
	padding: 0 !important;
	margin: 0 auto 10px auto !important;
	overflow: hidden !important;
	background: #000 !important;
	background-color: #000 !important;
	border-radius: 12px !important;
}

.headerbar .header-dashboard {
	display: block !important;
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 100%;
	overflow: hidden !important;
}

/* Hide the original phpBB header identity block */
.headerbar #site-description,
.headerbar .site-description,
.headerbar h1,
.headerbar p.skiplink {
	display: none !important;
}

/* Keep our hidden accessibility block out of view */
.dashboard-header #hidden {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -100;
}

/* Old IE fallback retained from original extension */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.headerbar .header-dashboard {
		width: 100% !important;
	}
}

/* Search box positions retained from original extension */
.headerdashboard-search-1 {
	top: 30px;
	left: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-2 {
	top: 30px;
	right: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-3 {
	bottom: 30px;
	left: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-4 {
	bottom: 30px;
	right: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-7 {
	bottom: -5px;
	left: 39%;
	position: absolute;
	z-index: 5;
}

/* Hide old mobile banner area from original extension */
.headerbar .mobile-header-dashboard {
	display: none !important;
}

/* Search styling retained from original extension */
.navbar #search-box {
	box-shadow: none;
	margin: auto;
	padding: 5px;
}

.rtl .navbar #search-box {
	float: left;
}

.navbar .button-search-end {
	border-radius: 0 4px 4px 0;
}

.rtl .navbar .button-search-end {
	border-radius: 4px 0 0 4px;
}

/* Base banner image wrapper */
.cp-headerdash-base-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	line-height: 0;
	overflow: hidden;
	box-sizing: border-box;
	background: #000 !important;
	background-color: #000 !important;
	border-radius: 12px;
}

/*
	Layer model:

	z-index 1  = photo windows BEHIND transparent PNG
	z-index 2  = base dashboard PNG
	z-index 3  = odometer digits ABOVE PNG
	z-index 4  = gauge needles ABOVE PNG
	z-index 5  = full banner home link
	z-index 20 = store/terms links
	z-index 25 = photo links
	z-index 30 = future carousel arrows
*/

.cp-headerdash-base-image {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

/*
	Full-size positioning layer.

	Important: no z-index here.
	This lets child elements sit either below or above the base PNG.
	Photo windows use z-index: 1.
	Odometers use z-index: 3.
	Needles use z-index: 4.
*/

.cp-headerdash-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------
   PHOTO WINDOW UNDERLAYS
--------------------------------------------------------- */

.cp-photo-slot,
.cp-overlay-photo-1,
.cp-overlay-photo-2 {
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	overflow: hidden;
	border: 0;
	background: rgba(190, 220, 235, 0.82);
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	pointer-events: none;
}

.cp-photo-slot img,
.cp-overlay-photo-1 img,
.cp-overlay-photo-2 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Left transparent photo window - older underlay reference */
.cp-photo-slot-left,
.cp-overlay-photo-1 {
	left: 23%;
	top: 30.7%;
	width: 26.7%;
	height: 50.8%;
}

/* Right transparent photo window - older underlay reference */
.cp-photo-slot-right,
.cp-overlay-photo-2 {
	left: 50.7%;
	top: 30.7%;
	width: 26.7%;
	height: 50.8%;
}

/* ---------------------------------------------------------
   ODOMETER TEST OVERLAYS - PER-DIGIT DRUM VERSION
--------------------------------------------------------- */

.cp-overlay-members,
.cp-overlay-posts,
.cp-odo-members,
.cp-odo-posts {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	pointer-events: none;
	white-space: nowrap;
	text-indent: 0;
	color: inherit;
	font-size: inherit;
	line-height: normal;
}

/* Members odometer position - locked */
.cp-overlay-members,
.cp-odo-members {
	left: 6.9%;
	top: 67%;
	width: 9.15%;
	height: 5.15%;
}

/* Posts odometer position - locked */
.cp-overlay-posts,
.cp-odo-posts {
	left: 84.3%;
	top: 67%;
	width: 9.15%;
	height: 5.15%;
}

.cp-odo-drumset {
	position: absolute;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	padding: 1px 3px;
	overflow: hidden;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(0, 0, 0, 0.28) 22%,
			rgba(0, 0, 0, 0.78) 50%,
			rgba(0, 0, 0, 0.42) 100%
		);

	border-radius: 1px;

	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.045),
		inset 0 -1px 3px rgba(0, 0, 0, 0.95);
}

/* Individual odometer number wheels */
.cp-odo-drumset span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;

	background:
		linear-gradient(
			to bottom,
			#171717 0%,
			#090909 23%,
			#000 48%,
			#050505 72%,
			#111 100%
		);

	border-radius: 1px;

	box-shadow:
		inset 1px 0 0 rgba(255, 255, 255, 0.03),
		inset -1px 0 0 rgba(0, 0, 0, 0.92),
		inset 0 1px 1px rgba(255, 255, 255, 0.03),
		inset 0 -1px 2px rgba(0, 0, 0, 0.95);

	color: #e6e1d0;

	font-family:
		"Arial Narrow",
		"Bahnschrift Condensed",
		"Helvetica Neue Condensed",
		"Roboto Condensed",
		Arial,
		sans-serif;

	font-size: clamp(9px, 1.28vw, 18px);
	font-weight: 500;
	font-stretch: condensed;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;

	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-indent: 0;

	transform: scaleY(1.08);
	transform-origin: center center;

	text-shadow:
		0 1px 1px #000,
		0 -1px 1px #000,
		1px 0 1px #000,
		-1px 0 1px #000;
}

/* Soft top/bottom mask */
.cp-odo-drumset::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.52) 0%,
			rgba(0, 0, 0, 0.06) 28%,
			rgba(0, 0, 0, 0) 44%,
			rgba(0, 0, 0, 0) 58%,
			rgba(0, 0, 0, 0.08) 72%,
			rgba(0, 0, 0, 0.55) 100%
		);
}

/* Subtle individual drum curvature */
.cp-odo-drumset span::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, 0.02) 0%,
			rgba(255, 255, 255, 0) 32%,
			rgba(0, 0, 0, 0.22) 100%
		);
}

/* Top/bottom dimming on each digit */
.cp-odo-drumset span::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.34) 0%,
			rgba(0, 0, 0, 0.14) 20%,
			rgba(0, 0, 0, 0) 40%,
			rgba(0, 0, 0, 0) 60%,
			rgba(0, 0, 0, 0.14) 80%,
			rgba(0, 0, 0, 0.36) 100%
		);
}

/* Fallback if old .cp-odo text nodes are still present */
.cp-odo {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	pointer-events: none;

	color: #dedbcc;
	font-family:
		"Arial Narrow",
		"Bahnschrift Condensed",
		"Helvetica Neue Condensed",
		Arial,
		sans-serif;
	font-size: clamp(9px, 1.24vw, 17px);
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: 0.08em;
	line-height: 1;
	text-shadow: 0 1px 1px #000;
}

/* ---------------------------------------------------------
   TEMP NEEDLE CALIBRATION OVERLAYS

   Current geometry:
   - pivot is the element's left-center point
   - moderately thick base
   - gradual taper
   - narrow, realistic flat tip rather than a one-pixel point
--------------------------------------------------------- */

.cp-needle-test {
	position: absolute;
	z-index: 4;
	pointer-events: none;

	/*
		The element's left edge is the true pivot center.
		The entire needle rotates around that point.
	*/
	width: 8.8%;
	height: 1.8%;
	transform-origin: 0% 50%;
}

/*
	Needle body.

	The last four points create a narrow physical tip:
	96% begins the final tip section;
	100% ends in an 8%-high flat face.
*/
.cp-needle-test::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 100%;
	transform: translateY(-50%);

	clip-path: polygon(
		0% 8%,
		18% 16%,
		72% 36%,
		96% 46%,
		100% 46%,
		100% 54%,
		96% 54%,
		72% 64%,
		18% 84%,
		0% 92%
	);

	background:
		linear-gradient(
			to bottom,
			#ffd08a 0%,
			#ffa53d 30%,
			#ea6f09 68%,
			#7a2200 100%
		);

	box-shadow:
		0 0 3px rgba(255, 130, 25, 0.80),
		0 0 7px rgba(255, 90, 0, 0.20),
		inset 0 1px 0 rgba(255, 240, 200, 0.55),
		inset 0 -1px 0 rgba(80, 20, 0, 0.55);
}

/* Center hub / pivot cap */
.cp-needle-test::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 17.2%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#666666 0%,
			#343434 34%,
			#171717 68%,
			#000000 100%
		);

	box-shadow:
		0 0 4px rgba(0, 0, 0, 0.95),
		inset 0 1px 1px rgba(255, 255, 255, 0.16),
		inset 0 -1px 1px rgba(0, 0, 0, 0.88);
}

/* Members needle - tuned pivot position */
.cp-needle-members-test {
	left: 11.6%;
	top: 54.9%;
	transform: rotate(-199deg);
}

/* Posts needle - tuned pivot position */
.cp-needle-posts-test {
	left: 89.0%;
	top: 54.9%;
	transform: rotate(-199deg);
}

/* ---------------------------------------------------------
   LEGACY NEEDLE PLACEHOLDERS FOR LATER
--------------------------------------------------------- */

.cp-needle {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	transform-origin: center bottom;
}

/* Members needle placeholder */
.cp-needle-members {
	left: 9.5%;
	top: 34%;
	width: 4%;
	height: 28%;
}

/* Posts needle placeholder */
.cp-needle-posts {
	left: 87%;
	top: 34%;
	width: 4%;
	height: 28%;
}

/* ---------------------------------------------------------
   LEGACY / CALIBRATION BOX SUPPORT
--------------------------------------------------------- */

.cp-overlay-test {
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
}

/* Optional calibration helper */
.cp-calibrate {
	outline: 2px solid rgba(255, 0, 0, 0.95);
	background-color: rgba(255, 255, 0, 0.25);
}

/* ---------------------------------------------------------
   TRANSPARENT BANNER LINKS
--------------------------------------------------------- */

.cp-headerdash-link {
	position: absolute;
	display: block;
	pointer-events: auto;
	background: transparent;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
}

/* Full banner click target back to Carpokes home */
.cp-headerdash-link-main {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background: transparent;
	cursor: pointer;
}

/* Store button click zone - locked */
.cp-headerdash-link-store {
	left: 21.25%;
	top: 91.5%;
	width: 6%;
	height: 6.5%;
	z-index: 20;
	background: transparent;
	cursor: pointer;
	border-radius: 4px;
}

/* Terms button click zone - locked */
.cp-headerdash-link-terms {
	left: 93.7%;
	top: 91.7%;
	width: 5.85%;
	height: 6.8%;
	z-index: 20;
	background: transparent;
	cursor: pointer;
	border-radius: 4px;
}

/* Photo 1 click zone - locked */
.cp-headerdash-link-photo-1 {
	left: 23.4%;
	top: 32.1%;
	width: 25.85%;
	height: 50.7%;
	z-index: 25;
	background: transparent;
	outline: 0;
	border-radius: 15px;
	cursor: pointer;
}

/* Photo 2 click zone - locked */
.cp-headerdash-link-photo-2 {
	left: 51.25%;
	top: 32.1%;
	width: 25.85%;
	height: 50.7%;
	z-index: 25;
	background: transparent;
	outline: 0;
	border-radius: 15px;
	cursor: pointer;
}

/* Hover / keyboard focus feedback for Store and Terms */
.cp-headerdash-link-store:hover,
.cp-headerdash-link-store:focus,
.cp-headerdash-link-store:focus-visible,
.cp-headerdash-link-terms:hover,
.cp-headerdash-link-terms:focus,
.cp-headerdash-link-terms:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	box-shadow:
		0 0 8px rgba(255, 255, 255, 0.45),
		inset 0 0 8px rgba(255, 255, 255, 0.25);
	outline: 1px solid rgba(255, 255, 255, 0.4);
}

/* Hover / keyboard focus feedback for photo window 1 */
.cp-headerdash-link-photo-1:hover,
.cp-headerdash-link-photo-1:focus,
.cp-headerdash-link-photo-1:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 0 10px rgba(255, 255, 255, 0.7),
		0 0 18px rgba(120, 180, 255, 0.45),
		inset 0 0 10px rgba(255, 255, 255, 0.22);
	outline: 1px solid rgba(255, 255, 255, 0.55);
}

/* Hover / keyboard focus feedback for photo window 2 */
.cp-headerdash-link-photo-2:hover,
.cp-headerdash-link-photo-2:focus,
.cp-headerdash-link-photo-2:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 0 10px rgba(255, 255, 255, 0.7),
		0 0 18px rgba(120, 180, 255, 0.45),
		inset 0 0 10px rgba(255, 255, 255, 0.22);
	outline: 1px solid rgba(255, 255, 255, 0.55);
}

/* Responsive */
@media only screen and (max-width: 900px) {
	.headerbar .header-dashboard {
		display: block !important;
	}

	.dashboard-header {
		margin-bottom: 10px !important;
	}

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 12px);
		max-width: 100%;
		margin: 8px auto 0 auto;
		overflow: hidden;
	}
}

@media only screen and (max-width: 700px),
only screen and (max-device-width: 700px) {
	.headerbar .header-dashboard {
		display: block !important;
		border-radius: 0 !important;
	}

	.dashboard-header {
		margin-bottom: 8px !important;
		border-radius: 6px !important;
	}

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 8px) !important;
		max-width: 100% !important;
		margin: 6px auto 0 auto;
		overflow: hidden;
		border-radius: 6px;
	}

	.cp-headerdash-base-image {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		border-radius: 6px;
	}

	.cp-headerdash-overlay {
		display: block !important;
	}

	.cp-photo-slot,
	.cp-overlay-photo-1,
	.cp-overlay-photo-2 {
		display: block !important;
	}

	.cp-odo-drumset span {
		font-size: clamp(6px, 1.18vw, 10px);
		transform: scaleY(1.04);
	}

	.cp-odo-drumset {
		gap: 1px;
		padding: 1px 2px;
	}
}
```