/* goals.css – mål, delmål, spelslut, dimma över kartan och Första dagen (goals.js, mapview.js, tutorial.js). */

/* ---------- HUD ---------- */
.pill.goal { cursor: pointer; }
.pill.goal:hover { background: var(--land); }
.pill.goal .dots { display: inline-flex; gap: 3px; align-self: center; }
.pill.goal .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); }
.pill.goal .dots i.on { background: var(--accent-2); }
.pill.goal.ready { background: var(--accent-2); color: #fff7e8; animation: pulse 1.8s infinite; }
.pill.goal.ready b { color: #fff7e8; }
.pill#p-day.low { background: #e08a2e; color: #2a1c0c; }
.pill#p-day.low.vlow { background: var(--bad); color: #fff7e8; }
.pill#p-day.low small { color: inherit; opacity: .85; }

/* ---------- Etappkortet och slutkortet ---------- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.stages li { display: flex; gap: .5rem; align-items: baseline; }
.stages li::before { content: '○'; color: var(--ink-soft); }
.stages li.done::before { content: '✓'; color: var(--good); font-weight: 700; }
.stages li.done { color: var(--ink-soft); }
.banner { background: var(--accent-2); color: #fff7e8; border-radius: 10px; padding: .45rem .7rem; font-weight: 700; }
.hint { border: 2px dashed var(--accent-2); border-radius: 10px; padding: .4rem .7rem; font-size: .95rem; }
.card .record { font-weight: 700; color: var(--accent); }
.card .medal { font-size: 1.1rem; }
.card .miss { color: var(--ink-soft); font-style: italic; }
.card .warn { color: var(--bad); font-weight: 700; }
.card table.score td:last-child, .card table.score th:last-child { text-align: right; }
.card table.score tr.tot td { border-bottom: 0; border-top: 2px solid var(--ink); }
.endmap { border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--sea); }
.endmap svg { display: block; width: 100%; height: auto; }
.card .handi { border: 2px dashed var(--ink-soft); border-radius: 10px; padding: .5rem .7rem; display: grid; gap: .3rem; }
.card .handi legend { font-size: .85rem; color: var(--ink-soft); padding: 0 .3rem; }
.card .handi label { display: block; cursor: pointer; }
.card .handi input { accent-color: var(--accent-2); margin-right: .3rem; }
.card .handi small { display: inline; }
.card .sugs { display: grid; gap: .5rem; }

/* ---------- Dimma över kartan ---------- */
.mv-route { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 6 4; stroke-linecap: round; opacity: .85; }
.mv-link { fill: none; stroke: var(--accent-2); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; }
.pin.mv-fog circle { fill: var(--paper); fill-opacity: .55; stroke: var(--ink-soft); stroke-width: 1.5; stroke-opacity: .6; }
.pin.mv-fog circle.mv-halo { fill: var(--paper); fill-opacity: .35; stroke: none; filter: blur(2px); }
.pin.mv-fog.near circle { fill-opacity: .9; stroke: var(--accent-2); stroke-width: 2; stroke-opacity: 1; }
.pin.mv-fog.near circle.mv-halo { fill: var(--accent-2); fill-opacity: .2; }
.pin.mv-fog.selected circle:not(.mv-halo) { stroke: var(--accent); stroke-width: 3; }
.pin.mv-fog text.mv-q { font-family: 'Caveat', cursive; font-size: 17px; font-weight: 700; fill: var(--ink); stroke: none; paint-order: normal; }
.pin.mv-fog.near text.mv-q { fill: var(--accent-2); font-size: 19px; }
.pin.mv-fog:hover circle:not(.mv-halo) { r: 8; }
.mv-info { min-height: 1.4em; font-size: .92rem; color: var(--ink-soft); }
.pin.mv-new circle { animation: mvpop .8s ease-out; }
@keyframes mvpop { 0% { r: 14; } 100% { r: 6; } }

.mv-reveal { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(35, 26, 16, .45); animation: fade .2s; cursor: pointer; }
.mv-reveal.out { opacity: 0; transition: opacity .2s; }
.mv-reveal-card { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: .8rem; width: min(520px, 92vw); text-align: center; box-shadow: 0 8px 0 rgba(0, 0, 0, .35); }
.mv-reveal-card svg { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 10px; background: var(--sea); display: block; }
.mv-reveal-card p { font-family: 'Caveat', cursive; font-size: 1.8rem; margin-top: .3rem; }
.mv-lift circle { fill: var(--paper); stroke: none; filter: blur(5px); transform-box: fill-box; transform-origin: center; animation: mvlift 1.3s ease-in .2s forwards; }
@keyframes mvlift { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---------- Första dagen ---------- */
.tut-strip { display: flex; gap: .6rem; align-items: center; width: min(560px, calc(100% - 1rem)); margin: .35rem auto; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); padding: .35rem .7rem; box-shadow: var(--shadow); animation: cardin .25s cubic-bezier(.2, 1.3, .4, 1); }
#app.has-coach { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.tut-txt { display: grid; gap: .1rem; flex: 1; font-size: .92rem; line-height: 1.25; }
.tut-txt b { font-family: 'Caveat', cursive; font-size: 1.25rem; color: var(--accent); line-height: 1; }
.tut-strip button { padding: .25rem .6rem; font-size: .85rem; white-space: nowrap; }
.tut-marker { position: fixed; z-index: 14; width: 0; height: 0; pointer-events: none; }
.tut-marker i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--accent); animation: tutring 1.4s ease-out infinite; }
.tut-marker span { position: absolute; left: -30px; top: -62px; width: 60px; text-align: center; font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.5rem; color: var(--accent); text-shadow: 0 0 4px var(--paper), 0 0 4px var(--paper); animation: tutbob 1s ease-in-out infinite; }
@keyframes tutring { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes tutbob { 50% { transform: translateY(-6px); } }
/* markören göms när ett kort ligger över */
body:has(#overlay.open) .tut-marker { display: none; }
@media (max-width: 520px) { .tut-txt { font-size: .82rem; } }

/* Låsta nivåer och handikapp, medaljrad på målkort */
.opts button:disabled small, .handi label.locked small { color: var(--ink-soft); }
.handi label.locked { opacity: .75; }
.opts button .medalnote { color: var(--accent-2); font-weight: 700; }