/* Treasure Trail — the map shows the journey; during a challenge, the reading takes over. */
.dxg .tt { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: clamp(8px, 1.4vh, 14px) clamp(10px, 2.4vw, 26px); }
.tt-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; justify-content: space-between; }
.tt-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tt-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--g-border); font-size: 1rem; }
.tt-dot.is-done { background: #DDF2F0; border-color: var(--g-aqua); }
.tt-dot.is-done::after { content: ""; }
.tt-dot.is-open { border-color: #E0C052; box-shadow: 0 0 0 3px rgba(246, 216, 120, .45); }
.tt-dot.is-locked .tt-dot__icon { filter: grayscale(1); opacity: .45; }
.tt-where { margin: 0; flex: 1; min-width: 200px; font-family: var(--g-head); font-weight: 500; font-size: 1.05rem; color: var(--g-navy); }
.tt-satchel { margin: 0; font-size: 1.15rem; letter-spacing: 2px; }

/* Map */
.tt-map { position: relative; min-height: 280px; border-radius: 22px; overflow: hidden; border: 3px solid #BFE0C9; }
.tt-map[hidden] { display: none !important; }
.tt-map__art, .tt-map__path { position: absolute; inset: 0; width: 100%; height: 100%; }
.tt-trail { fill: none; stroke: #C9B38A; stroke-width: 7; stroke-dasharray: 3 14; stroke-linecap: round; }
.tt-trail--done { stroke: #17706F; stroke-dasharray: none; stroke-width: 6; opacity: .8; }
.tt-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; }
.tt-node__icon { width: clamp(52px, 7vw, 72px); height: clamp(52px, 7vw, 72px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	background: #fff; border: 3px solid #C9D6D8; box-shadow: 0 4px 10px rgba(28, 43, 61, .12); }
.tt-node__name { font-family: var(--g-head); font-weight: 600; font-size: .9rem; color: var(--g-navy); background: rgba(255,255,255,.9); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.tt-map.is-tall .tt-node { flex-direction: row; gap: 8px; }
.tt-map.is-tall .tt-node__name { white-space: normal; max-width: 120px; text-align: left; line-height: 1.15; padding: 2px 8px; border-radius: 10px; }
.tt-map.is-tall .tt-node:nth-child(odd of .tt-node) { flex-direction: row-reverse; }
.tt-map.is-tall .tt-node:nth-child(odd of .tt-node) .tt-node__name { text-align: right; }
.tt-node__state { position: absolute; top: -8px; right: -10px; font-size: .95rem; }
.tt-node.is-done .tt-node__icon { border-color: var(--g-aqua); background: #E2F5F3; }
.tt-node.is-done .tt-node__state { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--g-aqua); color: #fff; font-weight: 700; font-size: .8rem; }
.tt-node__state:empty { display: none !important; }
.tt-node.is-open .tt-node__icon { border-color: #E0C052; animation: tt-beckon 1.6s ease-in-out infinite; }
@keyframes tt-beckon { 50% { box-shadow: 0 0 0 10px rgba(246, 216, 120, .35); } }
.tt-node.is-locked .tt-node__icon { filter: grayscale(.9); opacity: .6; }
.tt-node.is-locked .tt-node__name { opacity: .7; }
.tt-node.is-new .tt-node__icon { animation: tt-pop .6s ease-out; }
@keyframes tt-pop { 40% { transform: scale(1.18); } }
.tt-node.is-final .tt-node__icon { border-width: 4px; }
.tt-marker { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -74px 0 0 -20px; z-index: 3; pointer-events: none;
	transition: transform .7s cubic-bezier(.4, 1.2, .5, 1); filter: drop-shadow(0 3px 3px rgba(28, 43, 61, .2)); }
.tt-marker svg { width: 100%; height: 100%; }
.tt-go { position: absolute; right: 16px; bottom: 16px; z-index: 4; min-height: 54px; font-size: 1.15rem; padding: 0 24px; }

/* Challenge view: the map steps aside */
.tt-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; overflow-y: auto; }
.tt-stage[hidden] { display: none !important; }
.tt-dir { margin: 0; padding: 6px 16px; border-radius: 999px; background: #FFF6D6; font-family: var(--g-head); font-weight: 500; font-size: 1.05rem; color: var(--g-navy); text-align: center; }
.tt-body { width: 100%; display: flex; justify-content: center; }

/* Finale */
.tt-finale { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.tt-finale[hidden] { display: none !important; }
.tt-chest { width: min(240px, 40vw); }
.tt-chest svg { width: 100%; height: auto; }
.tt-chest.is-open { animation: tt-open .8s ease-out; }
@keyframes tt-open { 30% { transform: scale(1.1) rotate(-3deg); } 60% { transform: scale(.98) rotate(2deg); } }
.tt-finale__gems { margin: 0; font-size: 2rem; letter-spacing: 8px; }
.tt-finale__title { margin: 0; font-family: var(--g-head); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); color: var(--g-blue); }

.tt--calm .tt-marker { transition: none; }
.tt--calm .tt-node.is-open .tt-node__icon, .tt--calm .tt-chest.is-open { animation: none; }
@media (max-width: 699px) {
	.tt-node__name { font-size: .72rem; }
	.tt-node__icon { width: 46px; height: 46px; font-size: 1.4rem; }
	.tt-marker { width: 30px; height: 30px; margin: -60px 0 0 -15px; }
	.tt-go { left: 10px; right: 10px; bottom: 10px; min-height: 48px; }
	.tt-map.is-tall .tt-node__name { max-width: 96px; }
	.tt-dot { width: 28px; height: 28px; font-size: .85rem; }
}