/* ============================================================
   Backwoods Arcade — hub page styles
   Used only by templates/page-backwoods.php.
   ============================================================ */

#bw-hub, #bw-hub * { box-sizing: border-box; margin: 0; padding: 0; }

#bw-hub {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 100vh;
	overflow: hidden;
	font-family: 'Press Start 2P', monospace;

	background-color: #0e1a1a;
	background-image: url('https://modestsportsman.com/wp-content/uploads/2026/04/backwoods_v3_image.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#bw-hub::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 70% 60% at 50% 45%,
		rgba(0,0,0,0.10) 0%,
		rgba(0,0,0,0.45) 55%,
		rgba(0,0,0,0.72) 100%
	);
	pointer-events: none;
	z-index: 1;
}

#bw-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	padding: 48px 16px 48px;
}

.bw-logo {
	display: block;
	width: 240px;
	max-width: 55vw;
	height: auto;
}

.bw-header-gap { height: 35px; }

.bw-title {
	color: #6ab848;
	font-size: clamp(8px, 1.8vw, 12px);
	letter-spacing: 6px;
	text-shadow: 2px 2px #0a0804;
}

.bw-rule {
	color: #2e4418;
	font-size: 7px;
	letter-spacing: 4px;
	margin-top: 10px;
}

.bw-gap { flex: 1; min-height: 40px; }

.bw-games {
	display: flex;
	gap: clamp(24px, 5vw, 72px);
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

.bw-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none !important;
	user-select: none;
	transition: transform 0.12s ease;
}
.bw-card:not(.bw-card--locked):hover { transform: translateY(-8px); }

.bw-frame {
	position: relative;
	width: 250px;
	height: 188px;
	overflow: hidden;
	box-shadow:
		0 0 0 3px #3e7824,
		0 0 0 6px #1a3208,
		0 0 0 10px #0c1204;
	transition: box-shadow 0.15s, filter 0.15s;
}
.bw-card:not(.bw-card--locked):hover .bw-frame {
	box-shadow:
		0 0 0 3px #82e044,
		0 0 0 6px #306818,
		0 0 0 10px #0c1204,
		0 0 30px rgba(80, 170, 50, 0.5);
	filter: brightness(1.08);
}

.bw-thumb-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.bw-card--locked { cursor: not-allowed; }
.bw-card--locked .bw-frame {
	box-shadow:
		0 0 0 3px #242424,
		0 0 0 6px #101010,
		0 0 0 10px #080808;
	filter: saturate(0.06) brightness(0.38);
}

.bw-cs-placeholder {
	width: 100%;
	height: 100%;
	background: #0e100e;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0px,
		transparent 2px,
		rgba(0,0,0,0.35) 2px,
		rgba(0,0,0,0.35) 3px
	);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.bw-cs-q {
	color: #1e221e;
	font-size: 48px;
	font-family: 'Press Start 2P', monospace;
	font-weight: bold;
}
.bw-cs-label {
	color: #2a2c2a;
	font-size: 6px;
	font-family: 'Press Start 2P', monospace;
	letter-spacing: 1px;
}

.bw-lock-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4,8,4,0.55);
	font-size: 36px;
	opacity: 0.5;
}

.bw-info {
	position: relative;
	z-index: 2;
	margin-top: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
}
.bw-name {
	color: #a8d858;
	font-size: clamp(8px, 1.2vw, 10px);
	text-shadow: 1px 2px #0a0804;
	letter-spacing: 1px;
}
.bw-card--locked .bw-name { color: #363636; text-shadow: none; }
.bw-tag  { color: #3e7024; font-size: 6px; letter-spacing: 2px; }
.bw-card--locked .bw-tag { color: #262626; }
.bw-blink {
	color: #305a1c;
	font-size: 6px;
	letter-spacing: 1px;
	animation: bwBlink 1.1s step-end infinite;
}
.bw-card--locked .bw-blink { visibility: hidden; }
@keyframes bwBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }

.bw-footer {
	color: var(--safety-orange);
	font-size: 6px;
	letter-spacing: 3px;
	margin-top: 48px;
	text-align: center;
}

.bw-exit {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	color: #4a8c3e;
	font-size: 7px;
	letter-spacing: 2px;
	text-decoration: none;
	border: 2px solid #2a5a1e;
	padding: 10px 20px;
	background: rgba(10, 10, 6, 0.65);
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.bw-exit:hover {
	color: #82e044;
	border-color: #4a8c3e;
	background: rgba(20, 30, 10, 0.85);
}