/* Tour — startpagina als game, voorstel 3: mascotte Dock en ranks. Naast game-start.css. */
.gd-guide { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto .6rem; }
.gd-bubble { position: relative; max-width: 22rem; margin: 0 0 .9rem; padding: .8rem 1.1rem; border-radius: 18px; background: #fff; color: var(--ink); font-weight: 700; font-size: 1.05rem; line-height: 1.3; text-align: left; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); min-height: 3.4rem; animation: gd-bubble .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.gd-bubble::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 22px; height: 22px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 6px 0; }
.gd-bubble b { color: var(--orange); }
.gd-name { position: absolute; top: -.7rem; left: 1rem; padding: .1rem .7rem; border-radius: 6px; background: var(--orange); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@keyframes gd-bubble { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.gd-dock { display: block; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gd-dock img { display: block; height: 210px; width: auto; max-width: 78vw; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); animation: gd-float 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.gd-dock.is-swap img { animation: gd-swap .55s cubic-bezier(.2, 1.5, .4, 1), gd-float 2.6s ease-in-out .55s infinite; }
.gd-dock.is-hop img { animation: gd-hop .6s cubic-bezier(.3, 1.6, .5, 1), gd-float 2.6s ease-in-out .6s infinite; }
@keyframes gd-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
@keyframes gd-swap { from { transform: scale(.55) rotate(-12deg); opacity: .3; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes gd-hop { 0% { transform: translateY(0) scaleY(1); } 25% { transform: translateY(6px) scaleY(.9); } 60% { transform: translateY(-34px) scaleY(1.06) rotate(4deg); } 100% { transform: translateY(0) scaleY(1); } }
.gd-tap { margin: .2rem 0 0; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }

/* De rank: badge plus ladder */
.gd-rank { margin: 1rem auto .9rem; display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gd-rank__star { display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--orange); box-shadow: 0 3px 0 #b8480a; }
.gd-rank__label { font-size: .7rem; opacity: .8; display: block; line-height: 1; }
.gd-rank__name { display: block; font-size: 1.15rem; line-height: 1.1; color: #ffd27a; }
.gd-rank.is-up { animation: gd-up .9s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes gd-up { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-3deg); } 100% { transform: scale(1); } }

.gd-ladder { display: flex; justify-content: center; gap: .35rem; margin: 0 auto 1rem; padding: 0; list-style: none; max-width: 26rem; }
.gd-ladder li { flex: 1; padding: .35rem .2rem; border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .55; }
.gd-ladder li.is-done { opacity: 1; background: rgba(111, 227, 154, .3); }
.gd-ladder li.is-now { opacity: 1; background: var(--orange); box-shadow: 0 3px 0 #b8480a; }

/* Stappen met Dock in de hoofdrol */
.gd-step { display: flex; gap: .9rem; align-items: center; padding: .6rem 1rem .6rem .6rem; border-radius: 16px; background: #fff; border-bottom: 6px solid rgba(18, 58, 122, .18); box-shadow: 0 2px 8px rgba(18, 40, 90, .12); }
.gd-step img { flex: none; width: 76px; height: 76px; object-fit: contain; }
.gd-step b { display: block; font-size: 1.1rem; color: var(--blue); text-transform: uppercase; }
.gd-steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }

/* Dock reageert in de kaart: kleine reactie rechtsonder */
.gd-pip { position: fixed; right: .6rem; bottom: .6rem; z-index: 20; width: 76px; height: 76px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); cursor: pointer; overflow: hidden; }
.gd-pip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

@media (min-width: 40rem) { .gd-dock img { height: 260px; } }
@media (prefers-reduced-motion: reduce) {
	.gd-dock img, .gd-dock.is-swap img, .gd-dock.is-hop img, .gd-bubble, .gd-rank.is-up { animation: none; }
}