.journey .mascot-stop.stop-disc { background: radial-gradient(ellipse at 30% 18%, #dbfff833, transparent 45%), linear-gradient(155deg, #83c3cf16, #83c3cf05); border-color: #7cb8b6; box-shadow: inset 0 -9px 14px #a5e7e71a, 0 7px 0 #11171c, 0 9px 0 #4d6b6c; }
.journey .mascot-stop.stop-disc::before { content: ''; position: absolute; inset: 5px 10px auto; height: 9px; border: 1px solid #c8fff070; border-radius: 50%; pointer-events: none; }
.journey .stop-complete .mascot-stop.stop-disc { border-color: transparent; background: transparent; box-shadow: none; }
.journey .stop-complete .mascot-stop.stop-disc::before { display: none; }
.journey .stop-complete .mascot-stop .gnista { filter: drop-shadow(0 0 12px #c6f36a28); }
.journey .stop-complete .mascot-stop.stop-disc > small { background: var(--lime); border-color: #172015; }
.journey .stop-complete .stop-progress { color: var(--lime); }
.road-row.release-origin .mascot-stop .gnista { animation: released-wave 1.8s ease-out; }
.road-row.release-next .stop-disc { outline: 3px solid #c6f36a80; outline-offset: 7px; animation: next-bubble-glow 2s ease-in-out 3; }
.road-row.release-next .stop-go { background: var(--lime); color: #182112; padding: 8px 12px; border-radius: 8px; }
.road-row.release-next::after { content: '↓ NÄSTA UPPDRAG'; position: absolute; left: var(--stop-x); top: 4px; transform: translateX(-50%); white-space: nowrap; color: var(--lime); font-size: 10px; font-weight: 600; letter-spacing: 1px; animation: next-label-in .4s ease-out; }
.gnista-release-dialog { position: fixed; width: min(480px, calc(100vw - 28px)); max-height: calc(100dvh - 30px); padding: 16px 30px 26px; margin: auto; overflow: auto; border: 1px solid #677e48; border-radius: 24px; background: radial-gradient(ellipse at 50% 10%, #344527 0%, #1b2119 40%, #161b18 80%); color: var(--text); text-align: center; box-shadow: 0 30px 100px #0008; }
.gnista-release-dialog::backdrop { background: #0c120ce0; backdrop-filter: blur(6px); }
.release-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 36px; height: 36px; border: 1px solid #60724c; border-radius: 50%; color: var(--muted); background: #1b2318; font-size: 24px; }
.release-scene { position: relative; width: min(280px, 100%); height: 230px; margin: 0 auto; }
.release-halo { position: absolute; inset: 35px; border-radius: 50%; background: #c6f36a15; box-shadow: 0 0 60px #c6f36a14; animation: release-halo 1.6s .4s ease-out both; }
.release-free-gnista { position: absolute; width: 125px; height: 125px; left: 50%; top: 70px; transform: translateX(-50%); z-index: 1; animation: release-flight 1.9s ease-in-out both; }
.release-free-gnista > .gnista { width: 100%; height: 100%; }
.release-aquarium { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.release-glass-bowl { animation: glass-break 1.9s ease-out both; }
.release-crack { stroke-dasharray: 220; stroke-dashoffset: 220; animation: crack-open .4s .25s ease-out forwards; }
.release-shards path { transform-box: fill-box; transform-origin: center; opacity: 0; animation: glass-shard 1s .65s ease-out both; }
.release-sparkles { position: absolute; width: 10px; height: 10px; left: 50%; top: 47%; z-index: 3; }
.release-sparkles i { position: absolute; width: 6px; height: 13px; border-radius: 3px; background: var(--lime); opacity: 0; animation: release-sparkle 1.2s calc(.7s + var(--delay)) ease-out both; }
.release-sparkles i:nth-child(2n) { background: #c0a4fa; }
.release-eyebrow { display: block; color: var(--lime); font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.gnista-release-dialog h1 { font-size: 37px; letter-spacing: -1.3px; margin: 12px 0; line-height: 1.2; }
.release-mission-title { font-size: 14px; margin: 0 0 12px; color: #e4eccf; }
.release-message { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }
.release-xp { display: inline-block; margin: 16px 0; padding: 7px 14px; border: 1px solid #52693b; border-radius: 999px; color: var(--lime); font-size: 13px; background: #293721; }
.release-actions { display: grid; gap: 7px; }
.release-actions > .button { min-height: 46px; font-size: 14px; }
.release-actions > .text-button { font-size: 12px; min-height: 36px; }
@keyframes crack-open { to { stroke-dashoffset: 0; } }
@keyframes glass-break { 0%,32% { opacity: 1; transform: translateX(0); } 35% { transform: translateX(-3px); } 39% { transform: translateX(3px); } 43% { opacity: 0; transform: scale(1.06); } 100% { opacity: 0; } }
@keyframes glass-shard { 0% { opacity: .9; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--spin)); } }
@keyframes release-flight { 0%,30% { transform: translate(-50%,15px) scale(.85); } 44% { transform: translate(-50%,5px) scale(.9); } 65% { transform: translate(-50%,-35px) rotate(-9deg) scale(1.08); } 83% { transform: translate(-50%,-22px) rotate(7deg) scale(1.05); } 100% { transform: translate(-50%,-25px) rotate(0) scale(1.03); } }
@keyframes release-halo { 0% { transform: scale(.7); opacity: .2; } 65% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: .7; } }
@keyframes release-sparkle { 0% { opacity: 1; transform: rotate(var(--angle)) translateY(30px) scale(.3); } 100% { opacity: 0; transform: rotate(var(--angle)) translateY(125px) rotate(90deg) scale(.7); } }
@keyframes released-wave { 0% { transform: translateY(15px) scale(.9); } 40% { transform: translateY(-15px) rotate(-8deg) scale(1.1); } 100% { transform: none; } }
@keyframes next-bubble-glow { 50% { outline-color: #c6f36a22; outline-offset: 12px; filter: drop-shadow(0 0 14px #c6f36a44); } }
@keyframes next-label-in { from { opacity: 0; top: -5px; } to { opacity: 1; top: 4px; } }
@media(max-width: 480px) { .gnista-release-dialog { padding: 12px 22px 20px; }.release-scene { height: 205px; width: 250px; }.gnista-release-dialog h1 { font-size: 32px; }.release-message { font-size: 12px; } }
@media(prefers-reduced-motion: reduce) {
  .release-scene *, .road-row.release-next .stop-disc, .road-row.release-next::after, .road-row.release-origin .gnista { animation: none !important; }
  .release-aquarium { display: none; }.release-free-gnista { transform: translate(-50%,-25px); }
}