/*
 * GameRStar News — "Interactive Maps" treasure hunt page
 * Same pattern as gsn-single.css / gsn-front-page: the Hello Elementor base
 * stylesheet caps `.site-main` at max-width:1140px (centered); undo that
 * here so the section below can lay out across the full viewport instead
 * of nesting inside a redundant width constraint.
 */
.site-main.gsn-interactive-maps-page {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gsn-treasure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-4 );
	padding: clamp( 40px, 6vw, 88px ) clamp( 20px, 6vw, 80px );
	background-color: var( --color-bg-primary );
}

.gsn-treasure__intro {
	max-width: 560px;
	text-align: center;
}

.gsn-treasure__eyebrow {
	display: inline-block;
	margin-bottom: var( --space-2 );
	font-family: var( --font-display );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var( --letter-spacing-caps );
	text-transform: uppercase;
	color: var( --color-accent );
}

.gsn-treasure__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	margin-bottom: var( --space-2 );
}

.gsn-treasure__title {
	margin: 0;
	font-family: var( --font-display );
	font-weight: 800;
	font-size: var( --font-size-h1 );
	line-height: var( --line-height-heading );
	color: var( --color-text-primary );
}

/* Same "pill" shape as the site's category tags, but outlined instead of
 * filled: this badge marks the page itself as provisional, not a content
 * category, so it shouldn't be mistaken for one. */
.gsn-treasure__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 0.9em;
	border: 1px solid var( --color-accent );
	border-radius: 999px;
	background-color: rgba( 251, 191, 36, 0.12 );
	color: var( --color-accent );
	font-family: var( --font-display );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var( --letter-spacing-caps );
	text-transform: uppercase;
	white-space: nowrap;
}

/* `!important` needed: overrides a sitewide `p, h1, h2... { color: #fff !important; }`
 * rule stored in the site's Additional CSS (Customizer), same as
 * .gsn-article__subtitle / .gsn-newsletter__desc already work around. */
.gsn-treasure__subtitle {
	margin: 0;
	font-size: var( --font-size-body );
	line-height: var( --line-height-body );
	color: var( --color-text-secondary ) !important;
}

.gsn-treasure__board {
	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 400 / 260;
	border-radius: var( --radius-card );
	overflow: hidden;
	border: 1px solid var( --color-border );
	box-shadow: var( --shadow-card );
}

.gsn-treasure__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.gsn-treasure__grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	grid-template-rows: repeat( 4, 1fr );
	gap: clamp( 4px, 1.2vw, 10px );
	padding: clamp( 8px, 2vw, 16px );
}

.gsn-treasure__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba( 10, 14, 23, 0.72 );
	border: 1px solid rgba( 251, 191, 36, 0.25 );
	border-radius: var( --radius-button );
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.gsn-treasure__tile:hover:not( :disabled ),
.gsn-treasure__tile:focus-visible:not( :disabled ) {
	border-color: var( --color-accent );
	background-color: rgba( 251, 191, 36, 0.12 );
	transform: scale( 1.04 );
}

.gsn-treasure__tile:disabled {
	cursor: default;
}

.gsn-treasure__tile-icon {
	width: 44%;
	height: 44%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transform: scale( 0.6 );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gsn-treasure__tile.is-revealed {
	background-color: rgba( 10, 14, 23, 0.35 );
	border-color: var( --color-border );
}

.gsn-treasure__tile.is-revealed .gsn-treasure__tile-icon {
	opacity: 1;
	transform: scale( 1 );
}

.gsn-treasure__tile.is-empty .gsn-treasure__tile-icon {
	color: var( --color-text-muted );
}

.gsn-treasure__tile.is-decoy .gsn-treasure__tile-icon {
	color: var( --color-text-secondary );
}

.gsn-treasure__tile.is-treasure {
	background-color: rgba( 251, 191, 36, 0.18 );
	border-color: var( --color-accent );
	animation: gsn-treasure-glow 1.4s ease-in-out infinite;
}

.gsn-treasure__tile.is-treasure .gsn-treasure__tile-icon {
	color: var( --color-accent );
}

@keyframes gsn-treasure-glow {
	0%,
	100% {
		box-shadow: 0 0 0 rgba( 251, 191, 36, 0 );
	}
	50% {
		box-shadow: 0 0 18px rgba( 251, 191, 36, 0.55 );
	}
}

.gsn-treasure__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-3 );
	text-align: center;
}

.gsn-treasure__footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --space-3 );
}

/* `!important` needed throughout this rule and its modifiers below:
 * overrides the sitewide `p { color: #fff !important; }` rule stored in the
 * site's Additional CSS (Customizer). The base color happens to match that
 * override by coincidence, but `.is-win` / `.is-lose` do not, so they'd
 * silently lose their color without it. */
.gsn-treasure__status {
	margin: 0;
	font-family: var( --font-display );
	font-weight: 700;
	font-size: var( --font-size-body );
	color: var( --color-text-primary ) !important;
}

.gsn-treasure__status.is-win {
	color: var( --color-accent ) !important;
}

.gsn-treasure__status.is-lose {
	color: var( --color-text-secondary ) !important;
}

.gsn-treasure__restart-link {
	background: none;
	border: none;
	padding: 0;
	font-family: var( --font-display );
	font-size: var( --font-size-caption );
	font-weight: 700;
	text-decoration: underline;
	color: var( --color-text-secondary );
	cursor: pointer;
}

/* `:hover`/`:focus` (not just `:focus-visible`) restated here for the same
 * reason as `.gsn-treasure__reset:focus` below: reset.css's
 * `button:focus, button:hover { background-color: ... }` is 0,1,1, which
 * outranks a plain `.gsn-treasure__restart-link` base rule (0,1,0) and would
 * otherwise paint an unwanted pill behind this text-style link. */
.gsn-treasure__restart-link:hover,
.gsn-treasure__restart-link:focus {
	background-color: transparent;
}

.gsn-treasure__restart-link:hover,
.gsn-treasure__restart-link:focus-visible {
	color: var( --color-accent );
}

/* `!important` needed: same sitewide `p { color: #fff !important; }` override
 * as .gsn-treasure__subtitle above. */
.gsn-treasure__attempts {
	margin: 0;
	font-size: var( --font-size-caption );
	color: var( --color-text-secondary ) !important;
}

/* The theme's button reset outranks the native `[hidden]{display:none}` UA
 * rule on specificity, so the reset button stays visible before the game
 * ends unless we restate `display:none` here explicitly. */
.gsn-treasure__reset[hidden] {
	display: none;
}

.gsn-treasure__reset {
	background: var( --color-accent );
	color: #000;
	font-family: var( --font-display );
	font-weight: 700;
	font-size: var( --font-size-caption );
	letter-spacing: var( --letter-spacing-caps );
	text-transform: uppercase;
	padding: 10px 22px;
	border: none;
	border-radius: var( --radius-button );
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* `:focus` (not just `:focus-visible`) needed here: the base rule above is
 * a single class (specificity 0,1,0), but reset.css's `button:focus,
 * button:hover { background-color: ... }` is 0,1,1 — it outranks the base
 * gold on plain (non-hover) focus, which is exactly the state this button
 * lands in when the win handler calls .focus() on it. */
.gsn-treasure__reset:focus {
	background: var( --color-accent );
}

.gsn-treasure__reset:hover,
.gsn-treasure__reset:focus-visible {
	background: var( --color-accent-hover );
}

.gsn-treasure__help {
	width: 100%;
	max-width: 480px;
}

.gsn-treasure__help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var( --font-display );
	font-size: var( --font-size-caption );
	font-weight: 700;
	letter-spacing: var( --letter-spacing-caps );
	text-transform: uppercase;
	color: var( --color-accent );
	cursor: pointer;
	list-style: none;
}

/* Hide both markers (default disclosure triangle + Chrome/Safari's own
 * marker pseudo-element) so the custom chevron below is the only one. */
.gsn-treasure__help-toggle::marker,
.gsn-treasure__help-toggle::-webkit-details-marker {
	display: none;
	content: '';
}

.gsn-treasure__help-toggle::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
}

.gsn-treasure__help[open] .gsn-treasure__help-toggle::after {
	transform: rotate( -135deg );
}

.gsn-treasure__help-toggle:hover,
.gsn-treasure__help-toggle:focus-visible {
	color: var( --color-accent-hover );
}

.gsn-treasure__help-content {
	margin-top: var( --space-2 );
	padding: var( --space-3 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --color-bg-secondary );
	text-align: left;
}

.gsn-treasure__help-title {
	margin: 0 0 var( --space-1 );
	font-family: var( --font-display );
	font-weight: 800;
	font-size: var( --font-size-h3 );
	color: var( --color-text-primary );
}

/* `!important` needed: overrides a sitewide `p, h1, h2... { color: #fff !important; }`
 * rule stored in the site's Additional CSS (Customizer), same as
 * .gsn-article__subtitle / .gsn-newsletter__desc already work around. */
.gsn-treasure__help-content p {
	margin: 0;
	font-size: var( --font-size-caption );
	line-height: var( --line-height-body );
	color: var( --color-text-secondary ) !important;
}

.gsn-treasure__sprites {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.gsn-treasure__tile,
	.gsn-treasure__tile-icon {
		transition: none;
	}

	.gsn-treasure__tile.is-treasure {
		animation: none;
	}
}

@media ( max-width: 480px ) {
	.gsn-treasure__grid {
		gap: 6px;
		padding: 6px;
	}
}