/* ==========================================================================
   Flowing Kids – Dino Spel   v1.3.0
   ========================================================================== */

.fk-dino-outer {
	margin: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fk-dino-wrap {
	position: relative;
	background: #f7f7f7;
	border: 2px solid #e2e4e7;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Canvas schaalt naar container, hoogte volgt de 800:300 verhouding */
.fk-dino-canvas {
	display: block;
	width: 100%;
	height: auto;
	/* Pixel-perfect upscaling */
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	touch-action: none;
}

.fk-dino-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-top: 1px solid #e2e4e7;
	font-size: 12px;
	color: #888;
	background: #fafafa;
	gap: 8px;
}

.fk-dino-keys {
	display: flex;
	gap: 6px;
	align-items: center;
}

.fk-dino-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 6px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-bottom-width: 3px;
	border-radius: 4px;
	font-size: 11px;
	font-family: monospace;
	color: #555;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.fk-dino-tip {
	font-size: 11px;
	color: #aaa;
}

/* ── Fullscreen-knop ─────────────────────────────────────────────────── */

.fk-dino-fs-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 20;
	width: 34px;
	height: 34px;
	padding: 7px;
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 7px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
	-webkit-tap-highlight-color: transparent;
}

.fk-dino-fs-btn:hover { background: rgba(0,0,0,0.6); }

.fk-dino-fs-btn svg {
	width: 100%;
	height: 100%;
	fill: #ffffff;
	display: block;
}

/* Volledig scherm – canvas vult het hele scherm via JS-resolutie-aanpassing */
.fk-dino-wrap:fullscreen,
.fk-dino-wrap:-webkit-full-screen {
	background: #000;
	width:      100vw;
	height:     100vh;
}

/* iOS: verberg de knop als fullscreen API niet ondersteund wordt */
@supports not (selector(:fullscreen)) {
	.fk-dino-fs-btn { display: none; }
}