/* ============================================================================
   Dino Run game styling
   ============================================================================ */
.lq-dino {
	max-width: 880px;
	margin: 0 auto;
	padding: 16px;
	font-family: var(--wp--preset--font-family--body, 'Nunito', sans-serif);
}

.lq-dino__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.lq-dino__title {
	margin: 0;
	font-size: 38px;
	font-weight: 900;
	font-family: var(--wp--preset--font-family--heading, 'Fredoka', 'Nunito', sans-serif);
	letter-spacing: 2px;
}
.lq-dino__head-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.lq-dino__nick input {
	padding: 8px 14px;
	border: 2px solid var(--wp--preset--color--dark, #1F4D43);
	border-radius: 999px;
	font: inherit;
	font-size: 16px;
	min-width: 180px;
}

.lq-dino__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}
.lq-dino__stat {
	background: var(--wp--preset--color--cream, #FBF1D2);
	border: 2px solid var(--wp--preset--color--border, #EDE5C8);
	border-radius: 14px;
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.lq-dino__stat span {
	font-size: 13px;
	color: var(--wp--preset--color--muted, #6B7B73);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.lq-dino__stat strong {
	font-size: 22px;
	font-weight: 900;
	color: var(--wp--preset--color--dark, #1F4D43);
	margin-top: 2px;
}

.lq-dino__board-wrap {
	position: relative;
	width: 100%;
	background: var(--wp--preset--color--cream, #FBF1D2);
	border: 3px solid var(--wp--preset--color--dark, #1F4D43);
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 800 / 240;
}
.lq-dino__board {
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.lq-dino__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 77, 67, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 2;
}
.lq-dino__overlay-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 24px 28px;
	max-width: 380px;
	text-align: center;
	box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.lq-dino__overlay-card h3 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 900;
}
.lq-dino__overlay-card p {
	margin: 0 0 16px;
	color: var(--wp--preset--color--muted, #6B7B73);
	font-size: 15px;
}
.lq-dino__overlay-rank {
	color: var(--wp--preset--color--primary, #4AC586) !important;
	font-weight: 700;
}

.lq-dino__mobile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.lq-dino__mbtn {
	flex: 1;
	min-width: 140px;
	padding: 16px;
	font-size: 18px;
	font-weight: 800;
	border: 2px solid var(--wp--preset--color--dark, #1F4D43);
	border-radius: 14px;
	background: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--dark, #1F4D43);
	cursor: pointer;
	transition: transform 0.1s;
	touch-action: manipulation;
	user-select: none;
}
.lq-dino__mbtn:hover { background: var(--wp--preset--color--cream, #FBF1D2); }
.lq-dino__mbtn:active { transform: translateY(2px); background: var(--wp--preset--color--dark, #1F4D43); color: #FFFFFF; }
.lq-dino__help {
	font-size: 13px;
	color: var(--wp--preset--color--muted, #6B7B73);
	width: 100%;
	text-align: center;
}
.lq-dino__help p { margin: 0; }

@media (max-width: 600px) {
	.lq-dino__title { font-size: 30px; }
	.lq-dino__stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.lq-dino__stat { padding: 6px 8px; }
	.lq-dino__stat strong { font-size: 18px; }
}

/* Leaderboard - hergebruikt Snake-style. */
.lq-dino__leaderboard {
	margin-top: 32px;
	background: var(--wp--preset--color--cream, #FBF1D2);
	border-radius: 16px;
	padding: 20px 24px;
}
.lq-dino__lb-head { margin-bottom: 12px; }
.lq-dino__lb-head h3 { margin: 0 0 4px; font-size: 20px; }
.lq-dino__lb-head p { margin: 0; font-size: 14px; color: var(--wp--preset--color--muted, #6B7B73); }
.lq-dino__lb-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
}
.lq-dino__lb-row {
	display: grid;
	grid-template-columns: 40px 1fr auto auto;
	gap: 10px;
	align-items: center;
	padding: 8px 12px;
	background: #FFFFFF;
	border-radius: 10px;
}
.lq-dino__lb-rank { font-weight: 800; font-size: 18px; text-align: center; }
.lq-dino__lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-dino__lb-score { font-weight: 800; color: var(--wp--preset--color--dark, #1F4D43); }
.lq-dino__lb-time { font-size: 13px; color: var(--wp--preset--color--muted, #6B7B73); min-width: 50px; text-align: right; }
.lq-dino__lb-empty {
	text-align: center;
	color: var(--wp--preset--color--muted, #6B7B73);
	padding: 16px;
	margin: 0;
}
.lq-dino__lb-loading {
	text-align: center;
	color: var(--wp--preset--color--muted, #6B7B73);
	padding: 16px;
	margin: 0;
}