/**
 * Flowing Kids — Speurtocht
 * Flowingweb — flowingweb.nl
 */

.fk-quest-outer {
	max-width: 860px;
	margin: 0 auto 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fk-quest-wrap {
	position:      relative;
	background:    #141c2c;
	border:        2px solid #e2e4e7;
	border-radius: 10px;
	overflow:      hidden;
	box-shadow:    0 2px 12px rgba(0,0,0,.07);
	line-height:   0;
}

.fk-quest-canvas {
	display:     block;
	width:       100%;
	height:      auto;
	touch-action: none;
	cursor:      pointer;
}

/* Volledig-schermknop */
.fk-quest-fs-btn {
	position:      absolute;
	top:           10px;
	right:         10px;
	width:         34px;
	height:        34px;
	padding:       7px;
	background:    rgba(0,0,0,0.42);
	border:        1px solid rgba(255,255,255,0.35);
	border-radius: 7px;
	color:         #fff;
	cursor:        pointer;
	z-index:       5;
	line-height:   0;
	transition:    background .15s;
}
.fk-quest-fs-btn:hover { background: rgba(0,0,0,0.62); }
.fk-quest-fs-btn svg   { width: 100%; height: 100%; display: block; }

/* Voettekst */
.fk-quest-footer {
	display:         flex;
	flex-wrap:       wrap;
	gap:             10px;
	align-items:     center;
	justify-content: space-between;
	padding:         10px 4px 0;
	font-size:       13px;
	color:           #6b7280;
	line-height:     1.5;
}

.fk-quest-keys { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.fk-quest-key {
	display:            inline-block;
	padding:            2px 7px;
	background:         #f9fafb;
	border:             1px solid #d1d5db;
	border-bottom-width:3px;
	border-radius:      4px;
	font-family:        "Courier New", Courier, monospace;
	font-size:          11px;
	font-weight:        bold;
	color:              #374151;
	box-shadow:         0 1px 2px rgba(0,0,0,.06);
}

.fk-quest-tip { font-size: 12px; color: #9ca3af; }

/* Volledig scherm */
.fk-quest-wrap:fullscreen,
.fk-quest-wrap:-webkit-full-screen {
	background:    #000;
	width:         100vw;
	height:        100vh;
	border:        none;
	border-radius: 0;
	box-shadow:    none;
	overflow:      hidden;
	display:       flex;
	align-items:   center;
	justify-content: center;
}

.fk-quest-wrap:fullscreen .fk-quest-canvas,
.fk-quest-wrap:-webkit-full-screen .fk-quest-canvas {
	width:         auto !important;
	height:        100% !important;
	max-width:     100vw;
	border:        none !important;
	border-radius: 0 !important;
	outline:       none !important;
	box-shadow:    none !important;
}

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