/* Tour — startpagina als game, voorstel 2: de plattegrond als levelkaart. Naast game-start.css. */
.gl-map { position: relative; border: 4px solid var(--navy); border-radius: 18px; overflow: hidden; background: #2a86a8; box-shadow: 0 6px 0 #0b2557, 0 10px 22px rgba(18, 40, 90, .35); }
.gl-map__img { display: block; width: 100%; height: auto; }
.gl-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gl-route line { vector-effect: non-scaling-stroke; stroke-linecap: round; fill: none; }
.gl-route .gl-base { stroke: rgba(11, 37, 87, .55); stroke-width: 9; }
.gl-route .gl-dash { stroke: #fff; stroke-width: 4; stroke-dasharray: 2 12; animation: gl-march 1s linear infinite; }
.gl-route .gl-seg.is-done .gl-dash { stroke: #6fe39a; stroke-dasharray: none; animation: none; stroke-width: 5; }
@keyframes gl-march { to { stroke-dashoffset: -14; } }

.gl-node { --s: min(15%, 70px); position: absolute; width: var(--s); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); padding: 0; border: 4px solid #fff; border-radius: 50%; background: var(--orange); color: #fff; font: inherit; font-weight: 900; font-size: clamp(1rem, 4.6vw, 1.6rem); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); -webkit-tap-highlight-color: transparent; animation: gl-in .55s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * .12s + .2s); }
.gl-node img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.gl-node.is-found { border-color: #6fe39a; background: #fff; }
.gl-node.is-found img { display: block; }
.gl-node.is-found span { display: none; }
.gl-node.is-found::after { content: "\2713"; position: absolute; right: -8%; bottom: -8%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--ok); color: #fff; font-size: .8rem; line-height: 1.6; text-align: center; box-shadow: 0 0 0 2px #fff; }
.gl-node.is-next::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; border: 3px solid #fff; animation: gl-ring 1.4s ease-out infinite; }
.gl-node.is-next { animation: gl-in .55s cubic-bezier(.2, 1.4, .4, 1) both, gl-bob 1.1s ease-in-out 1s infinite; animation-delay: calc(var(--i, 0) * .12s + .2s), 1s; }
.gl-node.is-selected { box-shadow: 0 0 0 4px var(--navy), 0 0 18px 6px rgba(255, 255, 255, .85); z-index: 2; }
@keyframes gl-in { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes gl-bob { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -58%) scale(1.1); } }
@keyframes gl-ring { from { transform: scale(.7); opacity: .95; } to { transform: scale(1.35); opacity: 0; } }

.gl-card { display: flex; gap: .9rem; align-items: center; margin: 1.1rem 0 0; padding: 1rem; border-radius: 16px; background: #fff; border-bottom: 6px solid rgba(18, 58, 122, .2); box-shadow: 0 2px 10px rgba(18, 40, 90, .15); }
.gl-card.is-swap { animation: gl-swap .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes gl-swap { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.gl-card__token { flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--sky); filter: brightness(0) opacity(.4); }
.gl-card.is-found .gl-card__token { filter: none; box-shadow: 0 0 0 4px #6fe39a; }
.gl-card__eyebrow { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.gl-card.is-found .gl-card__eyebrow { color: var(--ok); }
.gl-card h3 { margin: .1rem 0 .25rem; font-size: 1.25rem; line-height: 1.15; color: var(--blue); text-transform: uppercase; }
.gl-card p.gl-card__hint { margin: 0; font-size: .98rem; }
.gl-card .tour-button { margin-top: .6rem; border: 0; font: inherit; font-weight: 800; cursor: pointer; }

.gl-log { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.gl-log__item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .8rem; border: 3px solid transparent; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 6px rgba(18, 40, 90, .1); }
.gl-log__n { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 900; }
.gl-log__name { flex: 1; font-weight: 700; }
.gl-log__chip { flex: none; padding: .15rem .6rem; border-radius: 999px; background: #fff3dd; color: #a4480c; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.gl-log__item.is-found .gl-log__n { background: var(--ok); }
.gl-log__item.is-found .gl-log__chip { background: #e0f4e8; color: var(--ok); }
.gl-log__item.is-selected { border-color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
	.gl-node, .gl-node.is-next, .gl-node.is-next::before, .gl-route .gl-dash, .gl-card.is-swap { animation: none; }
}